鼠标类

鼠标类在主框架 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,
);

如果您然后想复制粘贴您的选择，您可以使用剪贴板 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();
});

注意：如果您想访问剪贴板 API，您必须授予其执行此操作的权限

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

方法

方法	修饰符	描述
click(x, y, options)		mouse.move、mouse.down 和 mouse.up 的快捷方式。
down(options)		按下鼠标。
drag(start, target)		派发一个 drag 事件。
dragAndDrop(start, target, options)		按顺序执行拖动、dragenter、dragover 和 drop。
dragEnter(target, data)		派发一个 dragenter 事件。
dragOver(target, data)		派发一个 dragover 事件。
drop(target, data)		按顺序执行 dragenter、dragover 和 drop。
move(x, y, options)		将鼠标移动到给定的坐标。
reset()		将鼠标重置为默认状态：没有按下按钮；位置在 (0,0)。
up(options)		释放鼠标。
wheel(options)		派发一个 mousewheel 事件。