木偶：单击shadowroot中的按钮

Question

在测试上下文中，我难以对shadowroot中的元素进行操作。可以说我有一个Web组件<my-component />，它包含一个按钮<input id="my-button" type="submit" />

在chrome控制台中，我可以执行以下操作：

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

我正努力地与木偶戏做同样的事情。

  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();
    });
  });

单击按钮应向服务器发出一个http请求，该请求将检索一些我要在dom中声明的数据。该请求永不触发。有建议吗？

Answer 1

根据Puppeteer Team的评论，正确的方法是使用JS路径：

在Chrome 72（当前的Canary）中，我们引入了一个新选项-“复制JS路径”，位于“复制选择器”选项旁边：

使用JS路径的示例：

import { models } from 'pathToModels/models';
const state = models;
export default { state };