Share, Learn and Grow

How to Identify Web Elements in Selenium?

How to Identify Web Elements in Selenium?

Identification of web elements in web page is first and important step to create an Automation script. Unless an element is uniquely identified in each and every Test run, Our Automation efforts will not be a successful. Accurate identification of web elements is more difficult than it sounds. Sometimes, we end up working with incorrect web elements or no elements at all!  We use locators in selenium for web element identification.


What is Locator?

Locator can be termed as an address that identifies a web element uniquely within the webpage. We look into HTML properties of a web element which tells the Selenium about the web element it need to perform action on. Essentially, most of the selenium commands requires a locator as its one of argument to find a web element, however very few like the “open” or “close” command do not need a locator.

Types of Locators

Identifying web elements has always been a very tricky and thus it requires an accurate and effective approach. Thereby, we can assert that more effective the locator, more stable will be the automation script. Thus, to identify these web elements accurately and precisely there are different types of locators.

  1. ID as a Locator

The easiest and popular method to identify web element is to use ID attribute of the html element. The ID attribute of an each element is unique.

HTML Element
<input id=”email” class=”required” type=”text”/>

WebDriver Code:
WebElement webElement = driver.findElement(“email”));

PROS: Each id is supposed to be unique so no chance of matching several elements.
CONS: Works only on elements with fixed ids and not on the runtime generated Ids.

  1. Name as a Locator

When Ids does not work, the next thing to look upon is that if the desired element has a name attribute. The name cannot be unique all the times. If there are multiple names, Selenium will always perform action on the first matching element. We can use indexing or additional filters to reach the desired element if there are multiple elements found with same Name attribute.

HTML Element:
<input name=”register” class=”required” type=”text”/>

WebDriver Code:
WebElement register= driver.findElement(“register”));

PROS: Works well with fixed list of similar elements
CONS: Difficult to use with data-bound lists

  1. LinkText as a Locator

This locator applies only to hyperlink texts. We access the link by prefixing our target with “link=” and then followed by the hyperlink text.
If there are multiple links with the same link text (such as repeated header and footer menu links), in such cases Selenium will perform action on the first matching element with link.

HTML Element
<a href=””>Downloads</a>

WebDriver Code:
WebElement download = driver.findElement(By.linkText(“Downloads”));

PROS: Useful when testing navigation
CONS: Will only works for anchor elements

  1. DOM as a Locator

Document Object Model represents an HTML document. DOM locator uses JavaScript that evaluates to an element on the page, which can be simply the element’s location using the hierarchical dotted notation. Since only dom locators start with “document”, it is not necessary to include the dom= label when specifying a DOM locator.

dom=document.getElementById(‘loginForm’) (3)
dom=document.forms[‘loginForm’] (3)
document.forms[0].username (4)
document.forms[0].elements[‘username’] (4)

PROS:  Javascript allows you to build dynamic locators
CONS: Relies on the structure of the page

  1. Xpath as a Locator

XPath is a very powerful to express which element to target. If you use it correctly, it can produce very reliable and low maintenance locators, but if you use it incorrectly, it can create very brittle test cases.

There are two types of xpath

  1. i) Native Xpath : it is like directing the xpath to go in direct way.
    findElements(By.Xpath(“html//body/table/tr/td “));

Advantage of specifying native path is, finding an element is very easy as we are mention the direct path. But if there is any change in the path (if something has been added/removed) then that xpath will break.

ii) Relative Xpath :In relative xpath we will provide the relative path, it is like we will tell the xpath to find an element by telling the path in between
driver.findElement(By.xpath(“//input[@type=’submit’][@value=’Login’]”)); driver.findElement(By.xpath(“//input[@type=’submit„ and @value=’Login’]”));

Advantage here is, if at all there is any change in the html that works fine, until unless that particular path has changed. Finding address will be quite difficult as it need to check each and every node to find that path.

PROS: Allows very precise locators
1. Slower than CSS
2. Relies on browser’s XPath implementation which is not always complete (especially on IE) and as such is not recommended for cross-browser testing

  1. CSS as a Locator

CSS locators can be used to identify a large number of variations. It is becoming most popular way today.

Example :
driver.findElements(By.cssSelector(“input[id=email’]”));driver.findElement(By.cssSelector(“button[name=„cancel‟]”));  driver.findElement(By.cssSelector(“#save”)); driver.findElement(By.cssSelector(“button#save”)); driver.findElement(By.cssSelector(“.yoyo”));  driver.findElement(By.cssSelector(“input.username”));

1. Much faster than XPath
2. Widely used
3. Provides a good balance between structure and attributes
4. Allows for selection of elements by their surrounding context

CONS: They tend to be more complex and require a steeper learning curve


Element Identification Strategies

There are two types of Selenium implementations, usually done for element identification

  1. Test cases contain direct selenium calls and so the locators are defined in the tests cases.
  2. Test cases use reusable functions in which the locators are declared at runtime.

In the first case, we have a lot of control with regards to how the elements are located. It also means:

  1. Tests are tightly tied with Selenium as a tool and so in the future if we have to switch tools, it would be a lot harder to do so.
  2. There is a possibility of lot more effort modifying the test scripts when the UI undergoes significant changes.

In the Second case, it requires a smart expression generation logic that can use the right locator based on factors like parameters passed to the function or inspecting elements on the page. It also means:

  1. Lower maintenance cost as we are re-using functions so duplication is less.
  2. Better test architecture, which is scalable
  3. Slower execution speeds.
  4. More use of xpaths or css as locators.

Choosing one of the two approaches based on how large the application under test is and how often and how much regression areas change in the product. If it’s a small application or if the regression areas doesn’t change to a large degree frequently, then try the first implementation path however such scenario are less frequent in web application automation world.

Android App – KnowledgeBlob

Please read more Recent Posts

  • SprintPlanningMeeting
    Sprint Planning Meeting The Sprint Planning Meeting is […]
  • Listening is Learning
    The art of Listening Listening is a skill of critical […]
  • 10 Amazing Quotes On Strategy
    10 Amazing Quotes on Strategy Quotes are inspiration […]
  • Every battle is won before it is fought.
    Importance of Strategy It is important for an […]
  • Strategy
    Strategy Strategy has been studied and defined by […]

Follow us on facebook