木偶操纵者触发器单击按钮不起作用

Question

我在这个视频播放器中嵌套了一个按钮，我想简单地单击它。知道我该如何选择吗？

     await page.waitForSelector('.icon-play');
        await page.click('.icon-play');
        await page.waitFor(6000);
    }

<a tabindex="-1" href="#" role="button" class="icon-play  comp largePlayBtn  largePlayBtnBorder" aria-label="Play clip" data-order="1" data-plugin-name="largePlayBtn" style="display: block;"></a>

Answer 1

不久前我也遇到了同样的问题。图像内的嵌套链接。

这是因为该元素需要在视觉上可点击。您可以使用 执行简单的 javascript 单击操作HTMLElement.click()来绕过 puppeteer 单击操作。

page.$eval(`HTMLElementSelector`, element =>
  element.click()
);

当您单击链接时，这意味着导航，您希望将其包含在承诺中。像这样的东西应该可以解决问题。

await Promise.all([
  page.$eval(`HTMLElementSelector`, element =>
    element.click()
  ),
  await page.waitForNavigation(),
]);

Answer 2

这个答案是为了清楚地了解为什么傀儡师的点击有时不起作用。

Puppeteer 的 API 与原生浏览器 API 具有不同的语义。

Puppeteer 的 page.click() 看起来像是浏览器原生 HTMLElement.click() 的简单包装，但实际上它的操作方式完全不同。

page.click() 的工作原理

当我们使用 page.click() 单击时，而不是像本机 HTMLElement.click() 那样直接在元素上调用单击事件处理程序

• Puppeteer 将元素滚动到视图中
• 将鼠标移动到元素上
• 按几个鼠标按钮之一
• 可选择触发延迟
• 然后释放鼠标按钮

您还可以触发多次点击。换句话说，Puppeteer 像人类一样执行点击操作。

这就是为什么当我们单击 page.click() 时，它会像人类一样单击屏幕的 (x,y) 位置。因此，有时我们看不到预期的结果，因为它没有显示任何错误，也不应该显示任何错误，我们认为 page.click() 不起作用。

因此，最简单的解决方案是使用 page.evaluate() 并使用本机浏览器 API 单击。

解决方案

await page.evaluate(() => {
    document.querySelector('selector').click();
});