{"id":3303,"date":"2025-01-16T05:04:35","date_gmt":"2025-01-16T05:04:35","guid":{"rendered":"https:\/\/rahulshettyacademy.com\/blog\/?p=3303"},"modified":"2025-01-17T10:40:44","modified_gmt":"2025-01-17T10:40:44","slug":"leverage-playwright-java-to-access-the-element-using-its-nth-index","status":"publish","type":"post","link":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/2025\/01\/16\/leverage-playwright-java-to-access-the-element-using-its-nth-index\/","title":{"rendered":"Leverage Playwright Java to access the element using its Nth index\u00a0"},"content":{"rendered":"<p><em>In this blog we will utilize Playwright Java to locate and retrieve the Nth element within a given context.<\/em><em>&nbsp;<\/em><\/p>\n<p><strong>Topics that we will cover:<\/strong><\/p>\n<ul>\n<li>Identify Nth element and populate data (positive indexing)<\/li>\n<li>Negative indexing&nbsp;<\/li>\n<li>Source code<\/li>\n<\/ul>\n<p><strong>Identify Nth element and populate data (positive indexing)<\/strong><\/p>\n<p>Go to <a href=\"https:\/\/rahulshettyacademy.com\/angularpractice\/\" style=\"outline: none;\">https:\/\/rahulshettyacademy.com\/angularpractice\/<\/a>&nbsp; &nbsp;<\/p>\n<p>We can see 3 input text fields on this page<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3306\" width=\"536\" data-init-width=\"1168\" height=\"314\" data-init-height=\"684\" title=\"Screenshot 2025-01-16 at 10.35.49\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.35.49\u202fAM.png\" data-width=\"536\" data-height=\"314\" style=\"aspect-ratio: auto 1168 \/ 684;\"><\/span><\/p>\n<p>&nbsp;Examine any of the text fields and observe that the fields belongs to the &#8216;input&#8217; tagname type<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3307\" width=\"497\" data-init-width=\"1168\" height=\"291\" data-init-height=\"684\" title=\"Screenshot 2025-01-16 at 10.36.28\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.36.28\u202fAM.png\" data-width=\"497\" data-height=\"291\" style=\"aspect-ratio: auto 1168 \/ 684;\"><\/span><\/p>\n<p>&nbsp;Utilize the &#8216;input&#8217; locator to populate the text field with a specific string:<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3308\" width=\"486\" data-init-width=\"1168\" height=\"382\" data-init-height=\"918\" title=\"Screenshot 2025-01-16 at 10.38.01\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.38.01\u202fAM.png\" data-width=\"486\" data-height=\"382\" style=\"aspect-ratio: auto 1168 \/ 918;\"><\/span><\/p>\n<p>&nbsp;Execute and take note of the error in the console<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3309\" width=\"578\" data-init-width=\"1168\" height=\"232\" data-init-height=\"468\" title=\"Screenshot 2025-01-16 at 10.38.45\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.38.45\u202fAM.png\" data-width=\"578\" data-height=\"232\" style=\"aspect-ratio: auto 1168 \/ 468;\"><\/span><\/p>\n<p>&nbsp; The error implies that the playwright has discovered multiple input fields but is uncertain about which input field should it use to enter the text string.<\/p>\n<p>What is the best way to direct the playwright in selecting the first input field?<\/p>\n<p>The reference provided below can be utilized.&nbsp;<\/p>\n<p>The indexing of fields starts from 0, with the first field having an index of 0, the second field having an index of 1, and so on<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3310\" width=\"562\" data-init-width=\"1168\" height=\"225\" data-init-height=\"468\" title=\"Screenshot 2025-01-16 at 10.39.14\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.39.14\u202fAM.png\" data-width=\"562\" data-height=\"225\" style=\"aspect-ratio: auto 1168 \/ 468;\"><\/span><\/p>\n<p>&nbsp;The syntax for accessing the &#8216;nth element&#8217; is:<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3311\" width=\"480\" data-init-width=\"1168\" height=\"231\" data-init-height=\"562\" title=\"Screenshot 2025-01-16 at 10.39.44\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.39.44\u202fAM.png\" data-width=\"480\" data-height=\"231\" style=\"aspect-ratio: auto 1168 \/ 562;\"><\/span><\/p>\n<p>Execute.<\/p>\n<p>See below, in the first text field, the word &#8216;rahulshettyacademy&#8217; is entered. No error this time<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3312\" width=\"525\" data-init-width=\"1168\" height=\"471\" data-init-height=\"1048\" title=\"Screenshot 2025-01-16 at 10.40.30\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.40.30\u202fAM.png\" data-width=\"525\" data-height=\"471\" style=\"aspect-ratio: auto 1168 \/ 1048;\"><\/span><\/p>\n<p>&nbsp;Execute.<\/p>\n<p>See below, in the second text field, the word &#8216;rahulshettyacademy.com&#8217; is entered<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3313\" width=\"542\" data-init-width=\"1168\" height=\"356\" data-init-height=\"768\" title=\"Screenshot 2025-01-16 at 10.41.14\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.41.14\u202fAM.png\" data-width=\"542\" data-height=\"356\" style=\"aspect-ratio: auto 1168 \/ 768;\"><\/span><\/p>\n<p>&nbsp;We can now utilize the &#8216;Nth&#8217; element approach to populate all three fields<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3314\" width=\"555\" data-init-width=\"1168\" height=\"109\" data-init-height=\"230\" title=\"Screenshot 2025-01-16 at 10.41.40\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.41.40\u202fAM.png\" data-width=\"555\" data-height=\"109\" style=\"aspect-ratio: auto 1168 \/ 230;\"><\/span><\/p>\n<p>&nbsp;Execute.&nbsp;<\/p>\n<p>Notice that all the 3 fields are populated without any errors<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3315\" width=\"460\" data-init-width=\"1168\" height=\"283\" data-init-height=\"718\" title=\"Screenshot 2025-01-16 at 10.42.10\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.42.10\u202fAM.png\" data-width=\"460\" data-height=\"283\" style=\"aspect-ratio: auto 1168 \/ 718;\"><\/span><\/p>\n<p>&nbsp;<strong>Negative indexing<\/strong><\/p>\n<p>Negative index numbers can also be utilized to identify the fields.&nbsp;<\/p>\n<p>The final field will be assigned an index of -1, the second last field will have index of -2 and so forth&#8230;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3316\" width=\"481\" data-init-width=\"1168\" height=\"236\" data-init-height=\"572\" title=\"Screenshot 2025-01-16 at 10.42.38\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.42.38\u202fAM.png\" data-width=\"481\" data-height=\"236\" style=\"aspect-ratio: auto 1168 \/ 572;\"><\/span><\/p>\n<p>&nbsp;Let&#8217;s attempt using a negative value of -1<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3317\" width=\"472\" data-init-width=\"1168\" height=\"612\" data-init-height=\"1514\" title=\"Screenshot 2025-01-16 at 10.43.16\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.43.16\u202fAM.png\" data-width=\"472\" data-height=\"612\" style=\"aspect-ratio: auto 1168 \/ 1514;\"><\/span><\/p>\n<p>&nbsp;So this is how we can identify \u2018Nth\u2019 element based on its index.<\/p>\n<p><strong>Source code<\/strong><\/p>\n<p><strong>package<\/strong> com.rsa.playwrightjava;<\/p>\n<\/p>\n<p><strong>import<\/strong> java.nio.file.Paths;<\/p>\n<p><strong>import<\/strong> org.junit.jupiter.api.Test;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Browser;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.BrowserType;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.BrowserType.LaunchOptions;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Download;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Page;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Playwright;<\/p>\n<\/p>\n<p><strong>public<\/strong><strong>class<\/strong> Blog17_IdentifyNthElement {<\/p>\n<p>@Test<\/p>\n<p><strong>public<\/strong><strong>void<\/strong> PlaywrightJTest() <strong>throws<\/strong> InterruptedException {<\/p>\n<p>Playwright pt = Playwright.<em>create<\/em>();<\/p>\n<p>LaunchOptions lo = <strong>new<\/strong> LaunchOptions();<\/p>\n<p>lo.setChannel(&#8220;msedge&#8221;);<\/p>\n<p>lo.setHeadless(<strong>false<\/strong>);<\/p>\n<p>BrowserType btype = pt.chromium();<\/p>\n<p>Browser b = btype.launch((<strong>new<\/strong> BrowserType.LaunchOptions().setHeadless(<strong>false<\/strong>)));<\/p>\n<p>Page pg = b.newPage();<\/p>\n<p>pg.navigate(&#8220;https:\/\/rahulshettyacademy.com\/angularpractice\/&#8221;);<\/p>\n<p>\/\/pg.locator(&#8220;input&#8221;).fill(&#8220;rahulshettyacademy&#8221;);<\/p>\n<p>pg.locator(&#8220;input &gt;&gt; nth=0&#8221;).fill(&#8220;rahulshettyacademy&#8221;);<\/p>\n<p>pg.locator(&#8220;input &gt;&gt; nth=1&#8221;).fill(&#8220;rahulshettyacademy.com&#8221;);<\/p>\n<p>\/\/pg.locator(&#8220;input &gt;&gt; nth=2&#8221;).fill(&#8220;pwd&#8221;);<\/p>\n<p>pg.locator(&#8220;input &gt;&gt; nth=-1&#8221;).fill(&#8220;pwd&#8221;);<\/p>\n<p>pg.pause();<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<\/p>\n<p>Thanks.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog we will utilize Playwright Java to locate and retrieve the Nth element within a given context.&nbsp; Topics that we will cover: Identify Nth element and populate data (positive indexing) Negative indexing&nbsp; Source code Identify Nth element and populate data (positive indexing) Go to https:\/\/rahulshettyacademy.com\/angularpractice\/&nbsp; &nbsp; We can see 3 input text fields [&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-3303","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\/3303","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=3303"}],"version-history":[{"count":6,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3303\/revisions"}],"predecessor-version":[{"id":3719,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3303\/revisions\/3719"}],"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=3303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=3303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=3303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}