How to use webdriverIO with Javascript

Posted by: admin September 19, 2023 No Comments
webdriverio with javascript

How to use webdriverIO with Javascript?

Before starting how to use webdriverIO, you should have knowledge of why we use webdriverIO and what exactly it is . so let’s understand it.

Why WebdriverIO?

There are so many tools and frameworks that are used in Automation But If you are working on a front end site in automation testing, I’ll highly recommend you go with WebdriverIO. Following are some reasons:

  • Known for Simple accessible :

It has simple and easy to write syntax. The command which is used in  WebdriverIO tests is very concise, easily understandable and to the point.

For Example, If I want to click on something(Web element) then, With A regular selenium webdriver you have to write “find element” by its name, id, CSS, partial text or XPath to locate that element and then you will be able to perform an action upon that element. That means Instead of writing this.

driver.find_element_by_id(“sbmtBtn”);

We can just write this:

client.click(‘sbmtBtn’)   

So if it’s a CSS, partial text, id or XPath It can unravel for itself. There are also other selenium based tools out there but You should have knowledge about Python, Ruby or Java. and These languages are very verbose in comparison to WebdriverIO script.

  • Front end Friendly :

It makes the QA process easier, and it’s not only because of automation testing but also because the test code is written in Javascript – just like the frontend code. It works great for web browser applications which are in this case “front-end friendly”.

Another quality of webdriverIO is, we can use advanced and customized CSS selectors to locate elements. It is most liked not only because it looks nice but also about its readability and it is easy to start.

  • It has the capability of selenium:

WebdriverIO is not just the binding for webdriver protocol (like selenium). Selenium is an uncommonly robust platform. Most industries use selenium for running browser automation and WebdriverIO stands on top of selenium. All the essential features of selenium with additional utilities are available in webdriverIO with an easy syntax.

What is WebdriverIO?

WebdriverIO is a Javascript-based open-source project developed for the automation framework built over nodeJs. It is a good automation tool which can automate both web applications and native mobile apps. It is easy for testers to write selenium tests with Javascript in BDD(Behaviour driven development) or TDD(Test-driven development) test framework.

Setup WebdriverIO:

Prerequisites for webdriverIO

  1. Node.js
  2. NPM (It will get installed automatically with installing node.js)
  3. VS Code.

Steps for Installing webdriverIO

  1. Create a Folder with name “webdriverioProject” in any drive.(can create a folder with any name according to you)
  2. Open VS Code and select the webdriverioProject folder that you created recently ..
  3. Now Trigger the below command in terminal:  npm init  -y
  4. After completion of the above command. it will create a default package.json file in the ‘webdriverioProject’ folder.
  5. Now install WebdriverIO. Trigger below command. npm install webdriverio 
  6.  This Command will create a node_modules directory automatically in the ‘webdriverioProject’ Folder.
  7. Once the above command will complete, Run below command. npm install wdio
  8. Since webdriverIO v5, Test runner is in the @wdio/cli NPM package.
    Now install the Cli: npm install @wdio/cli     
  9. Next, You need to generate a configuration file to store webdriverIO settings . and To configure that Trigger following command. .\node_modules\.bin\wdio config  
  10.  Select all required options according to your use. After this, it will create wdio.conf.js file in ‘webdriverioProject Folder’.

How to run tests with webdriverIO: 

  • Now Make a directory under ‘webdriverioProject’ with name specs/ tests and store all test files that you are going to create( In my case I have created firstProject.js in specs directory )
  • After creating your test file. customize the path of your test folder from specs in wdio.conf.js.
  • To run you tests , Run below command .\node_modules\.bin\wdio wdio.conf.js

Why webdriverIO is different from other tools:   

WebdriverIO is a widely used test automation framework in javascript. It consists of several features like it supports many reports and services. It can automate both mobile applications and web applications.

Some supported reporters examples are given below:

>Spec reporter                      >DotReporter

>Dot Reporter                       >JUnitReporter

>Allure Reporter                  >ConciseReporter

>JSON Reporter                  >Video Reporter

Some supported services examples are given below:

>Devtools Service                    >AppiumService

>ChromeDriver Service          >SeleniumStandaloneService

>Report Portal Service            >SharedStoreService

>Firefox Profile Service           > Static Server Service

Some supported Test Frameworks are given below:

>Mocha

>Jasmine

> cucumber

Leave a Reply