In this blog we will utilize Playwright Java to locate and retrieve the Nth element within a given context. 

Topics that we will cover:

• Identify Nth element and populate data (positive indexing)
• Negative indexing 
• Source code

Identify Nth element and populate data (positive indexing)

Go to https://rahulshettyacademy.com/angularpractice/   

We can see 3 input text fields on this page

 Examine any of the text fields and observe that the fields belongs to the 'input' tagname type

 Utilize the 'input' locator to populate the text field with a specific string:

 Execute and take note of the error in the console

  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.

What is the best way to direct the playwright in selecting the first input field?

The reference provided below can be utilized. 

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

 The syntax for accessing the 'nth element' is:

Execute.

See below, in the first text field, the word 'rahulshettyacademy' is entered. No error this time

 Execute.

See below, in the second text field, the word 'rahulshettyacademy.com' is entered

 We can now utilize the 'Nth' element approach to populate all three fields

 Execute. 

Notice that all the 3 fields are populated without any errors

 Negative indexing

Negative index numbers can also be utilized to identify the fields. 

The final field will be assigned an index of -1, the second last field will have index of -2 and so forth...

 Let's attempt using a negative value of -1

 So this is how we can identify ‘Nth’ element based on its index.

Source code

package com.rsa.playwrightjava;

import java.nio.file.Paths;

import org.junit.jupiter.api.Test;

import com.microsoft.playwright.Browser;

import com.microsoft.playwright.BrowserType;

import com.microsoft.playwright.BrowserType.LaunchOptions;

import com.microsoft.playwright.Download;

import com.microsoft.playwright.Page;

import com.microsoft.playwright.Playwright;

public class Blog17_IdentifyNthElement {

@Test

public void PlaywrightJTest() throws InterruptedException {

Playwright pt = Playwright.create();

LaunchOptions lo = new LaunchOptions();

lo.setChannel("msedge");

lo.setHeadless(false);

BrowserType btype = pt.chromium();

Browser b = btype.launch((new BrowserType.LaunchOptions().setHeadless(false)));

Page pg = b.newPage();

pg.navigate("https://rahulshettyacademy.com/angularpractice/");

//pg.locator("input").fill("rahulshettyacademy");

pg.locator("input >> nth=0").fill("rahulshettyacademy");

pg.locator("input >> nth=1").fill("rahulshettyacademy.com");

//pg.locator("input >> nth=2").fill("pwd");

pg.locator("input >> nth=-1").fill("pwd");

pg.pause();

}

}

Thanks.