Element inside an iframe inside a shadow DOM

shadowdom3.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').frameLocator('#pact1').getByPlaceholder('Current Crush Name').fill('Scarlett Johansson');
 


 await page.waitForTimeout(5000);



  
});