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!