滑鼠類別

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,
);

如果您想複製貼上您的選取內容，您可以使用剪貼簿 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 事件。