From 6b831366a268269bc2df1942ae2d602221ad1f68 Mon Sep 17 00:00:00 2001 From: jrandolf Date: Wed, 27 Apr 2022 12:51:32 +0200 Subject: [PATCH 1/5] feat: add `back` and `forward` mouse buttons --- src/common/Input.ts | 2 +- src/common/JSHandle.ts | 3 ++- test/assets/input/scrollable.html | 13 ++++++++++++- test/click.spec.ts | 27 +++++++++++++++++++++++++++ 4 files changed, 42 insertions(+), 3 deletions(-) diff --git a/src/common/Input.ts b/src/common/Input.ts index e3506cf3e5406..03d02a5768e68 100644 --- a/src/common/Input.ts +++ b/src/common/Input.ts @@ -280,7 +280,7 @@ export class Keyboard { /** * @public */ -export type MouseButton = 'left' | 'right' | 'middle'; +export type MouseButton = 'left' | 'right' | 'middle' | 'back' | 'forward'; /** * @public diff --git a/src/common/JSHandle.ts b/src/common/JSHandle.ts index 9faf863fca0df..6947c2207dfa2 100644 --- a/src/common/JSHandle.ts +++ b/src/common/JSHandle.ts @@ -32,6 +32,7 @@ import { UnwrapPromiseLike, } from './EvalTypes.js'; import { isNode } from '../environment.js'; +import { MouseButton } from './Input.js'; /** * @public */ @@ -1177,7 +1178,7 @@ export interface ClickOptions { /** * @defaultValue 'left' */ - button?: 'left' | 'right' | 'middle'; + button?: MouseButton; /** * @defaultValue 1 */ diff --git a/test/assets/input/scrollable.html b/test/assets/input/scrollable.html index 885d3739d5f01..77821474de659 100644 --- a/test/assets/input/scrollable.html +++ b/test/assets/input/scrollable.html @@ -15,9 +15,20 @@ event.preventDefault(); button.textContent = 'context menu'; } + button.onauxclick = event => { + event.preventDefault(); + button.textContent = 'aux click'; + } + button.onmouseup = event => { + if (![3,4].includes(event.button)) { + return; + } + event.preventDefault(); + button.textContent = event.button === 3 ? 'back click' : 'forward click'; + } document.body.appendChild(button); document.body.appendChild(document.createElement('br')); } - \ No newline at end of file + diff --git a/test/click.spec.ts b/test/click.spec.ts index e680bacb43e61..947d8344451d8 100644 --- a/test/click.spec.ts +++ b/test/click.spec.ts @@ -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(); From a7c22fc3990889978ad1b3bd30fd07981969908d Mon Sep 17 00:00:00 2001 From: jrandolf Date: Wed, 27 Apr 2022 12:59:27 +0200 Subject: [PATCH 2/5] chore: update api.md --- docs/api.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/api.md b/docs/api.md index 6e04af656c6cd..513f05d6244b8 100644 --- a/docs/api.md +++ b/docs/api.md @@ -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`. @@ -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]> @@ -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]> @@ -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]> @@ -3891,7 +3891,7 @@ Adds a `` tag into the page with the desired URL or a ` 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`. @@ -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. From b4a2b0228a44fb55e0534bced83103d7feffaf64 Mon Sep 17 00:00:00 2001 From: jrandolf Date: Wed, 27 Apr 2022 13:57:12 +0200 Subject: [PATCH 3/5] fix: tests --- src/common/JSHandle.ts | 1 + utils/doclint/check_public_api/index.js | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/common/JSHandle.ts b/src/common/JSHandle.ts index 6947c2207dfa2..9e7ec6d56693f 100644 --- a/src/common/JSHandle.ts +++ b/src/common/JSHandle.ts @@ -33,6 +33,7 @@ import { } from './EvalTypes.js'; import { isNode } from '../environment.js'; import { MouseButton } from './Input.js'; + /** * @public */ diff --git a/utils/doclint/check_public_api/index.js b/utils/doclint/check_public_api/index.js index 6ff6df38c5fca..741f8319c2dba 100644 --- a/utils/doclint/check_public_api/index.js +++ b/utils/doclint/check_public_api/index.js @@ -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', }, ], From a00c643ac4c3ea2239b942d7c7d3b645014cea55 Mon Sep 17 00:00:00 2001 From: jrandolf Date: Wed, 27 Apr 2022 14:19:39 +0200 Subject: [PATCH 4/5] chore: update scrollable.html --- test/assets/input/scrollable.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/test/assets/input/scrollable.html b/test/assets/input/scrollable.html index 77821474de659..0d53269cb16f0 100644 --- a/test/assets/input/scrollable.html +++ b/test/assets/input/scrollable.html @@ -12,10 +12,16 @@ 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.onauxclick = event => { + if (![1].includes(event.button)) { + return; + } event.preventDefault(); button.textContent = 'aux click'; } From f4f48b0839260dad26a3fcc0cf7624bde80f89f5 Mon Sep 17 00:00:00 2001 From: jrandolf Date: Wed, 27 Apr 2022 20:50:29 +0200 Subject: [PATCH 5/5] fix: update scrollable.html --- test/assets/input/scrollable.html | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/test/assets/input/scrollable.html b/test/assets/input/scrollable.html index 0d53269cb16f0..75757824a4a1a 100644 --- a/test/assets/input/scrollable.html +++ b/test/assets/input/scrollable.html @@ -18,19 +18,16 @@ event.preventDefault(); button.textContent = 'context menu'; } - button.onauxclick = event => { - if (![1].includes(event.button)) { - return; - } - event.preventDefault(); - button.textContent = 'aux click'; - } button.onmouseup = event => { - if (![3,4].includes(event.button)) { + if (![1,3,4].includes(event.button)) { return; } event.preventDefault(); - button.textContent = event.button === 3 ? 'back click' : 'forward click'; + button.textContent = { + 3: 'back click', + 4: 'forward click', + 1: 'aux click', + }[event.button]; } document.body.appendChild(button); document.body.appendChild(document.createElement('br'));