Usage of Relative Locator ‘above’ in Playwright Java

Tutorial 13​​ ​​ Relative Locator ‘above’​​ in​​ Playwright​​ Java

What you will Learn:

  • Relative Locator ‘above’ method

  • Example#2

  • Code snippets

Relative Locator ‘above’ method

Launch​​ https://opensource-demo.orangehrmlive.com/​​ 

Use case:​​ 
Locate​​ the ‘Password’ text​​ field​​ above​​ the ‘Login’ button​​ and then​​ write some text into it

Few questions might arise:​​ 
Why​​ do we need to do that? Why can’t we simply locate the ‘Password’ field and write some text into it? Why should we use the ‘above’ method to locate ‘Password’ field? ​​ 

The answer to this question is that, there might be a scenario in which a specific element does not have a​​ unique identifier (example: id, name, class etc). In this scenario, we can look for another element that has a unique property and then use relative locator methods to identify another element that does not have unique property.  ​​​​ 

Let us assume here that ‘Password’ field does NOT have a unique property to identify it. Hence we would be taking the help of LOGIN button to locate ‘Password’ field.

The ‘Login’​​ button​​ can be identified using its text ‘Login’

Inspect​​ ‘Password’ field. Notice that it is represented by tagname ‘input’


There is ‘above’ method that we can use to identify another element that is above​​ ‘Login’​​ button

We are asking​​ PW​​ to locate an element​​ above​​ ‘Login​​ element whose tagname is ‘input’​​ and then type some text into it​​ (line#20)

Save and run the script.​​ 

The​​ PW​​ throws an​​ error​​ because​​ it has found 3 fields that have ‘input’ tag, which one should it consider?​​ 

To resolve this, we can use the ‘first()’ method viz we are asking PW to enter the desired text in the first input field​​ above the ‘Login’ button

Save and execute.

Notice below that​​ PW​​ has successfully located the​​ ‘Password’ field​​ above​​ the ‘Login’​​ button and typed the text inside it

The test passes​​ this time.

Another Example​​ 

Let us take another example.​​ Launch​​ https://www.way2automation.com/angularjs-protractor/registeration/#/login​​ 

As seen above, there is a ‘Username*’ field​​ above​​ ‘Login’ field.

We can use the same logic here as well

Save and execute.

Notice below that PW types the text in the desired field​​ 

The test passes.

This is how we can use the relative locator’s​​ above​​ method.

The below official webpage can be referred for​​ any further information

https://playwright.dev/docs/selectors#selecting-elements-based-on-layout​​ 

Code snippet for example 1

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​​ AboveMethodPW {

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://opensource-demo.orangehrmlive.com/");

 

page.locator("input:above(:text(\"Login\"))").first().fill("hello playwright");

 

 }

}

 

Code snippet for example 2

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​​ AboveMethodPW {

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:above(:text(\"Login\"))").first().fill("hello playwright");

 

 }

}

 

Thank you for reading!

Share On

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on tumblr
Share on email

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Lifetime Membership Club

LIFETIME MEMBERSHIP BIG SALE - ALL LIVE COURES JUST - 7000 RS/ 99 USD
Attend All Live courses in just 7000 rs / $99 - offer ends 1st Nov 2024