What is WebElement?

WebElement is an object / HTML element, HTML elements can be written with a start tag, end tag, attributes, and with the content in between: <tagname id="123" class="abc"> Web Page content </tagname>.

The elements themselves may have unique identifiers, such as names, or id’s, and others will be identifiable by their unique classes or tag names (such as a "div" with the class of "footer").

A simple example webelement is a text box, which allows you to enter some textual data on a webpage.

The most commonly used web elements are :

  • Text box / Password / TextArea
  • Button
  • Dropdown list
  • Hyperlink
  • Check Box / Radio Button
  • etc

Locators in WebdriverIO

Locators provide a way to access the HTML elements from a web page. Identification of correct expected web element and to perform some action on it will be the expectation in Automation

In WebdriverIO, we can use locators to perform actions on the text boxes, links, checkboxes, and other web elements.

We can use that locator value while doing the scripting. Each and every web element are presented in HTML tag with open and End tag will be identified through its attributes.

Selenium/protractor supports 8 different element locating strategies like id, name, className, tagname, linktext, partiallinktext, css, xpath. We explicitly need to specify which locator we are passing like if we are passing xpath then we need to specify it with By.xpath('locator') while using Selenium/protractor.

WebdriverIO has simplified element locating strategies. We don't need to specify whether we are passing xpath or css.

Simply we can write browser.click('locator'). WebdriverIO has the intelligence to identify which locator has been passed between xpath and CSS.

Different Locators in WebdriverIO

Different element locating strategies are explained below.

Tag Name

Tagname is nothing but the tag used to create the webelement. TagName can also be used for locating elements on-page. $('<tagname />'); method is used for this.

It is not mandatory to have the closing tags in HTML. tagname-locator-webdriverio

The code which created the Alert button element

<input type="button" name="alert" value="Alert" onclick="alertbox();">


The way we can locate the element

Syntax:
$('<tagname />')
Example for above element
$('<input />').click()
When we have a simple page, we might have only one or two elements, In such cases, we might find the elements using Tagname but On complex pages using the Tagname locator might return multiple elements. So usage of tagname will be less according to me.

Element with Text

We can find an element using the text present in the element.

Element with Complete Text :

We can identify elements with text, most of the time span, label, div are the elements which we will find using the text. The format is element= text-locator-webdriverio

Syntax:
$('tagname=complete text');

Locator for above element
$('span=Welcome User').getText() // Welcome User

Element with partial Text

Sometimes there will be situations where you might have the partial changing text and partial static text, like Welcome KarthiQ, Welcome Tom something like that. WebdriverIO provides a way to handle these kinds of scenarios using partial text.

Syntax:
$('tagname*=Part text');

Locator for above element
$('span=Welcome').getText() // Welcome User

Link text is nothing but the text present in the anchor tag <a>. To identify an anchor element with its visible text, we need to use =. The locator would be (eg: =bing).

<a href="https://chercher.tech">Chercher Tech


The code for locating the above element is :

Syntax:
$('=Complete Link text');

Locating above element and getting attribute
const link = $('=Chercher Tech');
console.log(link.getAttribute('href')); // outputs: "https://chercher.tech"

We can find the link element using partial text present in the link text.

Syntax:
$('=Partial Link text');

Locating above element and getting attribute
const link = $('=Tech');
console.log(link.getAttribute('href')); // outputs: "https://chercher.tech"

CSS and Xpath

We can find the elements using CSS selector, we have created a full chapter for forming CSS selector.

$('css selector')
example:
$('.img')


We can find the elements using Xpath, we have created a full chapter for forming XPATH.

$('xpath')
Example:
$('//input')
0 results
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions
  • HarshavardhanReddy I
    https://chercher.tech/webdriverio/xpath-webdriverio is broken and the content is not loading. Even left side menu content is not visible.
    Reply