Element inside open shadow root

shadowdom1.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 #kils').fill('kancha cheena');
 
 // another way of doing this is

 await page.locator("#userName").getByPlaceholder("enter name").fill("kancha cheena");
 
 await page.waitForTimeout(5000);



  
});