{"id":3152,"date":"2025-01-15T19:11:14","date_gmt":"2025-01-15T19:11:14","guid":{"rendered":"https:\/\/rahulshettyacademy.com\/blog\/?p=3152"},"modified":"2025-01-17T10:34:45","modified_gmt":"2025-01-17T10:34:45","slug":"usage-of-scope-locator-to-handle-dynamic-webtable-in-playwright-java","status":"publish","type":"post","link":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/2025\/01\/15\/usage-of-scope-locator-to-handle-dynamic-webtable-in-playwright-java\/","title":{"rendered":"Usage of \u201cscope\u201d locator to handle dynamic webtable in Playwright Java\u00a0"},"content":{"rendered":"<p><em>In this blog, we will study about the &#8220;scope&#8221; locator in Playwright Java for effectively handling dynamic webtables.<\/em><em>&nbsp;<\/em><\/p>\n<p><strong>Topics that we will cover:<\/strong><\/p>\n<ul>\n<li>\u201c<em>scope<\/em>\u201d locator to select checkbox<\/li>\n<li>Extract data from the entire webtable<span data-id=\"0\" data-type=\"false\" style=\"display: none; line-height: 0;\">\u200b<\/span><span data-id=\"0\" data-type=\"true\" style=\"display: none; line-height: 0;\">\u200b<\/span><\/li>\n<li>Source code<\/li>\n<\/ul>\n<p><strong>\u201c<\/strong><strong><em>scope<\/em><\/strong><strong>\u201d locator to select checkbox<\/strong><\/p>\n<p>Go to&nbsp;<a href=\"https:\/\/datatables.net\/extensions\/select\/examples\/initialisation\/checkbox.html\" style=\"outline: none;\" target=\"_blank\" rel=\"noopener\">https:\/\/datatables.net\/extensions\/select\/examples\/initialisation\/checkbox.html<\/a> &nbsp;<\/p>\n<p>Take note of the dynamic webtable shown below<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3155\" width=\"718\" data-init-width=\"1152\" height=\"467\" data-init-height=\"750\" title=\"Screenshot 2025-01-16 at 12.46.03\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-12.46.03\u202fAM.png\" data-width=\"718\" data-height=\"467\" style=\"aspect-ratio: auto 1152 \/ 750;\"><\/span><\/p>\n<p>&nbsp;Our objective is to automatically select a checkbox for a specific row.<\/p>\n<p>To fulfill this requirement, we will employ &#8220;<em>scope<\/em>&#8221; approach.<\/p>\n<p>Let us inspect webtable<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3156\" width=\"632\" data-init-width=\"1152\" height=\"241\" data-init-height=\"440\" title=\"Screenshot 2025-01-16 at 12.47.52\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-12.47.52\u202fAM.png\" data-width=\"632\" data-height=\"241\" style=\"aspect-ratio: auto 1152 \/ 440;\"><\/span><\/p>\n<p>&nbsp;Execute the \u201ccss select query\u201d shown in below diagram (which uses the table id).&nbsp;<\/p>\n<p>This query fetches 12 rows, the first row being the column headers and the actual data starts from 2<sup>nd<\/sup> row onwards &nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3157\" width=\"619\" data-init-width=\"1164\" height=\"419\" data-init-height=\"788\" title=\"Screenshot 2025-01-16 at 12.48.29\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-12.48.29\u202fAM.png\" data-width=\"619\" data-height=\"419\" style=\"aspect-ratio: auto 1164 \/ 788;\"><\/span><\/p>\n<p>&nbsp;So the entire table can be located by using the same css query&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3158\" width=\"604\" data-init-width=\"1164\" height=\"115\" data-init-height=\"222\" title=\"Screenshot 2025-01-16 at 12.59.16\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-12.59.16\u202fAM.png\" data-width=\"604\" data-height=\"115\" style=\"aspect-ratio: auto 1164 \/ 222;\"><\/span><\/p>\n<p>&nbsp;We know that <em>locator()<\/em> method accepts 2 arguments: selector and options<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3159\" width=\"629\" data-init-width=\"1164\" height=\"216\" data-init-height=\"400\" title=\"Screenshot 2025-01-16 at 12.59.52\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-12.59.52\u202fAM.png\" data-width=\"629\" data-height=\"216\" style=\"aspect-ratio: auto 1164 \/ 400;\"><\/span><\/p>\n<p>&nbsp;In the first argument, we can use <strong><em>:scope<\/em><\/strong> selector (at least one element must match the scope of the given element)&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3162\" width=\"656\" data-init-width=\"1164\" height=\"125\" data-init-height=\"222\" title=\"Screenshot 2025-01-16 at 1.00.26\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.00.26\u202fAM.png\" data-width=\"656\" data-height=\"125\" style=\"aspect-ratio: auto 1164 \/ 222;\"><\/span><\/p>\n<p>&nbsp;The \u2018<strong><em>setHasText()<\/em><\/strong>\u2019 method can be passed in the options argument<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3164\" width=\"627\" data-init-width=\"1164\" height=\"120\" data-init-height=\"222\" title=\"Screenshot 2025-01-16 at 1.03.23\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.03.23\u202fAM.png\" data-width=\"627\" data-height=\"120\" style=\"aspect-ratio: auto 1164 \/ 222;\"><\/span><\/p>\n<p>&nbsp;Any person&#8217;s name from the webtable can be passed as an argument to the &#8216;<strong><em>setHasText()<\/em><\/strong>&#8216; method<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3165\" width=\"590\" data-init-width=\"1164\" height=\"113\" data-init-height=\"222\" title=\"Screenshot 2025-01-16 at 1.12.08\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.12.08\u202fAM.png\" data-width=\"590\" data-height=\"113\" style=\"aspect-ratio: auto 1164 \/ 222;\"><\/span><\/p>\n<p>&nbsp;We need to select the checkbox that is visible next to this individual.&nbsp;<\/p>\n<p>The checkox is uniquely represented by class&nbsp; &nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3166\" width=\"605\" data-init-width=\"1164\" height=\"252\" data-init-height=\"484\" title=\"Screenshot 2025-01-16 at 1.13.45\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.13.45\u202fAM.png\" data-width=\"605\" data-height=\"252\" style=\"aspect-ratio: auto 1164 \/ 484;\"><\/span><\/p>\n<p>&nbsp;The locator method can be invoked again, this time passing the checkbox&#8217;s CSS selector as an argument<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3167\" width=\"727\" data-init-width=\"1164\" height=\"90\" data-init-height=\"144\" title=\"Screenshot 2025-01-16 at 1.14.35\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.14.35\u202fAM.png\" data-width=\"727\" data-height=\"90\" style=\"aspect-ratio: auto 1164 \/ 144;\"><\/span><\/p>\n<p>&nbsp;To select the checkbox, we can proceed by invoking the click() method<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3168\" width=\"688\" data-init-width=\"1164\" height=\"37\" data-init-height=\"62\" title=\"Screenshot 2025-01-16 at 1.15.12\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.15.12\u202fAM.png\" data-width=\"688\" data-height=\"37\" style=\"aspect-ratio: auto 1164 \/ 62;\"><\/span><\/p>\n<p>&nbsp;In line#29, we have thereforr defined the scope of the webtable we want to act upon<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3169\" width=\"684\" data-init-width=\"1164\" height=\"114\" data-init-height=\"194\" title=\"Screenshot 2025-01-16 at 1.16.02\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.16.02\u202fAM.png\" data-width=\"684\" data-height=\"114\" style=\"aspect-ratio: auto 1164 \/ 194;\"><\/span><\/p>\n<p>&nbsp;Let us execute the code.&nbsp;<\/p>\n<p>See below. The checkbox gets selected without the need for complex xpath in order to automate this use case<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3170\" width=\"686\" data-init-width=\"1164\" height=\"443\" data-init-height=\"752\" title=\"Screenshot 2025-01-16 at 1.16.39\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.16.39\u202fAM.png\" data-width=\"686\" data-height=\"443\" style=\"aspect-ratio: auto 1164 \/ 752;\"><\/span><\/p>\n<p>&nbsp;<strong>Extract data from the entire webtable<\/strong><\/p>\n<p>To obtain the data from the entire webtable, we can make use of the <strong><em>allInnerTexts()<\/em><\/strong> method, as depicted below<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3171\" width=\"719\" data-init-width=\"1164\" height=\"106\" data-init-height=\"172\" title=\"Screenshot 2025-01-16 at 1.17.12\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.17.12\u202fAM.png\" data-width=\"719\" data-height=\"106\" style=\"aspect-ratio: auto 1164 \/ 172;\"><\/span><\/p>\n<p>&nbsp;<em>forEach()<\/em> method can be used to print all the elements of webtable<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3172\" width=\"679\" data-init-width=\"1164\" height=\"390\" data-init-height=\"668\" title=\"Screenshot 2025-01-16 at 1.17.49\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.17.49\u202fAM.png\" data-width=\"679\" data-height=\"390\" style=\"aspect-ratio: auto 1164 \/ 668;\"><\/span><\/p>\n<p>So this is the true potential of the <em>:scope<\/em> selector.<\/p>\n<p><strong>Source code&nbsp;<\/strong><\/p>\n<p><strong>package<\/strong> com.rsa.playwrightjava;<\/p>\n<\/p>\n<p><strong>import<\/strong> org.junit.jupiter.api.Test;<\/p>\n<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Browser;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.BrowserType;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.BrowserType.LaunchOptions;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Locator;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Page;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Playwright;<\/p>\n<\/p>\n<p><strong>public<\/strong><strong>class<\/strong> Blog10_WebTables {<\/p>\n<p>@Test<\/p>\n<p><strong>public<\/strong><strong>void<\/strong> PlaywrightJTest() {<\/p>\n<p>Playwright pt = Playwright.<em>create<\/em>();<\/p>\n<p>LaunchOptions lo = <strong>new<\/strong> LaunchOptions();<\/p>\n<p>lo.setChannel(&#8220;msedge&#8221;);<\/p>\n<p>lo.setHeadless(<strong>false<\/strong>);<\/p>\n<p>BrowserType btype = pt.chromium();<\/p>\n<p>Browser b = btype.launch((<strong>new<\/strong> BrowserType.LaunchOptions().setHeadless(<strong>false<\/strong>)));<\/p>\n<p>Page pg = b.newPage();<\/p>\n<p>pg.navigate(&#8220;https:\/\/datatables.net\/extensions\/select\/examples\/initialisation\/checkbox.html&#8221;);<\/p>\n<p>Locator webtable = pg.locator(&#8220;table#example tr&#8221;);<\/p>\n<p>&nbsp; &nbsp;<\/p>\n<p>webtable.locator(&#8220;:scope&#8221;, <strong>new<\/strong> Locator.LocatorOptions().setHasText(&#8220;Bradley Greer&#8221;)).locator(&#8220;.select-checkbox&#8221;).click();<\/p>\n<p>&nbsp; &nbsp; \/\/System.out.println(&#8220;The number of rows in the webtable&#8211;&gt;&#8221; + webtable.count());<\/p>\n<p>&nbsp; &nbsp; webtable.locator(&#8220;:scope&#8221;).allInnerTexts().forEach(e -&gt; System.<strong><em>out<\/em><\/strong>.println(e));<\/p>\n<p>pg.pause();<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<\/p>\n<p>Thanks.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, we will study about the &#8220;scope&#8221; locator in Playwright Java for effectively handling dynamic webtables.&nbsp; Topics that we will cover: \u201cscope\u201d locator to select checkbox Extract data from the entire webtable\u200b\u200b Source code \u201cscope\u201d locator to select checkbox Go to&nbsp;https:\/\/datatables.net\/extensions\/select\/examples\/initialisation\/checkbox.html &nbsp; Take note of the dynamic webtable shown below &nbsp;Our objective is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":750,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[41],"tags":[],"class_list":["post-3152","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","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":6,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3152\/revisions"}],"predecessor-version":[{"id":3705,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3152\/revisions\/3705"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/750"}],"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}]}}