Let’s have a look into Web Element Locators

What are Web Elements?

A Web element is an individual entity rendered on a Web page. Whatever you see one a web page whether it is a button or a title header or input fields is a webelement. Suppose you have opened the search page of google, whatever you see there like the title or the search box they all are elements. Elements are specified in HTML by attributes, tag name like <p>,<img> etc, and contents. Most of the time we apply css to the elements to style them with colors, size , animation, position etc.

<start tag> content </end tag>

Web Element Locators

Identification of the correct GUI element on a web page is pre-requisite for creating any successful automation script. Locators are the way to identify an HTML element on a web page, and almost all UI automation tools provide the capability to use locators for the identification of HTML elements on a web page. So it is clear that Web Elements and Locators are not the same thing. Locators are basically used for finding elements through query. A Web element locator is an object that finds and returns Web elements on a page using a given query. Test automation interacts with Web pages programmatically: it needs a coded way to find and manipulate those same elements.

There are various types of locators, using which we can identify a web element uniquely on the Webpage. There locators are as follows:

• ID
• Class Name
• CSS Selector
• Name
• Link text
• Partial Link Text
• Xpath

The Page Object Model organizes locators and action methods together in classes by page or component. Page Object Model (POM) is a design pattern used in test automation. It helps in reducind code duplicacy and improves test case maintainance.

// WebDriver example: Searching element at www.google.com
// This code is written in Java, but the calls are the same in any language
 

WebElement searchField = driver.FindElement(By.Name("q"))

How to find Elements?

What you have to do is whatever UI you want to automate just open it in your favorite browser. I will be working with Chrome Browser because it has rich Dev tools and at the same time it is easy to use. To inspect any Web page in Chrome, simply right-click anywhere on the page:

Now the Dev’s Tool will open. You have to click on Inspect option or just click Ctrl+Shift+I.

 For finding Web elements, we want to use the Elements tab. Click the “select” tool in the upper-left corner of the DevTools panel. (It looks like a square with a cursor on it.) The icon should turn blue.

After that you just have to move to that element that you want to inspect, when you will hover your cursor on element it will get highligted. You just need to click once whichever element you want to inspect and the HTML code for that will get highlighted. From here, you can check out the element’s tag, classes, attributes, contents, parents, and children.

Good Practices for Locators

You should always focus on writing unique and simplest locators for targeting the element(s). Don’t try to elongate it unnecessarily. So the basic order of preference is mentioned below.

• ID (most of the time its unique)
• Name (if unique)
• Class name
• CSS Selector
• XPath
• Link Text

Most of the time you will be able to get straight forward locators but sometimes it is difficult to find unique locators at that time you will have to use complicated xpaths and css selectors. Don’t worry you can learn that from our another blog on CSS selectors and xpath. For now just go with the following help and you will be good to go. Cheers!!!

• If you can’t find the unique identifiers then try to use parent-child relationship in finding the xpath or css selector. If the parent has some unique element then try to use it as an anchor

CSS selector example: “#awesome-list > li”
XPath example: “//div[@title='Employee Birthdays']//ancestor::td//following::td[@class='Actions Menu']"

• Use of text or indexing is not considered good while finding the elements because the index or text can get changed any time on the UI and after that your test automation will start failing. May be you have to change the code again and again, so better try to avoid it.

Bad example: “//div[4]//span[text()=’knoldus’]”  
These type of locators should be avoided

• Use the “contains” function when checking for classes in XPath.

Example: “//div[contains(@class, ‘knoldus’)]”
Elements frequently have more than one class.
“contains” will check a substring instead of the full class string.

So thats all for this blog. Hope you enjoyed it. Happy Learning !!