Relative Locators in Playwright Java (below, above, near, right-of, left-of)

In this blog, we will explore Playwright Java's relative locators, that can be used to locate elements positioned above/below/near/right/left of a given element.

Topics that we will cover:

Usage of Relative Locator ‘below’
Usage of Relative Locator ‘above’
Usage of Relative Locator ‘near’
Usage of Relative Locator ‘right-of’
Usage of Relative Locator ‘left-of’
Source code

Usage of Relative Locator ‘below’

Go to https://opensource-demo.orangehrmlive.com/

As can be seen below, the input ‘Username’ field is “below”
‘Username’ text label

Let us try to enter text “rahulshettyacademy” using “below” locator.

Line#26 will help us to achieve that. The ‘Username’ input field is
represented by ‘input’ tag and hence we have used ‘input’ tag just before “below”

Execute the code.

The text “rahulshettyacademy” gets typed in the ‘Username’ input field

Usage of Relative Locator ‘above’

Let us navigate to https://sso.teachable.com/secure/9521/identity/login/password

As seen above, there is an ‘Email’ field above ‘Password’ field.

We can apply the same logic in this scenario as well

Execute the code.

Notice below that Playwright types the text in the ‘Email’ input text field

This is the way in which we can make use of the "above" method of the relative locator.

Usage of Relative Locator ‘near’

Go to https://rahulshettyacademy.com/AutomationPractice/

As can be seen below, the dropdown field is “near” ‘Dropdown’ text

Let us try to select “Options1” using “near” locator. Line#27 will help us to achieve that. The dropdown is represented by ‘select’ tag and hence we have used ‘select’ tag just before “near”

Execute the code.

“Option1” gets selected

Usage of Relative Locator ‘right-of’

Go to https://rahulshettyacademy.com/seleniumPractise/#/offers

As can be seen below, the dropdown field is “right-of” ‘Page size’ text

Let us try to select “20” using “right-of” locator. Line#27 will help us to achieve that. The dropdown is represented by ‘select’ tag and hence we have used ‘select’ tag just before “right-of”

Usage of Relative Locator ‘left-of’

Launch https://rahulshettyacademy.com/

As can be seen below, the “REGISTER” link is “left-of” LOGIN link

Let us try to click “REGISTER” link using “left-of” locator. Line#27 will help us to achieve that. The link is represented by ‘a’ tag and hence we have used ‘a’ tag just before “left-of”

Execute the code.

The registration page opens up

Source code (below)

package com.rsa.playwrightjava;

import org.junit.jupiter.api.Test;

import com.microsoft.playwright.Browser;

import com.microsoft.playwright.BrowserType;

import com.microsoft.playwright.BrowserType.LaunchOptions;

import com.microsoft.playwright.Locator;

import com.microsoft.playwright.Page;

import com.microsoft.playwright.Playwright;

public class Blog11_AboveMethod_UC1_below {

@Test

public void PlaywrightJTest() {

Playwright pt = Playwright.create();

LaunchOptions lo = new LaunchOptions();

lo.setChannel("msedge");

lo.setHeadless(false);

BrowserType btype = pt.chromium();

Browser b = btype.launch((new BrowserType.LaunchOptions().setHeadless(false)));

Page pg = b.newPage();

pg.navigate("https://opensource-demo.orangehrmlive.com/");

pg.locator("input:below(:text(\"Username\"))").first().fill("rahulshettyacademy");

pg.pause();

}

Source code (above)

package com.rsa.playwrightjava;

import org.junit.jupiter.api.Test;

import com.microsoft.playwright.Browser;

import com.microsoft.playwright.BrowserType;

import com.microsoft.playwright.BrowserType.LaunchOptions;

import com.microsoft.playwright.Locator;

import com.microsoft.playwright.Page;

import com.microsoft.playwright.Playwright;

public class Blog11_AboveMethod_UC2_above {

@Test

public void PlaywrightJTest() {

Playwright pt = Playwright.create();

LaunchOptions lo = new LaunchOptions();

lo.setChannel("msedge");

lo.setHeadless(false);

BrowserType btype = pt.chromium();

Browser b = btype.launch((new BrowserType.LaunchOptions().setHeadless(false)));

Page pg = b.newPage();

pg.navigate("https://sso.teachable.com/secure/9521/identity/login/password");

pg.locator("input:above(:text(\"Password\"))").first().fill("rahulshettyacademy");

pg.pause();

}

Source code (near)

package com.rsa.playwrightjava;

import org.junit.jupiter.api.Test;

import com.microsoft.playwright.Browser;

import com.microsoft.playwright.BrowserType;

import com.microsoft.playwright.BrowserType.LaunchOptions;

import com.microsoft.playwright.Locator;

import com.microsoft.playwright.Page;

import com.microsoft.playwright.Playwright;

public class Blog11_AboveMethod_UC3_near {

@Test

public void PlaywrightJTest() {

Playwright pt = Playwright.create();

LaunchOptions lo = new LaunchOptions();

lo.setChannel("msedge");

lo.setHeadless(false);

BrowserType btype = pt.chromium();

Browser b = btype.launch((new BrowserType.LaunchOptions().setHeadless(false)));

Page pg = b.newPage();

pg.navigate("https://rahulshettyacademy.com/AutomationPractice/");

pg.locator("select:near(:text(\"Dropdown\"))").selectOption("Option1");

pg.pause();

}

Source code (right-of)

package com.rsa.playwrightjava;

import org.junit.jupiter.api.Test;

import com.microsoft.playwright.Browser;

import com.microsoft.playwright.BrowserType;

import com.microsoft.playwright.BrowserType.LaunchOptions;

import com.microsoft.playwright.Locator;

import com.microsoft.playwright.Page;

import com.microsoft.playwright.Playwright;

public class Blog11_AboveMethod_UC4_rightof {

@Test

public void PlaywrightJTest() {

Playwright pt = Playwright.create();

LaunchOptions lo = new LaunchOptions();

lo.setChannel("msedge");

lo.setHeadless(false);

BrowserType btype = pt.chromium();

Browser b = btype.launch((new BrowserType.LaunchOptions().setHeadless(false)));

Page pg = b.newPage();

pg.navigate("https://rahulshettyacademy.com/seleniumPractise/#/offers");

pg.locator("select:right-of(:text(\"Search\"))").selectOption("20");

pg.pause();

}

Source code (left-of)

package com.rsa.playwrightjava;

import org.junit.jupiter.api.Test;

import com.microsoft.playwright.Browser;

import com.microsoft.playwright.BrowserType;

import com.microsoft.playwright.BrowserType.LaunchOptions;

import com.microsoft.playwright.Locator;

import com.microsoft.playwright.Page;

import com.microsoft.playwright.Playwright;

public class Blog11_AboveMethod_UC5_leftoff {

@Test

public void PlaywrightJTest() {

Playwright pt = Playwright.create();

LaunchOptions lo = new LaunchOptions();

lo.setChannel("msedge");

lo.setHeadless(false);

BrowserType btype = pt.chromium();

Browser b = btype.launch((new BrowserType.LaunchOptions().setHeadless(false)));

Page pg = b.newPage();

pg.navigate("https://rahulshettyacademy.com/");

pg.locator("a:left-of(:text(\"LOGIN\"))").first().click();

pg.pause();

}

Thanks.

Relative Locators in Playwright Java (below, above, near, right-of, left-of)

You may also like

Assert Checkboxes, usage of “blur” and “clear” methods in Playwright Java

Verify “Tool Tip”, Set focus to element using Playwright Java

Leave a Reply