WebdriverIO - Tag Name 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 use the HTML tagname for an element for its identification. In the WebdriverIO code, we have the option to specify the tagname of an element in the below format −

$('<element tagname>')

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

const p = $('element tagname')

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

HTML Tagname

The element highlighted in the above image has a tagname - h1.

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 Tagname', function(){    
      // launch url
      browser.url('https://www.tutorialspoint.com/about/about_careers.htm')
      //identify element with tagname then obtain text
      console.log($("<h1>").getText() + " - is the text.")
   });
});

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 −

Tag Configuration

After the command has been executed successfully, the text of the element - About Careers at Tutorials Point is printed in the console.

Advertisements