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!