Scribd
Upload
67 views18 pages

Selenium Locators

Selenium locators are used to identify web elements and can be classified into different types. The main locator types include ID, name, link text, partial link text, tag name, CSS selector, XPath, and are used with methods like findElement. CSS selector and XPath allow locating elements based on attributes, classes, IDs. XPath supports absolute and relative paths, and axes like parent, preceding sibling. Locators make it possible to automate interactions with elements on a web page.

Uploaded by

San
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
67 views18 pages

Selenium Locators

Selenium locators are used to identify web elements and can be classified into different types. The main locator types include ID, name, link text, partial link text, tag name, CSS selector, XPath, and are used with methods like findElement. CSS selector and XPath allow locating elements based on attributes, classes, IDs. XPath supports absolute and relative paths, and axes like parent, preceding sibling. Locators make it possible to automate interactions with elements on a web page.

Uploaded by

San
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

All Selenium Locators

Created By: Japneet Sachdeva


What are locators?
Selenium is a open source library/toolset for automating web browser interactions
within a web application.

Now these interactions can be created using Locators. These locators are used to
identify webElements within a web page. These elements can vary from images,
buttons, dropDowns, calendars, input fields etc.

Now what are different types of locators in Selenium?

LinkedIn: Japneet Sachdeva


ID & Name locator
1) ID - A webElement having unique ID attribute, then it can be used to identify it.

Example - driver.findElement(By.id("depart-from"));

2) A webElement having unique NAME attribute, but in most cases multiple


elements can have same name, so it’s less reliable.

Example - driver.findElement(By.name("signInButton"));

LinkedIn: Japneet Sachdeva


LinkText & Partial LinkText
1) LinkText : Accessing links using their exact link text, This makes easy to create
such locators, but these are flaky because can fail when text changes for links
used.

Example: driver.findElement(By.linkText("click here")).click();

2) Partial LinkText : Accessing links using a portion of their link text is done using
the By.partialLinkText() method.

Example: driver.findElement(By.partialLinkText("here")).click();

LinkedIn: Japneet Sachdeva


TagName
TagName : Using the HTML tagname directly to identify the webElement. It makes
easy to implement but can be challenging to find a unique tagname each time.

Example: driver.findElement(By.tagName (“htmltagname”));

// Click on the textbox and send value

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

LinkedIn: Japneet Sachdeva


CSS selector (Cascading Style Sheets)
CSS : Used to identify webElements based on different properties such as:

1) ID
2) Class
3) Attribute

P.T.O

LinkedIn: Japneet Sachdeva


CSS selector (Cascading Style Sheets)
1) CSS selector finding webElements using ID
Majorly there are 3 ways to find elements using ID in CSS selectors:-
● We can use “#” notation to select the “id” attribute of an element
● We can use tagName and “id” attribute of an element
● We can use syntax like - <tagname>[id=’<id value>’]
Examples:
1. driver.findElement(By.cssSelector("a#offers")) // Using tagName & ID
2. driver.findElement(By.cssSelector("#offers")); // Using only ID
3. driver.findElement(By.cssSelector("a[id='offers']")); // Using a fixed syntax

LinkedIn: Japneet Sachdeva


CSS selector (Cascading Style Sheets)
2) CSS selector finding webElements using ClassName

Majorly there are 3 ways to find elements using ClassName in CSS selectors:-

● We can use “.” notation to select the “class” attribute of an element


● We can use tagName and “id” attribute of an element
● We can use syntax like - <tagname>[class=’<class value>’]

Examples:

1. driver.findElement(By.cssSelector("a.Navbar_logo")); // Using tagName & className


2. driver.findElement(By.cssSelector(".Navbar_logo"));; // Using only className
3. driver.findElement(By.cssSelector("a[class='Navbar_logo']")); // Using a fixed syntax

LinkedIn: Japneet Sachdeva


CSS selector (Cascading Style Sheets)
3) CSS selector finding webElements using Attribute

Majorly there are 1 way to find elements using Attribute in CSS selectors:-

● driver.findElement(By.cssSelector(“<tagname>[href=’<href value>’]”));

Examples:

1. driver.findElement(By.cssSelector("a[href='/login']"));

Note: Other attributes like placeholder, text etc. can also be used!

LinkedIn: Japneet Sachdeva


XPath (XML Path Language)
It enables testers to navigate any DOM XML structure, which can be used on
both HTML and XML documents
Majorly there are 2 ways to create XPath:
● Absolute XPath
● Relative XPath
Note 1: CSS selectors are considered to be faster to work as compared to XPath,
but I didn’t find any such issues & I have primarily been using XPath selectors.
Note 2: XPath selectors are work in both forward and backward tracing of elements
in DOM.

LinkedIn: Japneet Sachdeva


XPath (XML Path Language)
It enables testers to navigate any DOM XML structure, which can be used on
both HTML and XML documents
Majorly there are 2 ways to create XPath:
● Absolute XPath
● Relative XPath
Note 1: CSS selectors are considered to be faster to work as compared to XPath,
but I didn’t find any such issues & I have primarily been using XPath selectors.
Note 2: XPath selectors are work in both forward and backward tracing of elements
in DOM.

LinkedIn: Japneet Sachdeva


Absolute XPath
Absolute XPath : Begins from the root of the HTML document and specifies the
complete path to the element. It’s not as flexible and can break if the page structure
changes.

Example: html/body/form/input[3]

driver.findElement(By.xpath("//body")).sendKeys(Keys.SPACE);

LinkedIn: Japneet Sachdeva


Relative XPath
Relative XPath : Starts from a specific element and navigates through the DOM
hierarchy to locate the desired element. It’s much easier to customise and use.
Double slash is used to create relative xpath.

Example: //form/input[3]

driver.findElement(By.xpath("//body")).sendKeys(Keys.SPACE);

P.T.O

LinkedIn: Japneet Sachdeva


Understanding XPath Creation
● Single slash ‘/’ anywhere in xpath signifies to look for the element immediately
inside the parent element.
● Double slash ‘//’ signifies to look for any child or nested-‐ child element inside
the parent element.
● Syntax: //tag[@attribute='value']

LinkedIn: Japneet Sachdeva


Understanding XPath Creation
1) Using Text of the element to build xpath:

Syntax: //div[@class='homepage-‐hero']//a[text()='Enroll now']

2) Using Contains Keyword to find the elements:

Syntax: //tag[contains(attribute, ‘value’)]

3) Using Starts-‐With Keyword to find the elements:

Syntax: //tag[starts-‐with(attribute, ‘value’)]

LinkedIn: Japneet Sachdeva


Understanding XPath Creation
1) Parent Keyword - used to retrieve the parent node of the current node selected
Syntax: xpath-‐to-‐some-‐element//parent::<tag>
Example: //[@id='rt-feature']//parent::div
2) Preceding Sibling Keyword - will return the immediate element of the particular element
Syntax: xpath-‐to-‐some-‐element//preceding-‐sibling::<tag>
Example: //[@type='submit']//preceding::input
3) Following Sibling Keyword - will return the preceding element of the particular element
Syntax: xpath-‐to-‐some-‐element//following-‐sibling::<tag>
Example: //[@type='text']//following::input

LinkedIn: Japneet Sachdeva


Understanding XPath Creation
4) Descendant Keyword - will return the descendant elements of the particular
element. It returns all the webElements which are present with that particular
selector.

Syntax: xpath-‐to-‐some-‐element//descendant::<tag>

Example: //[@id='rt-feature']//descendant::a

Note: Above 4 mentioned types of XPath are also called XPath Axes.

LinkedIn: Japneet Sachdeva


Completed with all Locators
I hope this list of Locators are useful for your learning journey.

If you need more such content, than do follow me on:

@LinkedIn - Japneet Sachdeva = link

@YouTube - Japneet Sachdeva = link

@Medium - Japneet Sachdeva = link

Happy Learning & Happy New Year!!

LinkedIn: Japneet Sachdeva

You might also like