如何使用 Puppeteer 执行右键单击？

Question

我正在尝试使用 Puppeteer 执行右键单击。

我试图添加选项：

await component.click({ button: "right" })

但我得到的只是对组件的常规点击。我遵循了 Puppeteer 的API。

我究竟做错了什么？

Answer 1

您可以使用设置为右键单击元素elementHandle.click()的button选项是正确的'right'：

const example = await page.$('#example');

await example.click({
  button: 'right',
});

根据官方文档elementHandle.click()：

如果需要，此方法将元素滚动到视图中，然后用于page.mouse单击元素的中心。如果元素与 DOM 分离，则该方法会引发错误。

我们可以通过查看 的源代码mouse.click()来验证这一点，我们可以看到该button选项在发送到Input.dispatchMouseEventChrome DevTools 协议之前已被考虑。

您可以用来右键单击元素的另一种方法是使用 use page.click()：

await page.click('#example', {
  button: 'right',
});

或者，您可以使用page.evaluate()在页面 DOM 环境中执行的 JavaScript 右键单击​​元素：

await page.evaluate(() => {
  const example = document.getElementById('example');
  const event = document.createEvent('MouseEvents');

  event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 2, null);

  example.dispatchEvent(event);
});