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 :
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 element 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 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 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"
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 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')
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