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
