Relative Locator ‘above’ in Playwright Python

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!

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