In this blog we will utilize Playwright Java to locate and retrieve the Nth element within a given context.<\/em>\u00a0<\/em><\/p>\n

\n

\n<\/ins>\n<\/div>\n
Topics that we will cover:<\/strong><\/p>\n
\n
Identify Nth element and populate data (positive indexing)<\/li>\n
Negative indexing\u00a0<\/li>\n
Source code<\/li>\n<\/ul>\n
Identify Nth element and populate data (positive indexing)<\/strong><\/p>\n
Go to https:\/\/rahulshettyacademy.com\/angularpractice\/<\/a>\u00a0 \u00a0<\/p>\n
We can see 3 input text fields on this page<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Examine any of the text fields and observe that the fields belongs to the ‘input’ tagname type<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Utilize the ‘input’ locator to populate the text field with a specific string:<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Execute and take note of the error in the console<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0 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
What is the best way to direct the playwright in selecting the first input field?<\/p>\n
The reference provided below can be utilized.\u00a0<\/p>\n
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<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0The syntax for accessing the ‘nth element’ is:<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
Execute.<\/p>\n
See below, in the first text field, the word ‘rahulshettyacademy’ is entered. No error this time<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Execute.<\/p>\n
See below, in the second text field, the word ‘rahulshettyacademy.com’ is entered<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0We can now utilize the ‘Nth’ element approach to populate all three fields<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Execute.\u00a0<\/p>\n
Notice that all the 3 fields are populated without any errors<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Negative indexing<\/strong><\/p>\n
Negative index numbers can also be utilized to identify the fields.\u00a0<\/p>\n
The final field will be assigned an index of -1, the second last field will have index of -2 and so forth…<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Let’s attempt using a negative value of -1<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0So this is how we can identify \u2018Nth\u2019 element based on its index.<\/p>\n
Source code<\/strong><\/p>\n
package<\/strong> com.rsa.playwrightjava;<\/p>\n
<\/p>\n
import<\/strong> java.nio.file.Paths;<\/p>\n
import<\/strong> org.junit.jupiter.api.Test;<\/p>\n
import<\/strong> com.microsoft.playwright.Browser;<\/p>\n
import<\/strong> com.microsoft.playwright.BrowserType;<\/p>\n
import<\/strong> com.microsoft.playwright.BrowserType.LaunchOptions;<\/p>\n
import<\/strong> com.microsoft.playwright.Download;<\/p>\n
import<\/strong> com.microsoft.playwright.Page;<\/p>\n
import<\/strong> com.microsoft.playwright.Playwright;<\/p>\n
<\/p>\n
public<\/strong>
\nclass<\/strong> Blog17_IdentifyNthElement {<\/p>\n
@Test<\/p>\n
public<\/strong>
\nvoid<\/strong> PlaywrightJTest() throws<\/strong> InterruptedException {<\/p>\n
Playwright pt = Playwright.create<\/em>();<\/p>\n
LaunchOptions lo = new<\/strong> LaunchOptions();<\/p>\n
lo.setChannel(“msedge”);<\/p>\n
lo.setHeadless(false<\/strong>);<\/p>\n
BrowserType btype = pt.chromium();<\/p>\n
Browser b = btype.launch((new<\/strong> BrowserType.LaunchOptions().setHeadless(false<\/strong>)));<\/p>\n
Page pg = b.newPage();<\/p>\n
pg.navigate(“https:\/\/rahulshettyacademy.com\/angularpractice\/”);<\/p>\n
\/\/pg.locator(“input”).fill(“rahulshettyacademy”);<\/p>\n
pg.locator(“input >> nth=0”).fill(“rahulshettyacademy”);<\/p>\n
pg.locator(“input >> nth=1”).fill(“rahulshettyacademy.com”);<\/p>\n
\/\/pg.locator(“input >> nth=2”).fill(“pwd”);<\/p>\n
pg.locator(“input >> nth=-1”).fill(“pwd”);<\/p>\n
pg.pause();<\/p>\n
}<\/p>\n
}<\/p>\n
<\/p>\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 utilize Playwright Java to locate and retrieve the Nth element within a given context.\u00a0 Topics that we will cover: Identify Nth element and populate data (positive indexing) Negative indexing\u00a0 Source code Identify Nth element and populate data (positive indexing) Go to https:\/\/rahulshettyacademy.com\/angularpractice\/\u00a0 \u00a0 We can see 3 input text fields […]<\/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-3303","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\/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":0,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3303\/revisions"}],"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}]}}