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

【问题标题】：How to perform right click with Puppeteer?如何使用 Puppeteer 执行右键单击？
【发布时间】：2021-08-31 16:34:28
【问题描述】：

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

我已尝试添加选项：

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

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

我做错了什么？

【问题讨论】：

标签： javascript node.js google-chrome-devtools puppeteer headless-browser

【解决方案1】：

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

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

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

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

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

我们可以通过查看 source code for mouse.click() 来验证这一点，我们可以看到在 Chrome DevTools 协议中，button 选项在发送到 Input.dispatchMouseEvent 之前被考虑。

您可以用来右键单击元素的另一种方法是使用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);
});

【讨论】：

【解决方案2】：

如果你想使用鼠标，

 await page.mouse.click(160, 300, {delay: 1000, button: 'left'});

你可以这样做

【讨论】：