What are Locators?
Locators are basically the HTML attributes of a web element. They help identify unique web elements on a page and command testing frameworks, such as Selenium WebDriver, to perform the action on those elements. Locators are also known as selectors.
There are several types of web element locators in WebDriver, including:
To identify these elements, we can follow one of these strategies.
For akaAT we can manipulate all the attributes of an element to locate it on the website tiki.vn.
Then, we will familiarize ourselves with locators along with akaAT:
We have a login screen containing two components: textbox username, textbox password and their properties, we can locate it by id, classname, name, xpath
We will manipulate 2 types: static and dynamic locator
Using Static Locator
The simplest way is to get the xpath of that element right on the web by: right-clicking on the element you want to get the XPath, then selecting inspect, after pressing the screen will appear the HTML source code of the web, you point to the component after inspect only comes and right click select copy and select copy xpath, you have been copied relative xpath of the component.
Using Uniquely Present Text
If an element does not have any static locator, you will have to consider using combined locators. Below are a few suggestions:
Contains text :
Combine many data fields: And & OR
Ex: //input[@id='id' and @class ='classname']
//label[contains(text(),'Text') and @class='classname']
//label[contains(text(),'Text') or contains(@class,'classname')]
Suppose you want to find the 'Search' button but you only know the properties of the textbox in front of it, we can use the sibling property to find that element.
We can find the search textbox via type and class attributes, then add sibling to the button tag to get the search button's xpath.
In addition to following-sibling, we can find the front element by keyword: Preceding-Sibling
Xpath: //button[@class='FormSearch__Button-sc-1fwg3wo-3 ieXBRV']/preceding-sibling::input
Assuming we have div tags of the same class value, how can we get them exactly? we can rely on its children to find it exactly.
Here we will get the correct xpath of the div tag containing the search textbox and search button. We will search for the div tag via the properties of the input tag or the button tag.
Xpath: //button[@class='FormSearch__Button-sc-1fwg3wo-3 ieXBRV']/ancestor::div[@class='FormSearch__Form-sc-1fwg3wo-1 gUJHDL']
we have the textbox password for login, with its properties like: id, name ... We can find it by using the starts-with keyword to find it easily with one part of the text in the id, name, classname
By using Parent you can find the parent node of the current node
Can use parent to get the xpath of div containing the input tag of the search textbox
By using XPath axes, you can find dynamic and very complex elements on a web page. XPath axes contain several methods for finding an element. Here, we will discuss a few methods.
Here is a list of Axis you can use in XPath queries to find elements on the page: