WebdriverIO - 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 name attribute for an element for its identification. This locator is deprecated now and is only compatible with old browsers that are based on JSONWireProtocol or Appium.

In the WebdriverIO code, we have the option to specify the value of the name attribute of an element in the below format −

$('[name attribute=''value'']')

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

const p = $('[name attribute=''value'']')

Let us identify the edit box highlighted in the below image and enter text −

Online Education

The element highlighted in the above image has the name attribute value as search.

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 Name', function(){     
      // launch url
      browser.url('https://www.tutorialspoint.com/index.htm')
      //identify element with Name then input text
      $('[name="search"]').setValue('Selenium')
   });
});

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.

Advertisements