Join us on :

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 tagnames (such as a "div" with the class of "footer").

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

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 element 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 simple page, we might have only one or two element, 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 partial changing text and partial static text, like Welcome KarthiQ, Welcome Tom something like that. WebdriverIO provides a way to handle these kind scenarios using partial text.


									Syntax:
									$('tagname*=Part text');
									 
									Locator for above element
									$('span=Welcome').getText() // Welcome User
									

Link with Complete Text

Link text is nothing but the text present in the anchor tag <a>. To identify an anchor element with it's 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"
									

Link with Partial Text

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 full chapter for forming CSS selector.


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


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


									$('xpath')
									
									Example:
									
									$('//input')
									

About Author

Article is written by Pavan (a) KarthiQ. Well, I am serving notice period in an MNC, Bangalore. I thought to enrich every person knowledge a little, I always have a feeling, when we teach something, we will learn more than what you know. Knowledge is the only thing that doubles when you spend it.

I have also created the reporter for Protractor Jasmine. Use for your projects without any hesitation

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions