In this blog, we will explore Playwright Java’s relative locators, that can be used to locate elements positioned above\/below\/near\/right\/left of a given element.<\/em><\/p>\n

\n

\n<\/ins>\n<\/div>\n
Topics that we will cover:<\/strong><\/p>\n
\n
Usage of Relative Locator \u2018below\u2019<\/li>\n
Usage of Relative Locator \u2018above\u2019<\/li>\n
Usage of Relative Locator \u2018near\u2019<\/li>\n
Usage of Relative Locator \u2018right-of\u2019<\/li>\n
Usage of Relative Locator \u2018left-of\u2019<\/li>\n
Source code<\/li>\n<\/ul>\n
Usage of Relative Locator \u2018below\u2019\u00a0<\/strong><\/p>\n
Go to https:\/\/opensource-demo.orangehrmlive.com\/<\/a>\u00a0<\/p>\n
As can be seen below, the input \u2018Username\u2019 field is \u201cbelow\u201d<\/strong>
\u2018Username\u2019 text label<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n\n
\u00a0Let us try to enter text \u201crahulshettyacademy\u201d using \u201cbelow<\/em><\/strong>\u201d locator.\u00a0<\/p>\n
Line#26 will help us to achieve that. The \u2018Username\u2019 input field is
represented by \u2018input\u2019 tag and hence we have used \u2018input\u2019 tag just before \u201cbelow\u201d<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n\n
\u00a0Execute the code.\u00a0<\/p>\n
The text \u201crahulshettyacademy\u201d gets typed in the \u2018Username\u2019 input field<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Usage of Relative Locator \u2018above\u2019\u00a0<\/strong><\/p>\n
Let us navigate to\u00a0 https:\/\/sso.teachable.com\/secure\/9521\/identity\/login\/password<\/a> \u00a0<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0As seen above, there is an \u2018Email\u2019 field above<\/strong> \u2018Password\u2019 field.<\/p>\n
We can apply the same logic in this scenario as well<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n\n
\u00a0Execute the code.<\/p>\n
Notice below that Playwright types the text in the \u2018Email\u2019 input text field\u00a0<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0This is the way in which we can make use of the “above<\/em>” method of the relative locator.<\/p>\n
Usage of Relative Locator \u2018near\u2019\u00a0<\/strong><\/p>\n
Go to https:\/\/rahulshettyacademy.com\/AutomationPractice\/<\/a> \u00a0<\/p>\n
As can be seen below, the dropdown field is \u201cnear\u201d<\/strong> \u2018Dropdown\u2019 text<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n\n
\u00a0Let us try to select \u201cOptions1\u201d using \u201cnear<\/em><\/strong>\u201d locator. Line#27 will help us to achieve that. The dropdown is represented by \u2018select\u2019 tag and hence we have used \u2018select\u2019 tag just before \u201cnear\u201d<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n\n
\u00a0Execute the code.\u00a0<\/p>\n
\u201cOption1\u201d gets selected<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Usage of Relative Locator \u2018right-of\u2019\u00a0<\/strong><\/p>\n
Go to https:\/\/rahulshettyacademy.com\/seleniumPractise\/#\/offers<\/a> \u00a0<\/p>\n
As can be seen below, the dropdown field is \u201cright-of\u201d<\/strong> \u2018Page size\u2019 text<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n\n
\u00a0<\/p>\n
Let us try to select \u201c20\u201d using \u201cright-of<\/em><\/strong>\u201d locator. Line#27 will help us to achieve that. The dropdown is represented by \u2018select\u2019 tag and hence we have used \u2018select\u2019 tag just before \u201cright-of\u201d<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n\n
\u00a0Usage of Relative Locator \u2018left-of\u2019<\/strong><\/p>\n
Launch https:\/\/rahulshettyacademy.com\/<\/a> \u00a0<\/p>\n
As can be seen below, the \u201cREGISTER\u201d link is \u201cleft-of<\/em><\/strong>\u201d<\/strong> LOGIN link<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Let us try to click \u201cREGISTER\u201d link using \u201cleft-of<\/em><\/strong>\u201d locator. Line#27 will help us to achieve that. The link is represented by \u2018a\u2019 tag and hence we have used \u2018a\u2019 tag just before \u201cleft-of\u201d<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Execute the code.<\/p>\n
The registration page opens up<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0<\/p>\n
<\/p>\n
Source code (below)<\/strong><\/div>\n
package<\/strong> com.rsa.playwrightjava;<\/div>\n
<\/div>\n
import<\/strong> org.junit.jupiter.api.Test;<\/div>\n
import<\/strong> com.microsoft.playwright.Browser;<\/div>\n
import<\/strong> com.microsoft.playwright.BrowserType;<\/div>\n
import<\/strong> com.microsoft.playwright.BrowserType.LaunchOptions;<\/div>\n
import<\/strong> com.microsoft.playwright.Locator;<\/div>\n
import<\/strong> com.microsoft.playwright.Page;<\/div>\n
import<\/strong> com.microsoft.playwright.Playwright;<\/div>\n
<\/div>\n
public<\/strong>
\nclass<\/strong> Blog11_AboveMethod_UC1_below {<\/div>\n
@Test<\/div>\n
public<\/strong>
\nvoid<\/strong> PlaywrightJTest() {<\/div>\n
Playwright pt = Playwright.create<\/em>();<\/div>\n
LaunchOptions lo = new<\/strong> LaunchOptions();<\/div>\n
lo.setChannel(“msedge”);<\/div>\n
lo.setHeadless(false<\/strong>);<\/div>\n
BrowserType btype = pt.chromium();<\/div>\n
Browser b = btype.launch((new<\/strong> BrowserType.LaunchOptions().setHeadless(false<\/strong>)));<\/div>\n
Page pg = b.newPage();<\/div>\n
pg.navigate(“https:\/\/opensource-demo.orangehrmlive.com\/”);<\/div>\n
pg.locator(“input:below(:text(“Username”))”).first().fill(“rahulshettyacademy”);<\/div>\n
pg.pause();<\/div>\n
}<\/div>\n
}<\/div>\n
<\/div>\n
Source code (above)<\/strong><\/div>\n
package<\/strong> com.rsa.playwrightjava;<\/div>\n
<\/div>\n
import<\/strong> org.junit.jupiter.api.Test;<\/div>\n
import<\/strong> com.microsoft.playwright.Browser;<\/div>\n
import<\/strong> com.microsoft.playwright.BrowserType;<\/div>\n
import<\/strong> com.microsoft.playwright.BrowserType.LaunchOptions;<\/div>\n
import<\/strong> com.microsoft.playwright.Locator;<\/div>\n
import<\/strong> com.microsoft.playwright.Page;<\/div>\n
import<\/strong> com.microsoft.playwright.Playwright;<\/div>\n
<\/div>\n
public<\/strong>
\nclass<\/strong> Blog11_AboveMethod_UC2_above {<\/div>\n
@Test<\/div>\n
public<\/strong>
\nvoid<\/strong> PlaywrightJTest() {<\/div>\n
Playwright pt = Playwright.create<\/em>();<\/div>\n
LaunchOptions lo = new<\/strong> LaunchOptions();<\/div>\n
lo.setChannel(“msedge”);<\/div>\n
lo.setHeadless(false<\/strong>);<\/div>\n
BrowserType btype = pt.chromium();<\/div>\n
Browser b = btype.launch((new<\/strong> BrowserType.LaunchOptions().setHeadless(false<\/strong>)));<\/div>\n
Page pg = b.newPage();<\/div>\n
pg.navigate(“https:\/\/sso.teachable.com\/secure\/9521\/identity\/login\/password”);<\/div>\n
pg.locator(“input:above(:text(“Password”))”).first().fill(“rahulshettyacademy”);<\/div>\n
pg.pause();<\/div>\n
}<\/div>\n
}<\/div>\n
<\/div>\n
Source code (near)<\/strong><\/p>\n
package<\/strong> com.rsa.playwrightjava;<\/div>\n
<\/div>\n
import<\/strong> org.junit.jupiter.api.Test;<\/div>\n
import<\/strong> com.microsoft.playwright.Browser;<\/div>\n
import<\/strong> com.microsoft.playwright.BrowserType;<\/div>\n
import<\/strong> com.microsoft.playwright.BrowserType.LaunchOptions;<\/div>\n
import<\/strong> com.microsoft.playwright.Locator;<\/div>\n
import<\/strong> com.microsoft.playwright.Page;<\/div>\n
import<\/strong> com.microsoft.playwright.Playwright;<\/div>\n
<\/div>\n
public<\/strong>
\nclass<\/strong> Blog11_AboveMethod_UC3_near {<\/div>\n
@Test<\/div>\n
public<\/strong>
\nvoid<\/strong> PlaywrightJTest() {<\/div>\n
Playwright pt = Playwright.create<\/em>();<\/div>\n
LaunchOptions lo = new<\/strong> LaunchOptions();<\/div>\n
lo.setChannel(“msedge”);<\/div>\n
lo.setHeadless(false<\/strong>);<\/div>\n
BrowserType btype = pt.chromium();<\/div>\n
Browser b = btype.launch((new<\/strong> BrowserType.LaunchOptions().setHeadless(false<\/strong>)));<\/div>\n
Page pg = b.newPage();<\/div>\n
pg.navigate(“https:\/\/rahulshettyacademy.com\/AutomationPractice\/”);<\/div>\n
pg.locator(“select:near(:text(“Dropdown”))”).selectOption(“Option1”);<\/div>\n
pg.pause();<\/div>\n
}<\/div>\n
}<\/div>\n
<\/div>\n
Source code (right-of)<\/strong><\/div>\n
package<\/strong> com.rsa.playwrightjava;<\/div>\n
<\/div>\n
import<\/strong> org.junit.jupiter.api.Test;<\/div>\n
import<\/strong> com.microsoft.playwright.Browser;<\/div>\n
import<\/strong> com.microsoft.playwright.BrowserType;<\/div>\n
import<\/strong> com.microsoft.playwright.BrowserType.LaunchOptions;<\/div>\n
import<\/strong> com.microsoft.playwright.Locator;<\/div>\n
import<\/strong> com.microsoft.playwright.Page;<\/div>\n
import<\/strong> com.microsoft.playwright.Playwright;<\/div>\n
<\/div>\n
public<\/strong>
\nclass<\/strong> Blog11_AboveMethod_UC4_rightof {<\/div>\n
@Test<\/div>\n
public<\/strong>
\nvoid<\/strong> PlaywrightJTest() {<\/div>\n
Playwright pt = Playwright.create<\/em>();<\/div>\n
LaunchOptions lo = new<\/strong> LaunchOptions();<\/div>\n
lo.setChannel(“msedge”);<\/div>\n
lo.setHeadless(false<\/strong>);<\/div>\n
BrowserType btype = pt.chromium();<\/div>\n
Browser b = btype.launch((new<\/strong> BrowserType.LaunchOptions().setHeadless(false<\/strong>)));<\/div>\n
Page pg = b.newPage();<\/div>\n
pg.navigate(“https:\/\/rahulshettyacademy.com\/seleniumPractise\/#\/offers”);<\/div>\n
pg.locator(“select:right-of(:text(“Search”))”).selectOption(“20”);<\/div>\n
pg.pause();<\/div>\n
}<\/div>\n
}<\/div>\n
<\/div>\n
Source code (left-of)<\/strong><\/div>\n
package<\/strong> com.rsa.playwrightjava;<\/div>\n
<\/div>\n
import<\/strong> org.junit.jupiter.api.Test;<\/div>\n
import<\/strong> com.microsoft.playwright.Browser;<\/div>\n
import<\/strong> com.microsoft.playwright.BrowserType;<\/div>\n
import<\/strong> com.microsoft.playwright.BrowserType.LaunchOptions;<\/div>\n
import<\/strong> com.microsoft.playwright.Locator;<\/div>\n
import<\/strong> com.microsoft.playwright.Page;<\/div>\n
import<\/strong> com.microsoft.playwright.Playwright;<\/div>\n
<\/div>\n
public<\/strong>
\nclass<\/strong> Blog11_AboveMethod_UC5_leftoff {<\/div>\n
@Test<\/div>\n
public<\/strong>
\nvoid<\/strong> PlaywrightJTest() {<\/div>\n
Playwright pt = Playwright.create<\/em>();<\/div>\n
LaunchOptions lo = new<\/strong> LaunchOptions();<\/div>\n
lo.setChannel(“msedge”);<\/div>\n
lo.setHeadless(false<\/strong>);<\/div>\n
BrowserType btype = pt.chromium();<\/div>\n
Browser b = btype.launch((new<\/strong> BrowserType.LaunchOptions().setHeadless(false<\/strong>)));<\/div>\n
Page pg = b.newPage();<\/div>\n
pg.navigate(“https:\/\/rahulshettyacademy.com\/”);<\/div>\n
pg.locator(“a:left-of(:text(“LOGIN”))”).first().click();<\/div>\n
pg.pause();<\/div>\n
}<\/div>\n
}<\/div>\n
Thanks.<\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/section>\n
<\/body><\/html><\/p>\n","protected":false},"excerpt":{"rendered":"
In this blog, we will explore Playwright Java’s relative locators, that can be used to locate elements positioned above\/below\/near\/right\/left of a given element. Topics that we will cover: Usage of Relative Locator \u2018below\u2019 Usage of Relative Locator \u2018above\u2019 Usage of Relative Locator \u2018near\u2019 Usage of Relative Locator \u2018right-of\u2019 Usage of Relative Locator \u2018left-of\u2019 Source code […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,9],"tags":[],"class_list":["post-3175","post","type-post","status-publish","format-standard","hentry","category-java","category-playwright","post-wrapper","thrv_wrapper"],"_links":{"self":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=3175"}],"version-history":[{"count":0,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3175\/revisions"}],"wp:attachment":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=3175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=3175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=3175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}