puppeteer: clicking button in shadowroot

Question

I'm having difficulties with actions on elements in shadowroot in my test context. Lets say I have a web component <my-component /> and it contains a button <input id="my-button" type="submit" />

From console in chrome, I can do the following:

document.getElementsByTagName('my-component')[0].shadowRoot.querySelector('#my-button').click()

Im struggling doing the same with puppeteer.

  it('should click the button', async () => {
    await page.goto(`https://localhost:${port}`, {
      waitUntil: ['networkidle0', 'load'],
    });

    await page.$eval('my-component', (el: Element) => {
      el.shadowRoot.querySelector('#my-button').click();
    });
  });

Clicking the button should fire an http request to my server that retrieves some data which I then want to assert on in the dom. The request never fires. Suggestions?

Answer 1

This issue is solved with P selectors in Puppetteer.

In this case you could use page.click('>>> #my-button'). The >>> Allow you to select stuff in shadowRoots.

I know this issue is old, but I needed this and this issue still pops up on searches.