WebdriverIO - Chai Assertions on webelements

Chai is an assertion library for nodes. It is mainly used in the BDD and TDD framework. It can easily be integrated with any JavaScript testing framework. The official documentation of Chai is available in the below link −

www.npmjs.com/package/chai

For installation of Chai and making its entry in the package.json file, run the following command −

npm install --save-dev chai

The details on the package.json file are discussed in detail in the Chapter titled Package.json.

The following screen will appear on your computer −

Assertion Library

After installation we have to add the below statement to add expected style Chai in our code.

require('chai').expect

Syntax

The syntax for Chai assertion is as follows −

const c = require('chai').expect
c(p.getValue()).to.equal('subject')

Let us implement a Chai assertion and verify if the option selected in the below dropdown is as per the expected result.

Chai Assertion

The details on how to handle a dropdown is discussed in detail in the Chapter - Handling Dropdowns.

To begin, follow Steps 1 to 5 from the Chapter titled Happy path flow with WebdriverIO which are as follows −

Step 1 − Install NodeJS. The details on how to perform this installation are given in detail in the Chapter titled Getting Started with NodeJS.

Step 2 − Install NPM. The details on how to perform this installation are given in detail in the Chapter titled Installation of NPM.

Step 3 − Install VS Code. The details on how to perform this installation are given in detail in the Chapter titled VS Code Installation.

Step 4 − Create the Configuration file. The details on how to perform this installation are given in detail in the Chapter titled Configuration File generation.

Step 5 − Create a spec file. The details on how to perform this installation are given in the Chapter titled Mocha Installation.

Step 6 − Add the below code within the Mocha spec file created.

require('chai').expect
//import chai library
const c = require('chai').expect
describe('Tutorialspoint application', function(){
   //test case
   it('Drodowns with Chai Assertion', function(){    
      // launch url
      browser.url('https://www.tutorialspoint.com/tutor_connect/index.php')  
      //identify dropdown 
      const p = $("select[name='selType']") 
      //select by index
      p.selectByIndex(1)
      //get option selected
      console.log(p.getValue() + ' - option selected by index')
      //verify option selected with chai assertion
      c(p.getValue()).to.equal('name')
      //select by visible text
      p.selectByVisibleText('By Subject')
      //get option selected
      console.log(p.getValue() + ' - option selected by visible text')
      //verify option selected with chai assertion
      c(p.getValue()).to.equal('subject')
      //select by value attribute
      p.selectByAttribute('value', 'name')
      //get option selected
      console.log(p.getValue() + ' - option selected by attribute value')
      //verify option selected with chai assertion
      c(p.getValue()).to.equal('name')
   });
});

Run the Configuration file - wdio.conf.js file with the command −

npx wdio run wdio.conf.js

The details on how to create a Configuration file are discussed in detail in the Chapter titled Wdio.conf.js file and Chapter titled Configuration File generation.

The following screen will appear on your computer −

Chai Assertion Screen

After the command has been executed successfully, first the value of the option selected with the option index - name is printed in the console. Then, the value of the option selected with the option visible text - subject is printed in the console. Finally, the value of the option selected with the option attribute value - name is printed in the console.

Also, we get a PASSED result, pointing to the fact that all the Chai assertions applied on the dropdown have passed.

Let us implement another Chai assertion and verify if the alert text obtained is as per the expected result.

Chai Assertions Applied

The details on how to handle an alert are discussed in detail in the Chapter titled Alerts.

To begin, follow Steps 1 to 5 from the Chapter titled Happy path flow with WebdriverIO which are as follows −

Step 1 − Install NodeJS. The details on how to perform this installation are given in detail in the Chapter titled Getting Started with NodeJS.

Step 2 − Install NPM. The details on how to perform this installation are given in detail in the Chapter titled Installation of NPM.

Step 3 − Install VS Code. The details on how to perform this installation are given in detail in the Chapter titled VS Code Installation.

Step 4 − Create the Configuration file. The details on how to perform this installation are given in detail in the Chapter titled Configuration File generation.

Step 5 − Create a spec file. The details on how to perform this installation are given in the Chapter titled Mocha Installation.

Step 6 − Add the below code within the Mocha spec file created.

//import chai library
const c = require('chai').expect
// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Alerts with Chai Assertion', function(){    
      // launch url
      browser.url('https://the-internet.herokuapp.com/javascript_alerts')  
      //identify element with xpath then click
      $("//*[text()='Click for JS Prompt']").click()
      //check if Alert is open
      console.log(browser.isAlertOpen())   
      //get Alert Text
      console.log(browser.getAlertText() + ' - Alert Text') 
      //verify Alert text with Chai assertion
      c(browser.getAlertText()).to.equal("I am a JS prompt")
      //accept Alert
      browser.acceptAlert()
   });
});

Run the Configuration file - wdio.conf.js file with the following command −

npx wdio run wdio.conf.js

The details on how to create a Configuration file are discussed in detail in the Chapter titled Wdio.conf.js file and Chapter titled Configuration File generation.

The following screen will appear on your computer −

Chai Assertions Configuration

After the command has been executed successfully, at first true is printed in the console as it is returned by the browser.isAlertOpen() method. Then, the Alert text - I am a JS prompt is printed in the console.

Also, we get a PASSED result, pointing to the fact that the Chai assertion applied on the alert text has passed.

Advertisements