puppeteer:点击shadowroot中的按钮

问题描述 投票:0回答:2

我在测试环境中对 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 中断言这些数据。该请求永远不会触发。有建议吗?

typescript jestjs puppeteer web-component web-component-tester
2个回答
15
投票

此问题已通过 Puppetteer 中的 P 选择器解决

在这种情况下,您可以使用

page.click('>>> #my-button')
>>>
允许您选择 ShadowRoots 中的内容。

我知道这个问题很旧,但我需要这个,并且这个问题仍然会在搜索中弹出。


14
投票

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

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

aaa

使用 JS 路径的示例:

    it('should click the button', async () => {
      await page.goto(`https://localhost:${port}`, {
        waitUntil: ['networkidle0', 'load'],
      });
    
      const button = await (await page.evaluateHandle(`<JS-path-here>`)).asElement();
      button.click();
    });
© www.soinside.com 2019 - 2024. All rights reserved.