top of page
hand-businesswoman-touching-hand-artificial-intelligence-meaning-technology-connection-go-
Search

Selenium Locators

What are Selenium locators?

Selenium is a widely used test automation framework. Through Selenium, you can automate any interactions such as type, click, double click with the DOM WebElements, etc. To identify any HTML element on a web page, you must use locators. It’s a common capability in almost every UI automation tool, including Selenium. Selenium WebDriver locators come up packed with different methodologies to identify HTML elements present on the page. Selenium offers multiple support to major web locators.


These are the types of locators in Selenium – ID, Name, ClassName, LinkText, Partial LinkText, TagName, CssSelector, and XPath.




What are the Selenium locator types?

In this Selenium locators cheat sheet, let’s get coverage on the most important types of locators in Selenium in this section of the Selenium locators cheat sheet.


Here is the list:

LOCATOR

DESCRIPTION

SYNTAX (IN JAVA)

1.ID

Figure out the WebElement that uses the ID attribute

driver.findElement(By.id(“IdValue”));

2.Name

Figure out the WebElement with the Name attribute

driver.findElement(By.name(“nameValue”));

3.ClassName

Make use of the Class attribute to identify the object

driver.findElement(By.className(“classValue”));

4.LinkText

Leverage the text hyperlinks for locating the WebElement

driver.findElement(By.linkText(“textofLink”));

5.Partial LinkText

Make use of the text partially in hyperlinks for desired WebElement location

driver.findElement(By.partialLinkText(“PartialTextofLink”));

6.TagName

Make use of the TagName for locating any desired WebElement

driver.findElement(By.tagName(“htmlTag”));

7.CssSelector

CSS that we use to create different style rules in a web page can be used to locate any needed WebElement

driver.findElement(By.cssSelector(“cssValue”));

8.XPath

Bring in XPath as a WebElement locator

driver.findElement(By.xpath(“xpathValue”));



1.  Locating web elements with the “ID” attribute-

ID Locator in Selenium is the most common method to locate different web page elements.


 Syntax:

        driver.findElement(By.id(“IdValue”));


  • driver: The Selenium WebDriver from which we need to locate the web element while using the Selenium locator.

  • findElement: The attribute used to find the web page element.

  • By.id: The method used to pass the property of “IdValue”.

  • IdValue: Locate the web element with its Id name.

Example:

   <a data-qe-id=”heblogo” >

   driver.findElement (By.id(“heblogo”));

2. Locating web elements with the “Name” attribute-

Selenium allows us to identify any element using the “name” attribute.Name Locator in Selenium can have a number of elements with a similar “name” attribute. When we want to identify the web element, we should try to make it unique. Or else, it would identify a number of elements present on the same page with the same name value and choose whichever it finds first.


Syntax: 

      driver.findElement(By.name(“nameValue”));


  • By.name: The method used to pass the property of “Name”.

  • nameValue: The value of the name to be located.


Example:

  <form action="/search/" name="search" class="sc-5kyd9s-0 gcHBOG">

        driver.findElement(By.name("search"));

3.Locating web elements with the “ClassName” attribute-

In Selenium ClassName Locator helps locate DOM class values.For perform or identify any form of web element operation involving the “className” attribute, we use class.We need to use a unique class name to locate the web element.


Syntax:

               driver.findElement(By.className(“classValue”));


  • By.className: The method used to pass the “className” locator.

  • classValue: Locate the class with the specific class name.

Example:

  <a id="skiplink" tabindex="0" class="skip-link">Skip to main content</a>

     driver.findElement(By.className(“skip-link”));


4.Locating web elements with the “LinkText” attribute-

LinkText locators and partialLinkText  in Selenium have the same functionalities. They let you locate different web elements with hyperlink texts.We can use them to handle elements with the anchor < a> tags..



Syntax: 

                driver.findElement(By.LinkText(“LinkText”));

  • By.LinkText– Identify the elements by just the link text.

Example:

   <link rel="canonical" href="https://www.amazon.com/">

       driver.findElement(By.LinkText(“https://www.amazon.com/”));


5.Locating web elements with the “partialLinkText” attribute-

To identify the elements with the partialLinkText or LinkText, the hyperlink text is a must. The hyperlink text used to identify the elements. With the partialLinkText, you can identify the elements by using just the part of the link text.


Syntax: driver.findElement(By.partialLinkText(”partialLinkText”));


  • By.partialLinkText– Partial link text locator lets you identify the elements by using the partial link text.


Example:






6.Locating web elements with the “TagName” attribute-I

In Selenium the TagName locator can use HTML tag names such as div, button, ***input, anchor tag, and so on to identify web page elements.


Syntax:

   driver.findElement(By.tagName(“htmlTag”));

  • By.tagName: The tagName locator is used to find the web element with the particular tag name.

Example:

BytagName("img");

("img"): The tagName locator returns all the elements from the page that contains a specified tag “img”.

driver.findElement(By.tagName(“img”));


7.Locating web elements with the “CssSelector” attribute-

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

  • Simple selectors (select elements based on name, id, class)

  • Combinator selectors (select elements based on a specific relationship between them)

  • Pseudo-class selectors (select elements based on a certain state)

  • Pseudo-elements selectors (select and style a part of an element)

  • Attribute selectors (select elements based on an attribute or attribute value)

Syntax:

driver.findElement(By.cssSelector(“cssValue”));

  • By.cssSelector: The CssSelector locator is used to find the element using CSS Selector.

  • cssValue: The attribute used to define the value of the CSS Selector.

Example:

Let’s consider that the input element consists of the following:

<input autocomplete="off" placeholder="Name" type="text" id="userName" class=" registration-form">

For finding the element with the CSS selector, here is the code:

By.cssSelector("input[id=‘userName’]");

Let’s take a look at the various CSS Selector attribute types in our Selenium locators cheat sheet.

  • Tag and ID in CSS Selector

To locate elements by ID and Tag, you have to use the following components in Selenium locator:

Syntax:

css=(Html tag)(#)(ID attribute value)

  • Html tag: Get the tag you want to locate (e.g., input tag).

  • #: Get the ID attribute. We use it specifically to locate any element through an ID.

  • ID attribute value: Input the ID attribute value when you want to locate the element.

This is similar to Tag and ID in the CSS locator, except that you use a dot (.) to denote the class attribute value instead of hash (#).

Syntax:

css=(HTML tag)(.)(Class attribute value)


  • Tag and Attribute in CSS Selector

This is one among the types of locators in Selenium where you can locate the element through tag name and define the attribute with its value. The Selenium driver will select the first one when multiple elements have the same attribute and tag.

Syntax:

css=(HTML Page)[Attribute=Value]


  • Tag, Attribute, and Class in CSS Selector

Through these types of locators in Selenium, you can locate the element through class name and different attribute values.

css=(HTML tag>)(. )(Class attribute value)([attribute=Value of attribute])

  • HTML Tag: Used to define the tag name.

  • Class attribute value: Used to define the value of the class attribute.

  • attribute=Value of attribute: Used to mention the exact value of the attribute.

  • Wild card (*, ^ and $) in CSS for classes

Selenium CSS selector can help you match multiple strings via different patterns such as ^, *, and $. We use CSS wildcard selectors to select different elements on a simultaneous basis.

Let’s take you through how to use wildcards with the Selenium CSS Selector in our Selenium locators cheat sheet:

a. Starts-With in CSS Selector

Among many types of locators in Selenium, this Selenium locator helps you locate elements when you try to match different elements using a string starting with any designated value.

Syntax:

css=(HTML tag)([attribute^=value])

  • [attribute^=value]: Used to select or locate any desired WebElement with a string starting with the specified value.

b. Ends-With in CSS Selector

This Selenium locator helps you locate elements when you try to match different elements using a string ending with any designated value.

SELENIUM 4 LOCATORS

DESCRIPTION

SYNTAX (IN JAVA)

above

The needed WebElement is found to be above the mentioned element.

driver.findElement(with(By.tagName(“TagName”)).above(ElementName));

below

The needed WebElement is found to be below the mentioned element.

driver.findElement(with(By.tagName(“TagName”)).below(ElementName));

toLeftOf

The needed WebElement is found to be on the left of a specific element.

driver.findElement(with(By.tagName(“TagName”)).toLeftOf(ElementName));

toRightOf

The needed WebElement is present on the right of a specific element.

driver.findElement(with(By.tagName(“TagName”)).toRightOf(ElementName));

near

The needed WebElement (or item) is present not more than 50 pixels away from the mentioned element.

driver.findElement(with(By.tagName(“TagName”)).near(ElementName));



8.Locating web elements with the “XPath” attribute

Let’s explore XPath, an important attribute, in this Selenium locators cheat sheet. XPath locators in Selenium are unique among the types of locators present to find web elements. XPath makes use of the XML expression for locating a webpage element. It’s a must to locate dynamic webpage elements, just like CSS selectors. XPath simplifies it when the properties are dynamic.

Here is the syntax to identify a web element with the XPath locator:

driver.findElement(By.xpath(“htmlTag”));

  • XPath: XPath (XML Expression) belonging to the DOM structure.

  • htmlTag: The needed attribute of the target element to identify any unique web element.

Example:

By.xpath("By.id(“userName”));

  • By.xpath: XML expression to locate the element of the webpage.

  • id: ID value

  • By.id(“userName”): The attribute to identify the web element under the ‘userName’.

There are many types of XPath locators:

  • Standard XPath: This is the standard way through which you can write the XPath locator.

  • XPath Contains: XPath uses CSS selector ‘contains’ to locate WebElements where the value changes dynamically.

  • Syntax for XPath Contains:

//tagname[contains(@attribute, ‘partial value of attribute’)]

  • XPath using ‘AND’ & ‘OR’: In these types of locators in Selenium, we use ‘OR’ and ‘AND’ operators as a part of the Selenium XPath selector when we want to locate a WebElement on the basis of a certain set of conditions. Both the conditions have to be True for ‘AND’.

  • Syntax for XPath OR operator:

//input[@id='login_1' OR @name='login’]

  • Syntax of XPath AND operator:

//input[@id='login_1' AND @name='login’]

  • starts-with() method in XPath: The XPath Selenium locator starts-with() method provides functionalities that’s similar to Selenium CSS Selector. This can help you locate different elements, starting with a specific attribute value. We can use the XPath starts-with() method to locate WebElements where the values would change when we refresh the page.

  • Syntax for starts-with() method:

//tagname[starts-with(@attribute,'starting name of the attribute value')]

  • XPath Text: Selenium XPath Text locator can help us locate WebElements through XPath when it uses an exact text match. We can use it to locate elements when we look into all the tags that contain a certain level of text.

  • Syntax:

//div[text()='Logged In']



Conclusion

Selenium offers a wide range of options to select a web element. It depends on the type of application under test and the operation that test case needs to perform on such a web element. While choosing between above options one should also think about the performance of the test case being automated. In general below is order of preference which is widely used:

  1. By id

  2. By classname

  3. By Name

  4. By link text, partial link text or tag name

  5. By xPath

  6. By CSS path







118 views0 comments
bottom of page