puppeteer:单击 shadowroot 中的按钮 [英] puppeteer: clicking button in shadowroot

查看:297
本文介绍了puppeteer:单击 shadowroot 中的按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在测试上下文中对 shadowroot 中的元素执行操作时遇到困难.假设我有一个 web 组件 并且它包含一个按钮

从 chrome 控制台,我可以执行以下操作:

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

我正在努力用 puppeteer 做同样的事情.

 it('应该点击按钮', 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 中对这些数据进行断言.请求永远不会触发.建议?

解决方案

根据

使用JS路径的例子:

 it('应该点击按钮', async() => {await page.goto(`https://localhost:${port}`, {waitUntil: ['networkidle0', 'load'],});const button = await (await page.evaluateHandle(`<JS-path-here>`)).asElement();button.click();});

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?

解决方案

According to this comment from the Puppeteer Team the right way is to use JS path:

In Chrome 72 (current Canary) we introduced a new option - "Copy JS Path", located right next to the "Copy Selector" option:

Example using JS path:

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

这篇关于puppeteer:单击 shadowroot 中的按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆