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 :
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 element locating strategies are explained below.
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.
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()
We can find an element using the text present in the element.
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
Syntax: $('tagname=complete text'); Locator for above element $('span=Welcome User').getText() // Welcome User
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"
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')