[Selenium 4.0 ] -> Relative Locator example from Google Home page

Though there are many exciting features available in Selenium 4.0 (Release candidate is available as of now), But I am exciting about this new concept of Relative locators for finding elements. 

Relative locator is a very easy to understand concept where we try to identify a locator with respect to it's position on page. 

So if you have a locator available for a field , and you can see on web page that there is a one more field available left/right/above/below of this field, you can use relative locator concept to identify that element.

I tried to use these new locators in Google home page and I almost able to use these locator there. So let me share, how I used these locators in Google home page:

1. toRightOf() : As it's name insinuates, we can identify an element which is placed right of a particular element.

Use Case: Find the locator of button who is available right to "Google Search button"

  @Test

    public static void toRightOfLocator() {

        WebElement googleSearch = driver.findElement(By.xpath("(//input[@name='btnK' and @type='submit'])[2]"));

        

System.out.println("1: Google search button text value is: " +  googleSearch.getAttribute("value"));

        

WebElement imFeelingLucky = driver.findElement(RelativeLocator.with(By.xpath("//input")).toRightOf(googleSearch));

        

String text = imFeelingLucky.getAttribute("value");

System.out.println("2: I am feeling lucky which is right to Google search button text value is: " +text);

    }

As you can see in above code, First I try to find  "Google Search" button locator, Then , with the help of toRightOf() locator, I tries to find, "I'm Felling Lucky" button locator. 

Here, we need to notice, I gave relative locator element type, which is Input.

So the entire code executes in this manner:

Find the input element which is in right of "Google Search" input button.

2. toLeftOf(): As it's name insinuates, we can identify an element which is placed left to a particular element. The code is almost similar to above one, just vice versa.

Use Case: Find the locator of button who is available left to "I am feeling button"

@Test

    public static void toLeftOfLocator() {

        WebElement imFeeling = driver.findElement(By.xpath("(//input[@name='btnI' and @type='submit'])[2]"));

        System.out.println("1: I am feeling lucky button text value is: " + imFeeling.getAttribute("value"));

        WebElement googleSearch =driver.findElement(RelativeLocator.with(By.xpath("//input")).toLeftOf(imFeeling));

        String text = googleSearch.getAttribute("value");

        System.out.println("2: Google search which is left to I am feeling lucky button text value is: " + text);

    }

3. below() : With the help of this relative locator concept, we can find element below to a particular element.

Use Case: Find the first button present in google home page below to Google search field

@Test

    public static void belowLocator() {

        WebElement googleSearch = driver.findElement(By.xpath("(//input[@name='q' and @type='text'])"));

        WebElement imFeelingLucky =driver.findElement(RelativeLocator.with(By.xpath("//input")).below(googleSearch));

        String text = imFeelingLucky.getAttribute("value");

        System.out.println("1: First input field under google search field is: " + text);

    }

Here, I tried to find input field which is below to google search field. It picked the first element. If you think, there will be many elements, then use findElements instead of findElement.

4. above(): 

Use Case: Find input element above to "I'm Feeling Lucky" Button and  insert a search string into it.

 @Test

    public static void aboveLocator() {

        WebElement imFeeling = driver.findElement(By.xpath("(//input[@name='btnI' and @type='submit'])[2]"));

        WebElement search =driver.findElement(RelativeLocator.with(By.xpath("//input")).above(imFeeling));

        search.sendKeys("QA Automation ");

    }

5. findElements() with relative locator: So if you need to find links, buttons, text after a particular fields, then you can use findElements() after the relative locator. It will be very helpful.

Use Case: Find all links text in Google home page below to "I'm Felling Lucky button"

  @Test

    public static void allLinksBelowCertainField() {

        WebElement imFeeling = driver.findElement(By.xpath("(//input[@name='btnI' and @type='submit'])[2]"));

        List< WebElement> allLink =driver.findElements(RelativeLocator.with(By.xpath("//a")).below(imFeeling));

        for (WebElement webElement : allLink) {

            System.out.println(webElement.getText());

        }

    }

Similarly you can use it for right, left and above to a particular element.

6. near(): One more interesting locator, which I found is near locator. near locator, as it's name indicates used to identify element near to a particular element with the help of pixels.

To use this locator, I used our own blog, as in Google home page, I could not find any straightforward use case.

Use Case: Find element next to icon "BreakingNews"

  @Test

    public static void nearLocator() {

        WebElement breakingIcon = driver.findElement(By.xpath("//i[@class='fa fa-fire']"));

        WebElement breakingText =driver.findElement(RelativeLocator.with(By.xpath("//span")).near(breakingIcon));

        String text = breakingText.getText();

        System.out.println("1: Text near to breaking icon is: " +text);

    }

Let me know if you need the working code for this. I will share the github repo for this.