Handle dynamic webtable using :scope locator in Playwright Java

Tutorial 12​​ –​​ Handle dynamic webtable using :scope locator​​ in​​ Playwright​​ Java​​ 

What you will Learn​​ in this​​ blog:

• Select checkbox using​​ :scope​​ locator​​ inside the webtable

• Fetch data from entire webtable

• Code snippets

Select checkbox using​​ :scope locator​​ inside the webtable

Launch​​ https://datatables.net/extensions/select/examples/initialisation/checkbox.html​​ ​​ 

Notice the dynamic webtable below. Our use case is to automatically select a checkbox for any particular row

We would be using a very simple​​ :scope​​ strategy being introduced in playwright to achieve this requirement.

Inspect the table

Using the table id, let us execute the below​​ query to find number of rows (12 rows here)​​ 

We can now use this css select​​ query to locate the entire table

Let us execute the below code to count number of rows​​ 

There is a locator() method that accepts 2 arguments: selector and options

Playwright has introduced​​ :scope​​ selector, so let us use that​​ 

The options argument accepts the obect of LocatorOptions() as shown below

As shown above, we can call the ‘setHasText()’ method. In this method, we can pass the name of any person shown in the webtable

Our requirement is to select the checkbox seen against this person. Inspect the checkox, it is represented by the class shown below ​​ 

So we can further call the locator method and pass the checkbox’s css selector

We can next call the click() method to select the checkbox​​ 

Our code looks like below

So basically, in line#23, we have defined the scope of the webtable we want to act upon.

Save and execute.​​ 

Notice below that checkbox gets selected! We did not had to write any complex xpath(s) to automate this​​ 

Fetch data from entire webtable

Let us now fetch the data from entire webtable using​​ ‘tablerows’​​ reference. As shown below, there is an​​ allInnerTexts()​​ method that we can use

We can next​​ call the​​ forEach()​​ method as shown below

The syntax is as shown below

In place of action, we can write a simple sop to print all the elements of webtable

Save and execute. Notice that the entire webtable data gets printed

So this is the power of​​ :scope​​ selector.

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.Locator;

import​​ com.microsoft.playwright.Page;

import​​ com.microsoft.playwright.Playwright;

public​​ class​​ DataTablePW {

 public​​ static​​ void​​ main(String[]​​ args) {

 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://datatables.net/extensions/select/examples/initialisation/checkbox.html");

 Locator​​ tablerows​​ =​​ page.locator("table#example tr");

 tablerows.locator(":scope",​​ new​​ Locator

   .LocatorOptions()

    .setHasText("Cara Stevens"))

     .locator(".select-checkbox")

      .click();

 tablerows.locator(":scope").allInnerTexts().forEach(a​​ -> System.out.println(a));

 //System.out.println(tablerows.count());

 }

}

Thanks for reading!