Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat: add back and forward mouse buttons (#8284)
  • Loading branch information
jrandolf committed Apr 27, 2022
1 parent b0e9e6f commit 7a51bff
Show file tree
Hide file tree
Showing 6 changed files with 55 additions and 12 deletions.
12 changes: 6 additions & 6 deletions docs/api.md
Expand Up @@ -1466,7 +1466,7 @@ Get the browser context that the page belongs to.

- `selector` <[string]> A [selector] to search for element to click. If there are multiple elements satisfying the selector, the first will be clicked.
- `options` <[Object]>
- `button` <"left"|"right"|"middle"> Defaults to `left`.
- `button` <"left"|"right"|"middle"|"back"|"forward"> Defaults to `left`.
- `clickCount` <[number]> defaults to 1. See [UIEvent.detail].
- `delay` <[number]> Time to wait between `mousedown` and `mouseup` in milliseconds. Defaults to 0.
- returns: <[Promise]> Promise which resolves when the element matching `selector` is successfully clicked. The Promise will be rejected if there is no element matching `selector`.
Expand Down Expand Up @@ -3508,7 +3508,7 @@ await browser
- `x` <[number]>
- `y` <[number]>
- `options` <[Object]>
- `button` <"left"|"right"|"middle"> Defaults to `left`.
- `button` <"left"|"right"|"middle"|"back"|"forward"> Defaults to `left`.
- `clickCount` <[number]> defaults to 1. See [UIEvent.detail].
- `delay` <[number]> Time to wait between `mousedown` and `mouseup` in milliseconds. Defaults to 0.
- returns: <[Promise]>
Expand All @@ -3518,7 +3518,7 @@ Shortcut for [`mouse.move`](#mousemovex-y-options), [`mouse.down`](#mousedownopt
#### mouse.down([options])

- `options` <[Object]>
- `button` <"left"|"right"|"middle"> Defaults to `left`.
- `button` <"left"|"right"|"middle"|"back"|"forward"> Defaults to `left`.
- `clickCount` <[number]> defaults to 1. See [UIEvent.detail].
- returns: <[Promise]>

Expand Down Expand Up @@ -3593,7 +3593,7 @@ Dispatches a `mousemove` event.
#### mouse.up([options])

- `options` <[Object]>
- `button` <"left"|"right"|"middle"> Defaults to `left`.
- `button` <"left"|"right"|"middle"|"back"|"forward"> Defaults to `left`.
- `clickCount` <[number]> defaults to 1. See [UIEvent.detail].
- returns: <[Promise]>

Expand Down Expand Up @@ -3891,7 +3891,7 @@ Adds a `<link rel="stylesheet">` tag into the page with the desired URL or a `<s

- `selector` <[string]> A [selector] to search for element to click. If there are multiple elements satisfying the selector, the first will be clicked.
- `options` <[Object]>
- `button` <"left"|"right"|"middle"> Defaults to `left`.
- `button` <"left"|"right"|"middle"|"back"|"forward"> Defaults to `left`.
- `clickCount` <[number]> defaults to 1. See [UIEvent.detail].
- `delay` <[number]> Time to wait between `mousedown` and `mouseup` in milliseconds. Defaults to 0.
- returns: <[Promise]> Promise which resolves when the element matching `selector` is successfully clicked. The Promise will be rejected if there is no element matching `selector`.
Expand Down Expand Up @@ -4654,7 +4654,7 @@ This method returns boxes of the element, or `null` if the element is not visibl
#### elementHandle.click([options])

- `options` <[Object]>
- `button` <"left"|"right"|"middle"> Defaults to `left`.
- `button` <"left"|"right"|"middle"|"back"|"forward"> Defaults to `left`.
- `clickCount` <[number]> defaults to 1. See [UIEvent.detail].
- `delay` <[number]> Time to wait between `mousedown` and `mouseup` in milliseconds. Defaults to 0.
- `offset` <[Object]> Offset in pixels relative to the top-left corner of the border box of the element.
Expand Down
2 changes: 1 addition & 1 deletion src/common/Input.ts
Expand Up @@ -280,7 +280,7 @@ export class Keyboard {
/**
* @public
*/
export type MouseButton = 'left' | 'right' | 'middle';
export type MouseButton = 'left' | 'right' | 'middle' | 'back' | 'forward';

/**
* @public
Expand Down
4 changes: 3 additions & 1 deletion src/common/JSHandle.ts
Expand Up @@ -32,6 +32,8 @@ import {
UnwrapPromiseLike,
} from './EvalTypes.js';
import { isNode } from '../environment.js';
import { MouseButton } from './Input.js';

/**
* @public
*/
Expand Down Expand Up @@ -1177,7 +1179,7 @@ export interface ClickOptions {
/**
* @defaultValue 'left'
*/
button?: 'left' | 'right' | 'middle';
button?: MouseButton;
/**
* @defaultValue 1
*/
Expand Down
16 changes: 15 additions & 1 deletion test/assets/input/scrollable.html
Expand Up @@ -12,12 +12,26 @@
button.id = 'button-' + i;
button.onclick = () => button.textContent = 'clicked';
button.oncontextmenu = event => {
if (![2].includes(event.button)) {
return;
}
event.preventDefault();
button.textContent = 'context menu';
}
button.onmouseup = event => {
if (![1,3,4].includes(event.button)) {
return;
}
event.preventDefault();
button.textContent = {
3: 'back click',
4: 'forward click',
1: 'aux click',
}[event.button];
}
document.body.appendChild(button);
document.body.appendChild(document.createElement('br'));
}
</script>
</body>
</html>
</html>
27 changes: 27 additions & 0 deletions test/click.spec.ts
Expand Up @@ -283,6 +283,33 @@ describe('Page.click', function () {
await page.evaluate(() => document.querySelector('#button-8').textContent)
).toBe('context menu');
});
it('should fire aux event on middle click', async () => {
const { page, server } = getTestState();

await page.goto(server.PREFIX + '/input/scrollable.html');
await page.click('#button-8', { button: 'middle' });
expect(
await page.evaluate(() => document.querySelector('#button-8').textContent)
).toBe('aux click');
});
it('should fire back click', async () => {
const { page, server } = getTestState();

await page.goto(server.PREFIX + '/input/scrollable.html');
await page.click('#button-8', { button: 'back' });
expect(
await page.evaluate(() => document.querySelector('#button-8').textContent)
).toBe('back click');
});
it('should fire forward click', async () => {
const { page, server } = getTestState();

await page.goto(server.PREFIX + '/input/scrollable.html');
await page.click('#button-8', { button: 'forward' });
expect(
await page.evaluate(() => document.querySelector('#button-8').textContent)
).toBe('forward click');
});
// @see https://github.com/puppeteer/puppeteer/issues/206
it('should click links which cause navigation', async () => {
const { page, server } = getTestState();
Expand Down
6 changes: 3 additions & 3 deletions utils/doclint/check_public_api/index.js
Expand Up @@ -926,21 +926,21 @@ function compareDocumentations(actual, expected) {
[
'Method Mouse.click() options.button',
{
actualName: '"left"|"right"|"middle"',
actualName: '"left"|"right"|"middle"|"back"|"forward"',
expectedName: 'MouseButton',
},
],
[
'Method Frame.click() options.button',
{
actualName: '"left"|"right"|"middle"',
actualName: '"left"|"right"|"middle"|"back"|"forward"',
expectedName: 'MouseButton',
},
],
[
'Method Page.click() options.button',
{
actualName: '"left"|"right"|"middle"',
actualName: '"left"|"right"|"middle"|"back"|"forward"',
expectedName: 'MouseButton',
},
],
Expand Down

0 comments on commit 7a51bff

Please sign in to comment.