feat(puppeteer-core): keydown supports commands (#9357)

Issue: #1313

<!-- Thanks for submitting a pull request! Please provide enough
information so that others can review your pull request. -->

**What kind of change does this PR introduce?**

Feature.

**Did you add tests for your changes?**

Yes.

**If relevant, did you update the documentation?**

Yes.

**Summary**

Supports keyboard shotcuts on MacOS. See Chrome Devtools Protocol
document:
https://chromedevtools.github.io/devtools-protocol/tot/Input/#method-dispatchKeyEvent.
This commit is contained in:
Junyan 2022-12-03 18:23:47 +08:00 committed by GitHub
parent 3cdd5d8292
commit b7ebc5d9bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 58 additions and 12 deletions

View File

@ -14,6 +14,7 @@ class Keyboard {
key: KeyInput, key: KeyInput,
options?: { options?: {
text?: string; text?: string;
commands?: string[];
} }
): Promise<void>; ): Promise<void>;
} }
@ -21,10 +22,10 @@ class Keyboard {
## Parameters ## Parameters
| Parameter | Type | Description | | Parameter | Type | Description |
| --------- | ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | | --------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| key | [KeyInput](./puppeteer.keyinput.md) | Name of key to press, such as <code>ArrowLeft</code>. See [KeyInput](./puppeteer.keyinput.md) for a list of all key names. | | key | [KeyInput](./puppeteer.keyinput.md) | Name of key to press, such as <code>ArrowLeft</code>. See [KeyInput](./puppeteer.keyinput.md) for a list of all key names. |
| options | { text?: string; } | <i>(Optional)</i> An object of options. Accepts text which, if specified, generates an input event with this text. | | options | { text?: string; commands?: string\[\]; } | <i>(Optional)</i> An object of options. Accepts text which, if specified, generates an input event with this text. Accepts commands which, if specified, is the commands of keyboard shortcuts, see [Chromium Source Code](https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/editing/commands/editor_command_names.h) for valid command names. |
**Returns:** **Returns:**

View File

@ -15,6 +15,7 @@ class Keyboard {
options?: { options?: {
delay?: number; delay?: number;
text?: string; text?: string;
commands?: string[];
} }
): Promise<void>; ): Promise<void>;
} }
@ -22,10 +23,10 @@ class Keyboard {
## Parameters ## Parameters
| Parameter | Type | Description | | Parameter | Type | Description |
| --------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | --------- | --------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| key | [KeyInput](./puppeteer.keyinput.md) | Name of key to press, such as <code>ArrowLeft</code>. See [KeyInput](./puppeteer.keyinput.md) for a list of all key names. | | key | [KeyInput](./puppeteer.keyinput.md) | Name of key to press, such as <code>ArrowLeft</code>. See [KeyInput](./puppeteer.keyinput.md) for a list of all key names. |
| options | { delay?: number; text?: string; } | <i>(Optional)</i> An object of options. Accepts text which, if specified, generates an input event with this text. Accepts delay which, if specified, is the time to wait between <code>keydown</code> and <code>keyup</code> in milliseconds. Defaults to 0. | | options | { delay?: number; text?: string; commands?: string\[\]; } | <i>(Optional)</i> An object of options. Accepts text which, if specified, generates an input event with this text. Accepts delay which, if specified, is the time to wait between <code>keydown</code> and <code>keyup</code> in milliseconds. Defaults to 0. Accepts commands which, if specified, is the commands of keyboard shortcuts, see [Chromium Source Code](https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/editing/commands/editor_command_names.h) for valid command names. |
**Returns:** **Returns:**

View File

@ -104,11 +104,16 @@ export class Keyboard {
* See {@link KeyInput} for a list of all key names. * See {@link KeyInput} for a list of all key names.
* *
* @param options - An object of options. Accepts text which, if specified, * @param options - An object of options. Accepts text which, if specified,
* generates an input event with this text. * generates an input event with this text. Accepts commands which, if specified,
* is the commands of keyboard shortcuts,
* see {@link https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/editing/commands/editor_command_names.h | Chromium Source Code} for valid command names.
*/ */
async down( async down(
key: KeyInput, key: KeyInput,
options: {text?: string} = {text: undefined} options: {text?: string; commands?: string[]} = {
text: undefined,
commands: [],
}
): Promise<void> { ): Promise<void> {
const description = this.#keyDescriptionForString(key); const description = this.#keyDescriptionForString(key);
@ -128,6 +133,7 @@ export class Keyboard {
autoRepeat, autoRepeat,
location: description.location, location: description.location,
isKeypad: description.location === 3, isKeypad: description.location === 3,
commands: options.commands,
}); });
} }
@ -304,11 +310,13 @@ export class Keyboard {
* @param options - An object of options. Accepts text which, if specified, * @param options - An object of options. Accepts text which, if specified,
* generates an input event with this text. Accepts delay which, * generates an input event with this text. Accepts delay which,
* if specified, is the time to wait between `keydown` and `keyup` in milliseconds. * if specified, is the time to wait between `keydown` and `keyup` in milliseconds.
* Defaults to 0. * Defaults to 0. Accepts commands which, if specified,
* is the commands of keyboard shortcuts,
* see {@link https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/editing/commands/editor_command_names.h | Chromium Source Code} for valid command names.
*/ */
async press( async press(
key: KeyInput, key: KeyInput,
options: {delay?: number; text?: string} = {} options: {delay?: number; text?: string; commands?: string[]} = {}
): Promise<void> { ): Promise<void> {
const {delay = null} = options; const {delay = null} = options;
await this.down(key, options); await this.down(key, options);

View File

@ -569,6 +569,12 @@
"parameters": ["firefox"], "parameters": ["firefox"],
"expectations": ["SKIP"] "expectations": ["SKIP"]
}, },
{
"testIdPattern": "[keyboard.spec] Keyboard should trigger commands of keyboard shortcuts",
"platforms": ["darwin", "linux", "win32"],
"parameters": ["firefox"],
"expectations": ["SKIP"]
},
{ {
"testIdPattern": "[keyboard.spec] Keyboard should report shiftKey", "testIdPattern": "[keyboard.spec] Keyboard should report shiftKey",
"platforms": ["darwin", "linux", "win32"], "platforms": ["darwin", "linux", "win32"],

View File

@ -90,6 +90,36 @@ describe('Keyboard', function () {
}) })
).toBe('Hello World!'); ).toBe('Hello World!');
}); });
// @see https://github.com/puppeteer/puppeteer/issues/1313
it('should trigger commands of keyboard shortcuts', async () => {
const {page, server} = getTestState();
const cmdKey = os.platform() !== 'darwin' ? 'Meta' : 'Control';
await page.goto(server.PREFIX + '/input/textarea.html');
await page.type('textarea', 'hello');
await page.keyboard.down(cmdKey);
await page.keyboard.press('a', {commands: ['SelectAll']});
await page.keyboard.up(cmdKey);
await page.keyboard.down(cmdKey);
await page.keyboard.down('c', {commands: ['Copy']});
await page.keyboard.up('c');
await page.keyboard.up(cmdKey);
await page.keyboard.down(cmdKey);
await page.keyboard.press('v', {commands: ['Paste']});
await page.keyboard.up(cmdKey);
await page.keyboard.down(cmdKey);
await page.keyboard.press('v', {commands: ['Paste']});
await page.keyboard.up(cmdKey);
expect(
await page.evaluate(() => {
return document.querySelector('textarea')!.value;
})
).toBe('hellohello');
});
it('should send a character with ElementHandle.press', async () => { it('should send a character with ElementHandle.press', async () => {
const {page, server} = getTestState(); const {page, server} = getTestState();