0% found this document useful (0 votes)
5 views

Locators in Selenium WebDriver With Examples _ LambdaTest

The document discusses the various types of locators in Selenium WebDriver, which are essential for identifying and interacting with web elements during automated testing. It explains the importance of choosing the right locator to ensure tests are robust and less prone to failure, and provides detailed descriptions and examples of locators such as ID, Name, XPath, and CSS Selector. Additionally, the document highlights best practices for using these locators effectively in test scripts.

Uploaded by

raznoe1
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
5 views

Locators in Selenium WebDriver With Examples _ LambdaTest

The document discusses the various types of locators in Selenium WebDriver, which are essential for identifying and interacting with web elements during automated testing. It explains the importance of choosing the right locator to ensure tests are robust and less prone to failure, and provides detailed descriptions and examples of locators such as ID, Name, XPath, and CSS Selector. Additionally, the document highlights best practices for using these locators effectively in test scripts.

Uploaded by

raznoe1
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 46

(https://www.lambdatest.

com)

Next-Gen App & Browser Testing Cloud


Trusted by 2 Mn+ QAs & Devs to accelerate their release cycles

(https://accounts.lambdatest.com/login/google)
Start free with Start free with Email
Google (https://accounts.lambdatest.com/register)

Selenium Tutorial (https://www.lambdatest.com/blog/category/selenium-tutorial/) Selenium Locators


(https://www.lambdatest.com/blog/category/selenium-locators/) Tutorial (https://www.lambdatest.com/blog/category/tutorial/)

Different Types of Locators in Selenium


WebDriver
Faisal Khatri
Start Free Testing -> (https://accounts.lambdatest.com/register)
(https://www.lambdatest.com/blog/author/mfaisalkhatri/)
Posted On: March 1, 2024
570695 Views
34 Min Read
(https://www.lambdatest.com)
Home (https://www.lambdatest.com/) > Blog (https://www.lambdatest.com/blog/) >
Different Types of Locators in Selenium WebDriver

(/#facebook) (/#twitter) (/#linkedin)


When writing automated tests with Selenium WebDriver, the first step is locating the WebElements using the browser developer tools
window. To achieve this, different types of locators in Selenium WebDriver, like ID, Name, TagName, ClassName, XPath, CSS Selector,
etc., can interact with those respective WebElements.

Selenium locators (https://www.lambdatest.com/learning-hub/selenium-locators) are like the building block of a test script
that helps testers interact with the elements in the Document Object Model (https://www.lambdatest.com/blog/document-
object-model/) (DOM). Choosing the best-suited locators in Selenium WebDriver is one of the keys to ensuring that the tests are less
flaky (or brittle).

In this tutorial, we deep dive into the multiple locators in Selenium WebDriver, along with demonstrating the usage of those locators. If
you are preparing for an interview you can learn more through Selenium interview questions
(https://www.lambdatest.com/learning-hub/selenium-interview-questions).

TABLE OF CONTENTS

What are Locators in Selenium WebDriver?


What are Locators Used for?
Advantages of Locators in Selenium WebDriver
How to Locate WebElements in DOM?
Different Types of Locators in Selenium WebDriver
Identify WebElements Using Locators in Selenium WebDriver
Relative Locators in Selenium WebDriver
Demo: Relative Locators in Selenium WebDriver
Best Practices to Use Locators in Selenium WebDriver
Frequently Asked Questions (FAQs)

What are Locators in Selenium WebDriver?


Selenium (https://www.lambdatest.com/selenium) is a test automation framework that lets you automate the interactions with the
WebElements on the DOM. Interactions (or actions) can be a click, type, double click, etc. For example, the Action class in Selenium
(https://www.lambdatest.com/blog/what-is-actions-class-in-selenium/) provides appropriate methods to perform keyboard and
mouse actions on the elements in the DOM.

Start Free Testing -> (https://accounts.lambdatest.com/register)


(https://www.lambdatest.com)

By Louise J Gibbs

Download Image (/blog/w

However, the first operation is identifying those WebElements on the document (or page) under test. This is where locators in Selenium
WebDriver come into the picture.

Locators in Selenium WebDriver provide mechanisms for identifying HTML elements on the page. Selenium supports several web
locators, and you have to choose the one that meets your test requirements.

Let’s consider a simple example from the LambdaTest Selenium Playground (https://www.lambdatest.com/selenium-
playground/) website’s Input Form Demo page (https://www.lambdatest.com/selenium-playground/input-form-demo). You
need to devise a test scenario using Selenium and enter the email value in the Email text box field.

Start Free Testing -> (https://accounts.lambdatest.com/register)


The first task in your Selenium automation script is to identify the web element of the Email field and later use the sendKeys() method
in Selenium (https://www.lambdatest.com/blog/how-to-use-selenium-sendkeys/) to enter the email address. The web element
(https://www.lambdatest.com)
(or HTML element) is identified using locators in Selenium WebDriver.

Selenium WebDriver provides the findElement() and findElements() (https://www.lambdatest.com/blog/findelement-and-


findelements-in-selenium/) methods to locate the WebElements using the appropriate web locator. Shown below is an example of
how to use locators in conjunction with the findElement() [or findElements()] method when using Selenium Java for web automation
testing.

For more information on locators, please refer to this Selenium Locators Cheat Sheet
(https://www.lambdatest.com/blog/selenium-locators-cheat-sheet/).

What are Locators Used for?


The primary usage of a locator is to locate a web element on the web page. The locators can then be used in Selenium WebDriver test
scripts to interact with the web element and perform different actions such as clicking, entering keys, opening a dropdown, ticking a
checkbox, etc.

Using the combination of these actions, the appropriate functionality of the web pages can be tested. Locators help us verify the
presence of the web element and its visibility and check the state of the web element, whether it is enabled or disabled.

Locators are an essential part of the test scripts, without which the automated testing (https://www.lambdatest.com/learning-
hub/automation-testing) can not perform the desired output. If the right locators are not used, it may result in failures and flaky tests.
Understanding the locator strategies is necessary as it can help save time and effort in writing the automated tests.

(https://www.lambdatest.com/kane-ai/)

Advantages of Locators in Selenium WebDriver


There are multiple advantages of locators in Selenium WebDriver, some of which are listed below:
Start Free Testing -> (https://accounts.lambdatest.com/register)
Once the web element is located on the web page, it can run the same tests on different browsers installed on various
platforms. Thus, helping to perform the cross browser testing efficiently.
(https://www.lambdatest.com)
A web element can be located using different locator strategies in Selenium WebDriver. If the web element has an ID
and name, it can be located using its ID, Name, XPath, or CSS Selector. Similarly, the respective tagName or the
className can locate the same WebElement. Hence, there is a lesser chance that the tester might face difficulty
locating a WebElement.
Once a WebElement is located, it can be reused in the tests, thus saving the tester effort and time while writing the test
script. This also helps remove redundancy and create robust test scripts.
CSS Selectors can locate the WebElement in multiple ways, such as using ID and tagName, className, ID, other
attributes, etc. Similarly, XPaths could also locate the WebElements using relative or absolute path. ID is the fastest of
all locators; however, it requires that the WebElement should contain the ID attribute. The same applies to the Name
locator as well.
The point here is that every locator serves different needs, so if ID and Name are not available in the WebElement, CSS Selector or XPath
could be used to locate the WebElement, thus making the way out for testers so they don’t get blocked.

How to Locate WebElements in DOM?


Before any interaction can be performed on the WebElements in the DOM, the first step is to locate the elements in the DOM. Follow the
below-mentioned steps to locate WebElements in the DOM (Document Object Model).

1. Open the website and click on F12, or right-click and select Inspect.

2. A Chrome Developer Tools console will launch.

Start Free Testing -> (https://accounts.lambdatest.com/register)


(https://www.lambdatest.com)

3. There is a mouse icon on the leftmost side of the Developer Tools console. Once you hover over it, a message titled
Select an element in the page to inspect it will appear.
Click on it and navigate to the element you wish to locate. Once you click on the element, the DOM will be highlighted for that element,
as shown below.

4. The selected row in the DOM is the context from where you want to fetch the values. For example, the highlighted
DOM value is shown below.
1 <input type="email" class="w-full border border-gray-90 text-size-14 rounded mt-10 px-10 py-5" id="inputEmail4" name="email" pla

Now, you can choose the id, i.e., inputEmail4, to locate the desired Email text box element. The above technique will be used throughout
this blog to demonstrate the usage of different locators in Selenium WebDriver.

Start Free Testing -> (https://accounts.lambdatest.com/register)


Different Types of Locators in Selenium WebDriver
(https://www.lambdatest.com)
Below is the list of these locators of Selenium WebDriver:

ID
Name
ClassName
LinkText
Partial LinkText
TagName
CSS Selector
XPath
As mentioned, Selenium WebDriver provides different web locators for locating WebElements on the page. Here are the different locators
in Selenium WebDriver that I will cover in-depth in the latter part of the blog:

LOCATORS DESCRIPTION SYNTAX (IN JAVA)


id Identify the WebElement using the ID attribute. driver.findElement(By.id(“IdValue”));

name Identify the WebElement using the Name attribute. driver.findElement(By.name(“nameValue”));

className Use the Class attribute for identifying the object. driver.findElement(By.className(“classValue”));

linkText Use the text in hyperlinks to locate the WebElement. driver.findElement(By.linkText(“textofLink”));

partialLinkText Use a part of the text in hyperlinks to locate the WebElement. driver.findElement(By.partialLinkText(“PartialTextofLink”));

tagName Use the tagName to locate the desired WebElement. driver.findElement(By.tagName(“htmlTag”));

CSS used to create style rules in the web page is leveraged to


cssSelector driver.findElement(By.cssSelector(“cssValue”));
locate the desired WebElement.

xpath Use XPath to locate the WebElement. driver.findElement(By.xpath(“xpathValue”));

Using locators in Selenium 4 is a treat due to the introduction of relative locators in Selenium 4. The introduction of locators like above(),
below(), toLeftOf(), toRightOf(), and near() makes it easy to locate WebElements in relation to a particular WebElement.

We carried out a poll on LinkedIn to get insights into the testing community’s preferences, particularly regarding locators in Selenium
WebDriver. We asked, ‘What is your favorite element locator in Selenium WebDriver for test automation
(https://www.lambdatest.com/automation-testing)?’ The responses showed a clear preference for XPath among professionals.
This finding emphasizes the important role of XPath as a locator in Selenium WebDriver for test automation.

Start Free Testing -> (https://accounts.lambdatest.com/register)


(https://www.lambdatest.com)

Source (https://www.linkedin.com/feed/update/urn:li:activity:7125005859511795714/)

Identify WebElements Using Locators in Selenium


WebDriver
Now that you know the essentials of Selenium locators (including the additions in Selenium 4
(https://www.lambdatest.com/learning-hub/selenium-4)) let me deep-dive into each locator in Selenium WebDriver in more detail.

ID Locator in Selenium
ID locator in Selenium (https://www.lambdatest.com/blog/making-the-move-with-id-locator-in-selenium-webdriver/) is
the most preferred and fastest way to locate desired WebElements on the page. ID locators are unique for each element in the DOM.

Since IDs are unique for each element on the page, it is considered the fastest and safest method to locate elements. Unfortunately,
developers may or may not follow this rule as browsers do allow bypassing this rule.

Specifically, in the case of a table or list, the IDs may populate incrementally or dynamically depending on the data in the table. In such
cases, testers use other locators in Selenium WebDriver to locate the desired element on the page.

Start Free Testing -> (https://accounts.lambdatest.com/register)


One of the Selenium best practices (https://www.lambdatest.com/blog/selenium-best-practices-for-web-testing/) is to
leverage the capabilities offered by the ID locator in Selenium since it is the fastest locator of the entire lot. Therefore, choosing the ID
(https://www.lambdatest.com)
locator over other locators in Selenium WebDriver will go a long way to speed up Selenium test case
(https://www.lambdatest.com/blog/speed-up-selenium-test-cases-execution/) execution.

Below is an example of the LambdaTest eCommerce Playground (https://ecommerce-playground.lambdatest.io/index.php?


route=account/login) showcasing how the E-Mail Address field can be located using the id locator:

I have used the Chrome Developer Tools menu to locate the WebElement using the id locator. Below is the DOM structure of the element:
1 <input type="text" name="email" value="" placeholder="E-Mail Address" id="input-email" class="form-control">

The below method is used for locating the desired element using the id locator:
1 driver.findElement(By.id("input-email"))

If no DOM element matches the required id, NoSuchElementException


(https://www.lambdatest.com/blog/nosuchelementexception-in-selenium/) is thrown. Therefore, it is important to have a good
know-how of the common exceptions in Selenium (https://www.lambdatest.com/blog/49-common-selenium-exceptions-
automation-testing/) to build a more robust Selenium test suite.

Name Locator in Selenium


An element can be defined via multiple attributes, one such attribute is Name. A Name locator in Selenium WebDriver
(https://www.lambdatest.com/blog/how-to-use-name-locator-in-selenium-automation-scripts/) can also locate elements
like an ID locator.

Unlike ID locators, which are unique for a page, the Name locator may or may not have a unique value. If there are WebElements with the
same name, the locator selects the first element with that Name on the page.

In case no such name matches with the defined attribute value, NoSuchElementException is raised.
Start Free Testing -> (https://accounts.lambdatest.com/register)
To demonstrate the usage of the Name locator in Selenium WebDriver, we will identify the same E-Mail Address fields that were located
using the ID locator.
(https://www.lambdatest.com)

1 <input type="text" name="email" value="" placeholder="E-Mail Address" id="input-email" class="form-control">

Here is how the desired WebElement can be located using the name locator in Selenium:
1 driver.findElement(By.name("email"));

LinkText Locator in Selenium


Elements can be located by LinkText, which is present in the hyperlinks. For example, the first link would be selected in a scenario with
multiple links of the same text.

However, this identifier strategy can only be used for elements with an anchor( < a > ) tag.

Below is an example of the LambdaTest Selenium Playground website showcasing the selection of the Ajax Form Submit link that is
available on the home page. The DOM below shows the highlighted element:

Start Free Testing -> (https://accounts.lambdatest.com/register)


(https://www.lambdatest.com)

Below is the DOM structure of the same:


1 <a href="https://www.lambdatest.com/selenium-playground/ajax-form-submit-demo" class="text-black text-size-14 hover:text-lambda-

Here is how the desired WebElement was located using the linkText locator in Selenium:
1 driver.findElement(By.linkText("Ajax Form Submit"));

Partial LinkText Locator in Selenium


There is a provision to locate a WebElement using Partial LinkText akin to the normal LinkText locator in Selenium. Locating WebElements
using Partial LinkText is preferred when the link text is too long.

Here, the partial text helps identify and use a unique element to perform further actions on it. Sometimes, this can also be locating
multiple links on a page with a common partial text.

Below is a snapshot of the LambdaTest DOM highlighting the element with the link name as Auto Healing. Instead of using the complete
link text, I used the partial link text locator to locate the element using the Healing link text.

Start Free Testing -> (https://accounts.lambdatest.com/register)


(https://www.lambdatest.com)

Here is the DOM structure of the element:


1 <href="https://www.lambdatest.com/selenium-playground/auto-healing" class="text-black text-size-14 hover:text-lambda-900 leading

Here is how the desired WebElement was located using the partialLinkText locator in Selenium:

The syntax for locating elements by partialLinkText is:


1 driver.findElement(By.partialLinkText ("Healing"));

For more information on Link Text and Partial LinkText locators, we recommend you check this article to find elements with linkText
and partialLinkText in Selenium (https://www.lambdatest.com/blog/using-link-text-and-partial-link-text-in-selenium/).

TagName Locator in Selenium


As the name specifies, this CSS locator in Selenium WebDriver is used to identify elements using tag names like div, table, h1, etc.

The TagName locator in Selenium (https://www.lambdatest.com/blog/locating-elements-by-tagname-in-selenium/) is


commonly used to identify all the links on a page and identify broken links in Selenium
(https://www.lambdatest.com/blog/broken-links-testing-using-selenium/). It is also used to get the header or the title of the
web pages.

Start Free Testing -> (https://accounts.lambdatest.com/register)


(https://www.lambdatest.com)

Here is the syntax for locating all the links on the LambdaTest Selenium Playground homepage. Notice here that the findElements method
is used. It will return a list of all the WebElements with the tagName ”a” that normally holds the links:
1 driver.findElements(By.tagName("a"));

Watch this video to learn the Actions class in Selenium and how to use it.

ClassName Locator in Selenium


ClassName locator is used for locating WebElements defined using the class attribute. Below is the DOM snapshot of the Ajax Form
Submit (https://www.lambdatest.com/selenium-playground/ajax-form-submit-demo) page that is available on the LambdaTest
Selenium Playground website.

Start Free Testing -> (https://accounts.lambdatest.com/register)


(https://www.lambdatest.com)

For locating the WebElement of the Submit button via the className locator in Selenium, we use the class attribute in the following DOM
structure:
1 <input type="button" class="btn btn-dark selenium_btn bg-black text-white hover:bg-lambda-900 py-5 px-10 rounded" name="btn-subm

Here is how the desired WebElement was located using the className locator in Selenium:
1 driver.findElement(By.className("btn-dark"));

XPath Locator in Selenium


XPath locator in Selenium (https://www.lambdatest.com/blog/complete-guide-for-using-xpath-in-selenium-with-
examples/) helps locate elements on the web page using XML expressions. The basic syntax used for using XPath as a CSS locator in
Selenium WebDriver is shown below:
1 XPath: //tagName[@attribute = 'value']

Here, tagName in Selenium signifies the tag in the DOM structure you are targeting to locate the desired WebElement. tagName can be an
input tag, anchor tag, etc.

Attributes are defined via the prefix @ and their corresponding value. Thus, attributes like name, id, class, etc., can be used along with
tagName.

XPath in Selenium can be used in multiple ways, as shown below:

Standard XPath: As the name indicates, this is the most basic (or standard) way of writing an XPath. To demonstrate
the usage of a standard XPath locator in Selenium, let’s locate the WebElement of the E-Mail Address field on the
LambdaTest eCommerce Playground website.

Start Free Testing -> (https://accounts.lambdatest.com/register)


(https://www.lambdatest.com)

Below is the DOM structure of the element:


1 <input type="text" name="email" value="" placeholder="E-Mail Address" id="input-email" class="form-control">

The standard XPath of the desired WebElement is //input[@name= ’email’]. Here is how the XPath is used with the findElement() method
to locate the element.
1 driver.findElement(By.xpath("//*[@id="input-email"]"));

XPath Contains: XPath similarly contains works like CSS Selector contains. It is extensively used on WebElements,
whose value changes dynamically. Consider an example where the value of the login changes after appending the
login text.
Here, XPath contains will be super-helpful in locating the desired WebElement.

Syntax:
1 //tagname[contains(@attribute, 'partial value of attribute')]

Below is the DOM structure of the element:


1 <input type="text" placeholder="Full Name*" name="name" value="" class="form-control sign-up-input-2 ">

Here is how the desired WebElement was located using the XPath contains locator in Selenium:
1 driver.findElement(By.xpath("//input[contains(@class, 'form-control')]"))

XPath Using AND and OR


The AND, and OR operators in the XPath selector in Selenium are used when locating a WebElement based on certain condition sets. In
the case of AND, both conditions should be true. On the other hand, either of the two conditions can be true for OR in operator XPath.

Syntax of OR operator in XPath:


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

Syntax of AND operator in XPath:


1 //input[@id='login_1' AND @name='login']
Start Free Testing -> (https://accounts.lambdatest.com/register)
Let’s locate the email address field’s element on the LambdaTest eCommerce Playground Account Login (https://ecommerce-
playground.lambdatest.io/index.php?route=account/login) page using the AND and OR operators.
(https://www.lambdatest.com)

Below is the DOM structure of the element:


1 <input type="text" name="email" value="" placeholder="E-Mail Address" id="input-email" class="form-control">

Here is how we used the OR operator with the XPath locator in Selenium:
1 driver.findElement(By.xpath("//input[@id=\"input-email\" or @name=\"email\"]"));

Here is how we used the AND operator with the XPath locator in Selenium:
1 driver.findElement(By.xpath(""//input[@id=\"input-email\" AND @name=\"email\"]"));

starts-with() Method in XPath


The starts-with() method in XPath offers functionalities similar to the CSS Selector in Selenium. It helps in locating elements that start
with a specified attribute value. The starts-with() method in XPath is majorly used for locating WebElements whose value changes on the
refresh of a page.

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

Shown below is the DOM structure for locating the Password field on the LambdaTest eCommerce Playground website’s Account Login
(https://ecommerce-playground.lambdatest.io/index.php?route=account/login) page:

Start Free Testing -> (https://accounts.lambdatest.com/register)


(https://www.lambdatest.com)

Below is the DOM structure of the element:


1 <input type="password" name="password" value="" placeholder="Password" id="input-password" class="form-control">

Here is how we locate the Password element using the starts-with() method with xpath in Selenium:
1 driver.findElement(By.xpath("//input[starts-with(@name,'pass')]"));

XPath Text

Text in the XPath locator in Selenium helps locate WebElements via XPath using exact text match. It can be used when elements have to
be located by looking into the tags containing certain text.

Syntax:
1 //div[text()='Logged In']

To demonstrate XPath text usage, we will locate the Submit button on the Auto Healing page
(https://www.lambdatest.com/selenium-playground/auto-healing) on the LambdaTest Selenium Playground website.

Start Free Testing -> (https://accounts.lambdatest.com/register)


(https://www.lambdatest.com)

Here is the DOM structure of the required WebElement:


1 <button type="submit" class="bg-black hover:bg-transparent hover:text-black border border-black text-white rounded focus:outline

Here is how we locate the Submit button element using the xpath text:
1 driver.findElement(By.xpath("//button[text()='Submit']"));

Both CSS Selector and XPath are helpful when running complex Selenium test automation scenarios. The choice between XPath and CSS
Selector purely depends on the scenario complexity and your convenience in locating WebElements using the corresponding locator.

When choosing, always look into the maintainability aspects of the locators, as that can make your job easier!

CSS Selector Locator in Selenium


CSS (https://www.lambdatest.com/blog/css3-tutorial/) (Cascading Style Sheets) is used to style web pages. At the same time,
CSS is also one of the widely-used ways to locate WebElements in the DOM.

The CSS Selector (https://www.lambdatest.com/blog/css-selectors/) in Selenium should be chosen if you cannot locate an
element using ID or Name locators. It can be chosen over the XPath locator.

Since multiple debates go around the corner for both of them, their usage may depend on the complexity of the scenario. However, most
people prefer using CSS Selectors since those are faster than XPath.

Here are the different ways in which QA engineers can make use of CSS Selectors in Selenium:

Tag and ID in CSS Selector


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

HTML tag: It provides the tag we wish to locate (e.g., input tag).
#: It is used to represent the ID attribute. Remember that when you wish to locate an element via ID through a CSS
Selector, it must have a hash sign on the same. For other attributes, we need not use the hash sign.
Startrepresents
Value of the ID attribute: This Free Testing
the->ID(https://accounts.lambdatest.com/register)
value we use to locate the element.
Syntax:

(https://www.lambdatest.com)
1 css=(Html tag )(#) (value of the ID attribute)

Example:

Below is the DOM part indicating the First Name field on the Register Account (https://ecommerce-
playground.lambdatest.io/index.php?route=account/register) page of the LambdaTest eCommerce Playground website.

1 <input type="text" name="firstname" value="" placeholder="First Name" id="input-firstname" class="form-control">

Here is how you can locate the required WebElement using the cssSelector:
1 driver.findElement(By.cssSelector("input#input-firstname"))

Tag and Class in CSS Selector


Apart from the syntax (or format) difference, the tag and class locator are identical to the ID locator. A dot (.) is used when denoting the
class attribute value rather than hash (#) in the case of class.

Syntax:
1 css=(HTML tag)(.)(Value of Class attribute)

Example:

Here is the DOM snapshot and the corresponding command to access the required WebElement using CSS Selector in Selenium for the
Login button on the Account Login (https://ecommerce-playground.lambdatest.io/index.php?route=account/login) page of
the LambdaTest eCommerce Playground website.

Start Free Testing -> (https://accounts.lambdatest.com/register)


(https://www.lambdatest.com)

1 <input type="submit" value="Login" class="btn btn-primary">

Tag and Attribute


The element can be located via tag name, and the corresponding attribute is defined using its value. The first one will be selected if
multiple elements have the same tag and attribute.

Syntax:
1 css=(HTML Page)[Attribute=Value]

Example:

Here is the DOM structure:


1 <input type="phone" placeholder="Phone*" name="phone" value="" class="form-control sign-up-input-2 ">

Here is how the WebElement – ‘phone’ can be located using the cssSelector in Selenium.
1 driver.findElement(By.cssSelector("input[name=\"phone\"]"))

Tag, Class, and Attribute


This locator is used with the class name and other attribute values.

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

Let’s locate the Submit button on the Input Form Demo (https://www.lambdatest.com/selenium-playground/input-form-demo)
page on the LambdaTest Selenium Playground website.

Start Free Testing -> (https://accounts.lambdatest.com/register)


(https://www.lambdatest.com)

Here is the DOM structure of the WebElement for the Submit button.
1 <button type="submit" class="bg-lambda-900 hover:bg-transparent hover:text-lambda-900 border border-lambda-900 text-white rounde

Here is how you can locate the Submit button:


1 driver.findElement(By.cssSelector("button.bg-lambda-900[type="submit"]"));

This combination can also be implied on ID. The only difference is to use a hash (#) rather than a dot (.) when using an ID attribute and
defining its ID value in place of the Class value.

Wild (*, ^ and $) in CSS for Classes


CSS Selector in Selenium helps in matching multiple strings through the use of multiple patterns like ^, $, *. Wildcard selectors in CSS are
used to select various elements simultaneously.

Here is how wild cards can be effectively used with the CSS Selector in Selenium:

Starts-With in CSS Selector


The starts-with helps locate elements when we try to match elements with a string that starts with a designated value.

Syntax:
1 css=(HTML tag)([attribute^=start of the string])

Example:

Here is the DOM structure for locating the WebElement:


1 <input type="email" name="email" value="" placeholder="Email" required="required" autofocus="autofocus" class="form-control mt

Here is how the CSS [attribute^=value] Selector is used for locating the desired WebElement:
1 driver.findElement(By.cssSelector("input[name^='em']"));

Ends-With in CSS Selector


This helps locate elements when we Free
Start try toTesting
match elements with a string that ends with a designated value.
-> (https://accounts.lambdatest.com/register)
Syntax:

(https://www.lambdatest.com)
1 css=(HTML tag)([attribute$=end of the string])

Example:

Here is the DOM structure of the element:


1 <input type="email" name="email" value="" placeholder="Email" required="required" autofocus="autofocus" class="form-control mt
2
3 </li>
4 </ul>

Here is how ends-with in CSS Selector is used for locating the required WebElement:
1 driver.findElement(By.cssSelector("input[name$='ail']"));

Contains in CSS Selector


This helps locate elements when we try to match elements with a string containing a designated value.

Syntax:
1 css=(HTML tag)([attribute*=partial string])

Example:
Here is the DOM structure to locate the element:
1 <input type="email" name="email" value="" placeholder="Email" required="required" autofocus="autofocus" class="form-control mt-3

Here is how contains in CSS Selector is used for locating the required WebElement:
1 driver.findElement(By.cssSelector("input[class*='control']"));

Child Elements in CSS Selector


With the use of child elements, we can locate elements inside other elements. Child elements in CSS Selector are particularly useful when
accessing data from a table, list of details, and more.

Example:

To demonstrate the use of child elements in CSS Selector, we will locate the menu links on the LambdaTest Selenium Playground home
page.

Start Free Testing -> (https://accounts.lambdatest.com/register)


(https://www.lambdatest.com)

Here is the DOM structure to locate the element:


1 <ul class="list-disc pl-10 pb-30 grid grid-cols-4 w-full gap-10 mt-30 smtablet:grid-cols-1"><li class="pt-10"><a href="https://w

To locate elements, the following syntax would be used:


1 Css= tagname.class name li:nth-of-child(index of the referenced child which in our case is 3)

Here is how you can get the blog link from the page:
1 driver.findElement(By.cssSelector(".container__selenium ul > li:nth-child(1) > a");

Similarly to access responsive we can use, last-child reference as below:


1 Css= .container__selenium ul li
2 driver.findElement(By.cssSelector(".container__selenium ul li:last-child");

Relative Locators in Selenium WebDriver


One of the major features of Selenium 4 is the introduction of relative locators. Relative locators in Selenium 4
(https://www.lambdatest.com/blog/selenium-4-relative-locator/) help you search for WebElements in relation to the other
elements.

For example, using toLeftOf Selenium 4 relative locator, WebElements to the left of a certain element can be easily located. This results in
a few findElement calls primarily used for locating elements on the page.

Start Free Testing -> (https://accounts.lambdatest.com/register)


(https://www.lambdatest.com)

The difference between Selenium 3 and Selenium 4 (https://www.lambdatest.com/blog/what-is-deprecated-in-


selenium4/) is a good starting point to know the immense potential the Selenium 4 framework offers. Here is a short gist of relative
locators in Selenium 4:

Locator Type Description Syntax (in Java)

above WebElement is above the specified element driver.findElement(with(By.tagName(“TagName”)).above(ElementName));

below WebElement is below the specified element driver.findElement(with(By.tagName(“TagName”)).below(ElementName));

toLeftOf WebElement is to the left of an element driver.findElement(with(By.tagName(“TagName”)).toLeftOf(ElementName));

toRightOf WebElement is to the right of an element driver.findElement(with(By.tagName(“TagName”)).toRightOf(ElementName));

near WebElement is within 50 pixels of an element driver.findElement(with(By.tagName(“TagName”)).near(ElementName));

Note
Automate your Selenium testing across 3000+ real environments.Try LambdaTest Today!
(https://accounts.lambdatest.com/register)

Demo: Relative Locators in Selenium WebDriver


To demonstrate the usage of relative locators in Selenium 4, we will locate the WebElements on the LambdaTest eCommerce
Playground (https://ecommerce-playground.lambdatest.io/index.php?
route=product/manufacturer/info&manufacturer_id=8) page. The following test scenario will be automated using the relative
locators in Selenium WebDriver. The tests will be run on the LambdaTest cloud grid on the latest version of Chrome browser on the
Windows 10 platform.

LambdaTest is an AI-powered test orchestration and execution platform that lets developers and testers perform automation testing
(https://www.lambdatest.com/automation-testing) at scale on an online browser farm
(https://www.lambdatest.com/online-browser-farm) of 3000+ real browsers and operating systems.

Start Free Testing -> (https://accounts.lambdatest.com/register)


Test Scenario
(https://www.lambdatest.com)
1. Locate the WebElement for the iMac product on the product page.
2. Locate the WebElement for the iMac product price displayed below the iMac product using the relative locator.
3. Locate the Apple Cinema 30 product, displayed to the right of the iMac product, using the toRightOf relative locator.
4. Locate the iPod Nano product displayed above the Apple Cinema 30 product using the above relative locator.
5. Locate the iPod Shuffle product displayed to the left of the iPod Nano product using the toLeftOf relative locator.
6. Perform assertions on every WebElement after locating the WebElement and getting its text.

(https://github.com/mfaisalkhatri/selenium-lambdatest-demo)

Start Free Testing -> (https://accounts.lambdatest.com/register)


(https://www.lambdatest.com)

The first unique WebElement on the page is located using the following method:
1 WebElement FirstElement = driver.findElement(By.Id("idvalue"));

Here is how the relative locator in Selenium 4 is used to locate the element below the element we searched earlier:
1 1driver.findElement(with(By.tagName("tagName")).below(FirstElement));

The next set of WebElements on the page is identified using the above, below, toLeftOf, and toRightOf relative locators in Selenium 4.

Here is the code snippet that showcases the usage of relative locators in Selenium 4:
1 public class LocatorTests {
2 WebDriver driver;
3 String username = System.getenv("LT_USERNAME") == null ? "LT_USERNAME" : System.getenv("LT_USERNAME");
4 String accesskey = System.getenv("LT_ACCESS_KEY") == null ? "LT_ACCESS_KEY" : System.getenv("LT_ACCESS_KEY");
5 String gridURL = "@hub.lambdatest.com/wd/hub";
6
7 @BeforeTest
8 public void setup() throws MalformedURLException {
9 ChromeOptions browserOptions = new ChromeOptions();
10 browserOptions.setPlatformName("Windows 10");
11 browserOptions.setBrowserVersion("122.0");
12 HashMap&lt;String, Object> ltOptions = new HashMap&lt;String, Object>();
13 ltOptions.put("project", "Selenium Locator Demo");
14 ltOptions.put("w3c", true);
15 ltOptions.put("plugin", "java-testNG");
16 ltOptions.put("build", "Demonstration: Selenium Locator Demo on LambdaTest");
17 browserOptions.setCapability("LT:Options", ltOptions);
18
19 driver = new ChromeDriver();
20 driver = new RemoteWebDriver(new URL("https://" + username + ":" + accesskey + gridURL), browserOptions);
21
22 }
23
24 @Test
25 public void testRelativeLocator() {
26
27 driver.get("https://ecommerce-playground.lambdatest.io/index.php?route=product/manufacturer/info&manufacturer_id=8");
28
29
30 WebElement iMac = driver.findElement(By.linkText("iMac"));
31 WebElement iMacPriceViaBelow = driver.findElement(with(By.cssSelector("div.price> span")).below(iMac));
32 assertEquals(iMacPriceViaBelow.getText(), "$170.00");
33
34 WebElement fetchToTheRight = driver findElement(with(By tagName("h4")) toRightOf(iMac));

Start Free Testing -> (https://accounts.lambdatest.com/register)


Code Walkthrough
(https://www.lambdatest.com)
As the tests will run on the LambdaTest cloud platform, we need to provide the LambdaTest Username and Access Key. These credentials
can be found on your LambdaTest Profile > Account Settings > Password & Security.

The credentials are confidential values that should not be hardcoded in the code. The following line of code will help set the Username
and Access Key using the environment variables. The gridURL helps connect the remote session to the LambdaTest cloud grid.

Next, we need to set the LambdaTest automation capabilities to set the platform, browser and its version, build name, test name, and
other mandatory options required for running the tests on the LambdaTest platform.

The LambdaTest Capabilities Generator (https://www.lambdatest.com/capabilities-generator/) helps in easily setting the


capabilities by selecting the desired options from the UI. It provides the auto-generated code that can be used directly in the code.

Start Free Testing -> (https://accounts.lambdatest.com/register)


(https://www.lambdatest.com)

The following lines of code sets the capabilities for running the test on Chrome browser version 122.0 on the Windows 10 platform.

ChromeOptions class is used as we need to run the tests on the Chrome browser. Similarly, if we need to run the tests on Edge browser,
we can use EdgeOptions and likewise for other browsers. Finally, a new instance of RemoteWebDriver
(https://www.lambdatest.com/blog/selenium-remotewebdriver/) is created by supplying the username, accesskey, and gridURL
with the browserOptions variables.

The @BeforeTest annotation in TestNG (https://www.lambdatest.com/blog/complete-guide-on-testng-annotations-for-


selenium-webdriver/) placed on the top of the setup() method will run this method before any of the tests, so the configuration for
running the test on the LambdaTest platform is set correctly.
Start Free Testing -> (https://accounts.lambdatest.com/register)
(https://www.lambdatest.com)

The testRelativeLocator() method will run the test by locating the WebElements using the below, toRightOf, above, and toLeftOf relative
locators, as discussed in the test scenarios.

After all the tests are run successfully, the driver session will be closed when the driver.quit() statement is invoked. This statement will be
called after each test as the @AfterTest annotation of TestNG has been used above the tearDown() method.

Test Execution
The following screenshot shows the output of the test execution performed using IntelliJ IDE:

Start Free Testing -> (https://accounts.lambdatest.com/register)


(https://www.lambdatest.com)

You can also use a combination of relative locators to locate the desired WebElement.
1 WebElement fetchwithmutipleRelative=driver.findElement(with(By.tagName("h4")).below(fetchviatoLeftOf).toRightOf(fetchviaabove));

The above code identifies an element below a given WebElement and to the right of the newly searched element.

Also, subscribe to the LambdaTest YouTube Channel (https://www.youtube.com/c/LambdaTest?sub_confirmation=1) and get


detailed tutorials around Selenium automation (https://www.lambdatest.com/selenium), Appium automation
(https://www.lambdatest.com/appium), and more.

Best Practices to Use Locators in Selenium WebDriver


The main challenge in writing test scripts (https://www.lambdatest.com/blog/how-to-write-test-cases-effectively/) lies in
locating the right identifier for the target element. Following certain best practices will ensure that the team uses strategy efficiently to
locate elements used in automation scripts.

Use a unique ID for element identification: The first and foremost reason to use a unique ID is that it makes it simpler
to identify a particular element. If you have two elements with the same ID, it becomes difficult to determine which
element you want to use in your scripts. This may lead to issues such as selecting an incorrect or non-existent
element. To avoid this, always assign a unique ID for each element you wish to utilize in your web application to avoid
this.
Avoid using IDs that change locations: Selenium WebDriver locators depend on IDs because they match the ID
attribute assigned by browsers, which is used as identifiers for each HTML tag on your page. The value of these IDs
remains static as long as the browser window remains open. However, if you close and reopen the browser, these
Start
values change their position dueFree Testing
to the -> (https://accounts.lambdatest.com/register)
fact that they now identify different objects on the page.
For example, if the locator is dependent on a single entity like class, name, id, etc., which, if changed, can be repaired, but complex
locators like By.XPath(“//div[@class=”class-form_6180″]/div[5]/h3”) may lead to frequent breakage if any of the div or the class name
(https://www.lambdatest.com)
changes.

So, while using locators in Selenium WebDriver, do not locate elements that depend on auto-generated values. This is one of the key
rules that one needs to keep in mind about locators in Selenium WebDriver for writing better automation code
(https://www.lambdatest.com/blog/8-actionable-insights-to-write-better-automation-code/).

Keep your locators short: Your locator should always identify the target element you want to click or locate, not other
elements on the same page. The benefit of this is that you’re reducing the chance of your script breaking because the
number of elements on a page has changed (and thus, where they appear in the HTML code). Also, if your locator is
short, it’s easier to see if it’s affecting more than one element.
Secondly, if you are trying to look out for multiple matches (using findElements()), ensure it matches all the desired elements you are
looking for.

Avoid elements that depend on auto-generated values: If you are using locators such as ID, CSS, and XPath,
Selenium WebDriver provides a way to navigate to elements through the browser’s address bar.
This is accomplished using the locateElement() or locateElementBy*() methods. You can navigate to any element on the page using the
browser’s address bar, locator parameters, and values, as well as this method. However, if you use IDs (e.g., “id=”tooltip””) as locators,
it might not work quite as you expect. This is because IDs are auto-generated and do not always change when we expect them to.

As a best practice, use locators such as CSS and XPath instead of IDs, as they never change their value. The second thing you should
do is watch those values after each run. So, if we want to locate an element with an ID of the tooltip using the browser’s address bar,
we should run and watch the values of those IDs to identify whether they are auto-generated.

Don’t use XPath or CSS Selector provided by the developer tools: Choosing locators in Selenium is an important step,
especially when you are new to it. There are many tips and tricks available on the web regarding this topic. However,
most suggest using XPath or CSS Selectors provided by the browser developer tools.
However, if you use XPath or CSS Selectors provided by the browser developer tools, your tests will not work if the source code
changes. To have stable tests, you should use locators independent of HTML structure.

Avoid using the locators that change dynamically on page refresh: While working on some websites, it can be
observed that the locators, such as ID or class name, change dynamically on page load or refresh. It should be noted
that in such situations, the ever-changing locators, i,e. IDs and class names should not be used.
Locators such as CSS Selector or XPath should be used here to avoid test flakiness (https://www.lambdatest.com/learning-
hub/flaky-test). Using these locators can help in creating more robust test scripts.

Avoid using XPaths heavily in the project: Many testers blindly keep on using the XPaths heavily in the project.
Testers make the mistake of adding test scripts containing XPath to locate the WebElement, which internally calls the
ID locator itself.
Use explicit waits: Explicit waits in Selenium WebDriver (https://www.lambdatest.com/blog/types-of-waits-in-
selenium/) should ensure that the WebElement is present and visible before the automated tests interact with that
WebElement. This can help in avoiding test flakiness.
Moreover, you can also leverage the SmartWait feature by LambdaTest as well. LambdaTest SmartWait executes a series of
actionability checks on webpage elements before executing any actions. These checks include verifying elements for visibility and
intractability to ensure they are ready for actions like clicking or typing.
Start Free Testing -> (https://accounts.lambdatest.com/register)
(https://www.lambdatest.com)

Conclusion
With this, we come to the end of the tutorial on Selenium locators. In this tutorial on locators in Selenium WebDriver, we first looked at
different ways of locating WebElements in DOM. We also looked at various locators and relative locators used in Selenium and ways to
locate elements using the ID, Name, Class, and attribute selectors.

Selenium locators can be used as a handy resource when you are performing Selenium automation testing. Now that you have learned
how to use locators and relative locators in Selenium WebDriver, you should be able to work with locators effectively. Hope this tutorial
has helped you learn everything there is to know about using locators in the Selenium WebDriver.

Frequently Asked Questions (FAQs)

What are the 8 locators in Selenium?


Selenium supports eight different locators for finding elements: ID, Name, className, tagName,
linkText, partialLinkText, CSS Selector, and XPath.

Which is the best locator in Selenium WebDriver?


IDs are the most reliable locator option in web design in that they are guaranteed to be unique on the
page by W3C standards. You can’t have two elements with the same ID within one page.

Start Free Testing -> (https://accounts.lambdatest.com/register)


Is XPath a locator in Selenium?
(https://www.lambdatest.com)

XPath is used to locate elements on a web page using the HTML Document Object Model (DOM)
structure.

What are the criteria for using locators?


Here are the criteria for choosing the locators:
Must match the desired element.
Must not match any other element.
Avoid information that can change.
Depend on the minimal required information.

How do you define locators?


Locators provide a way to access an HTML element from a web page. In Selenium, locators can
perform actions on the text boxes, links, checkboxes, and other WebElements. They are necessary for
us to explore and manipulate a website by its components.

Is DOM a locator in Selenium?


No, DOM is the underlying mechanism allowing Selenium to locate elements using various strategies.

What is the difference between locator and


WebElement?
A WebElement is essentially an HTML element on a web page, whereas a locator is a way to find and
locate the WebElement on the web page. A WebElement can be a textbox, checkbox, dropdown box,
Start Free Testing -> (https://accounts.lambdatest.com/register)
label, header, title, button, etc., on the web page.
(https://www.lambdatest.com)

Author’s Profile

(https://www.lambdatest.com/blog/author/mfaisalkhatri/)

Faisal Khatri
Faisal is a Software Testing Professional having 14+ years of experience in automation as well as manual testing. He is a QA, freelancer,
blogger and open source contributor. He loves learning new tools and technologies and sharing his experience by writing blogs.

Blogs: 39 (https://twitt
(https://www.linked

Got Questions? Drop them on LambdaTest Community.

Start Free Testing -> (https://accounts.lambdatest.com/register)


(https://www.lambdatest.com)

Start Free Testing -> (https://accounts.lambdatest.com/register)


(https://www.lambdatest.com)

Related Articles

Start Free Testing -> (https://accounts.lambdatest.com/register)


(https://www.lambdatest.com)

(https://www.lambdatest.com/blog/top-selenium-webdriver-commands-in-nunit-for-test-automation/)

28 Top Selenium WebDriver Commands in NUnit (https://www.lambdatest.com/blog/top-selenium-


webdriver-commands-in-nunit-for-test-automation/)

Himanshu Sheth
January 30, 2025

(https://www.lambdatest.com/blog/author/hjsblogger/)

228011 Views
10 Min Read

Automation (https://www.lambdatest.com/blog/category/automation/) | Selenium C# (https://www.lambdatest.com/blog/category/selenium-c/) | Selenium


Tutorial (https://www.lambdatest.com/blog/category/selenium-tutorial/) | Tutorial (https://www.lambdatest.com/blog/category/tutorial/) |
Start Free Testing -> (https://accounts.lambdatest.com/register)
(https://www.lambdatest.com)

(https://www.lambdatest.com/blog/css-gpu-acceleration/)

Boosting Web Performance With CSS GPU Acceleration (https://www.lambdatest.com/blog/css-gpu-


acceleration/)

Mbaziira Ronald
January 22, 2025

(https://www.lambdatest.com/blog/author/mbaziira/)

74754 Views
18 Min Read

Web Development (https://www.lambdatest.com/blog/category/web-development/) | LambdaTest Experiments


(https://www.lambdatest.com/blog/category/lambdatest-experiments/) | Tutorial (https://www.lambdatest.com/blog/category/tutorial/) |
Start Free Testing -> (https://accounts.lambdatest.com/register)
(https://www.lambdatest.com)

(https://www.lambdatest.com/blog/css-custom-fonts/)

How to Use CSS Custom Fonts Effectively (https://www.lambdatest.com/blog/css-custom-fonts/)

Anurag Gharat
January 16, 2025

(https://www.lambdatest.com/blog/author/anuraggharat/)

89871 Views
19 Min Read

Start Free Testing -> (https://accounts.lambdatest.com/register)


Web Development (https://www.lambdatest.com/blog/category/web-development/) | Tutorial (https://www.lambdatest.com/blog/category/tutorial/) | Web
Design (https://www.lambdatest.com/blog/category/web-design/) |
(https://www.lambdatest.com)

(https://www.lambdatest.com/blog/python-unittest-mock/)

Getting Started With Python unittest.mock Library (https://www.lambdatest.com/blog/python-


unittest-mock/)

Ini Arthur
January 15, 2025

(https://www.lambdatest.com/blog/author/ginjardev/)

100580 Views
20 Min Read Start Free Testing -> (https://accounts.lambdatest.com/register)
Selenium Python (https://www.lambdatest.com/blog/category/selenium-python/) | Automation (https://www.lambdatest.com/blog/category/automation/) |
Tutorial (https://www.lambdatest.com/blog/category/tutorial/) |
(https://www.lambdatest.com)

(https://www.lambdatest.com/blog/robot-framework-tutorial/)

A Step-by-Step Robot Framework Tutorial (https://www.lambdatest.com/blog/robot-framework-


tutorial/)

Himanshu Sheth
January 6, 2025

(https://www.lambdatest.com/blog/author/hjsblogger/)

233660 Views
10 Min Read Start Free Testing -> (https://accounts.lambdatest.com/register)
Selenium Python (https://www.lambdatest.com/blog/category/selenium-python/) | Robot Framework (https://www.lambdatest.com/blog/category/robot-
framework/) | Tutorial (https://www.lambdatest.com/blog/category/tutorial/) |
(https://www.lambdatest.com)

(https://www.lambdatest.com/blog/selenium-cypress-canvas-automation/)

How to Use Selenium and Cypress for Canvas Automation


(https://www.lambdatest.com/blog/selenium-cypress-canvas-automation/)

Himanshu Sheth

(https://www.lambdatest.com/blog/author/hjsblogger/)

161950 Views
29 Min Read Start Free Testing -> (https://accounts.lambdatest.com/register)
Selenium Tutorial (https://www.lambdatest.com/blog/category/selenium-tutorial/) | Automation (https://www.lambdatest.com/blog/category/automation/) |
Cypress Testing (https://www.lambdatest.com/blog/category/cypress-testing/) | Tutorial (https://www.lambdatest.com/blog/category/tutorial/) |
(https://www.lambdatest.com)

Try LambdaTest Now !!


Get 100 minutes of automation test minutes FREE!!

(https://accounts.lambdatest.com/login/google)
Start free with Start free with Email
Google (https://accounts.lambdatest.com/register)

Products & Features Start Free Testing -> (https://accounts.lambdatest.com/register)


Automation Testing Cloud Cross Browser Testing Real Device Cloud
(https://www.lambdatest.com/automation- (https://www.lambdatest.com/cross-
(https://www.lambdatest.com/real-
(https://www.lambdatest.com)
cloud) KaneAI browser-testing) device-cloud)
- (https://www.lambdatest.com/kane-
Testing ai)
Agent
Mobile App Testing AI-Powered Testing Performance Testing
(https://www.lambdatest.com/mobile-
(https://www.lambdatest.com/ai- HyperExecute (https://www.lambdatest.com/performance-
app-testing) testing) (https://www.lambdatest.com/hyperexecute)
testing)
LT Browser LT Debug Local Page Testing Automated Screenshots
(https://www.lambdatest.com/lt- (https://www.lambdatest.com/lt- (https://www.lambdatest.com/local-
(https://www.lambdatest.com/automated-
browser) debug) page-testing) screenshot)
Geo-Location Testing Accessibility Testing Responsive Testing Localization Testing
(https://www.lambdatest.com/geolocation-
(https://www.lambdatest.com/accessibility-
(https://www.lambdatest.com/responsive-
(https://www.lambdatest.com/localization-
testing) testing) test-online) testing)
Visual Regression Testing Test Analytics
(https://www.lambdatest.com/visual-
Integrations (https://www.lambdatest.com/test-
regression-testing) (https://www.lambdatest.com/integrations)
analytics) Professional (https://www.lambdatest.com/profession
Services services)

Test on

List of Browsers Internet Explorer Firefox


(https://www.lambdatest.com/list-(https://www.lambdatest.com/test-
(https://www.lambdatest.com/test-
iPhone (https://www.lambdatest.com/test-
of-browsers) on-internet-explorer-browsers) on-firefox-browsers)
16 on-iphone-16)
Chrome Safari Browser Online Microsoft Edge Opera
(https://www.lambdatest.com/test-
(https://www.lambdatest.com/test-
(https://www.lambdatest.com/test-
(https://www.lambdatest.com/test-
on-chrome-browsers) on-safari-browsers) on-edge-browsers) on-opera-browsers)
Yandex Mac OS Mobile Devices iOS Simulator
(https://www.lambdatest.com/test-
(https://www.lambdatest.com/test-
(https://www.lambdatest.com/test-
(https://www.lambdatest.com/test-
on-yandex-browsers) on-macos-browsers) on-mobile-devices) on-ios-devices)
Android Emulator Browser Emulator
(https://www.lambdatest.com/android-
(https://www.lambdatest.com/browser-
emulator-online) emulator-online)

Browser Automation

Selenium Testing Selenium Grid Cypress Testing Playwright Testing


(https://www.lambdatest.com/selenium-
(https://www.lambdatest.com/selenium-
(https://www.lambdatest.com/cypress-
(https://www.lambdatest.com/playwright-
automation) grid-online) testing) testing)
Puppeteer Testing Taiko Testing
(https://www.lambdatest.com/puppeteer-
(https://www.lambdatest.com/taiko-
testing) automation)

Mobile App Automation

Appium Testing Espresso Testing XCUITest Testing


(https://www.lambdatest.com/appium-
(https://www.lambdatest.com/espresso-
(https://www.lambdatest.com/xcuitest-
mobile-testing) automation-testing) app-testing)

Resources

Blogs Community Certifications


TestMu (https://www.lambdatest.com/blog/)
(https://community.lambdatest.com)
(https://www.lambdatest.com/certifications/)
(https://www.lambdatest.com/testmuconf-
2025
2025)
Conference
Product Updates
(https://www.lambdatest.com/blog/category/lambdatest-
Newsletter Webinars Videos
updates/) (https://www.lambdatest.com/newsletter/)
(https://www.lambdatest.com/webinar/)
(https://www.lambdatest.com/video/)
Start Free Testing -> (https://accounts.lambdatest.com/register)
FAQ Web Technologies Automation Testing Advisor Software Testing [Glossary]
(https://www.lambdatest.com/support-
(https://www.lambdatest.com/web-
(https://www.lambdatest.com/automation-
(https://www.lambdatest.com/learning-
(https://www.lambdatest.com)
faq) technologies) testing-advisor) hub/glossary)
Free Online Tools Mobile Testing Advisor
(https://www.lambdatest.com/free-
(https://www.lambdatest.com/mobile-
Sitemap Status
online-tools) testing-advisor/) (https://www.lambdatest.com/sitemap.xml)
(https://status.lambdatest.io)

Company

About Us Careers Customers Press


(https://www.lambdatest.com/about)
(https://www.lambdatest.com/career)
(https://www.lambdatest.com/customers/)
(https://www.lambdatest.com/press/)
Reviews Community & Support Partners
Achievements (https://www.lambdatest.com/achievements)
(https://www.lambdatest.com/reviews)
(https://www.lambdatest.com/community)
(https://www.lambdatest.com/partners/)
Open Source Write for Us Become an Affiliate Terms of service
(https://www.lambdatest.com/open-
(https://www.lambdatest.com/lambdatest-
(https://www.lambdatest.com/affiliate-
(https://www.lambdatest.com/legal/terms-
source) write-for-us) program-partnership) of-service)
Contact Us
Privacy Policy Trust Team (https://www.lambdatest.com/contact-
(https://www.lambdatest.com/legal/privacy)
(https://www.lambdatest.com/trust)
(https://www.lambdatest.com/team)
us)

Learning Hub

Cypress Tutorial
Selenium Tutorial (https://www.lambdatest.com/learning-
Playwright Tutorial Appium Tutorial
(https://www.lambdatest.com/selenium)
hub/cypress-tutorial) (https://www.lambdatest.com/playwright)
(https://www.lambdatest.com/appium)
More Learning Hubs
Jest Tutorial (https://www.lambdatest.com/learning-
(https://www.lambdatest.com/jest)
hub)

What’s New

Changelog
(https://changelog.lambdatest.com)

Spartans Future iPhone (https://www.lambdatest.com/test-


Test on
(https://www.lambdatest.com/spartans-
Summit of QA (https://www.lambdatest.com/future-of-quality-assurance-survey?
16 on-iphone-16) Samsung
summit-2025) (https://www.lambdatest.com/test-
2025 Survey utm_source=navbar_CTA&utm_medium=organic&utm_campaign=dec_06&utm_term=sk&utm_content=survey_report)
Galaxy
on-samsung-galaxy-s24)
Report S24
Series
December'24 Updates CSS GPU Acceleration [Blog]
(https://www.lambdatest.com/blog/december-
Coding Jag - Issue 227 Transavia [Case Study] (https://www.lambdatest.com/blog/css-
2024-updates/) (https://www.lambdatest.com/newsletter/editions/issue227)
(https://www.lambdatest.com/customers/transavia)
gpu-acceleration/)
Value Stream Mapping [Hub] Espresso 101 [Certification]
(https://www.lambdatest.com/learning-
(https://www.lambdatest.com/certifications/espresso-
hub/value-stream-mapping) 101)

Deliver unparalleled digital experience with our Next-Gen, AI-powered testing cloud platform. Ensure exceptional user experience across all
devices and browsers.

(https://accounts.lambdatest.com/login/google)
Start free with Google Start free with Email (https://accounts.lambdatest.com/register)

Start Free Testing -> (https://accounts.lambdatest.com/register)


(https://www.lambdatest.com)

LambdaTest is #1 choice for SMBs and Enterprises across the globe.

© 2025 LambdaTest. All rights reserved

Cross Browser Testing Cloud Built With For Testers

Start Free Testing -> (https://accounts.lambdatest.com/register)

You might also like