{"id":3175,"date":"2025-01-15T19:49:37","date_gmt":"2025-01-15T19:49:37","guid":{"rendered":"https:\/\/rahulshettyacademy.com\/blog\/?p=3175"},"modified":"2025-01-17T10:35:25","modified_gmt":"2025-01-17T10:35:25","slug":"relative-locators-in-playwright-java-below-above-near-right-of-left-of","status":"publish","type":"post","link":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/2025\/01\/15\/relative-locators-in-playwright-java-below-above-near-right-of-left-of\/","title":{"rendered":"Relative Locators in Playwright Java (below, above, near, right-of, left-of)"},"content":{"rendered":"<p><em>In this blog, we will explore Playwright Java&#8217;s relative locators, that can be used to locate elements positioned above\/below\/near\/right\/left of a given element.<\/em><\/p>\n<p><strong>Topics that we will cover:<\/strong><\/p>\n<ul>\n<li>Usage of Relative Locator \u2018below\u2019<\/li>\n<li>Usage of Relative Locator \u2018above\u2019<\/li>\n<li>Usage of Relative Locator \u2018near\u2019<\/li>\n<li>Usage of Relative Locator \u2018right-of\u2019<\/li>\n<li>Usage of Relative Locator \u2018left-of\u2019<\/li>\n<li>Source code<\/li>\n<\/ul>\n<p><strong>Usage of Relative Locator \u2018below\u2019&nbsp;<\/strong><\/p>\n<p>Go to <a href=\"https:\/\/opensource-demo.orangehrmlive.com\/\" style=\"outline: none;\" target=\"_blank\" rel=\"noopener\">https:\/\/opensource-demo.orangehrmlive.com\/<\/a>&nbsp;<\/p>\n<p>As can be seen below, the input \u2018Username\u2019 field is \u201c<strong>below\u201d<\/strong> \u2018Username\u2019 text label<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3178\" width=\"575\" data-init-width=\"1164\" height=\"181\" data-init-height=\"366\" title=\"Screenshot 2025-01-16 at 1.23.55\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.23.55\u202fAM.png\" data-width=\"575\" data-height=\"181\" style=\"aspect-ratio: auto 1164 \/ 366;\"><\/span><\/p>\n<p>&nbsp;Let us try to enter text \u201crahulshettyacademy\u201d using \u201c<strong><em>below<\/em><\/strong>\u201d locator.&nbsp;<\/p>\n<p>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<p><span><img decoding=\"async\" alt=\"\" data-id=\"3179\" width=\"622\" data-init-width=\"1164\" height=\"59\" data-init-height=\"110\" title=\"Screenshot 2025-01-16 at 1.24.53\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.24.53\u202fAM.png\" data-width=\"622\" data-height=\"59\" style=\"aspect-ratio: auto 1164 \/ 110;\"><\/span><\/p>\n<p>&nbsp;Execute the code.&nbsp;<\/p>\n<p>The text \u201crahulshettyacademy\u201d gets typed in the \u2018Username\u2019 input field<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3180\" width=\"495\" data-init-width=\"694\" height=\"301\" data-init-height=\"422\" title=\"Screenshot 2025-01-16 at 1.25.46\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.25.46\u202fAM.png\" data-width=\"495\" data-height=\"301\" style=\"aspect-ratio: auto 694 \/ 422;\"><\/span><\/p>\n<p>&nbsp;<strong>Usage of Relative Locator \u2018above\u2019&nbsp;<\/strong><\/p>\n<p>Let us navigate to&nbsp; <a href=\"https:\/\/sso.teachable.com\/secure\/9521\/identity\/login\/password\" style=\"outline: none;\" target=\"_blank\" rel=\"noopener\">https:\/\/sso.teachable.com\/secure\/9521\/identity\/login\/password<\/a> &nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3181\" width=\"544\" data-init-width=\"694\" height=\"558\" data-init-height=\"712\" title=\"Screenshot 2025-01-16 at 1.26.19\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.26.19\u202fAM.png\" data-width=\"544\" data-height=\"558\" style=\"aspect-ratio: auto 694 \/ 712;\"><\/span><\/p>\n<p>&nbsp;As seen above, there is an \u2018Email\u2019 field <strong>above<\/strong> \u2018Password\u2019 field.<\/p>\n<p>We can apply the same logic in this scenario as well<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3182\" width=\"642\" data-init-width=\"1140\" height=\"148\" data-init-height=\"262\" title=\"Screenshot 2025-01-16 at 1.27.14\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.27.14\u202fAM.png\" data-width=\"642\" data-height=\"148\" style=\"aspect-ratio: auto 1140 \/ 262;\"><\/span><\/p>\n<p>&nbsp;Execute the code.<\/p>\n<p>Notice below that Playwright types the text in the \u2018Email\u2019 input text field&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3183\" width=\"592\" data-init-width=\"1140\" height=\"407\" data-init-height=\"784\" title=\"Screenshot 2025-01-16 at 1.27.50\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.27.50\u202fAM.png\" data-width=\"592\" data-height=\"407\" style=\"aspect-ratio: auto 1140 \/ 784;\"><\/span><\/p>\n<p>&nbsp;This is the way in which we can make use of the &#8220;<em>above<\/em>&#8221; method of the relative locator.<\/p>\n<p><strong>Usage of Relative Locator \u2018near\u2019&nbsp;<\/strong><\/p>\n<p>Go to <a href=\"https:\/\/rahulshettyacademy.com\/AutomationPractice\/\">https:\/\/rahulshettyacademy.com\/AutomationPractice\/<\/a> &nbsp;<\/p>\n<p>As can be seen below, the dropdown field is \u201c<strong>near\u201d<\/strong> \u2018Dropdown\u2019 text<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3184\" width=\"568\" data-init-width=\"1140\" height=\"291\" data-init-height=\"584\" title=\"Screenshot 2025-01-16 at 1.28.28\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.28.28\u202fAM.png\" data-width=\"568\" data-height=\"291\" style=\"aspect-ratio: auto 1140 \/ 584;\"><\/span><\/p>\n<p>&nbsp;Let us try to select \u201cOptions1\u201d using \u201c<strong><em>near<\/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<p><span><img decoding=\"async\" alt=\"\" data-id=\"3185\" width=\"733\" data-init-width=\"1140\" height=\"131\" data-init-height=\"204\" title=\"Screenshot 2025-01-16 at 1.30.17\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.30.17\u202fAM.png\" data-width=\"733\" data-height=\"131\" style=\"aspect-ratio: auto 1140 \/ 204;\"><\/span><\/p>\n<p>&nbsp;Execute the code.&nbsp;<\/p>\n<p>\u201cOption1\u201d gets selected<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3186\" width=\"663\" data-init-width=\"1140\" height=\"408\" data-init-height=\"702\" title=\"Screenshot 2025-01-16 at 1.30.59\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.30.59\u202fAM.png\" data-width=\"663\" data-height=\"408\" style=\"aspect-ratio: auto 1140 \/ 702;\"><\/span><\/p>\n<p>&nbsp;<strong>Usage of Relative Locator \u2018right-of\u2019&nbsp;<\/strong><\/p>\n<p>Go to <a href=\"https:\/\/rahulshettyacademy.com\/seleniumPractise\/#\/offers\" style=\"outline: none;\">https:\/\/rahulshettyacademy.com\/seleniumPractise\/#\/offers<\/a> &nbsp;<\/p>\n<p>As can be seen below, the dropdown field is \u201c<strong>right-of\u201d<\/strong> \u2018Page size\u2019 text<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3187\" width=\"465\" data-init-width=\"834\" height=\"171\" data-init-height=\"306\" title=\"Screenshot 2025-01-16 at 1.31.40\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.31.40\u202fAM.png\" data-width=\"465\" data-height=\"171\" style=\"aspect-ratio: auto 834 \/ 306;\"><\/span><\/p>\n<p>&nbsp;<\/p>\n<p>Let us try to select \u201c20\u201d using \u201c<strong><em>right-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<p><span><img decoding=\"async\" alt=\"\" data-id=\"3188\" width=\"591\" data-init-width=\"1182\" height=\"491\" data-init-height=\"982\" title=\"Screenshot 2025-01-16 at 1.32.29\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.32.29\u202fAM.png\" data-width=\"591\" data-height=\"491\" style=\"aspect-ratio: auto 1182 \/ 982;\"><\/span><\/p>\n<p>&nbsp;<strong>Usage of Relative Locator \u2018left-of\u2019<\/strong><\/p>\n<p>Launch <a href=\"https:\/\/rahulshettyacademy.com\/\" style=\"outline: none;\">https:\/\/rahulshettyacademy.com\/<\/a> &nbsp;<\/p>\n<p>As can be seen below, the \u201cREGISTER\u201d link is \u201c<strong><em>left-of<\/em><\/strong><strong>\u201d<\/strong> LOGIN link<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3189\" width=\"677\" data-init-width=\"1182\" height=\"118\" data-init-height=\"206\" title=\"Screenshot 2025-01-16 at 1.33.44\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.33.44\u202fAM.png\" data-width=\"677\" data-height=\"118\" style=\"aspect-ratio: auto 1182 \/ 206;\"><\/span><\/p>\n<p>&nbsp;Let us try to click \u201cREGISTER\u201d link using \u201c<strong><em>left-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<p><span><img decoding=\"async\" alt=\"\" data-id=\"3190\" width=\"713\" data-init-width=\"1182\" height=\"124\" data-init-height=\"206\" title=\"Screenshot 2025-01-16 at 1.34.21\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.34.21\u202fAM.png\" data-width=\"713\" data-height=\"124\" style=\"aspect-ratio: auto 1182 \/ 206;\"><\/span><\/p>\n<p>&nbsp;Execute the code.<\/p>\n<p>The registration page opens up<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3191\" width=\"678\" data-init-width=\"1182\" height=\"498\" data-init-height=\"868\" title=\"Screenshot 2025-01-16 at 1.34.53\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.34.53\u202fAM.png\" data-width=\"678\" data-height=\"498\" style=\"aspect-ratio: auto 1182 \/ 868;\"><\/span><\/p>\n<p>&nbsp;<\/p>\n<\/p>\n<p><strong>Source code (below)<\/strong><strong>package<\/strong> com.rsa.playwrightjava;<strong>import<\/strong> org.junit.jupiter.api.Test;<strong>import<\/strong> com.microsoft.playwright.Browser;<strong>import<\/strong> com.microsoft.playwright.BrowserType;<strong>import<\/strong> com.microsoft.playwright.BrowserType.LaunchOptions;<strong>import<\/strong> com.microsoft.playwright.Locator;<strong>import<\/strong> com.microsoft.playwright.Page;<strong>import<\/strong> com.microsoft.playwright.Playwright;<strong>public<\/strong><strong>class<\/strong> Blog11_AboveMethod_UC1_below {@Test<strong>public<\/strong><strong>void<\/strong> PlaywrightJTest() {Playwright pt = Playwright.<em>create<\/em>();LaunchOptions lo = <strong>new<\/strong> LaunchOptions();lo.setChannel(&#8220;msedge&#8221;);lo.setHeadless(<strong>false<\/strong>);BrowserType btype = pt.chromium();Browser b = btype.launch((<strong>new<\/strong> BrowserType.LaunchOptions().setHeadless(<strong>false<\/strong>)));Page pg = b.newPage();pg.navigate(&#8220;https:\/\/opensource-demo.orangehrmlive.com\/&#8221;);pg.locator(&#8220;input:below(:text(&#8220;Username&#8221;))&#8221;).first().fill(&#8220;rahulshettyacademy&#8221;);pg.pause();}}<strong>Source code (above)<\/strong><strong>package<\/strong> com.rsa.playwrightjava;<strong>import<\/strong> org.junit.jupiter.api.Test;<strong>import<\/strong> com.microsoft.playwright.Browser;<strong>import<\/strong> com.microsoft.playwright.BrowserType;<strong>import<\/strong> com.microsoft.playwright.BrowserType.LaunchOptions;<strong>import<\/strong> com.microsoft.playwright.Locator;<strong>import<\/strong> com.microsoft.playwright.Page;<strong>import<\/strong> com.microsoft.playwright.Playwright;<strong>public<\/strong><strong>class<\/strong> Blog11_AboveMethod_UC2_above {@Test<strong>public<\/strong><strong>void<\/strong> PlaywrightJTest() {Playwright pt = Playwright.<em>create<\/em>();LaunchOptions lo = <strong>new<\/strong> LaunchOptions();lo.setChannel(&#8220;msedge&#8221;);lo.setHeadless(<strong>false<\/strong>);BrowserType btype = pt.chromium();Browser b = btype.launch((<strong>new<\/strong> BrowserType.LaunchOptions().setHeadless(<strong>false<\/strong>)));Page pg = b.newPage();pg.navigate(&#8220;https:\/\/sso.teachable.com\/secure\/9521\/identity\/login\/password&#8221;);pg.locator(&#8220;input:above(:text(&#8220;Password&#8221;))&#8221;).first().fill(&#8220;rahulshettyacademy&#8221;);pg.pause();}}<\/p>\n<p><strong>Source code (near)<\/strong><\/p>\n<p><strong>package<\/strong> com.rsa.playwrightjava;<strong>import<\/strong> org.junit.jupiter.api.Test;<strong>import<\/strong> com.microsoft.playwright.Browser;<strong>import<\/strong> com.microsoft.playwright.BrowserType;<strong>import<\/strong> com.microsoft.playwright.BrowserType.LaunchOptions;<strong>import<\/strong> com.microsoft.playwright.Locator;<strong>import<\/strong> com.microsoft.playwright.Page;<strong>import<\/strong> com.microsoft.playwright.Playwright;<strong>public<\/strong><strong>class<\/strong> Blog11_AboveMethod_UC3_near {@Test<strong>public<\/strong><strong>void<\/strong> PlaywrightJTest() {Playwright pt = Playwright.<em>create<\/em>();LaunchOptions lo = <strong>new<\/strong> LaunchOptions();lo.setChannel(&#8220;msedge&#8221;);lo.setHeadless(<strong>false<\/strong>);BrowserType btype = pt.chromium();Browser b = btype.launch((<strong>new<\/strong> BrowserType.LaunchOptions().setHeadless(<strong>false<\/strong>)));Page pg = b.newPage();pg.navigate(&#8220;https:\/\/rahulshettyacademy.com\/AutomationPractice\/&#8221;);pg.locator(&#8220;select:near(:text(&#8220;Dropdown&#8221;))&#8221;).selectOption(&#8220;Option1&#8221;);pg.pause();}}<strong>Source code (right-of)<\/strong><strong>package<\/strong> com.rsa.playwrightjava;<strong>import<\/strong> org.junit.jupiter.api.Test;<strong>import<\/strong> com.microsoft.playwright.Browser;<strong>import<\/strong> com.microsoft.playwright.BrowserType;<strong>import<\/strong> com.microsoft.playwright.BrowserType.LaunchOptions;<strong>import<\/strong> com.microsoft.playwright.Locator;<strong>import<\/strong> com.microsoft.playwright.Page;<strong>import<\/strong> com.microsoft.playwright.Playwright;<strong>public<\/strong><strong>class<\/strong> Blog11_AboveMethod_UC4_rightof {@Test<strong>public<\/strong><strong>void<\/strong> PlaywrightJTest() {Playwright pt = Playwright.<em>create<\/em>();LaunchOptions lo = <strong>new<\/strong> LaunchOptions();lo.setChannel(&#8220;msedge&#8221;);lo.setHeadless(<strong>false<\/strong>);BrowserType btype = pt.chromium();Browser b = btype.launch((<strong>new<\/strong> BrowserType.LaunchOptions().setHeadless(<strong>false<\/strong>)));Page pg = b.newPage();pg.navigate(&#8220;https:\/\/rahulshettyacademy.com\/seleniumPractise\/#\/offers&#8221;);pg.locator(&#8220;select:right-of(:text(&#8220;Search&#8221;))&#8221;).selectOption(&#8220;20&#8221;);pg.pause();}}<strong>Source code (left-of)<\/strong><strong>package<\/strong> com.rsa.playwrightjava;<strong>import<\/strong> org.junit.jupiter.api.Test;<strong>import<\/strong> com.microsoft.playwright.Browser;<strong>import<\/strong> com.microsoft.playwright.BrowserType;<strong>import<\/strong> com.microsoft.playwright.BrowserType.LaunchOptions;<strong>import<\/strong> com.microsoft.playwright.Locator;<strong>import<\/strong> com.microsoft.playwright.Page;<strong>import<\/strong> com.microsoft.playwright.Playwright;<strong>public<\/strong><strong>class<\/strong> Blog11_AboveMethod_UC5_leftoff {@Test<strong>public<\/strong><strong>void<\/strong> PlaywrightJTest() {Playwright pt = Playwright.<em>create<\/em>();LaunchOptions lo = <strong>new<\/strong> LaunchOptions();lo.setChannel(&#8220;msedge&#8221;);lo.setHeadless(<strong>false<\/strong>);BrowserType btype = pt.chromium();Browser b = btype.launch((<strong>new<\/strong> BrowserType.LaunchOptions().setHeadless(<strong>false<\/strong>)));Page pg = b.newPage();pg.navigate(&#8220;https:\/\/rahulshettyacademy.com\/&#8221;);pg.locator(&#8220;a:left-of(:text(&#8220;LOGIN&#8221;))&#8221;).first().click();pg.pause();}}<\/p>\n<p>Thanks.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, we will explore Playwright Java&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":750,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[41],"tags":[],"class_list":["post-3175","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","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":6,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3175\/revisions"}],"predecessor-version":[{"id":3707,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3175\/revisions\/3707"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/750"}],"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}]}}