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!