In this blog, we will study about the “scope” locator in Playwright Java for effectively handling dynamic webtables.<\/em>\u00a0<\/em><\/p>\n

\n

\n<\/ins>\n<\/div>\n
Topics that we will cover:<\/strong><\/p>\n
\n
\u201cscope<\/em>\u201d locator to select checkbox<\/li>\n
Extract data from the entire webtable<\/span><\/span><\/li>\n
Source code<\/li>\n<\/ul>\n
\u201c<\/strong>scope<\/em><\/strong>\u201d locator to select checkbox<\/strong><\/p>\n
Go to
\u00a0https:\/\/datatables.net\/extensions\/select\/examples\/initialisation\/checkbox.html<\/a> \u00a0<\/p>\n
Take note of the dynamic webtable shown below<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Our objective is to automatically select a checkbox for a specific row.<\/p>\n
To fulfill this requirement, we will employ “scope<\/em>” approach.<\/p>\n
Let us inspect webtable<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Execute the \u201ccss select query\u201d shown in below diagram
(which uses the table id).\u00a0<\/p>\n
This query fetches 12 rows, the first row being the column headers
and the actual data starts from 2^{nd<\/sup> row onwards \u00a0<\/p>\n<\/div>\n}
$\"\"$ <\/span><\/div>\n
\n
\u00a0So the entire table can be located by using the same css query\u00a0<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0We know that locator()<\/em> method accepts 2 arguments: selector and options<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0In the first argument, we can use :scope<\/em><\/strong> selector (at least one element must match the scope of the given element)\u00a0<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0The \u2018setHasText()<\/em><\/strong>\u2019 method can be passed in the options argument<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Any person’s name from the webtable can be passed as an
argument to the ‘setHasText()<\/em><\/strong>‘ method<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0We need to select the checkbox that is visible next to this individual.\u00a0<\/p>\n
The checkox is uniquely represented by class\u00a0 \u00a0<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0The locator method can be invoked again, this time passing the checkbox’s CSS selector as an argument<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0To select the checkbox, we can proceed by invoking the click() method<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0In line#29, we have thereforr defined the scope of the webtable we want to act upon<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Let us execute the code.\u00a0<\/p>\n
See below. The checkbox gets selected without the need for complex xpath in order to automate this use case<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Extract data from the entire webtable<\/strong><\/p>\n
To obtain the data from the entire webtable, we can make use of the allInnerTexts()<\/em><\/strong> method, as depicted below<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0forEach()<\/em> method can be used to print all the elements of webtable<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
So this is the true potential of the :scope<\/em> selector.<\/p>\n
Source code\u00a0<\/strong><\/p>\n
package<\/strong> com.rsa.playwrightjava;<\/p>\n
<\/p>\n
import<\/strong> org.junit.jupiter.api.Test;<\/p>\n
<\/p>\n
import<\/strong> com.microsoft.playwright.Browser;<\/p>\n
import<\/strong> com.microsoft.playwright.BrowserType;<\/p>\n
import<\/strong> com.microsoft.playwright.BrowserType.LaunchOptions;<\/p>\n
import<\/strong> com.microsoft.playwright.Locator;<\/p>\n
import<\/strong> com.microsoft.playwright.Page;<\/p>\n
import<\/strong> com.microsoft.playwright.Playwright;<\/p>\n
<\/p>\n
public<\/strong>
\nclass<\/strong> Blog10_WebTables {<\/p>\n
@Test<\/p>\n
public<\/strong>
\nvoid<\/strong> PlaywrightJTest() {<\/p>\n
Playwright pt = Playwright.create<\/em>();<\/p>\n
LaunchOptions lo = new<\/strong> LaunchOptions();<\/p>\n
lo.setChannel(“msedge”);<\/p>\n
lo.setHeadless(false<\/strong>);<\/p>\n
BrowserType btype = pt.chromium();<\/p>\n
Browser b = btype.launch((new<\/strong> BrowserType.LaunchOptions().setHeadless(false<\/strong>)));<\/p>\n
Page pg = b.newPage();<\/p>\n
pg.navigate(“https:\/\/datatables.net\/extensions\/select\/examples\/initialisation\/checkbox.html”);<\/p>\n
Locator webtable = pg.locator(“table#example tr”);<\/p>\n
\u00a0 \u00a0<\/p>\n
webtable.locator(“:scope”, new<\/strong> Locator.LocatorOptions().setHasText(“Bradley Greer”)).locator(“.select-checkbox”).click();<\/p>\n
\u00a0 \u00a0 \/\/System.out.println(“The number of rows in the webtable–>” + webtable.count());<\/p>\n
\u00a0 \u00a0 webtable.locator(“:scope”).allInnerTexts().forEach(e -> System.out<\/em><\/strong>.println(e));<\/p>\n
pg.pause();<\/p>\n
}<\/p>\n
}<\/p>\n
<\/p>\n
Thanks.<\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/section>\n
<\/body><\/html><\/p>\n","protected":false},"excerpt":{"rendered":"
In this blog, we will study about the “scope” locator in Playwright Java for effectively handling dynamic webtables.\u00a0 Topics that we will cover: \u201cscope\u201d locator to select checkbox Extract data from the entire webtable Source code \u201cscope\u201d locator to select checkbox Go to\u00a0https:\/\/datatables.net\/extensions\/select\/examples\/initialisation\/checkbox.html \u00a0 Take note of the dynamic webtable shown below \u00a0Our objective is […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,9],"tags":[],"class_list":["post-3152","post","type-post","status-publish","format-standard","hentry","category-java","category-playwright","post-wrapper","thrv_wrapper"],"_links":{"self":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=3152"}],"version-history":[{"count":0,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3152\/revisions"}],"wp:attachment":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=3152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=3152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=3152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}