WebdriverIO locator strategies and how to use it

In this post, we will discuss the possible locator strategies that webdriverIO provides to identify browser elements.

We can use below command to locate the browser element[s]

browser.findElement(locator:String) or $(locator:String)

browser.findElements(locator:String) or $$(locator:String)

XPATH & CSSSelector patterns –

webdriverIO supports all the xpath and CSS Selectors patterns.

Along with Xpath / CSSSelector, webdriverIO has it’s own way of identifying the elements, let’s discuss them one by one.

Any element containing text –

await $("=someText").click()

Any element containing partial text as “SignUp” –

await $("*=SignUp").click()

Any element containing link tag and text as “linkTest” –

await $("a=linkText").click()

await $("a*=partialLinkText").click() //for partial link text

An element containing text –

await $('#lblname=Full Name')

//element with id=lblname has text “Full Name”

await $('#lblname*=Full')

//element with id=lblname contains text “Full”

await $('.ui-widget-content*=Selenium')

//element with class=ui-widget-content contains text “Selenium”

Locator matching the tagName <input> or </input>

await $$('<a>')

//fetch all the links on the current page

Locator matching with ARIA – Role Attribute

console.log(await (await $$('[role=link]')).length)

//shows 6, 4 a with href and 2 link with href

Applicable role for specific element, refer https://www.w3.org/TR/html-aria/#docconformance

Note –

We can’t use this locator strategy If any element that doesn’t have role allocated, like iframe doesn’t have role, so below command will not work

await $(‘[role=iframe]’)

Accessibility Name Selector

WebdriverIO allows to identify locators based on their accessible name, to know more about how to get the accessible name, watch this demo video –

Refer below link to find all the above locator strategies with examples –

Github code

Reference – https://webdriver.io/docs/selectors/