Nested shadow DOM

shadowdom2.js

import { chromium,test } from "@playwright/test";

test.use({ viewport: { width: 1400, height: 1000 } });
test('Launch the Selectors hub test page',async()=>{

   
    const browser = await chromium.launch({
        headless: false
    });
    const context = await browser.newContext();
    const page = await context.newPage();

    await page.goto("https://selectorshub.com/xpath-practice-page/");
    await page.waitForSelector('.dropbtn',{
        state: "visible"
    });
 await page.locator('#userName input#pizza').fill('Mozarella'); // element is inside nested shadow DOM
 


 await page.waitForTimeout(5000);



  
});