Loading...

Handling Web element locators using akaAT Studio

 

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:

  • ID – Used to identify web element with an ‘ID’ attribute
  • Name – Used to locate an element with a ‘name’ attribute
  • Link Text – Used to identify the hyperlinks on a web page with the help of ‘<a>’ (anchor) tag
  • CSS Selector – Used to locate complex elements on the page
  • XPath – A language to query XML documents, consisting of a path expression along with some conditions

To identify these elements, we can follow one of these strategies.

  • Simple locators: id, name, class, tag, link text, attribute
  • Advanced locators by combining the simple locators above:
  • XPath
  • CSS
  • Using functions in XPath:
  • contains
  • sibling
  • ancestor

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

  • Using id: id = “email”
  • Using name : name = ‘password’
  • Using classname:

  • Using xpath:

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 :

  • Tag input : //input[contains(text(),’Text’)]
  • Tag span: //span[contains(text(),’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')]

Sibling:

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.

Xpath: //input[@type='text']/following-sibling::button

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

Ancestor:

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']

Starts-with:

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

Xpath: //input[stars-with(@id,'pass')]

Parent:

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

Xpath: //input[@type='text']//parent::div

XPath axes

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:

  • Ancestor
  • Descendant
  • Following
  • Following-sibling
  • Parent
  • Preceding
  • Preceding-Sibling

Blog Posts

Image