Relative Locator ‘above’ in Playwright

Tutorial 20 –​​ Relative Locator ‘above’​​ in​​ Playwright

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

Save and run the script.​​ 

The​​ PW inspector​​ shows​​ an expected​​ error.​​ The​​ PW is complaining that 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

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

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 ‘hi’ 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​​ 

import​​ {​​ test,​​ expect​​ }​​ from​​ '@playwright/test'

 

test("layouts",​​ async​​ ({​​ page​​ })​​ =>​​ {

   await​​ page.goto('https://opensource-demo.orangehrmlive.com/')

   //await page.locator('input:above(:text("Login"))').fill('hi');

   await​​ page.locator('input:above(:text("Login"))').first().fill('hi');

})


Code snippet for example 2

import​​ {​​ test,​​ expect​​ }​​ from​​ '@playwright/test'

 

test("layouts",​​ async​​ ({​​ page​​ })​​ =>​​ {

   await​​ page.goto('https://www.way2automation.com/angularjs-protractor/registeration/#/login')

   //await page.locator('input:above(:text("Login"))').fill('hi');

   await​​ page.locator('input:above(:text("Login"))').first().fill('hi');

   

})

 

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