Web Element Locators for Test automation

Web Elements

In simple terms anything that is present inside a web page is known as a web element. These are like any individuals present in the UI. It represents an HTML element. Selenium Webdriver encapsulates a simple form element as an object of the WebElement. It basically represents a DOM element and all the HTML documents are made up by these HTML elements.

There are different types of web elements in Selenium

we can categorize them as

Edit box
Links
Button
Image, image link, an image button
Text area
Checkbox
Radio button
Drop down list

Steps to locating a webelement in DOM

To access the Web element in DOM (Document Object Model). Right click on the Web page and access the Inspect Button

IMAGE

Locators in Selenium WebDriver

Finding the unique locators for an Web element is the key step to a successful automation script.

Selenium WebDriver uses locators to find and match elements on a page. Locators are arguments passed to the Finding element methods.

Web Driver provides the following two WebElement methods to find the elements.

findElement() – finds a single web element and returns as a WebElement Selenium object.
findElements() – returns a list of WebElement objects matching the locator criteria.
By.id(), By.name(), By.xpath(), By.CSSSelector()

Selenium supports various types of locators:

ID: A fast and reliable method of element recognition. IDs are usually unique on a page. Selenium recommends using the ID locator.
XPath: A technique that uses XML path expressions to navigate through a page's HTML structure. XPath locators can identify any element on a page. There are several types of XPath locators, each useful in different situations.
CSS: Locates elements by CSS ID.
Name: Locates elements by name.
tagName: Locates elements by tag name.
LinkText: Locates elements by link text.
PartialLinkText: Locates elements by partial link text.
ClassName: Locates elements by CSS class.
CssSelector: A type of locator.

ID locator

ID locator in Selenium is the most preferred and fastest way to locate desired WebElements on the page. ID Selenium locators are unique for each element in the DOM. Ideally these are assigned by the developer of the code, so in real practice these ID’s may be unassigned or possibility of duplicate results found. In such case the user might go for next best Locator.

To use this feature,the following code is called

driver.findElement(By.id("id-search-field"));

Name locator

Name locator is the second safest and fastest locator to locate an element based on the value of “name” attribute on the web page. The name cannot be unique for each element at all times.

If there are multiple elements with the same name on a web page then Selenium will always perform the action on the first matching element.

Username and Password fields are examples that can be identified with “name” attribute.

The general syntax to use name locator is as follows:

driver.findElement(By.name("Attribute value"));

Tag Name locator

Next comes the tag name method identified via tag like input tag, button tag or anchor tag etc.

To identify with tag name

Syntax for this is

driver.findElement(By.tagName("input"));

ClassName locator

Class Name locator gives the element which matches the values specified in the attribute name “class”.

Syntax for this is

driver.findElement(By.className("Attribute value"));

LinkText locator

We can find an element using the link text or the partial link text in Selenium webdriver. Both these locators can only be applied to elements with the anchor tag <a>.

The link text locator matches the text inside the anchor tag. The partial link text locator matches the text inside the anchor tag partially. NoSuchElementException shall be thrown for both these locators if there is no matching element.

driver.findElement(B y.partialLinkText("Coding"));

CSS Locator

CSS (Cascading Style Sheets) Selectors are almost like string patterns used to identify an element based on a combination of HTML tag, id, class, and attributes. Locating an element by CSS Selectors in Selenium is more complicated comparatively, but it is the most common locating strategy of advanced Selenium users because it can access even those elements that have no ID or name. A combination of attributes can be used to find the right element like

Tag and ID
Tag and class
Tag and attribute
Tag, class, and attribute
Inner text Finding a unique static attribute for a dynamic element is quite tricky. As most of the time, these elements don’t have consistent attribute values. Hence directly using locators like id, name, link, partial link, etc. will not be possible. This is where CSS Selectors is helpful, as CSS is powerful enough to identify most of the web element present on the web page. It can also identify elements that don’t have constant attribute values, so it becomes the reliable method of locating.

driver.findElement(By.cssSelector(“css-selector”));

X-Path Locator

XPath is a Selenium technique that is used to navigate through the HTML structure of a webpage. It is a syntax or language that makes finding elements on a webpage possible using XML path expression. XPath can used on both XML and HTML documents

In Selenium automation, there may be times when elements cannot be found with general locators like ID, name, class, etc. And this is when XPath is used to locate those elements on the webpage. XPath in Selenium may be used on both XML and HTML documents.

XPath = //tag_name [@Attribute_name = " Value of attribute"]

Types of XPath

XPath comes in two different flavors: absolute XPath ,relative XPath.

Absolute XPath

The absolute variation of XPath has this name because it starts from the root element of a document. When writing an absolute XPath, you start with a single forward-slash (/) and walk your way until you find the desired element.

Absolute XPaths have a serious downside. Any automation that relies on one will fail if something changes in the path, leading to fragile tests.

Absolute XPath:/html/body/div[1]/div/div[2]/header/div/div[2]/a/img

Relative XPath

In the case of Relative XPath, the path begins from the middle of the HTML DOM structure. Here, the structure starts with a double forward-slash (//) that states that the element can be searched anywhere on the webpage.

Relative XPath enables you to write from the middle of the HTML DOM structure without any need to write a long XPath.

Syntax of the Relative XPath looks like

Relative XPath://*[@id=”block-perfecto-main-menu”]/ul/li[6]/a

Conclusion

Successful and efficient automation test framework depends on the result of the identifying the unique and right Element locator. Some things we need to keep in mind before choosing an right element is

The locator must match the desired element

The locator must not match any other element

Avoid depending on information that is likely to change

Depend on the minimal necessary information.