Locators in Selenium - Ways to locate and use the locators

    Locators are important in selenium architecture. While doing manual testing, testers usually do various actions like clicking, mouse hovering, etc., While automating the same scenario selenium needs the location for clicking that object. To mention the location of the particular object, locators are used in selenium.

     By using this locator we can able to locate a specific element and do our actions with predefined methods. There are many ways to locate an element in selenium. 

    Before seeing about locators, let's understand how to navigate to DOM for locating an element

1. Navigate to any URL

2. Right-click on the mouse/ Click F12/ Click Fn + F12/ Click Ctrl + Shift + I

3. Click Inspect

The screen will look like below

To highlight any element on the page, use the arrow symbol in the top left.

Locators supported by Selenium

• id
• name
• class name
• tag
• CSS
• XPath
• partial link text
• link text

There are two options available in selenium to use these locators

1. findElement - This method will return a single element

2. findElements - This method will return a list of elements

All the above-mentioned locators are defined under By class. To access these methods, we need to import "import org.openqa.selenium.By;". Below are the methods available in By class to locate an element

    By.id(id)

    By.name(name)

    By.className(className)

    By.tagName(name)
    By.cssSelector(selector)
    By.xpath(xpathExpression)

    By.partialLinkText(linkText)
    By.linkText(linkText)

This By class should be passed as a parameter in the findElement or findElements method as below.

    WebElement signIn;

    signIn = driver.findElement(By.name("email"))

By using the above syntax we can able to store the locators in any variable. The variable must be of type WebElement.

How to find locators

To find what type of locator you need to use, follow the below steps

1. Right-click on the element you want to locate

2. Click inspect

3. Observe what are all the attributes that element had. Below element is Username field in facebook web application

<input type="text" class="inpuy" name="email" id="email" data-testid="royal_email" placeholder="Email address or phone number" autofocus="1" aria-label="Email address or phone number">

4. To locate the above elements we can use class, name, id, CSS, XPath. Try every type of locator and use the locator which is unique. While developing a site many class names and IDs may be common for many elements on the page. So it is important to find a unique locator.

Let us discuss all locator types in detail. 

id

    In this example, We will find the location of the user name field in the Facebook web application. Below are the location attributes

    In this check, the value of the attribute id is "email". So below will be the locator for this element using id.

    

    driver.findElement(By.id("email"));

name

    Let us use the same above location as an example. In the above screenshot check, that value of the name attribute is "email". So, the locator for this location using the name is

    driver.findElement(By.name("email"));

class

    In the above example check the class value of the location. Value is "inputtext _55r1 _6luy" and this class value is common for both user name and password field. So, it is not unique and we can't use this type of locator in this example.

tagname

    By using this type, we can able to get all the elements of the provided tag name. Tag name nothing but the HTML tags that are available on the page. This is not a widely used way of locating an element. If elements were not able to found using ID, class, or name. It may be located using CSS or XPath. Tagname is not usable in most of the cases due to its process. First, it should be saved in an element and it needs to be iterated to get the element.

    Below is the code that can be used to locate the user name field using the tag name.

        List<WebElement> userName = driver.findElements(By.tagName("input"));
        userName .get(2).sendKeys("aaaaaaaaaaa");

linkText and partialLinkText

    Link text is used to locate an element using the text that is displayed in the element. In this example, we are locating a forgotten password element on Facebook. Below are the locating using link text

    driver.findElement(By.linkText("Forgotten password?")).click();

    Partial link text is similar to the link text method. In this type, we don't need to enter the whole link text. Partial text of the link is enough to locate the element. An important point is that partial link text should be unique.

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

CSS Selector

    Below is the syntax for a CSS selector

        

            "HTML tag[Attribute = 'value']"

    In this type let us take an example to locate the user name field on Facebook. By using the below line it is easy to find it's location

        driver.findElement(By.cssSelector("input[id='email']"));

    CSS selector is very important in many ways. If we can't locate elements using id, name, and class our next option will be CSS selector. In most cases, the element's location will not unique.

    In the same example, we will try to locate the element using the class attributes. It is not unique. To find the correct locator nth-child method will be used. But while trying to select using this method, still it's not possible to identify a unique locator

    This locator is not unique even after using nth-child because its parent tag div for both the fields are the same  "_6lux". So, We will try the same nth-child method in the parent class. Using the below line, a unique locator is identified for the username field.

        

        driver.findElement(By.cssSelector("div[class='_6lux']:nth-child(1)"));

XPath

    Below is the syntax for using this type

        "//HTML Tag[@Attribute = 'value']"

    This is the same as CSS. This will use XML expression to locate an element. This is mostly used in locating dynamic elements. This type had many functions to locate a specific element

All the below examples are finding the location of the email field on Facebook

1. //HTML Tag[contains(@Attribute, 'value')] - This function will take 2 parameters first is the attribute name and the second is its value. Partial text of the value is enough to get the unique locator. It will be useful for dynamic values. In many sites, some parts of the value will be the same and the remaining part will get updated on each refresh. 

        driver.findElement(By.xpath("//input[contains(@id,'i')]")).sendKeys("aaaa");

2. //HTML Tag[Starts-with(@Attribute, 'value')] - This is similar to the contains method. The only difference here is it will locate the element that starts with the provided value.

        driver.findElement(By.xpath("//input[starts-with(@id,'e')]")).sendKeys("aaaa");

3. //HTML Tag[Text() = "value"] - This is used to locate an element using the text of that link. Below line is to click forgotten password link in facebook home page

        driver.findElement(By.xpath("//a[text()='Forgotten password?']")).click();

4. And operator(//HTML Tag[@attribute1 = 'value' and @attribute2 ='value']) - This function is used to locate elements using 2 attributes. Element location will be identified if both values of the attributes are matched.

        driver.findElement(By.xpath("//input[@name = 'email' and @class = 'inputtext _55r1 _6luy']")).sendKeys("aaaa");

5. OR operator(//HTML Tag[@attribute1 = 'value' or @attribute2 =' value']) - In some cases one attribute may be static and another one may be dynamic. In this scenario OR operator can be used in between the attributes

        driver.findElement(By.xpath("//input[@name = 'email' or @class = 'inputtext _55r1 _6luy']")).sendKeys("aaaa");

This article gave you the required information to start up your selenium script. Additional details on XPath will be covered in an upcoming post. 

Please provide your suggestion to improve our standards!!