Tutorial 20 – Identify Nth element using Playwright Java
What you will Learn in this blog:
How to identify nth elementusing Playwright Java
Code snippets
How to identify nth element using PW
Launch
https://www.way2automation.com/angularjs-protractor/registeration/#/login
Notice below that there are 3 text fields
Inspect any of the text field, notice that the field of type ‘input’ tagname
Let us use the ‘input’ locator and fill the text field with some string:
So our code looks like:
Save and execute.
Notice the expected error below. The error means that playwright has found 3 input fields and is unable to decide which input field it should consider
So how do we instruct playwright to select the first input field?
We can use the below reference. The first field has index 0, second has index 1 and so on…
We can now use ‘nth element’ syntax
Save and execute.
Notice below that ‘angular’ gets typed in first text field
Let us change the index to 2
Save and execute.
Notice below that ‘angular’ gets typed in last text field
Let us now use nth element approach to fill all the 3 fields
Save and execute.
Notice below that we are logged in
We can also use negative index numbers. The last field will have the index -1 and so on….
Let us try with -1
Code snippet
package com.w2a.pwjava;
import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
public class NthElementPW {
public static void main(String[] args) throws InterruptedException {
Playwright pw = Playwright.create();
Browser browser = pw.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
BrowserContext browserContext = browser.newContext();
Page page = browserContext.newPage();
page.navigate("https://www.way2automation.com/angularjs-protractor/registeration/#/login");
page.locator("input >> nth=0").fill("angular");
page.locator("input >> nth=1").fill("password");
page.locator("input >> nth=2").fill("angular");
page.locator("button").click();
//page.locator("input >> nth=-1").fill("angular");
}
}
Thank you for reading!
