Locators in selenium

soumya k
Sep 1
4 min read

Locators in Selenium used to identify and interact with specific web elements on a web page within the Document Object Model (DOM). In webpage we see various types of elements, we have to locate them uniquely. if there is two to three input boxes, we need to locate exact location of input box and perform action on that, these things can be possible only through locators.

Webpages are mostly designed by using Html.

Types of locators:

1.Basic locators: Basic locators are supported by selenium through methods, when we use by class, we find all elements by class itself.

We can find it in Html itself.

2.Customized locators: customized locators are the locators which can be generate or create on our own.

We cannot find it in Html.

Properties and attributes which are available for the element by using those we can generate our own selectors i.e. X-path, CSS selectors.

We can use any locators as pre our comfort but sometimes the attributes will keep changing i.e. id, name in that case locators won't work, then we will use CSS selectors, X-path locators.

Few Examples of Basic Locators:

By Id :-

Example:

driver.findElement(By.id (" username")).sendKeys("standard user");

for below Elements

By name:

Example:

driver.findElement(By.name("user-name")).sendKeys("standard_user");

Link text: linked text are the texts along with the link.

Example:

driver.findElement(By.linkText("Register")).click();

Partial Link text: we don’t need to pass the full text, instead of Register we can pass partially like Reg, Regis etc.…

Example:

driver.findElement(By.partialLinkText("Regis")).click();

Tag Name and class Name: there will be multiple Tag names and classes same for group of elements. To ger group of web elements we use this.

CSS Selector:

Cascading slide sheets: we have different types of combinations.we can customize and write on own. Tag is optional.

1.tag id

2.tag class

3.tag attribute

4.tag class attribute

1.tag# id:

Example

driver.findElement(By.cssSelector("input#user-name")).sendKeys("standard_user");

"input" is the tag name and "# "represents id.

2.tag. class name:

driver.findElement(By.cssSelector("div.form_group")).sendKeys("standard_user");

"div" is a tag and “. ” represents class

3.tag attribute: tag[attribute="value"]

Tag is input,attribute is placeholder and value is Password

driver.findElement(By.cssSelector("input[placeholder='Password']")).sendKeys("standard_user");

4.tag class,id attribute:- tag#id[attribute="value"]: to differentiate web elements and over come duplicate elements we use this.

driver.findElement(By.cssSelector(" input#user-name[data-test='username']")).sendKeys("standard_user");

X-Path: it is derived from the xml path it works based on the xml derived from the xml language.

x-path represents an address of the element. It works based on DOM (document object model).

Types of x-paths:

1.Absolute x-path(full x-path): it navigates from top node of the Dom to element. it will be very long and is not preferred because if something added in middle or removed it doesn’t work.

Exp: html/body/header/div/div/div[2]/div/input

2.Relative x-path(partial x-path): relative xpath directly jump to element by using attributes. It is the shortcut way and easy to use.

//tag name[@attribute=”value”]

Differences between Absolute x-path and Relative x-path:

Absolute x-path starts with single slash /, represents root node
Relative x-path starts with double slash //.
Absolute x-path do not use attributes
Relative x-path works with attributes
Absolute x-path traverse through each node till it finds element
Relative x-path directly jump and find the element by using attribute.

x-path with single attribute:

Example: //*[@placeholder='Password']

driver.findElement(By.xpath("//*[@placeholder='Password']")).sendKeys("standard_user");

*represents all tags instead we can write tag name also

x-path with multiple attributes:- we can check with multiple attributes to avoid duplication

x-path with “and” operator:-it should match with both attributes

driver.findElement(By.xpath("//*[@placeholder='Password'and@data-test='password']")).sendKeys("standard_user");

x-path with “or” operator:- it should match with atleast one attribute

driver.findElement(By.xpath("//*[@placeholder='Password'or@data-test='password']")).sendKeys("standard_user");

X-path with inner text-text():

*represents all tag instead with write tag name also

driver.findElement(By.xpath("//*[text()=\"Sauce Labs Backpack\"]")).sendKeys("standard_user");

x-path with contain(): we can write only starting few letters of the value of the attribute

driver.findElement(By.xpath("//*[contains(@placeholder,'Usern')]")).sendKeys("standard_user");

Differences between CSS and x-path:

CSS navigates from top to bottom in the DOM file that means only in one direction.

x-path navigates from all directions that means from top to bottom and bottom to top.

x-path axes:

By using x-path axes we can navigate Dom from top to bottom and bottom to top. we can find any elements without attributes or anything from element. we locate by Neighbour elements. if the element doesn't have any attributes also, we can locate it by the help of Neighbour elements

self-node: the node from where we are starting (starting node).

1- ancestor

6-self

4-parent

7,9,10-child

8-descendant(child of child)

5,11- siblings (same parent)

5 is the preceding sibling(before)

11 is the following sibling(next)

1.Locating parent element: to locate the parent element from child if the parent doesn't have attributes we use these ways.

1.//div[@id='CardInstanceHEaET5bMiQalgDxqbgoMiw']/parent::form

2.//div[@id='CardInstanceHEaET5bMiQalgDxqbgoMiw']/parent::*

3.//div[@id='CardInstanceHEaET5bMiQalgDxqbgoMiw']/..

2.locating child element: if the child doesn't have elements we locate it from parent to child.

1.//div[@id='a-page']/child::script

2.//div[@id='a-page']/script

3.locating grand children: if there is not elements to locate in the parent also we locate parent of parent from there will locate to child of child that is grand children.

1.//div[@id='a-page']/descendant::script

2.//div[@id='a-page']//script