In this blog we will see how Playwright Java enables browser-based authentication and provides the capability to handle shadow root elements.<\/em>\u00a0<\/em><\/p>\n

\n

\n<\/ins>\n<\/div>\n
Topics that we will cover:<\/strong><\/p>\n
\n
Handle browser based authentication<\/li>\n
Handle Shadow root elements<\/li>\n
Source code (browser based auth)<\/li>\n
Source code (shadow root)<\/li>\n<\/ul>\n
Handle browser based authentication<\/strong><\/p>\n
Navigate to https:\/\/the-internet.herokuapp.com\/<\/a>\u00a0<\/p>\n
You would see<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0 Notice above. \u2018Sign in\u2019 popup asks user to enter login credentials.\u00a0<\/p>\n
The browser generates the authentication, making it a Browser-based Authentication example.\u00a0<\/p>\n
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.\u00a0<\/p>\n
We will proceed with the login process by providing the specific username and password, which in this case is set as ‘admin’<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0The browser authenticates the login credentials, see below<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0To handle this error we will create a new browser context and set the credentials as shown below<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
$\"\"$ <\/span><\/div>\n
\n
There is no error now and the authentication is successful<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Handle Shadow root elements<\/strong><\/p>\n
Go to https:\/\/books-pwakit.appspot.com\/explore?q<\/a>=<\/p>\n
Inspect search field<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0In 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\u00a0<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Source code (browser based auth)<\/strong><\/p>\n
package<\/strong> com.rsa.playwrightjava;<\/p>\n
<\/p>\n
import<\/strong> com.microsoft.playwright.Browser;<\/p>\n
import<\/strong> com.microsoft.playwright.BrowserContext;<\/p>\n
import<\/strong> com.microsoft.playwright.BrowserType;<\/p>\n
import<\/strong> com.microsoft.playwright.Page;<\/p>\n
import<\/strong> com.microsoft.playwright.Playwright;<\/p>\n
<\/p>\n
public<\/strong>
\nclass<\/strong> Blog22_BrowserBasedAuth {<\/p>\n
<\/p>\n
public<\/strong>
\nstatic<\/strong>
\nvoid<\/strong> main(String[] args) {<\/p>\n
Playwright pw = Playwright.create<\/em>();\u00a0<\/p>\n
Browser browser = pw.chromium().launch(new<\/strong> BrowserType.LaunchOptions().setHeadless(false<\/strong>));<\/p>\n
BrowserContext context = browser.newContext(new<\/strong> Browser.NewContextOptions().setHttpCredentials(“admin”,”admin”));<\/p>\n
<\/p>\n
\/\/Page page = browser.newPage();<\/p>\n
Page page = context.newPage();<\/p>\n
page.navigate(“https:\/\/the-internet.herokuapp.com\/basic_auth”);<\/p>\n
<\/p>\n
page.pause();<\/p>\n
page.close();<\/p>\n
context.close();<\/p>\n
browser.close();<\/p>\n
pw.close();<\/p>\n
}<\/p>\n
}<\/p>\n
<\/p>\n
Source code (shadow root)<\/strong><\/p>\n
package<\/strong> com.rsa.playwrightjava;<\/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.Page;<\/p>\n
import<\/strong> com.microsoft.playwright.Playwright;<\/p>\n
<\/p>\n
public<\/strong>
\nclass<\/strong> Blog22_ShadowRoot {<\/p>\n
<\/p>\n
public<\/strong>
\nstatic<\/strong>
\nvoid<\/strong> main(String[] args) {<\/p>\n
Playwright pw = Playwright.create<\/em>();\u00a0<\/p>\n
Browser browser = pw.chromium().launch(new<\/strong> BrowserType.LaunchOptions().setHeadless(false<\/strong>));<\/p>\n
<\/p>\n
Page page = browser.newPage();<\/p>\n
page.navigate(“https:\/\/books-pwakit.appspot.com\/explore?q=”);<\/p>\n
page.locator(“#input”).fill(“rahulshettyacademy.com”); \/\/shadow dom element<\/p>\n
<\/p>\n
page.pause();<\/p>\n
page.close();<\/p>\n
browser.close();<\/p>\n
pw.close();<\/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 see how Playwright Java enables browser-based authentication and provides the capability to handle shadow root elements.\u00a0 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\/\u00a0 You would see \u00a0 Notice […]<\/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-3384","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\/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":0,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3384\/revisions"}],"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}]}}