2022-07-05 13:41:43 +00:00
---
sidebar_label: Mouse
---
# Mouse class
The Mouse class operates in main-frame CSS pixels relative to the top-left corner of the viewport.
2022-10-24 07:07:05 +00:00
#### Signature:
2022-07-05 13:41:43 +00:00
```typescript
2023-11-09 12:57:33 +00:00
export declare abstract class Mouse
2022-07-05 13:41:43 +00:00
```
## 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();
```
2022-08-12 12:15:26 +00:00
**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.
2022-07-05 13:41:43 +00:00
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();
});
```
2022-08-12 12:15:26 +00:00
**Note**: If you want access to the clipboard API, you have to give it permission to do so:
2022-07-05 13:41:43 +00:00
```ts
await browser
.defaultBrowserContext()
.overridePermissions('< your origin > ', ['clipboard-read', 'clipboard-write']);
```
## Methods
| Method | Modifiers | Description |
| ----------------------------------------------------------------------- | --------- | ---------------------------------------------------------------------------------------- |
| [click(x, y, options) ](./puppeteer.mouse.click.md ) | | Shortcut for < code > mouse.move</ code > , < code > mouse.down</ code > and < code > mouse.up</ code > . |
2023-04-17 08:56:51 +00:00
| [down(options) ](./puppeteer.mouse.down.md ) | | Presses the mouse. |
2022-07-05 13:41:43 +00:00
| [drag(start, target) ](./puppeteer.mouse.drag.md ) | | Dispatches a < code > drag</ code > event. |
| [dragAndDrop(start, target, options) ](./puppeteer.mouse.draganddrop.md ) | | Performs a drag, dragenter, dragover, and drop in sequence. |
| [dragEnter(target, data) ](./puppeteer.mouse.dragenter.md ) | | Dispatches a < code > dragenter</ code > event. |
| [dragOver(target, data) ](./puppeteer.mouse.dragover.md ) | | Dispatches a < code > dragover</ code > event. |
| [drop(target, data) ](./puppeteer.mouse.drop.md ) | | Performs a dragenter, dragover, and drop in sequence. |
2023-04-17 08:56:51 +00:00
| [move(x, y, options) ](./puppeteer.mouse.move.md ) | | Moves the mouse to the given coordinate. |
2023-06-12 17:59:28 +00:00
| [reset() ](./puppeteer.mouse.reset.md ) | | Resets the mouse to the default state: No buttons pressed; position at (0,0). |
2023-04-17 08:56:51 +00:00
| [up(options) ](./puppeteer.mouse.up.md ) | | Releases the mouse. |
2022-07-05 13:41:43 +00:00
| [wheel(options) ](./puppeteer.mouse.wheel.md ) | | Dispatches a < code > mousewheel</ code > event. |