WebdriverIO - Configuration File generation

WebdriverIO tests are controlled from a Configuration file. It is often considered the heart of WebdriverIO. It contains details on what test cases to be executed, browser on which the tests should run, global information - timeout, reports, screenshots and so on.

In WebdriverIO we do not execute a single test. We are required to trigger the Configuration file with the help of the Test Runner. Test Runner scans the information provided in the Configuration file and then triggers the tests accordingly.

To get the Test Runner, we have to install the WebdriverIO CLI dependencies. To install this and save it in the package.json file, we have to run the below mentioned command −

npm i --save-dev @wdio/cli

After this command has been executed successfully, the version of CLI dependency shall be reflected within the package.json file. The following screen will appear on your computer −

Command has been Executed

To create a Configuration file, we have to run the below mentioned command −

npx wdio config -y

After this command has been executed successfully, the configuration file called the wdio.conf.js gets created within our project. Also, the package.json file should now contain some more dependencies under the devDependencies field.

The following screen will appear on your computer −

wdio.conf.js

Apart from the dependencies marked in the above image, we have to add one more dependency so that the WebdriverIO commands can execute synchronously.

We have to add the dependency - "@wdio/sync": "<version number>" under the devDependencies field. Then run the following command −

npm install

To run a Configuration file from the test runner, we have to run the below given command −

npx wdio run wdio.conf.js

Create Mocha Spec File

After a Configuration file is created, we shall find a test folder generated within the WebdriverIO project. The details on how to create a Configuration file are described in the Chapter titledConfiguration File generation.

The following screen will appear on your computer −

Create Mocha Spec File

If we expand this folder, we shall find two sub-folders - pageobjects and specs containing JavaScript files created by default. These are basically sample tests provided to guide the first time users to get accustomed with the Mocha framework.

Mocha is a testing framework based on JavaScript which is built on Nodejs. It makes asynchronous test execution flow interesting and simple. Mocha tests can be run serially.

It is capable of producing accurate and customizable reports. Also, the uncaught exceptions can be easily tagged with the proper test cases. The details of Mocha can be found in the below link −

www.tutorialspoint.com/tesults/tesults_integrating_your_automated_tests.htm

As per the Mocha testing framework, all the test files are known as the spec files and they should reside within the specs folder.

Blocks in Test File

A test file should have the following blocks −

  • describe − This is higher in hierarchy than the it block. A test file can have multiple describe blocks. A describe block represents a test suite. It has two arguments - description of the test suite and an anonymous function.

  • it − This is lower in hierarchy than the describe block. A describe can have multiple it blocks. An it block represents a test case and should be mandatory within a describe block It has two arguments - description of the test case and an anonymous function. The actual WebdriverIO code is implemented within the it block.Steps to Create Mocha File

To create a Mocha file, let us follow the below steps −

Step 1 − Right-click on the specs folder (which is within the test folder), then select New File. The following screen will appear on your computer −

Specs Folder

Step 2 − Enter a filename, say testcase1.js.

The following screen will appear on your computer −

Test Case 1

Step 3 − Add the below code in this file −

// test suite name 
describe('Tutorialspoint Application', function () {
   // test case name
   it('Get Page Title', function (){
   // URL launching
      browser.url("https://www.tutorialspoint.com/about/about_careers.htm")
      //print page title in console
      console.log(browser.getTitle())
   });    
});

In the above code, the browser is the global object exposed by the WebdriverIO.

Please note − We cannot run this individual file directly. We shall take the help of the Configuration file in order to execute it.

Advertisements