mirror of
https://github.com/puppeteer/puppeteer
synced 2024-06-14 14:02:48 +00:00
042d61030c
Co-authored-by: release-please[bot] <55107282+release-please[bot]@users.noreply.github.com>
215 lines
4.0 KiB
Markdown
215 lines
4.0 KiB
Markdown
---
|
||
sidebar_label: Mouse
|
||
---
|
||
|
||
# Mouse class
|
||
|
||
The Mouse class operates in main-frame CSS pixels relative to the top-left corner of the viewport.
|
||
|
||
#### Signature:
|
||
|
||
```typescript
|
||
export declare abstract class Mouse
|
||
```
|
||
|
||
## Remarks
|
||
|
||
Every `page` object has its own Mouse, accessible with \[`page.mouse`\](\#pagemouse).
|
||
|
||
The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the `Mouse` class.
|
||
|
||
## Example 1
|
||
|
||
```ts
|
||
// 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();
|
||
```
|
||
|
||
**Note**: The mouse events trigger synthetic `MouseEvent`s. This means that it does not fully replicate the functionality of what a normal user would be able to do with their mouse.
|
||
|
||
For example, dragging and selecting text is not possible using `page.mouse`. Instead, you can use the [\`DocumentOrShadowRoot.getSelection()\`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/getSelection) functionality implemented in the platform.
|
||
|
||
## Example 2
|
||
|
||
For example, if you want to select all content between nodes:
|
||
|
||
```ts
|
||
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
|
||
);
|
||
```
|
||
|
||
If you then would want to copy-paste your selection, you can use the clipboard api:
|
||
|
||
```ts
|
||
// 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();
|
||
});
|
||
```
|
||
|
||
**Note**: If you want access to the clipboard API, you have to give it permission to do so:
|
||
|
||
```ts
|
||
await browser
|
||
.defaultBrowserContext()
|
||
.overridePermissions('<your origin>', ['clipboard-read', 'clipboard-write']);
|
||
```
|
||
|
||
## Methods
|
||
|
||
<table><thead><tr><th>
|
||
|
||
Method
|
||
|
||
</th><th>
|
||
|
||
Modifiers
|
||
|
||
</th><th>
|
||
|
||
Description
|
||
|
||
</th></tr></thead>
|
||
<tbody><tr><td>
|
||
|
||
<span id="click">[click(x, y, options)](./puppeteer.mouse.click.md)</span>
|
||
|
||
</td><td>
|
||
|
||
</td><td>
|
||
|
||
Shortcut for `mouse.move`, `mouse.down` and `mouse.up`.
|
||
|
||
</td></tr>
|
||
<tr><td>
|
||
|
||
<span id="down">[down(options)](./puppeteer.mouse.down.md)</span>
|
||
|
||
</td><td>
|
||
|
||
</td><td>
|
||
|
||
Presses the mouse.
|
||
|
||
</td></tr>
|
||
<tr><td>
|
||
|
||
<span id="drag">[drag(start, target)](./puppeteer.mouse.drag.md)</span>
|
||
|
||
</td><td>
|
||
|
||
</td><td>
|
||
|
||
Dispatches a `drag` event.
|
||
|
||
</td></tr>
|
||
<tr><td>
|
||
|
||
<span id="draganddrop">[dragAndDrop(start, target, options)](./puppeteer.mouse.draganddrop.md)</span>
|
||
|
||
</td><td>
|
||
|
||
</td><td>
|
||
|
||
Performs a drag, dragenter, dragover, and drop in sequence.
|
||
|
||
</td></tr>
|
||
<tr><td>
|
||
|
||
<span id="dragenter">[dragEnter(target, data)](./puppeteer.mouse.dragenter.md)</span>
|
||
|
||
</td><td>
|
||
|
||
</td><td>
|
||
|
||
Dispatches a `dragenter` event.
|
||
|
||
</td></tr>
|
||
<tr><td>
|
||
|
||
<span id="dragover">[dragOver(target, data)](./puppeteer.mouse.dragover.md)</span>
|
||
|
||
</td><td>
|
||
|
||
</td><td>
|
||
|
||
Dispatches a `dragover` event.
|
||
|
||
</td></tr>
|
||
<tr><td>
|
||
|
||
<span id="drop">[drop(target, data)](./puppeteer.mouse.drop.md)</span>
|
||
|
||
</td><td>
|
||
|
||
</td><td>
|
||
|
||
Performs a dragenter, dragover, and drop in sequence.
|
||
|
||
</td></tr>
|
||
<tr><td>
|
||
|
||
<span id="move">[move(x, y, options)](./puppeteer.mouse.move.md)</span>
|
||
|
||
</td><td>
|
||
|
||
</td><td>
|
||
|
||
Moves the mouse to the given coordinate.
|
||
|
||
</td></tr>
|
||
<tr><td>
|
||
|
||
<span id="reset">[reset()](./puppeteer.mouse.reset.md)</span>
|
||
|
||
</td><td>
|
||
|
||
</td><td>
|
||
|
||
Resets the mouse to the default state: No buttons pressed; position at (0,0).
|
||
|
||
</td></tr>
|
||
<tr><td>
|
||
|
||
<span id="up">[up(options)](./puppeteer.mouse.up.md)</span>
|
||
|
||
</td><td>
|
||
|
||
</td><td>
|
||
|
||
Releases the mouse.
|
||
|
||
</td></tr>
|
||
<tr><td>
|
||
|
||
<span id="wheel">[wheel(options)](./puppeteer.mouse.wheel.md)</span>
|
||
|
||
</td><td>
|
||
|
||
</td><td>
|
||
|
||
Dispatches a `mousewheel` event.
|
||
|
||
</td></tr>
|
||
</tbody></table>
|