What exactly is a locator in Selenium?

In Selenium, locators are used to identify a particular element in web pages. They enable us to quickly locate any area of a web page. Once we have a locator expression that specifically identifies a certain web element, we can present this to the WebDriver object and then interact with that element using Selenium’s built-in methods like click, send keys, clear, etc.

It is a fundamental idea in conventional test automation. To have a quicker workflow, a QA must understand how to write the finest Selector expressions. The majority of inexperienced automation engineers have trouble creating the right locator expression. You will be able to quickly develop concise, clear, and reliable CSS and XPath expressions after reading this tutorial.

In order to have a more efficient workflow, we will learn in this post how to rapidly build clean selector expressions using XPath and CSS. We will also discover two useful browser add-ons that provide accurate CSS and XPath selectors automatically.

Distinct types of locators

Eight distinct locators (className, name, id, tagName, linkText, partialLinkText, XPath, and a CSS selector) are supported by Selenium.

Due to the presence of numerous locators in a given class or tag name in a production application, className and tagName are among the least often utilized of the eight selectors. Even if we do get into a case where a class or tag is being used as a unique locator, there’s a good probability that this will be fixed in a later release. The usage of linkText and partialLinkText is situational.

These benefits are shared by the most popular element locators, XPath and the CSS selector:
  • Since there is more than one class name and tag name, we may use them interchangeably.
  • One generation may be passed on to the next.
  • It is possible to create expressions that are resistant to modifications made to the front end.

The XPath: what is it?

XPath, or XML path, is a query syntax used with XML schemas. Many languages, including Java, C#, Python, JavaScript, etc., make use of it.

XML schemas make use of XPath, which enables us to zero in on certain regions of the file. XPath expressions allow you to find any element on a web page by resolving their way through an XML document. It also has powerful search and validation applications.

Pros and cons of using XPath Supported by a large number of languages

  • Allows for the use of either XML or HTML tags.
  • Any node in an XML document may be manipulated, and the appropriate location can be chosen according to a number of criteria.
  • Expressions written in XPath may yield zero, one, or more results in DOM.
  • When writing an XPath expression, you don’t have to start at the root node. It functions on any depth inside a document.
  • Expressions in XPath are declarative rather than procedural in a programming setting. This is crucial because it allows the query optimizer to make optimal use of indexes and other data structures.
  • Bidirectional communication is possible using XPath. Unlike in CSS, an Xpath allows us to go in both directions (from parent to child and vice versa).

CSS Selector: What Is It?

All of the various HTML elements—tags, classes, attributes, and ids—are condensed into a single string that serves as a CSS Selector. For the purposes of Selenium, it is an expression that allows us to provide a distinct identifier for a web element.

CSS Selectors: The Pros and Cons

  • They have a straightforward syntax since their structure consists of only one component.
  • Compared to XPath, performance is on par with or even exceeds it.
  • Superior than XPath in both ease of use and ease of learning.
  • The CSS Selector only works in one way. In contrast to XPath, which allows traversal in both directions, CSS Selectors only allow us to go from parent to child.
  • Both XPath and CSS selectors are supported by our automation scripts.

Guidelines for constructing locator expressions

CSS Selectors are often almost as powerful as XPath. Yet, not all browsers will support your necessary CSS Selectors. Finding an element without resorting to the DOM is another scenario when you may need to rely only on XPath (which only XPath would support). As additional modifications are made to the front end, using short and sturdy locators will help the script remain stable. When crafting a locator expression in XPath or CSS, it’s important to have the following in mind.

  • The phrase used in a locator selector must be identical to the one used to pick the desired element.
  • No other DOM element may be matched by a locator selector expression.
  • Never rely on data that might soon become obsolete.
  • Always use just the bare minimum of information in your locator expressions.
  • Never use an absolute statement.
  • The expression for the ABS XPATH variable is: /html/body/div[2]/div[1]/div/h4[1]/b/html[1]/body[1]/div[2]/div[1]/div/h4[1]/b[1].
  • html.body.div.p.div.a = abs css expression
  • The difficulty with absolute expressions is that they are likely to fail if any of the nodes change or if new siblings are added to any node.
  • Instead, you should make use of relative expressions, which are less cumbersome to write and more stable.
  • rel_xpath = //tagname[@attribute='value']
  • The formula for rel css is tagname[attribute='value']

Conclusion

Locators are a must know for every QA engineer out there. If you keep the guidelines shared in mind you will be able to create powerful test cases. If you are using no-code tools like testRigor you can forgo all the hassle and anyone with zero coding experience can build automated test cases.

Convert your manual QA to automation QA overnight
Learn More