如何使用 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() 的官方文档：

This method scrolls element into view if needed, and then uses page.mouse to click in the center of the element. If the element is detached from DOM, the method throws an error.

我们可以通过查看 Chrome DevTools 协议中的 source code for mouse.click(), and we can see that the button option is considered before being sent to 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);
});

Answer 2

如果你想使用鼠标，

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

你可以做到的

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

How to perform right click with Puppeteer?

javascript

node.js

google-chrome-devtools

puppeteer

headless-browser