In this blog we will see how Playwright Java enables browser-based authentication and provides the capability to handle shadow root elements. 

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/ 

You would see

  Notice above. ‘Sign in’ popup asks user to enter login credentials. 

The browser generates the authentication, making it a Browser-based Authentication example. 

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. 

We will proceed with the login process by providing the specific username and password, which in this case is set as 'admin'

 The browser authenticates the login credentials, see below

 To handle this error we will create a new browser context and set the credentials as shown below

There is no error now and the authentication is successful

 Handle Shadow root elements

Go to https://books-pwakit.appspot.com/explore?q=

Inspect search field

 In selenium, it’s quite cumbersome to locate this element. However using playwright we can simply locate the shadow root field and can type the text 

 Source code (browser based auth)

package com.rsa.playwrightjava;

import com.microsoft.playwright.Browser;

import com.microsoft.playwright.BrowserContext;

import com.microsoft.playwright.BrowserType;

import com.microsoft.playwright.Page;

import com.microsoft.playwright.Playwright;

public class Blog22_BrowserBasedAuth {

public static void main(String[] args) {

Playwright pw = Playwright.create(); 

Browser browser = pw.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));

BrowserContext context = browser.newContext(new Browser.NewContextOptions().setHttpCredentials("admin","admin"));

//Page page = browser.newPage();

Page page = context.newPage();

page.navigate("https://the-internet.herokuapp.com/basic_auth");

page.pause();

page.close();

context.close();

browser.close();

pw.close();

}

}

Source code (shadow root)

package com.rsa.playwrightjava;

import com.microsoft.playwright.Browser;

import com.microsoft.playwright.BrowserType;

import com.microsoft.playwright.Page;

import com.microsoft.playwright.Playwright;

public class Blog22_ShadowRoot {

public static void main(String[] args) {

Playwright pw = Playwright.create(); 

Browser browser = pw.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));

Page page = browser.newPage();

page.navigate("https://books-pwakit.appspot.com/explore?q=");

page.locator("#input").fill("rahulshettyacademy.com"); //shadow dom element

page.pause();

page.close();

browser.close();

pw.close();

}

}

Thanks.