puppeteer: type inside input field which is in multiple shadowRoot's

I have a web component address-search which has input field and this component is inside another web component move-property and i am using the move-property in my angular app , now I want to type in the input field of address-search and call google Map-Api or some function

My code

 import * as puppeteer from 'puppeteer';

 const delay = (milliseconds: number | undefined) =>
 new Promise((resolve) => setTimeout(resolve, milliseconds));
 describe('workspace-project App', () => {
 let browser: puppeteer.Browser;
 it('Test to check if tag is on the DOM or not ', async () => {
 browser = await puppeteer.launch({
  headless: false,
  });
 const page = await browser.newPage();
 await page.goto('http://localhost:4200');
 const comp = await page.evaluate(() => (document.querySelector('body > app-root > main > nest-container > app-home > nest-tiles >move-property-tile')?.shadowRoot?.querySelector('nest-tile > nest-btn') as HTMLElement)?.click());
  delay(4000);
  const comp2 = await page.evaluate(() => document.querySelector('body > app-root > main > nest-container > app-home > nest-tiles >div')?.innerHTML);
// expect(comp2).not.toBeNull()
delay(4000);

const comp3 = await page.evaluate(() => document.querySelector('body > app-root > main > nest-container> app-home > nest-tiles >div>move-property')?.shadowRoot?.querySelector('nest-popup > div.address-input>address-search'));


comp3 !== null && comp3 !== undefined ? await (comp3 as unknown as typeof page).type('form > #address', "LL") : null

console.log(comp3);

 await browser.close();
 
});});

DOM SS

What I tried

I know I can use puppeteer page.type() method but it's not working with shadowRoot and I tried getting the shadowRoot of parent component and try comp.type() but it say error type is not a function as because its a function for page only

Puppeteer version: 19.7.2 Angular version : 14

What i expect

Type in the input field which is multiple shadowRoot deep, using puppeteer in angular app

So i found the answer

async function typeInInput(inputElement) {
  inputElement.setAttribute('type', 'text');

  inputElement.focus();
  inputElement.value = '';
  const numberString = "Some Text";
  for (let i = 0; i < numberString.length; i++) {
    const digit = numberString[i];

    const keyboardEvent = new KeyboardEvent('keydown', { key: digit });
    inputElement.dispatchEvent(keyboardEvent);

    inputElement.value += digit;

    const inputEvent = new InputEvent('input', {
      inputType: 'insertText',
      data: digit,
    });
    inputElement.dispatchEvent(inputEvent);

    const changeEvent = new Event('change');
    inputElement.dispatchEvent(changeEvent);

    await new Promise(resolve => setTimeout(resolve, 50));
  }

}

We just need to call this function with our target element