{"id":3384,"date":"2025-01-16T07:57:47","date_gmt":"2025-01-16T07:57:47","guid":{"rendered":"https:\/\/rahulshettyacademy.com\/blog\/?p=3384"},"modified":"2025-01-17T10:44:53","modified_gmt":"2025-01-17T10:44:53","slug":"browser-based-authentication-and-handling-shadow-root-elements-in-playwright-java","status":"publish","type":"post","link":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/2025\/01\/16\/browser-based-authentication-and-handling-shadow-root-elements-in-playwright-java\/","title":{"rendered":"Browser based Authentication and handling shadow root elements in Playwright Java"},"content":{"rendered":"<p><em>In this blog we will see how Playwright Java enables browser-based authentication and provides the capability to handle shadow root elements.<\/em><em>&nbsp;<\/em><\/p>\n<p><strong>Topics that we will cover:<\/strong><\/p>\n<ul>\n<li>Handle browser based authentication<\/li>\n<li>Handle Shadow root elements<\/li>\n<li>Source code (browser based auth)<\/li>\n<li>Source code (shadow root)<\/li>\n<\/ul>\n<p><strong>Handle browser based authentication<\/strong><\/p>\n<p>Navigate to <a href=\"https:\/\/the-internet.herokuapp.com\/\" style=\"outline: none;\" target=\"_blank\" rel=\"noopener\">https:\/\/the-internet.herokuapp.com\/<\/a>&nbsp;<\/p>\n<p>You would see<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3387\" width=\"454\" data-init-width=\"1168\" height=\"278\" data-init-height=\"714\" title=\"Screenshot 2025-01-16 at 1.28.44\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.28.44\u202fPM.png\" data-width=\"454\" data-height=\"278\" style=\"aspect-ratio: auto 1168 \/ 714;\"><\/span><\/p>\n<p>&nbsp; Notice above. \u2018Sign in\u2019 popup asks user to enter login credentials.&nbsp;<\/p>\n<p>The browser generates the authentication, making it a Browser-based Authentication example.&nbsp;<\/p>\n<p>We cannot inspect the locators of username\/password fields. You cannot right click and inspect these elements. These are not webelements.We have to handle these by another mechanism. Let us carry out the steps to accomplish this task.&nbsp;<\/p>\n<p>We will proceed with the login process by providing the specific username and password, which in this case is set as &#8216;admin&#8217;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3388\" width=\"507\" data-init-width=\"1168\" height=\"194\" data-init-height=\"448\" title=\"Screenshot 2025-01-16 at 1.29.34\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.29.34\u202fPM.png\" data-width=\"507\" data-height=\"194\" style=\"aspect-ratio: auto 1168 \/ 448;\"><\/span><\/p>\n<p>&nbsp;The browser authenticates the login credentials, see below<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3389\" width=\"538\" data-init-width=\"1168\" height=\"617\" data-init-height=\"1340\" title=\"Screenshot 2025-01-16 at 1.30.25\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.30.25\u202fPM.png\" data-width=\"538\" data-height=\"617\" style=\"aspect-ratio: auto 1168 \/ 1340;\"><\/span><\/p>\n<p>&nbsp;To handle this error we will create a new browser context and set the credentials as shown below<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3390\" width=\"530\" data-init-width=\"1168\" height=\"585\" data-init-height=\"1290\" title=\"Screenshot 2025-01-16 at 1.31.10\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.31.10\u202fPM.png\" data-width=\"530\" data-height=\"585\" style=\"aspect-ratio: auto 1168 \/ 1290;\"><\/span><span><img decoding=\"async\" alt=\"\" data-id=\"3391\" width=\"564\" data-init-width=\"1168\" height=\"333\" data-init-height=\"690\" title=\"Screenshot 2025-01-16 at 1.31.49\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.31.49\u202fPM.png\" data-width=\"564\" data-height=\"333\" style=\"aspect-ratio: auto 1168 \/ 690;\"><\/span><\/p>\n<p>There is no error now and the authentication is successful<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3392\" width=\"529\" data-init-width=\"1168\" height=\"207\" data-init-height=\"458\" title=\"Screenshot 2025-01-16 at 1.32.31\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.32.31\u202fPM.png\" data-width=\"529\" data-height=\"207\" style=\"aspect-ratio: auto 1168 \/ 458;\"><\/span><\/p>\n<p>&nbsp;<strong>Handle Shadow root elements<\/strong><\/p>\n<p>Go to <a href=\"https:\/\/books-pwakit.appspot.com\/explore?q\" style=\"outline: none;\" target=\"_blank\" rel=\"noopener\">https:\/\/books-pwakit.appspot.com\/explore?q<\/a>=<\/p>\n<p>Inspect search field<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3393\" width=\"507\" data-init-width=\"1186\" height=\"650\" data-init-height=\"1520\" title=\"Screenshot 2025-01-16 at 1.33.06\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.33.06\u202fPM.png\" data-width=\"507\" data-height=\"650\" style=\"aspect-ratio: auto 1186 \/ 1520;\"><\/span><\/p>\n<p>&nbsp;In selenium, it\u2019s quite cumbersome to locate this element. However using playwright we can simply locate the shadow root field and can type the text&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3394\" width=\"572\" data-init-width=\"1186\" height=\"648\" data-init-height=\"1344\" title=\"Screenshot 2025-01-16 at 1.33.53\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.33.53\u202fPM.png\" data-width=\"572\" data-height=\"648\" style=\"aspect-ratio: auto 1186 \/ 1344;\"><\/span><\/p>\n<p>&nbsp;<strong>Source code (browser based auth)<\/strong><\/p>\n<p><strong>package<\/strong> com.rsa.playwrightjava;<\/p>\n<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Browser;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.BrowserContext;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.BrowserType;<\/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> Blog22_BrowserBasedAuth {<\/p>\n<\/p>\n<p><strong>public<\/strong><strong>static<\/strong><strong>void<\/strong> main(String[] args) {<\/p>\n<p>Playwright pw = Playwright.<em>create<\/em>();&nbsp;<\/p>\n<p>Browser browser = pw.chromium().launch(<strong>new<\/strong> BrowserType.LaunchOptions().setHeadless(<strong>false<\/strong>));<\/p>\n<p>BrowserContext context = browser.newContext(<strong>new<\/strong> Browser.NewContextOptions().setHttpCredentials(&#8220;admin&#8221;,&#8221;admin&#8221;));<\/p>\n<\/p>\n<p>\/\/Page page = browser.newPage();<\/p>\n<p>Page page = context.newPage();<\/p>\n<p>page.navigate(&#8220;https:\/\/the-internet.herokuapp.com\/basic_auth&#8221;);<\/p>\n<\/p>\n<p>page.pause();<\/p>\n<p>page.close();<\/p>\n<p>context.close();<\/p>\n<p>browser.close();<\/p>\n<p>pw.close();<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<\/p>\n<p><strong>Source code (shadow root)<\/strong><\/p>\n<p><strong>package<\/strong> com.rsa.playwrightjava;<\/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.Page;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Playwright;<\/p>\n<\/p>\n<p><strong>public<\/strong><strong>class<\/strong> Blog22_ShadowRoot {<\/p>\n<\/p>\n<p><strong>public<\/strong><strong>static<\/strong><strong>void<\/strong> main(String[] args) {<\/p>\n<p>Playwright pw = Playwright.<em>create<\/em>();&nbsp;<\/p>\n<p>Browser browser = pw.chromium().launch(<strong>new<\/strong> BrowserType.LaunchOptions().setHeadless(<strong>false<\/strong>));<\/p>\n<\/p>\n<p>Page page = browser.newPage();<\/p>\n<p>page.navigate(&#8220;https:\/\/books-pwakit.appspot.com\/explore?q=&#8221;);<\/p>\n<p>page.locator(&#8220;#input&#8221;).fill(&#8220;rahulshettyacademy.com&#8221;); \/\/shadow dom element<\/p>\n<\/p>\n<p>page.pause();<\/p>\n<p>page.close();<\/p>\n<p>browser.close();<\/p>\n<p>pw.close();<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<\/p>\n<p>Thanks.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog we will see how Playwright Java enables browser-based authentication and provides the capability to handle shadow root elements.&nbsp; Topics that we will cover: Handle browser based authentication Handle Shadow root elements Source code (browser based auth) Source code (shadow root) Handle browser based authentication Navigate to https:\/\/the-internet.herokuapp.com\/&nbsp; You would see &nbsp; Notice [&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-3384","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\/3384","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=3384"}],"version-history":[{"count":6,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3384\/revisions"}],"predecessor-version":[{"id":3730,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3384\/revisions\/3730"}],"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=3384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=3384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=3384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}