I'm experiencing challenges with performing actions on elements within a shadow root in my testing environment. For example, let's consider a web component called <my-component /> that includes a button:
<input id="my-button" type="submit" />When using the Chrome console, I can successfully perform the following:
document.getElementsByTagName('my-component')[0].shadowRoot.querySelector('#my-button').click()
However, I am encountering difficulties achieving the same result 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();
});
});
Upon clicking the button, an HTTP request should be triggered to retrieve data from my server, which I intend to assert against in the DOM. Unfortunately, the request is not being sent. Any suggestions on how to resolve this issue?