Usage of Relative Locator methods (below, near, right-of, left-of) in Playwright Java

Tutorial​​ 14​​ -​​ Relative Locator​​ methods​​ (below, near,​​ right-of, left-of)​​ in​​ Playwright​​ Java

What you will Learn:

• Relative Locator ‘below’ method

• Relative Locator ‘near’ method

• Relative Locator ‘right-of’ method

• Relative Locator ‘left-of’ method

• Code snippets

Relative Locator ‘below’ method

The ‘below’ method is exactly opposite of ‘above’ method that we studied​​ in​​ our​​ previous article.

To understand​​ ‘below’​​ method, launch

https://www.way2automation.com/angularjs-protractor/registeration/#/login​​ ​​ ​​ 

The use case is: we want to​​ write some text​​ below​​ the ‘Username’​​ label

So we can write​​ the below 2 lines using the ‘below’ method (self-explanatory)

Save and run the script.​​ 

Notice below that​​ PW has successfully located the​​ text​​ field below the ‘Username’​​ label​​ and​​ has​​ typed the text inside it

Relative Locator ‘near’ method

Launch​​ https://www.way2automation.com/way2auto_jquery/index.php​​ 

If you notice, the dropdown field is​​ near​​ ‘Country’ label

The below code will select ‘France’ from the​​ country​​ dropdown. Since this dropdown is of the type ‘select’ tag, we have used ‘select’​​ instead of ‘input’ tag

Save and run.​​ 

Notice that the desired country gets selected

Relative Locator ‘right-of’ method

Launch​​ https://www.way2automation.com/way2auto_jquery/index.php​​ 

If you notice, the dropdown field is ‘right-of’ ‘Country’ label

The below code will select ‘Germany’ from the dropdown

Save and​​ run

Relative Locator ‘left-of’ method

Launch

https://www.selenium-tutorial.com/p/selenium-training​​ 

Notice that the Login’ link is​​ left​​ to ‘Sign Up’ link

Since ‘Login’ is a link, we have used the ‘a’ tag

Save and run script.

Notice below that​​ ‘Log in’ page​​ comes up

So this is how we use the relative Locator methods.

Code snippet (below)

package​​ com.w2a.pwjava;

import​​ com.microsoft.playwright.Browser;

import​​ com.microsoft.playwright.BrowserContext;

import​​ com.microsoft.playwright.BrowserType;

import​​ com.microsoft.playwright.Page;

import​​ com.microsoft.playwright.Playwright;

public​​ class​​ RelativeLocatorMethodsPW {

 public​​ static​​ void​​ main(String[]​​ args) {

 Playwright​​ pw​​ = Playwright.create();  

 Browser​​ browser​​ =​​ pw.chromium().launch(new​​ BrowserType.LaunchOptions().setHeadless(false));

 BrowserContext​​ browserContext​​ =​​ browser.newContext();

 Page​​ page​​ =​​ browserContext.newPage();

 page.navigate("https://www.way2automation.com/angularjs-protractor/registeration/#/login");

 page.locator("input:below(:text(\"Username\"))").first().fill("hello playwright");

 }

}

Code snippet (near)

package​​ com.w2a.pwjava;

import​​ com.microsoft.playwright.Browser;

import​​ com.microsoft.playwright.BrowserContext;

import​​ com.microsoft.playwright.BrowserType;

import​​ com.microsoft.playwright.Page;

import​​ com.microsoft.playwright.Playwright;

public​​ class​​ RelativeLocatorMethodsPW {

 public​​ static​​ void​​ main(String[]​​ args) {

 Playwright​​ pw​​ = Playwright.create();  

 Browser​​ browser​​ =​​ pw.chromium().launch(new​​ BrowserType.LaunchOptions().setHeadless(false));

 BrowserContext​​ browserContext​​ =​​ browser.newContext();

 Page​​ page​​ =​​ browserContext.newPage();

 page.navigate("https://www.way2automation.com/way2auto_jquery/index.php");

 page.locator("select:near(:text(\"Country\"))").selectOption("France");

 }

}

Code snippet (right-of)​​ 

package​​ com.w2a.pwjava;

import​​ com.microsoft.playwright.Browser;

import​​ com.microsoft.playwright.BrowserContext;

import​​ com.microsoft.playwright.BrowserType;

import​​ com.microsoft.playwright.Page;

import​​ com.microsoft.playwright.Playwright;

public​​ class​​ RelativeLocatorMethodsPW {

 public​​ static​​ void​​ main(String[]​​ args) {

 Playwright​​ pw​​ = Playwright.create();  

 Browser​​ browser​​ =​​ pw.chromium().launch(new​​ BrowserType.LaunchOptions().setHeadless(false));

 BrowserContext​​ browserContext​​ =​​ browser.newContext();

 Page​​ page​​ =​​ browserContext.newPage();

 page.navigate("https://www.way2automation.com/way2auto_jquery/index.php");

 page.locator("select:right-of(:text(\"Country\"))").selectOption("Germany");

 }

}

Code snippet (left-of)

package​​ com.w2a.pwjava;

import​​ com.microsoft.playwright.Browser;

import​​ com.microsoft.playwright.BrowserContext;

import​​ com.microsoft.playwright.BrowserType;

import​​ com.microsoft.playwright.Page;

import​​ com.microsoft.playwright.Playwright;

public​​ class​​ RelativeLocatorMethodsPW {

 public​​ static​​ void​​ main(String[]​​ args) {

 Playwright​​ pw​​ = Playwright.create();  

 Browser​​ browser​​ =​​ pw.chromium().launch(new​​ BrowserType.LaunchOptions().setHeadless(false));

 BrowserContext​​ browserContext​​ =​​ browser.newContext();

 Page​​ page​​ =​​ browserContext.newPage();

 page.navigate("https://www.selenium-tutorial.com/p/selenium-training");

 page.locator("a:left-of(:text(\"Sign Up\"))").first().click();

 }

}

Thank you for reading!