Locators for Selenium WebDriver (XPath, CSS, ID, LinkText, Name etc)

• Selenium WebDriver uses locators to locate web elements on web pages. Choice of good locator strategy ensures that tests are faster, reliable and needs lower maintenance.

Different types of Locators:

• Selenium WebDriver supports 8 type of locators. We will discuss these locators one by one :

ID Locator:

• ID is considered as the most effective and efficient way to locate web elements on a web page. ID is supposed to be a unique attribute which makes it reliable and easily identifiable. ID locators should always be the first choice for locating a web element, even in case of multiple unique attributes available. In case of  multiple elements having the same ID attribute, then the first element on the page will got selected.
• Suppose we want to login to a Website after entering username and password.

DOM:

UserName:  <input id="txtUsername" name="Username" type="text" />
Password:  <input id="txtPassword" autocomplete="off" name="Password" type="password" />

• For Username field, id=txtUsername & for Password field, id=txtPassword.
• We can locate an element with the help of ID attribute using below method:

WebElement usernameElement = driver.findElement(By.id("txtUsername"));
WebElement passwordElement = driver.findElement(By.id("txtPassword"));

• However, not all the web elements have id attribute, some elements can also have dynamically generated Ids. We may need to choose an alternate locator strategy in order to identify an element in these cases.

Name Locator:

• If no Id is present, then we should go for name attribute. In case of  multiple elements having the same name attribute, then the first element on the page will got selected.

DOM:

UserName:  <input id="txtUsername" name="Username" type="text" />
Password:  <input id="txtPassword" autocomplete="off" name="Password" type="password" />

• For Username field, name= “Username” & for Password field, name=”Password“
• We can locate an element with the help of NAME attribute using below method:

WebElement usernameElement = driver.findElement(By.name("Username"));
WebElement passwordElement = driver.findElement(By.name("Password"));

Class Name Locator:

• Class Name locator helps in locating elements using class attribute. Web page can have multiple elements with the same name attribute. It is better to use ClassName locator to identify an element in that scenario, but ClassName attribute should be unique. In case of  multiple elements having the same class name attribute, then the first element on the page got selected.

Example:

WebElement usernameElement = driver.findElement(By.className("DemoClass"));

Link Text Locator:

Links present on a web page can be identified and accessed using an exact or partial match of their link text. Link Text locator is used to access links using their exact link text match. However, if there are multiple links having the same link text, this method will only access the first one.

Example:

<a href="https://makeinjava.com">Downloads</a/>

 driver.findElement(By.linkText("Downloads")).click()

Partial Link Text Locator:

Links present on a web page can be identified and accessed using an exact or partial match of their link text. Partial Link Text locator is used to access links using portion of their link text. However, if there are multiple links having the same partial link text, this method will only access the first one.

Example:

<a href="https://makeinjava.com">Downloads</a/>

 driver.findElement(By.partialLinkText("Downloa")).click()

Tag Name Locator:

• Tag Name locator is used to find the elements matching the specified Tag Name. In the below code snippet,

  driver.findElements(By.tagName("a"))

  will return us the list of all the elements contains anchor (@) tag. In next steps, we are printing the list of all the links available on the GOOGLE  page.

Example:

driver.get("http://www.google.com");
 List  list = driver.findElements(By.tagName("a"));
 System.out.println("Count of links:"+list.size());
 for(int i = 0; i < list.size(); i++){
 System.out.println(list.get(i).getText());
 }

CSS Selector Locator:

CSS selectors are used to style the content of web pages. This also helps us in identifying one or more elements on web page, when elements are not found by the general locators like id, class, name etc. CSS selector makes the execution of script faster as compared to XPath locator . CSS selector locator is considered as the best way to locate complex elements on web page.

Syntax:

CSS = tagname#id
CSS = tagname.className
CSS = tagname[attribute='value']

XPATH Selector Locator:

• XPath is a query language for selecting nodes from an XML document. This also helps us in  identifying one or more elements on web page, when elements are not found by the general locators like id, class, name etc. XPath is considered as a reliable locator, but  it is slower as compared to CSS selector especially in older IE versions.

Syntax:

 Xpath=//tagname[@attribute='value']
 Xpath=//*[contains(@attribute,'value')]