From 204ba1080f113dbb5ee941468dfdd65df47d2f9d Mon Sep 17 00:00:00 2001 From: christian-bromann Date: Thu, 2 Jul 2020 13:04:42 +0200 Subject: [PATCH 1/5] feat: add wheel method to Mouse class --- docs/api.md | 9 +++++++ new-docs/puppeteer.mouse.md | 1 + new-docs/puppeteer.mouse.wheel.md | 42 ++++++++++++++++++++++++++++++ src/common/Input.ts | 40 ++++++++++++++++++++++++++++ test/assets/input/wheel.html | 43 +++++++++++++++++++++++++++++++ test/mouse.spec.ts | 27 +++++++++++++++++++ 6 files changed, 162 insertions(+) create mode 100644 new-docs/puppeteer.mouse.wheel.md create mode 100644 test/assets/input/wheel.html diff --git a/docs/api.md b/docs/api.md index 17934bad43539..d9bc33a43fb77 100644 --- a/docs/api.md +++ b/docs/api.md @@ -190,6 +190,7 @@ * [mouse.down([options])](#mousedownoptions) * [mouse.move(x, y[, options])](#mousemovex-y-options) * [mouse.up([options])](#mouseupoptions) + * [mouse.wheel([options])](#mousewheeloptions) - [class: Touchscreen](#class-touchscreen) * [touchscreen.tap(x, y)](#touchscreentapx-y) - [class: Tracing](#class-tracing) @@ -2579,6 +2580,14 @@ Dispatches a `mousemove` event. Dispatches a `mouseup` event. +#### mouse.wheel([options]) +- `options` <[Object]> + - `deltaX` X delta in CSS pixels for mouse wheel event (default: 0). + - `deltaY` Y delta in CSS pixels for mouse wheel event (default: 0). +- returns: <[Promise]> + +Dispatches a `mousewheel` event. + ### class: Touchscreen #### touchscreen.tap(x, y) diff --git a/new-docs/puppeteer.mouse.md b/new-docs/puppeteer.mouse.md index 8a5044cab0017..0b372a92b0574 100644 --- a/new-docs/puppeteer.mouse.md +++ b/new-docs/puppeteer.mouse.md @@ -81,4 +81,5 @@ await browser.defaultBrowserContext().overridePermissions( | [down(options)](./puppeteer.mouse.down.md) | | Dispatches a mousedown event. | | [move(x, y, options)](./puppeteer.mouse.move.md) | | Dispatches a mousemove event. | | [up(options)](./puppeteer.mouse.up.md) | | Dispatches a mouseup event. | +| [wheel(options)](./puppeteer.mouse.wheel.md) | | Dispatches a mousewheel event. | diff --git a/new-docs/puppeteer.mouse.wheel.md b/new-docs/puppeteer.mouse.wheel.md new file mode 100644 index 0000000000000..b79392e3e8378 --- /dev/null +++ b/new-docs/puppeteer.mouse.wheel.md @@ -0,0 +1,42 @@ + + +[Home](./index.md) > [puppeteer](./puppeteer.md) > [Mouse](./puppeteer.mouse.md) > [wheel](./puppeteer.mouse.wheel.md) + +## Mouse.wheel() method + +Dispatches a `mousewheel` event. + +Signature: + +```typescript +wheel(options?: MouseWheelOptions): Promise; +``` + +## Parameters + +| Parameter | Type | Description | +| --- | --- | --- | +| options | MouseWheelOptions | Optional: MouseWheelOptions. | + +Returns: + +Promise<void> + +## Example + +An example of zooming into an element: + +```js +await page.goto('https://mdn.mozillademos.org/en-US/docs/Web/API/Element/wheel_event$samples/Scaling_an_element_via_the_wheel?revision=1587366'); + +const elem = await page.$('div'); +const boundingBox = await elem.boundingBox(); +await page.mouse.move( + boundingBox.x + boundingBox.width / 2, + boundingBox.y + boundingBox.height / 2 +); + +await page.mouse.wheel({ deltaY: -100 }) + +``` + diff --git a/src/common/Input.ts b/src/common/Input.ts index b395170a71b0e..30443c92c09a3 100644 --- a/src/common/Input.ts +++ b/src/common/Input.ts @@ -288,6 +288,14 @@ export interface MouseOptions { clickCount?: number; } +/** + * @public + */ +export interface MouseWheelOptions { + deltaX?: number; + deltaY?: number; +} + /** * The Mouse class operates in main-frame CSS pixels * relative to the top-left corner of the viewport. @@ -446,6 +454,38 @@ export class Mouse { clickCount, }); } + + /** + * Dispatches a `mousewheel` event. + * @param options - Optional: `MouseWheelOptions`. + * + * @example + * An example of zooming into an element: + * ```js + * await page.goto('https://mdn.mozillademos.org/en-US/docs/Web/API/Element/wheel_event$samples/Scaling_an_element_via_the_wheel?revision=1587366'); + * + * const elem = await page.$('div'); + * const boundingBox = await elem.boundingBox(); + * await page.mouse.move( + * boundingBox.x + boundingBox.width / 2, + * boundingBox.y + boundingBox.height / 2 + * ); + * + * await page.mouse.wheel({ deltaY: -100 }) + * ``` + */ + async wheel(options: MouseWheelOptions = {}): Promise { + const { deltaX = 0, deltaY = 0 } = options; + await this._client.send('Input.dispatchMouseEvent', { + type: 'mouseWheel', + x: this._x, + y: this._y, + deltaX, + deltaY, + modifiers: this._keyboard._modifiers, + pointerType: 'mouse', + }); + } } /** diff --git a/test/assets/input/wheel.html b/test/assets/input/wheel.html new file mode 100644 index 0000000000000..3d093a993e70f --- /dev/null +++ b/test/assets/input/wheel.html @@ -0,0 +1,43 @@ + + + + + + Element: wheel event - Scaling_an_element_via_the_wheel - code sample + + +
Scale me with your mouse wheel.
+ + + diff --git a/test/mouse.spec.ts b/test/mouse.spec.ts index 1cca238d71c23..0613d4162132d 100644 --- a/test/mouse.spec.ts +++ b/test/mouse.spec.ts @@ -173,6 +173,33 @@ describe('Mouse', function () { throw new Error(modifiers[modifier] + ' should be false'); } }); + it('should send mouse wheel events', async () => { + const { page, server } = getTestState(); + + await page.goto(server.PREFIX + '/input/wheel.html'); + const elem = await page.$('div'); + const boundingBoxBefore = await elem.boundingBox(); + expect(boundingBoxBefore).toEqual({ + x: 342.5, + y: 242.5, + width: 115, + height: 115, + }); + + await page.mouse.move( + boundingBoxBefore.x + boundingBoxBefore.width / 2, + boundingBoxBefore.y + boundingBoxBefore.height / 2 + ); + + await page.mouse.wheel({ deltaY: -100 }); + const boundingBoxAfter = await elem.boundingBox(); + expect(boundingBoxAfter).toEqual({ + x: 342.5, + y: 242.5, + width: 230, + height: 230, + }); + }); itFailsFirefox('should tween mouse movement', async () => { const { page } = getTestState(); From e654bf4b911bbf294acb085cc843d2983d77861b Mon Sep 17 00:00:00 2001 From: christian-bromann Date: Thu, 2 Jul 2020 15:27:41 +0200 Subject: [PATCH 2/5] fix: tests --- test/mouse.spec.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/test/mouse.spec.ts b/test/mouse.spec.ts index 0613d4162132d..384196525d1df 100644 --- a/test/mouse.spec.ts +++ b/test/mouse.spec.ts @@ -179,9 +179,7 @@ describe('Mouse', function () { await page.goto(server.PREFIX + '/input/wheel.html'); const elem = await page.$('div'); const boundingBoxBefore = await elem.boundingBox(); - expect(boundingBoxBefore).toEqual({ - x: 342.5, - y: 242.5, + expect(boundingBoxBefore).toMatchObject({ width: 115, height: 115, }); @@ -193,9 +191,7 @@ describe('Mouse', function () { await page.mouse.wheel({ deltaY: -100 }); const boundingBoxAfter = await elem.boundingBox(); - expect(boundingBoxAfter).toEqual({ - x: 342.5, - y: 242.5, + expect(boundingBoxAfter).toMatchObject({ width: 230, height: 230, }); From 1d58b87bb9520024c3cc96f05256759562fa6475 Mon Sep 17 00:00:00 2001 From: christian-bromann Date: Thu, 2 Jul 2020 16:07:44 +0200 Subject: [PATCH 3/5] fix: mark test to fail in FF --- test/mouse.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/mouse.spec.ts b/test/mouse.spec.ts index 384196525d1df..97aae6b90112c 100644 --- a/test/mouse.spec.ts +++ b/test/mouse.spec.ts @@ -173,7 +173,7 @@ describe('Mouse', function () { throw new Error(modifiers[modifier] + ' should be false'); } }); - it('should send mouse wheel events', async () => { + itFailsFirefox('should send mouse wheel events', async () => { const { page, server } = getTestState(); await page.goto(server.PREFIX + '/input/wheel.html'); From 322be718c7784c807bee472c47a3ca1e5567fde7 Mon Sep 17 00:00:00 2001 From: christian-bromann Date: Thu, 2 Jul 2020 18:27:14 +0200 Subject: [PATCH 4/5] fix: docs update --- new-docs/puppeteer.md | 1 + new-docs/puppeteer.mouse.wheel.md | 2 +- .../puppeteer.mousewheeloptions.deltax.md | 11 ++++++++++ .../puppeteer.mousewheeloptions.deltay.md | 11 ++++++++++ new-docs/puppeteer.mousewheeloptions.md | 20 +++++++++++++++++++ utils/doclint/check_public_api/index.js | 7 +++++++ 6 files changed, 51 insertions(+), 1 deletion(-) create mode 100644 new-docs/puppeteer.mousewheeloptions.deltax.md create mode 100644 new-docs/puppeteer.mousewheeloptions.deltay.md create mode 100644 new-docs/puppeteer.mousewheeloptions.md diff --git a/new-docs/puppeteer.md b/new-docs/puppeteer.md index c5648645aef22..9f87afa35753b 100644 --- a/new-docs/puppeteer.md +++ b/new-docs/puppeteer.md @@ -63,6 +63,7 @@ | [LaunchOptions](./puppeteer.launchoptions.md) | Generic launch options that can be passed when launching any browser. | | [Metrics](./puppeteer.metrics.md) | | | [MouseOptions](./puppeteer.mouseoptions.md) | | +| [MouseWheelOptions](./puppeteer.mousewheeloptions.md) | | | [PressOptions](./puppeteer.pressoptions.md) | | | [ProductLauncher](./puppeteer.productlauncher.md) | Describes a launcher - a class that is able to create and launch a browser instance. | | [RemoteAddress](./puppeteer.remoteaddress.md) | | diff --git a/new-docs/puppeteer.mouse.wheel.md b/new-docs/puppeteer.mouse.wheel.md index b79392e3e8378..0b5aab75f7476 100644 --- a/new-docs/puppeteer.mouse.wheel.md +++ b/new-docs/puppeteer.mouse.wheel.md @@ -16,7 +16,7 @@ wheel(options?: MouseWheelOptions): Promise; | Parameter | Type | Description | | --- | --- | --- | -| options | MouseWheelOptions | Optional: MouseWheelOptions. | +| options | [MouseWheelOptions](./puppeteer.mousewheeloptions.md) | Optional: MouseWheelOptions. | Returns: diff --git a/new-docs/puppeteer.mousewheeloptions.deltax.md b/new-docs/puppeteer.mousewheeloptions.deltax.md new file mode 100644 index 0000000000000..1b060aef69587 --- /dev/null +++ b/new-docs/puppeteer.mousewheeloptions.deltax.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [puppeteer](./puppeteer.md) > [MouseWheelOptions](./puppeteer.mousewheeloptions.md) > [deltaX](./puppeteer.mousewheeloptions.deltax.md) + +## MouseWheelOptions.deltaX property + +Signature: + +```typescript +deltaX?: number; +``` diff --git a/new-docs/puppeteer.mousewheeloptions.deltay.md b/new-docs/puppeteer.mousewheeloptions.deltay.md new file mode 100644 index 0000000000000..5cfb6f6c46c4a --- /dev/null +++ b/new-docs/puppeteer.mousewheeloptions.deltay.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [puppeteer](./puppeteer.md) > [MouseWheelOptions](./puppeteer.mousewheeloptions.md) > [deltaY](./puppeteer.mousewheeloptions.deltay.md) + +## MouseWheelOptions.deltaY property + +Signature: + +```typescript +deltaY?: number; +``` diff --git a/new-docs/puppeteer.mousewheeloptions.md b/new-docs/puppeteer.mousewheeloptions.md new file mode 100644 index 0000000000000..7ff07c3a7ada7 --- /dev/null +++ b/new-docs/puppeteer.mousewheeloptions.md @@ -0,0 +1,20 @@ + + +[Home](./index.md) > [puppeteer](./puppeteer.md) > [MouseWheelOptions](./puppeteer.mousewheeloptions.md) + +## MouseWheelOptions interface + + +Signature: + +```typescript +export interface MouseWheelOptions +``` + +## Properties + +| Property | Type | Description | +| --- | --- | --- | +| [deltaX](./puppeteer.mousewheeloptions.deltax.md) | number | | +| [deltaY](./puppeteer.mousewheeloptions.deltay.md) | number | | + diff --git a/utils/doclint/check_public_api/index.js b/utils/doclint/check_public_api/index.js index d6d04a9147fd3..32d0da2a73b78 100644 --- a/utils/doclint/check_public_api/index.js +++ b/utils/doclint/check_public_api/index.js @@ -388,6 +388,13 @@ function compareDocumentations(actual, expected) { expectedName: 'MouseOptions', }, ], + [ + 'Method Mouse.wheel() options', + { + actualName: 'Object', + expectedName: 'MouseWheelOptions', + }, + ], [ 'Method Tracing.start() options', { From 76d4fd9966df1adac4f98b6a8797f15c1a7ea9eb Mon Sep 17 00:00:00 2001 From: christian-bromann Date: Fri, 3 Jul 2020 09:39:49 +0200 Subject: [PATCH 5/5] docs: enhanced wheel docs --- docs/api.md | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/docs/api.md b/docs/api.md index d9bc33a43fb77..83dcc3d929ccf 100644 --- a/docs/api.md +++ b/docs/api.md @@ -2582,12 +2582,26 @@ Dispatches a `mouseup` event. #### mouse.wheel([options]) - `options` <[Object]> - - `deltaX` X delta in CSS pixels for mouse wheel event (default: 0). - - `deltaY` Y delta in CSS pixels for mouse wheel event (default: 0). + - `deltaX` X delta in CSS pixels for mouse wheel event (default: 0). Positive values emulate a scroll up and negative values a scroll down event. + - `deltaY` Y delta in CSS pixels for mouse wheel event (default: 0). Positive values emulate a scroll right and negative values a scroll left event. - returns: <[Promise]> Dispatches a `mousewheel` event. +Examples: +```js +await page.goto('https://mdn.mozillademos.org/en-US/docs/Web/API/Element/wheel_event$samples/Scaling_an_element_via_the_wheel?revision=1587366'); + +const elem = await page.$('div'); +const boundingBox = await elem.boundingBox(); +await page.mouse.move( + boundingBox.x + boundingBox.width / 2, + boundingBox.y + boundingBox.height / 2 +); + +await page.mouse.wheel({ deltaY: -100 }) +``` + ### class: Touchscreen #### touchscreen.tap(x, y)