Jest.js 操纵者：在shadowroot中单击按钮

vhipe2zx 于 2023-09-28 发布在 Jest

关注(0)|答案(2)|浏览(139)

我在测试环境中对shadowroot中的元素进行操作时遇到了困难。假设我有一个web组件<my-component />，它包含一个按钮<input id="my-button" type="submit" />
在Chrome的console中，我可以执行以下操作：

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

我挣扎着做同样的 puppet 师。

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中对其进行Assert。请求永远不会触发。有什么建议？

jestjs

来源：https://stackoverflow.com/questions/64368789/puppeteer-clicking-button-in-shadowroot

2条答案

按热度按时间

wdebmtf21#

根据Puppeteer团队的评论，正确的方法是使用JS path：
在Chrome 72（当前的Canary）中，我们引入了一个新选项-“复制JS路径”，位于“复制选择器”选项旁边：

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

赞(0）回复(0）举报 2023-09-28

uttx8gqw2#

Puppetteer中的P选择器解决了这个问题。
在这种情况下，您可以使用page.click('>>> #my-button')。该>>>允许您选择的东西在shadowRoots。
我知道这个问题是旧的，但我需要这个，这个问题仍然弹出搜索。

赞(0）回复(0）举报 2023-09-28