In this blog, we will study about the "scope" locator in Playwright Java for effectively handling dynamic webtables. 

Topics that we will cover:

• “scope” locator to select checkbox
• Extract data from the entire webtable
• Source code

“scope” locator to select checkbox

Go to
 https://datatables.net/extensions/select/examples/initialisation/checkbox.html  

Take note of the dynamic webtable shown below

 Our objective is to automatically select a checkbox for a specific row.

To fulfill this requirement, we will employ "scope" approach.

Let us inspect webtable

 Execute the “css select query” shown in below diagram
(which uses the table id). 

This query fetches 12 rows, the first row being the column headers
and the actual data starts from 2^nd row onwards  

 So the entire table can be located by using the same css query 

 We know that locator() method accepts 2 arguments: selector and options

 In the first argument, we can use :scope selector (at least one element must match the scope of the given element) 

 The ‘setHasText()’ method can be passed in the options argument

 Any person's name from the webtable can be passed as an
argument to the 'setHasText()' method

 We need to select the checkbox that is visible next to this individual. 

The checkox is uniquely represented by class   

 The locator method can be invoked again, this time passing the checkbox's CSS selector as an argument

 To select the checkbox, we can proceed by invoking the click() method

 In line#29, we have thereforr defined the scope of the webtable we want to act upon

 Let us execute the code. 

See below. The checkbox gets selected without the need for complex xpath in order to automate this use case

 Extract data from the entire webtable

To obtain the data from the entire webtable, we can make use of the allInnerTexts() method, as depicted below

 forEach() method can be used to print all the elements of webtable

So this is the true potential of the :scope selector.

Source code 

package com.rsa.playwrightjava;

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

import com.microsoft.playwright.Page;

import com.microsoft.playwright.Playwright;

public class Blog10_WebTables {

@Test

public void PlaywrightJTest() {

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

Locator webtable = pg.locator("table#example tr");

webtable.locator(":scope", new Locator.LocatorOptions().setHasText("Bradley Greer")).locator(".select-checkbox").click();

    //System.out.println("The number of rows in the webtable-->" + webtable.count());

    webtable.locator(":scope").allInnerTexts().forEach(e -> System.out.println(e));

pg.pause();

}

}

Thanks.