Tutorial 4 – Relative Locator ‘above’ in Playwright Python
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 Playwright to locate an element above ‘Login’ element whose tagname is ‘input’ and then type some text into it (line#10)
Save and run the script
The Playwright 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 Playwright to enter the desired text in the first input field above the ‘Login’ button
Save and execute.
Notice below that Playwright 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. Go to 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 Playwright 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/python/docs/selectors#selecting-elements-based-on-layout
Code snippet for example 1
from playwright.sync_api import Playwright, sync_playwright, expect
def run(playwright: Playwright) -> None:
browser = playwright.chromium.launch(headless=False,slow_mo=3000)
context = browser.new_context()
page = context.new_page()
page.goto("https://opensource-demo.orangehrmlive.com/")
#page.locator("input:above(:text(\"Login\"))").fill("hello playwright")
page.locator("input:above(:text(\"Login\"))").first.fill("hello playwright")
# ---------------------
context.close()
browser.close()
with sync_playwright() as playwright:
run(playwright)
Code snippet for example 2
from playwright.sync_api import Playwright, sync_playwright, expect
def run(playwright: Playwright) -> None:
browser = playwright.chromium.launch(headless=False,slow_mo=3000)
context = browser.new_context()
page = context.new_page()
page.goto("https://www.way2automation.com/angularjs-protractor/registeration/#/login")
page.locator("input:above(:text(\"Login\"))").first.fill("hello playwright")
# ---------------------
context.close()
browser.close()
with sync_playwright() as playwright:
run(playwright)
Thank you for reading!
