Tutorial 21 - Relative Locator methods (below, near, right-of, left-of) in Playwright
What you will Learn:
Relative Locator ‘below’ method
Relative Locator ‘near’ method
Relative Locator ‘right-of’ method
Relative Locator ‘left-of’ method
Code snippets
Relative Locator ‘below’ method
The ‘below’ method is exactly opposite of ‘above’ method that we studied in our previous article.
To understand ‘below’ method, launch
https://www.way2automation.com/angularjs-protractor/registeration/#/login
The use case is: we want to write some text below the ‘Username’ label
So we can write the below 2 lines using the ‘below’ method (self-explanatory)
Save and run the script.
Notice below that PW has successfully located the text field below the ‘Username’ label and has typed the text inside it
Relative Locator ‘near’ method
Launch https://www.way2automation.com/way2auto_jquery/index.php
If you notice, the dropdown field is near ‘Country’ label
The below code will select ‘Guyana’ country from the dropdown. Since this dropdown is of the type ‘select’ tag, we have used ‘select’ instead of ‘input’ tag
Save and run.
Notice that the desired country gets selected
Relative Locator ‘right-of’ method
Launch https://www.way2automation.com/way2auto_jquery/index.php
If you notice, the dropdown field is ‘right-of’ ‘Country’ label
The below code will select ‘Germany’ from the dropdown
Save an run
Relative Locator ‘left-of’ method
Launch
https://www.selenium-tutorial.com/p/selenium-training
Notice that the Login’ link is left to ‘Sign Up’ link
Since ‘Login’ is a link, we have used the ‘a’ tag
Save and run script.
Notice below that ‘Log in’ page comes up
So this is how we use the relative Locator methods.
Code snippet (below)
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:below(:text("Username"))').first().fill('hi');
})
Code snippet (near)
import { test, expect } from '@playwright/test'
test("layouts", async ({ page }) => {
await page.goto('https://www.way2automation.com/way2auto_jquery/index.php')
await page.locator('select:near(:text("Country"))').selectOption('Guyana');
})
Code snippet (right-of)
import { test, expect } from '@playwright/test'
test("layouts", async ({ page }) => {
await page.goto('https://www.way2automation.com/way2auto_jquery/index.php')
await page.locator('select:right-of(:text("Country"))').selectOption('Germany');
})
Code snippet (left-of)
import { test, expect } from '@playwright/test'
test("layouts", async ({ page }) => {
await page.goto('https://www.selenium-tutorial.com/p/selenium-training')
await page.locator('a:left-of(:text("Sign Up"))').first().click();
})
Thank you for reading!
