Mouse 类

Mouse 类以相对于视口左上角的主框架 CSS 像素为单位进行操作。

签名

export declare abstract class Mouse

备注

每个 page 对象都有自己的 Mouse，可通过 Page.mouse 访问。

此类的构造函数被标记为内部。第三方代码不应直接调用构造函数，也不应创建扩展 Mouse 类的子类。

示例 1

// Using ‘page.mouse’ to trace a 100x100 square.
await page.mouse.move(0, 0);
await page.mouse.down();
await page.mouse.move(0, 100);
await page.mouse.move(100, 100);
await page.mouse.move(100, 0);
await page.mouse.move(0, 0);
await page.mouse.up();

注意：鼠标事件会触发合成的 MouseEvent。这意味着它无法完全复现普通用户使用鼠标所能执行的功能。

例如，使用 page.mouse 无法拖拽和选择文本。此时，你可以使用平台内置的 `DocumentOrShadowRoot.getSelection()` 功能。

示例 2

例如，如果你想选择节点之间的所有内容：

await page.evaluate(
  (from, to) => {
    const selection = from.getRootNode().getSelection();
    const range = document.createRange();
    range.setStartBefore(from);
    range.setEndAfter(to);
    selection.removeAllRanges();
    selection.addRange(range);
  },
  fromJSHandle,
  toJSHandle,
);

如果随后你想复制粘贴所选内容，可以使用 clipboard api：

// The clipboard api does not allow you to copy, unless the tab is focused.
await page.bringToFront();
await page.evaluate(() => {
  // Copy the selected content to the clipboard
  document.execCommand('copy');
  // Obtain the content of the clipboard as a string
  return navigator.clipboard.readText();
});

注意：如果你想访问 clipboard API，需要先为其授予相应权限：

await browser
  .defaultBrowserContext()
  .overridePermissions('<your origin>', ['clipboard-read', 'clipboard-write']);

方法