Tuesday, October 24Be an Automation Engineer

Element Locators in WebdriverIO

Selenium supports 8 different element locating stategies like @id, @className, @xpath, @css etc.. In selenium we need to specify which locator we are passing like if we are passing xpath then we need to specify it with By.xpath(‘locator’).

WebdriverIO has simplified element location strategies. We don’t need to specify whether we are passing xpath/css. Simply we can write browser.click(‘locator’). WebdriverIO has the intelligence to identify which locator has been passed. Different element locating strategies are explained below.

1. CSS Query Selector

Let’s assume that DOM is like:


<h2 class="scheduling monthly">
<a href="http://google.co.in">Goto Google</a>
</h2>


clicking on ‘Goto Google’ link with css sector.
browser.click('h2.scheduling a');//clicks element

2. xpath Selector

Xpath selector for the below given DOM structure.

<input type="text" name="uname" id="unameField"/>

browser.setValue('//input[@id="unameField"]','Vijay Daram'); //Enter 'Vijay Daram' into username field

3. Link with certain text

To identify an anchor element with it’s visible text, we need to use =.
The locator would be (eg: =Google).

<a href="http://www.google.com">
Google
</a>

console.log(browser.getText('=Google'));//outputs: Google

4. Link with partial text

To identify an anchor element with it’s partial visible text, we need to use *=.
The locator would be (eg: *=gle).

<a href="http://www.google.com">
Google
</a>

console.log(browser.getAttribute('*=gle','href'));//outputs: http://www.google.com

5. Element with certain text

Not only links, we can also identify other elements with text. we need to use element=.

<span>
This is span element
</span>

console.log(browser.getText('span=This is span element'));//outputs: This is span element

6. Element with partial text

To identify elements with partial text we need to use element*=.

<span>
This is span element
</span>

console.log(browser.getText('span*=span element'));//outputs: This is span element

7. Combining css with element text


<div class="someElem" id="elem">Google search engine</div>


console.log(browser.getText('.someElem=Google search engine')); // outputs: "Google search engine"
console.log(browser.getText('#elem=Google search engine')); // outputs: "Google search engine"
console.log(browser.getText('.someElem<em>=Google')); // outputs: "Google search engine"
console.log(browser.getText('#elem</em>=Google')); // outputs: "Google search engine"

8. Tag Name

You can also identify element with tag name. But it is used very rarely.


<header>This is header</header>


console.log(browser.getText('<header>')); //outputs: This is header

9. Name attribute

We can use css/xpath selector to identify an element using name.


<h1 name="header1">This is header</h1>


Css selector:
console.log(browser.getText('[name="header1"]')); //outputs: This is header

Xpath selector:
Css selector:
console.log(browser.getText('//*[@name="header1"]')); //outputs: This is header

10. Chain Selectors

We can identify a child element within a parent element instead of searching an element in the whole DOM.


<div class="row">
  <div class="entry">
    <label>Product A</label>
    <button>Add to cart</button>
    <button>More Information</button>
  </div>
  <div class="entry">
    <label>Product B</label>
    <button>Add to cart</button>
    <button>More Information</button>
  </div>
  <div class="entry">
    <label>Product C</label>
    <button>Add to cart</button>
    <button>More Information</button>
  </div>
</div>

And you want to add product B to the cart it would be difficult to do that just by using the CSS selector.
With selector chaining it gets way easier as you can narrow down the desired element step by step:

browser.element('.row .entry:nth-child(1)').click('button*=Add');

In near future WebdriverIO will cover more selector features like form selector (e.g. :password,:file etc)
or positional selectors like :first or :nth.

  • SD

    I want to click a button with properties as shown below:

    Login

    and XPATH – html/body/div[1]/div[1]/div[1]/form/div[3]/button

    .click(‘html/body/div[1]/div[1]/div[1]/form/div[3]/button’)

    This does not work..

    • Vijay Daram

      It is not good to use absolute path(complete path to element). Instead you can use //button[@class=”login-btn”] as XPATH or you can use button.login-btn as cssSelector.

%d bloggers like this: