WebdriverIO - CSS Locator

Once we navigate to a webpage, we have to interact with the webelements available on the page like clicking a link/button, entering text within an edit box, and so on to complete our automation test case.

For this, our first job is to identify the element. We can create a css for an element for its identification. The rules to create a css expression are discussed below −

The syntax of css is as follows −

tagname[attribute='value']

Here, the tagname is optional. We can also specifically use the id and class attribute to create a css expression.

With id, the format of a css expression should be tagname#id. For example, input#txt [here input is the tagname and the txt is the value of the id attribute].

With class, the format of the css expression should be tagname.class.

For example,

input.cls-txt

Here, input is the tagname and the cls-txt is the value of the class attribute.

In the WebdriverIO code, we can specify the css expression of an element in the below format −

$('value of the css expression')

Or, we can store this expression in a variable as follows −

const p = $('value of the css expression')

Let us identify the text highlighted in the below image and obtain its text −

Identify Text

The css of the above highlighted element should be li.heading.

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.

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with CSS', function(){        
      // launch url
      browser.url('https://www.tutorialspoint.com/about/about_careers.htm')
      //identify element with CSS then obtain text
      console.log($("li.heading").getText() + " - is the text.")
   });
});

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 titledWdio.conf.js file and Chapter titled Configuration File generation.

The following screen will appear on your computer −

Discussed Detail

After the command has been executed successfully, the text of the element - About Tutorialspoint is printed in the console.

Advertisements