From 420013b3f3e24f00a4dcfb80d4a173dacca92849 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Tue, 14 Mar 2023 17:16:57 +0800 Subject: [PATCH] Add pressKeys (#49009) --- docs/contributors/code/e2e/migration.md | 4 +- packages/e2e-test-utils-playwright/README.md | 2 +- .../src/page-utils/index.ts | 13 +- .../src/page-utils/press-key-times.js | 11 -- .../src/page-utils/press-key-with-modifier.ts | 132 ------------- .../src/page-utils/press-keys.ts | 176 ++++++++++++++++++ test/e2e/specs/editor/blocks/buttons.spec.js | 10 +- test/e2e/specs/editor/blocks/classic.spec.js | 8 +- test/e2e/specs/editor/blocks/code.spec.js | 2 +- test/e2e/specs/editor/blocks/gallery.spec.js | 2 +- test/e2e/specs/editor/blocks/heading.spec.js | 12 +- test/e2e/specs/editor/blocks/image.spec.js | 8 +- test/e2e/specs/editor/blocks/list.spec.js | 30 +-- test/e2e/specs/editor/blocks/quote.spec.js | 4 +- .../plugins/deprecated-node-matcher.spec.js | 2 +- .../specs/editor/plugins/format-api.spec.js | 2 +- .../plugins/post-type-templates.spec.js | 2 +- test/e2e/specs/editor/various/a11y.spec.js | 43 ++--- .../various/autocomplete-and-mentions.spec.js | 8 +- .../editor/various/block-deletion.spec.js | 4 +- .../editor/various/content-only-lock.spec.js | 4 +- .../editor/various/copy-cut-paste.spec.js | 108 +++++------ .../editor/various/duplicating-blocks.spec.js | 6 +- .../editor/various/font-size-picker.spec.js | 12 +- .../specs/editor/various/list-view.spec.js | 52 +++--- .../e2e/specs/editor/various/mentions.spec.js | 2 +- .../various/multi-block-selection.spec.js | 80 ++++---- test/e2e/specs/editor/various/rtl.spec.js | 4 +- .../editor/various/splitting-merging.spec.js | 26 +-- .../various/toolbar-roving-tabindex.spec.js | 17 +- .../specs/editor/various/writing-flow.spec.js | 75 ++++---- .../specs/site-editor/writing-flow.spec.js | 4 +- .../specs/widgets/customizing-widgets.spec.js | 5 +- 33 files changed, 450 insertions(+), 420 deletions(-) delete mode 100644 packages/e2e-test-utils-playwright/src/page-utils/press-key-times.js delete mode 100644 packages/e2e-test-utils-playwright/src/page-utils/press-key-with-modifier.ts create mode 100644 packages/e2e-test-utils-playwright/src/page-utils/press-keys.ts diff --git a/docs/contributors/code/e2e/migration.md b/docs/contributors/code/e2e/migration.md index 030c6c87f2c304..4b0400b85d3c06 100644 --- a/docs/contributors/code/e2e/migration.md +++ b/docs/contributors/code/e2e/migration.md @@ -17,7 +17,7 @@ This document outlines a typical flow of migrating a Jest + Puppeteer test to Pl ## Migration steps for test utils -Before migrating a test utility function, think twice about whether it's necessary. Playwright offers a lot of readable and powerful APIs which make a lot of the utils obsolete. Try implementing the same thing inline directly in the test first. Only follow the below guide if that doesn't work for you. Some examples of utils that deserve to be implemented in the `e2e-test-utils-playwright` package include complex browser APIs (like `pageUtils.dragFiles` and `pageUtils.pressKeyWithModifier`) and APIs that set states (`requestUtils.*`). +Before migrating a test utility function, think twice about whether it's necessary. Playwright offers a lot of readable and powerful APIs which make a lot of the utils obsolete. Try implementing the same thing inline directly in the test first. Only follow the below guide if that doesn't work for you. Some examples of utils that deserve to be implemented in the `e2e-test-utils-playwright` package include complex browser APIs (like `pageUtils.dragFiles` and `pageUtils.pressKeys`) and APIs that set states (`requestUtils.*`). > **Note** > The `e2e-test-utils-playwright` package is not meant to be a drop-in replacement of the Jest + Puppeteer's `e2e-test-utils` package. Some utils are only created to ease the migration process, but they are not necessarily required. @@ -25,7 +25,7 @@ Before migrating a test utility function, think twice about whether it's necessa Playwright utilities are organized a little differently from those in the `e2e-test-utils` package. The `e2e-test-utils-playwright` package has the following folders that utils are divided up into: - `admin` - Utilities related to WordPress admin or WordPress admin's user interface (e.g. `visitAdminPage`). - `editor` - Utilities for the block editor (e.g. `clickBlockToolbarButton`). -- `pageUtils` - General utilities for interacting with the browser (e.g. `pressKeyWithModifier`). +- `pageUtils` - General utilities for interacting with the browser (e.g. `pressKeys`). - `requestUtils` - Utilities for making REST API requests (e.g. `activatePlugin`). These utilities are used for setup and teardown of tests. 1. Copy the existing file in `e2e-test-utils` and paste it in the `admin`, `editor`, `page` or `request` folder in `e2e-test-utils-playwright` depending on the type of util. diff --git a/packages/e2e-test-utils-playwright/README.md b/packages/e2e-test-utils-playwright/README.md index 52cf8523159db0..50e9c0540b9245 100644 --- a/packages/e2e-test-utils-playwright/README.md +++ b/packages/e2e-test-utils-playwright/README.md @@ -58,7 +58,7 @@ Generic Playwright utilities for interacting with web pages. ```js const pageUtils = new PageUtils( { page } ); -await pageUtils.pressKeyWithModifier( 'primary', 'a' ); +await pageUtils.pressKeys( 'primary+a' ); ``` ### RequestUtils diff --git a/packages/e2e-test-utils-playwright/src/page-utils/index.ts b/packages/e2e-test-utils-playwright/src/page-utils/index.ts index 28fc36c9abeebb..50dbe71033fc6b 100644 --- a/packages/e2e-test-utils-playwright/src/page-utils/index.ts +++ b/packages/e2e-test-utils-playwright/src/page-utils/index.ts @@ -8,11 +8,7 @@ import type { Browser, Page, BrowserContext } from '@playwright/test'; */ import { dragFiles } from './drag-files'; import { isCurrentURL } from './is-current-url'; -import { - setClipboardData, - pressKeyWithModifier, -} from './press-key-with-modifier'; -import { pressKeyTimes } from './press-key-times'; +import { setClipboardData, pressKeys } from './press-keys'; import { setBrowserViewport } from './set-browser-viewport'; type PageUtilConstructorParams = { @@ -34,11 +30,8 @@ class PageUtils { dragFiles: typeof dragFiles = dragFiles.bind( this ); /** @borrows isCurrentURL as this.isCurrentURL */ isCurrentURL: typeof isCurrentURL = isCurrentURL.bind( this ); - /** @borrows pressKeyTimes as this.pressKeyTimes */ - pressKeyTimes: typeof pressKeyTimes = pressKeyTimes.bind( this ); - /** @borrows pressKeyWithModifier as this.pressKeyWithModifier */ - pressKeyWithModifier: typeof pressKeyWithModifier = - pressKeyWithModifier.bind( this ); + /** @borrows pressKeys as this.pressKeys */ + pressKeys: typeof pressKeys = pressKeys.bind( this ); /** @borrows setBrowserViewport as this.setBrowserViewport */ setBrowserViewport: typeof setBrowserViewport = setBrowserViewport.bind( this ); diff --git a/packages/e2e-test-utils-playwright/src/page-utils/press-key-times.js b/packages/e2e-test-utils-playwright/src/page-utils/press-key-times.js deleted file mode 100644 index 5e8f3ea65b99c5..00000000000000 --- a/packages/e2e-test-utils-playwright/src/page-utils/press-key-times.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Presses the given keyboard key a number of times in sequence. - * - * @param {string} key Key to press. - * @param {number} count Number of times to press. - */ -export async function pressKeyTimes( key, count ) { - while ( count-- ) { - await this.page.keyboard.press( key ); - } -} diff --git a/packages/e2e-test-utils-playwright/src/page-utils/press-key-with-modifier.ts b/packages/e2e-test-utils-playwright/src/page-utils/press-key-with-modifier.ts deleted file mode 100644 index c5301fd6ba3725..00000000000000 --- a/packages/e2e-test-utils-playwright/src/page-utils/press-key-with-modifier.ts +++ /dev/null @@ -1,132 +0,0 @@ -/** - * External dependencies - */ -import { capitalCase } from 'change-case'; -import type { Page } from '@playwright/test'; - -/** - * WordPress dependencies - */ -import { modifiers, SHIFT, ALT, CTRL } from '@wordpress/keycodes'; -import type { WPKeycodeModifier } from '@wordpress/keycodes'; - -/** - * Internal dependencies - */ -import type { PageUtils } from './index'; - -let clipboardDataHolder: { - plainText: string; - html: string; -} = { - plainText: '', - html: '', -}; - -/** - * Sets the clipboard data that can be pasted with - * `pressKeyWithModifier( 'primary', 'v' )`. - * - * @param this - * @param clipboardData - * @param clipboardData.plainText - * @param clipboardData.html - */ -export function setClipboardData( - this: PageUtils, - { plainText = '', html = '' }: typeof clipboardDataHolder -) { - clipboardDataHolder = { - plainText, - html, - }; -} - -async function emulateClipboard( page: Page, type: 'copy' | 'cut' | 'paste' ) { - clipboardDataHolder = await page.evaluate( - ( [ _type, _clipboardData ] ) => { - const clipboardDataTransfer = new DataTransfer(); - - if ( _type === 'paste' ) { - clipboardDataTransfer.setData( - 'text/plain', - _clipboardData.plainText - ); - clipboardDataTransfer.setData( - 'text/html', - _clipboardData.html - ); - } else { - const selection = window.getSelection()!; - const plainText = selection.toString(); - let html = plainText; - if ( selection.rangeCount ) { - const range = selection.getRangeAt( 0 ); - const fragment = range.cloneContents(); - html = Array.from( fragment.childNodes ) - .map( - ( node ) => - ( node as Element ).outerHTML ?? node.nodeValue - ) - .join( '' ); - } - clipboardDataTransfer.setData( 'text/plain', plainText ); - clipboardDataTransfer.setData( 'text/html', html ); - } - - document.activeElement?.dispatchEvent( - new ClipboardEvent( _type, { - bubbles: true, - cancelable: true, - clipboardData: clipboardDataTransfer, - } ) - ); - - return { - plainText: clipboardDataTransfer.getData( 'text/plain' ), - html: clipboardDataTransfer.getData( 'text/html' ), - }; - }, - [ type, clipboardDataHolder ] as const - ); -} - -/** - * Performs a key press with modifier (Shift, Control, Meta, Alt), where each modifier - * is normalized to platform-specific modifier. - * - * @param this - * @param modifier - * @param key - */ -export async function pressKeyWithModifier( - this: PageUtils, - modifier: WPKeycodeModifier, - key: string -) { - if ( modifier.toLowerCase() === 'primary' && key.toLowerCase() === 'c' ) { - return await emulateClipboard( this.page, 'copy' ); - } - - if ( modifier.toLowerCase() === 'primary' && key.toLowerCase() === 'x' ) { - return await emulateClipboard( this.page, 'cut' ); - } - - if ( modifier.toLowerCase() === 'primary' && key.toLowerCase() === 'v' ) { - return await emulateClipboard( this.page, 'paste' ); - } - - const isAppleOS = () => process.platform === 'darwin'; - const overWrittenModifiers = { - ...modifiers, - shiftAlt: ( _isApple: () => boolean ) => - _isApple() ? [ SHIFT, ALT ] : [ SHIFT, CTRL ], - }; - const mappedModifiers = overWrittenModifiers[ modifier ]( isAppleOS ).map( - ( keycode ) => ( keycode === CTRL ? 'Control' : capitalCase( keycode ) ) - ); - - await this.page.keyboard.press( - `${ mappedModifiers.join( '+' ) }+${ key }` - ); -} diff --git a/packages/e2e-test-utils-playwright/src/page-utils/press-keys.ts b/packages/e2e-test-utils-playwright/src/page-utils/press-keys.ts new file mode 100644 index 00000000000000..2d93a184913bba --- /dev/null +++ b/packages/e2e-test-utils-playwright/src/page-utils/press-keys.ts @@ -0,0 +1,176 @@ +/** + * External dependencies + */ +import { capitalCase } from 'change-case'; +import type { Page } from '@playwright/test'; + +/** + * Internal dependencies + */ +import type { PageUtils } from './'; + +/** + * WordPress dependencies + */ +import { + modifiers as baseModifiers, + SHIFT, + ALT, + CTRL, +} from '@wordpress/keycodes'; + +let clipboardDataHolder: { + plainText: string; + html: string; +} = { + plainText: '', + html: '', +}; + +/** + * Sets the clipboard data that can be pasted with + * `pressKeys( 'primary+v' )`. + * + * @param this + * @param clipboardData + * @param clipboardData.plainText + * @param clipboardData.html + */ +export function setClipboardData( + this: PageUtils, + { plainText = '', html = '' }: typeof clipboardDataHolder +) { + clipboardDataHolder = { + plainText, + html, + }; +} + +async function emulateClipboard( page: Page, type: 'copy' | 'cut' | 'paste' ) { + clipboardDataHolder = await page.evaluate( + ( [ _type, _clipboardData ] ) => { + const clipboardDataTransfer = new DataTransfer(); + + if ( _type === 'paste' ) { + clipboardDataTransfer.setData( + 'text/plain', + _clipboardData.plainText + ); + clipboardDataTransfer.setData( + 'text/html', + _clipboardData.html + ); + } else { + const selection = window.getSelection()!; + const plainText = selection.toString(); + let html = plainText; + if ( selection.rangeCount ) { + const range = selection.getRangeAt( 0 ); + const fragment = range.cloneContents(); + html = Array.from( fragment.childNodes ) + .map( + ( node ) => + ( node as Element ).outerHTML ?? node.nodeValue + ) + .join( '' ); + } + clipboardDataTransfer.setData( 'text/plain', plainText ); + clipboardDataTransfer.setData( 'text/html', html ); + } + + document.activeElement?.dispatchEvent( + new ClipboardEvent( _type, { + bubbles: true, + cancelable: true, + clipboardData: clipboardDataTransfer, + } ) + ); + + return { + plainText: clipboardDataTransfer.getData( 'text/plain' ), + html: clipboardDataTransfer.getData( 'text/html' ), + }; + }, + [ type, clipboardDataHolder ] as const + ); +} + +const isAppleOS = () => process.platform === 'darwin'; + +const isWebkit = ( page: Page ) => + page.context().browser()!.browserType().name() === 'webkit'; + +const browserCache = new WeakMap(); +const getHasNaturalTabNavigation = async ( page: Page ) => { + if ( ! isAppleOS() || ! isWebkit( page ) ) { + return true; + } + if ( browserCache.has( page.context().browser()! ) ) { + return browserCache.get( page.context().browser()! ); + } + const testPage = await page.context().newPage(); + await testPage.setContent( `` ); + await testPage.getByText( '1' ).focus(); + await testPage.keyboard.press( 'Tab' ); + const featureDetected = await testPage + .getByText( '2' ) + .evaluate( ( node ) => node === document.activeElement ); + browserCache.set( page.context().browser()!, featureDetected ); + await testPage.close(); + return featureDetected; +}; + +type Options = { + times?: number; + delay?: number; +}; + +const modifiers = { + ...baseModifiers, + shiftAlt: ( _isApple: () => boolean ) => + _isApple() ? [ SHIFT, ALT ] : [ SHIFT, CTRL ], +}; + +export async function pressKeys( + this: PageUtils, + key: string, + { times, ...pressOptions }: Options = {} +) { + const hasNaturalTabNavigation = await getHasNaturalTabNavigation( + this.page + ); + + let command: () => Promise< void >; + + if ( key.toLowerCase() === 'primary+c' ) { + command = () => emulateClipboard( this.page, 'copy' ); + } else if ( key.toLowerCase() === 'primary+x' ) { + command = () => emulateClipboard( this.page, 'cut' ); + } else if ( key.toLowerCase() === 'primary+v' ) { + command = () => emulateClipboard( this.page, 'paste' ); + } else { + const keys = key.split( '+' ).flatMap( ( keyCode ) => { + if ( Object.prototype.hasOwnProperty.call( modifiers, keyCode ) ) { + return modifiers[ keyCode as keyof typeof modifiers ]( + isAppleOS + ).map( ( modifier ) => + modifier === CTRL ? 'Control' : capitalCase( modifier ) + ); + } else if ( keyCode === 'Tab' && ! hasNaturalTabNavigation ) { + return [ 'Alt', 'Tab' ]; + } + return keyCode; + } ); + const normalizedKeys = keys.join( '+' ); + command = () => this.page.keyboard.press( normalizedKeys ); + } + + times = times ?? 1; + for ( let i = 0; i < times; i += 1 ) { + await command(); + + if ( times > 1 && pressOptions.delay ) { + await this.page.waitForTimeout( pressOptions.delay ); + } + } +} diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js index 2362cc23ef6112..9d86e206f02193 100644 --- a/test/e2e/specs/editor/blocks/buttons.spec.js +++ b/test/e2e/specs/editor/blocks/buttons.spec.js @@ -50,7 +50,7 @@ test.describe( 'Buttons', () => { } ) => { // Regression: https://github.com/WordPress/gutenberg/pull/19885 await editor.insertBlock( { name: 'core/buttons' } ); - await pageUtils.pressKeyWithModifier( 'primary', 'k' ); + await pageUtils.pressKeys( 'primary+k' ); await expect( page.locator( 'role=combobox[name="URL"i]' ) ).toBeFocused(); @@ -78,7 +78,7 @@ test.describe( 'Buttons', () => { } ) => { // Regression: https://github.com/WordPress/gutenberg/issues/34307 await editor.insertBlock( { name: 'core/buttons' } ); - await pageUtils.pressKeyWithModifier( 'primary', 'k' ); + await pageUtils.pressKeys( 'primary+k' ); await expect( page.locator( 'role=combobox[name="URL"i]' ) ).toBeFocused(); @@ -107,7 +107,7 @@ test.describe( 'Buttons', () => { } ) => { // Regression: https://github.com/WordPress/gutenberg/issues/34307 await editor.insertBlock( { name: 'core/buttons' } ); - await pageUtils.pressKeyWithModifier( 'primary', 'k' ); + await pageUtils.pressKeys( 'primary+k' ); const urlInput = page.locator( 'role=combobox[name="URL"i]' ); @@ -116,7 +116,7 @@ test.describe( 'Buttons', () => { await page.keyboard.press( 'Enter' ); // Move to "Edit" and switch UI back to edit mode - await page.keyboard.press( 'Tab' ); + await pageUtils.pressKeys( 'Tab' ); await page.keyboard.press( 'Enter' ); // Check the value of the URL input has had http:// prepended. @@ -130,7 +130,7 @@ test.describe( 'Buttons', () => { } ) => { await editor.insertBlock( { name: 'core/buttons' } ); await page.keyboard.type( 'WordPress' ); - await pageUtils.pressKeyWithModifier( 'primary', 'k' ); + await pageUtils.pressKeys( 'primary+k' ); await page.keyboard.type( 'https://www.wordpress.org/' ); await page.keyboard.press( 'Enter' ); // Make sure that the dialog is still opened, and that focus is retained diff --git a/test/e2e/specs/editor/blocks/classic.spec.js b/test/e2e/specs/editor/blocks/classic.spec.js index 73691ac3da2996..559fbc93a1054a 100644 --- a/test/e2e/specs/editor/blocks/classic.spec.js +++ b/test/e2e/specs/editor/blocks/classic.spec.js @@ -32,7 +32,7 @@ test.describe( 'Classic', () => { await page.click( '.mce-content-body' ); await page.keyboard.type( 'test' ); // Move focus away. - await pageUtils.pressKeyWithModifier( 'shift', 'Tab' ); + await pageUtils.pressKeys( 'shift+Tab' ); await expect.poll( editor.getEditedPostContent ).toBe( 'test' ); } ); @@ -73,7 +73,7 @@ test.describe( 'Classic', () => { await createGallery.click(); await page.click( 'role=button[name="Insert gallery"i]' ); - await pageUtils.pressKeyWithModifier( 'shift', 'Tab' ); + await pageUtils.pressKeys( 'shift+Tab' ); await expect .poll( editor.getEditedPostContent ) .toMatch( /\[gallery ids=\"\d+\"\]/ ); @@ -89,7 +89,7 @@ test.describe( 'Classic', () => { await galleryBlock.focus(); // Check that you can undo back to a Classic block gallery in one step. - await pageUtils.pressKeyWithModifier( 'primary', 'z' ); + await pageUtils.pressKeys( 'primary+z' ); await expect( page.locator( 'role=document[name="Block: Classic"i]' ) ).toBeVisible(); @@ -119,7 +119,7 @@ test.describe( 'Classic', () => { await page.click( '.mce-content-body' ); await page.keyboard.type( 'test' ); // Move focus away. - await pageUtils.pressKeyWithModifier( 'shift', 'Tab' ); + await pageUtils.pressKeys( 'shift+Tab' ); await page.click( 'role=button[name="Save draft"i]' ); diff --git a/test/e2e/specs/editor/blocks/code.spec.js b/test/e2e/specs/editor/blocks/code.spec.js index 1fe91e3966f22b..80f41779b9131e 100644 --- a/test/e2e/specs/editor/blocks/code.spec.js +++ b/test/e2e/specs/editor/blocks/code.spec.js @@ -40,7 +40,7 @@ test.describe( 'Code', () => { // Test to see if HTML and white space is kept. pageUtils.setClipboardData( { plainText: '\n\t
' } ); - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'primary+v' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); diff --git a/test/e2e/specs/editor/blocks/gallery.spec.js b/test/e2e/specs/editor/blocks/gallery.spec.js index 68093535b30629..1a71d3e46e6dd4 100644 --- a/test/e2e/specs/editor/blocks/gallery.spec.js +++ b/test/e2e/specs/editor/blocks/gallery.spec.js @@ -52,7 +52,7 @@ test.describe( 'Gallery', () => { } ); await page.click( 'role=button[name="Add default block"i]' ); - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'primary+v' ); const img = page.locator( 'role=document[name="Block: Image"i] >> role=img' diff --git a/test/e2e/specs/editor/blocks/heading.spec.js b/test/e2e/specs/editor/blocks/heading.spec.js index 9d6e0db52f816a..e1b97d780f2929 100644 --- a/test/e2e/specs/editor/blocks/heading.spec.js +++ b/test/e2e/specs/editor/blocks/heading.spec.js @@ -196,9 +196,9 @@ test.describe( 'Heading', () => { await textAlignButton.click(); // Focus the block content - await page.keyboard.press( 'Tab' ); + await pageUtils.pressKeys( 'Tab' ); - await pageUtils.pressKeyWithModifier( 'access', '4' ); + await pageUtils.pressKeys( 'access+4' ); await expect.poll( editor.getBlocks ).toMatchObject( [ { name: 'core/heading', @@ -227,9 +227,9 @@ test.describe( 'Heading', () => { await textAlignButton.click(); // Focus the block content - await page.keyboard.press( 'Tab' ); + await pageUtils.pressKeys( 'Tab' ); - await pageUtils.pressKeyWithModifier( 'access', '2' ); + await pageUtils.pressKeys( 'access+2' ); await expect.poll( editor.getBlocks ).toMatchObject( [ { name: 'core/heading', @@ -259,9 +259,9 @@ test.describe( 'Heading', () => { await textAlignButton.click(); // Focus the block content - await page.keyboard.press( 'Tab' ); + await pageUtils.pressKeys( 'Tab' ); - await pageUtils.pressKeyWithModifier( 'access', '0' ); + await pageUtils.pressKeys( 'access+0' ); await expect.poll( editor.getBlocks ).toMatchObject( [ { diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index c5cee42cad16c5..3684980affb291 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -219,7 +219,7 @@ test.describe( 'Image', () => { // Add caption and navigate to inline toolbar. await editor.clickBlockToolbarButton( 'Add caption' ); - await pageUtils.pressKeyWithModifier( 'shift', 'Tab' ); + await pageUtils.pressKeys( 'shift+Tab' ); expect( await page.evaluate( () => document.activeElement.getAttribute( 'aria-label' ) @@ -327,12 +327,12 @@ test.describe( 'Image', () => { page.locator( 'role=slider[name="Zoom"i]' ) ).toBeFocused(); - await page.keyboard.press( 'Tab' ); + await pageUtils.pressKeys( 'Tab' ); await expect( page.locator( 'role=spinbutton[name="Zoom"i]' ) ).toBeFocused(); - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); + await pageUtils.pressKeys( 'primary+a' ); await page.keyboard.type( '200' ); await page.keyboard.press( 'Escape' ); await editor.clickBlockToolbarButton( 'Apply' ); @@ -530,7 +530,7 @@ test.describe( 'Image', () => { await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) ); await page.focus( '.wp-block-image' ); - await pageUtils.pressKeyWithModifier( 'primary', 'z' ); + await pageUtils.pressKeys( 'primary+z' ); // Expect an empty image block (placeholder) rather than one with a // broken temporary URL. diff --git a/test/e2e/specs/editor/blocks/list.spec.js b/test/e2e/specs/editor/blocks/list.spec.js index e0a6d62d3ccdd8..bdf366fd73f47b 100644 --- a/test/e2e/specs/editor/blocks/list.spec.js +++ b/test/e2e/specs/editor/blocks/list.spec.js @@ -40,7 +40,7 @@ test.describe( 'List (@firefox)', () => { // Create a list with the slash block shortcut. await page.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'test' ); - await pageUtils.pressKeyTimes( 'ArrowLeft', 4 ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 4 } ); await page.keyboard.type( '* ' ); await expect.poll( editor.getEditedPostContent ).toBe( ` @@ -75,7 +75,7 @@ test.describe( 'List (@firefox)', () => { } ) => { await page.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '1. ' ); - await pageUtils.pressKeyWithModifier( 'primary', 'z' ); + await pageUtils.pressKeys( 'primary+z' ); await expect.poll( editor.getEditedPostContent ).toBe( ` @@ -261,7 +261,7 @@ test.describe( 'List (@firefox)', () => { } ) => { await page.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'one' ); - await pageUtils.pressKeyWithModifier( 'shift', 'Enter' ); + await pageUtils.pressKeys( 'shift+Enter' ); await page.keyboard.type( 'two' ); await editor.transformBlockTo( 'core/list' ); @@ -285,7 +285,7 @@ test.describe( 'List (@firefox)', () => { } ) => { await page.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'one' ); - await pageUtils.pressKeyWithModifier( 'shift', 'Enter' ); + await pageUtils.pressKeys( 'shift+Enter' ); await page.keyboard.type( '...' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'two' ); @@ -336,7 +336,7 @@ test.describe( 'List (@firefox)', () => { await page.keyboard.press( 'Enter' ); await editor.clickBlockToolbarButton( 'Indent' ); await page.keyboard.type( 'two' ); - await pageUtils.pressKeyTimes( 'ArrowUp', 4 ); + await pageUtils.pressKeys( 'ArrowUp', { times: 4 } ); await editor.transformBlockTo( 'core/paragraph' ); await expect.poll( editor.getEditedPostContent ).toBe( @@ -396,7 +396,7 @@ test.describe( 'List (@firefox)', () => { ); await page.keyboard.type( 'two' ); - await pageUtils.pressKeyTimes( 'ArrowLeft', 'two'.length ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 'two'.length } ); await page.keyboard.press( 'Backspace' ); await expect.poll( editor.getEditedPostContent ).toBe( @@ -465,7 +465,7 @@ test.describe( 'List (@firefox)', () => { // Should merge lists into one. await page.keyboard.press( 'ArrowDown' ); - await pageUtils.pressKeyTimes( 'ArrowLeft', 'two'.length ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 'two'.length } ); await expect.poll( editor.getEditedPostContent ).toBe( ` @@ -759,7 +759,7 @@ test.describe( 'List (@firefox)', () => { ` ); - await pageUtils.pressKeyTimes( 'ArrowUp', 3 ); + await pageUtils.pressKeys( 'ArrowUp', { times: 3 } ); await editor.clickBlockToolbarButton( 'Outdent' ); await expect.poll( editor.getEditedPostContent ).toBe( @@ -786,7 +786,7 @@ test.describe( 'List (@firefox)', () => { } ) => { await editor.insertBlock( { name: 'core/list' } ); await page.keyboard.type( 'a' ); - await pageUtils.pressKeyWithModifier( 'shift', 'Enter' ); + await pageUtils.pressKeys( 'shift+Enter' ); await expect.poll( editor.getEditedPostContent ).toBe( ` @@ -809,7 +809,7 @@ test.describe( 'List (@firefox)', () => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'c' ); await page.keyboard.press( 'ArrowUp' ); - await pageUtils.pressKeyWithModifier( 'shift', 'Enter' ); + await pageUtils.pressKeys( 'shift+Enter' ); await expect.poll( editor.getEditedPostContent ).toBe( ` @@ -950,7 +950,7 @@ test.describe( 'List (@firefox)', () => { await page.keyboard.type( '* 1' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( ' a' ); - await pageUtils.pressKeyTimes( 'ArrowUp', 2 ); + await pageUtils.pressKeys( 'ArrowUp', { times: 2 } ); await page.keyboard.press( 'Enter' ); // The caret should land in the second item. await page.keyboard.type( '2' ); @@ -981,7 +981,7 @@ test.describe( 'List (@firefox)', () => { await page.keyboard.type( '* 1' ); await page.keyboard.press( 'Enter' ); - await pageUtils.pressKeyWithModifier( 'shift', 'Space' ); + await pageUtils.pressKeys( 'shift+Space' ); await expect.poll( editor.getEditedPostContent ).toBe( ` @@ -1166,17 +1166,17 @@ test.describe( 'List (@firefox)', () => { pageUtils, } ) => { // Open code editor - await pageUtils.pressKeyWithModifier( 'secondary', 'M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor + await pageUtils.pressKeys( 'secondary+M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor // Paste empty list block pageUtils.setClipboardData( { plainText: '\n\n', } ); - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'primary+v' ); // Go back to normal editor - await pageUtils.pressKeyWithModifier( 'secondary', 'M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor + await pageUtils.pressKeys( 'secondary+M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor // Verify no WSOD and content is proper. expect( await editor.getEditedPostContent() ).toBe( ` diff --git a/test/e2e/specs/editor/blocks/quote.spec.js b/test/e2e/specs/editor/blocks/quote.spec.js index 299d56785d831b..279af60fe20949 100644 --- a/test/e2e/specs/editor/blocks/quote.spec.js +++ b/test/e2e/specs/editor/blocks/quote.spec.js @@ -58,7 +58,7 @@ test.describe( 'Quote', () => { } ) => { await page.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'test' ); - await pageUtils.pressKeyTimes( 'ArrowLeft', 'test'.length ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 'test'.length } ); await page.keyboard.type( '> ' ); expect( await editor.getEditedPostContent() ).toBe( ` @@ -305,7 +305,7 @@ test.describe( 'Quote', () => { ` ); // Move the cursor to the start of the first paragraph of the quoted block. - await pageUtils.pressKeyTimes( 'ArrowLeft', 4 ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 4 } ); await page.keyboard.press( 'Backspace' ); expect( await editor.getEditedPostContent() ).toBe( ` diff --git a/test/e2e/specs/editor/plugins/deprecated-node-matcher.spec.js b/test/e2e/specs/editor/plugins/deprecated-node-matcher.spec.js index fd57954e9905da..1466781bbf59aa 100644 --- a/test/e2e/specs/editor/plugins/deprecated-node-matcher.spec.js +++ b/test/e2e/specs/editor/plugins/deprecated-node-matcher.spec.js @@ -49,7 +49,7 @@ test.describe( 'Deprecated Node Matcher', () => { await page.keyboard.down( 'Shift' ); await page.keyboard.press( 'ArrowLeft' ); await page.keyboard.up( 'Shift' ); - await pageUtils.pressKeyWithModifier( 'primary', 'b' ); + await pageUtils.pressKeys( 'primary+b' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); } ); diff --git a/test/e2e/specs/editor/plugins/format-api.spec.js b/test/e2e/specs/editor/plugins/format-api.spec.js index 1b1d3b3d4173ff..21e942ddc2199b 100644 --- a/test/e2e/specs/editor/plugins/format-api.spec.js +++ b/test/e2e/specs/editor/plugins/format-api.spec.js @@ -23,7 +23,7 @@ test.describe( 'Using Format API', () => { } ) => { await page.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'First paragraph' ); - await pageUtils.pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); + await pageUtils.pressKeys( 'shiftAlt+ArrowLeft' ); await editor.clickBlockToolbarButton( 'More' ); // Used a regex to tackle the  in name of menuitem.(Custom Link). diff --git a/test/e2e/specs/editor/plugins/post-type-templates.spec.js b/test/e2e/specs/editor/plugins/post-type-templates.spec.js index 3c5a664259f2d2..2caffdf52abe2e 100644 --- a/test/e2e/specs/editor/plugins/post-type-templates.spec.js +++ b/test/e2e/specs/editor/plugins/post-type-templates.spec.js @@ -69,7 +69,7 @@ test.describe( 'Post type templates', () => { 'My Empty Book' ); await page.keyboard.press( 'ArrowDown' ); - await pageUtils.pressKeyWithModifier( 'primary', 'A' ); + await pageUtils.pressKeys( 'primary+A' ); await page.keyboard.press( 'Backspace' ); await page.click( 'role=button[name="Save draft"i]' ); await expect( diff --git a/test/e2e/specs/editor/various/a11y.spec.js b/test/e2e/specs/editor/various/a11y.spec.js index b73ba5469c0d63..5725f216d1cf24 100644 --- a/test/e2e/specs/editor/various/a11y.spec.js +++ b/test/e2e/specs/editor/various/a11y.spec.js @@ -26,18 +26,18 @@ test.describe( 'a11y (@firefox, @webkit)', () => { page.locator( 'role=textbox[name=/Add title/i]' ) ).toBeFocused(); // Navigate to the 'Editor settings' region. - await pageUtils.pressKeyWithModifier( 'ctrl', '`' ); + await pageUtils.pressKeys( 'ctrl+`' ); // Navigate to the 'Editor publish' region. - await pageUtils.pressKeyWithModifier( 'ctrl', '`' ); + await pageUtils.pressKeys( 'ctrl+`' ); // Navigate to the 'Editor footer' region. - await pageUtils.pressKeyWithModifier( 'ctrl', '`' ); + await pageUtils.pressKeys( 'ctrl+`' ); // Navigate to the 'Editor top bar' region. - await pageUtils.pressKeyWithModifier( 'ctrl', '`' ); + await pageUtils.pressKeys( 'ctrl+`' ); // This test assumes the Editor is not in Fullscreen mode. Check the // first tabbable element within the 'Editor top bar' region is the // 'Toggle block inserter' button. - await page.keyboard.press( 'Tab' ); + await pageUtils.pressKeys( 'Tab' ); await expect( page.locator( 'role=button[name=/Toggle block inserter/i]' ) ).toBeFocused(); @@ -48,7 +48,7 @@ test.describe( 'a11y (@firefox, @webkit)', () => { pageUtils, } ) => { // Open keyboard shortcuts modal. - await pageUtils.pressKeyWithModifier( 'access', 'h' ); + await pageUtils.pressKeys( 'access+h' ); const modalContent = page.locator( 'role=dialog[name="Keyboard shortcuts"i] >> role=document' @@ -63,13 +63,13 @@ test.describe( 'a11y (@firefox, @webkit)', () => { await expect( closeButton ).not.toBeFocused(); // Open keyboard shortcuts modal. - await page.keyboard.press( 'Tab' ); + await pageUtils.pressKeys( 'Tab' ); await expect( modalContent ).toBeFocused(); - await page.keyboard.press( 'Tab' ); + await pageUtils.pressKeys( 'Tab' ); await expect( closeButton ).toBeFocused(); - await page.keyboard.press( 'Tab' ); + await pageUtils.pressKeys( 'Tab' ); await expect( modalContent ).toBeFocused(); } ); @@ -77,7 +77,7 @@ test.describe( 'a11y (@firefox, @webkit)', () => { page, pageUtils, } ) => { - await pageUtils.pressKeyWithModifier( 'access', 'h' ); + await pageUtils.pressKeys( 'access+h' ); // Click a non-focusable element after the last tabbable within the modal. const last = page @@ -85,7 +85,7 @@ test.describe( 'a11y (@firefox, @webkit)', () => { .last(); await last.click(); - await page.keyboard.press( 'Tab' ); + await pageUtils.pressKeys( 'Tab' ); await expect( page.locator( @@ -98,12 +98,12 @@ test.describe( 'a11y (@firefox, @webkit)', () => { page, pageUtils, } ) => { - await pageUtils.pressKeyWithModifier( 'access', 'h' ); + await pageUtils.pressKeys( 'access+h' ); // Click a non-focusable element before the first tabbable within the modal. await page.click( 'role=heading[name="Keyboard shortcuts"i]' ); - await pageUtils.pressKeyWithModifier( 'shift', 'Tab' ); + await pageUtils.pressKeys( 'shift+Tab' ); await expect( page.locator( @@ -114,6 +114,7 @@ test.describe( 'a11y (@firefox, @webkit)', () => { test( 'should make the modal content focusable when it is scrollable', async ( { page, + pageUtils, } ) => { // Open the top bar Options menu. await page.click( @@ -162,9 +163,9 @@ test.describe( 'a11y (@firefox, @webkit)', () => { // The General tab panel content is short and not scrollable. // Check it's not focusable. await clickAndFocusTab( generalTab ); - await page.keyboard.press( 'Shift+Tab' ); + await pageUtils.pressKeys( 'Shift+Tab' ); await expect( closeButton ).toBeFocused(); - await page.keyboard.press( 'Shift+Tab' ); + await pageUtils.pressKeys( 'Shift+Tab' ); await expect( preferencesModalContent ).not.toBeFocused(); // The Blocks tab panel content is long and scrollable. @@ -177,9 +178,9 @@ test.describe( 'a11y (@firefox, @webkit)', () => { 'tabindex', '0' ); - await page.keyboard.press( 'Shift+Tab' ); + await pageUtils.pressKeys( 'Shift+Tab' ); await expect( closeButton ).toBeFocused(); - await page.keyboard.press( 'Shift+Tab' ); + await pageUtils.pressKeys( 'Shift+Tab' ); await expect( preferencesModalContent ).toBeFocused(); // Make the Blocks tab panel content shorter by searching for a block @@ -191,17 +192,17 @@ test.describe( 'a11y (@firefox, @webkit)', () => { 'qwerty' ); await clickAndFocusTab( blocksTab ); - await page.keyboard.press( 'Shift+Tab' ); + await pageUtils.pressKeys( 'Shift+Tab' ); await expect( closeButton ).toBeFocused(); - await page.keyboard.press( 'Shift+Tab' ); + await pageUtils.pressKeys( 'Shift+Tab' ); await expect( preferencesModalContent ).not.toBeFocused(); // The Panels tab panel content is short and not scrollable. // Check it's not focusable. await clickAndFocusTab( panelsTab ); - await page.keyboard.press( 'Shift+Tab' ); + await pageUtils.pressKeys( 'Shift+Tab' ); await expect( closeButton ).toBeFocused(); - await page.keyboard.press( 'Shift+Tab' ); + await pageUtils.pressKeys( 'Shift+Tab' ); await expect( preferencesModalContent ).not.toBeFocused(); } ); } ); diff --git a/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js b/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js index 180ff719bb71e0..0176fb45982db8 100644 --- a/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js +++ b/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js @@ -152,7 +152,7 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => { 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'Stuck in the middle with you.' ); - await pageUtils.pressKeyTimes( 'ArrowLeft', 'you.'.length ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 'you.'.length } ); await page.keyboard.type( testData.triggerString ); await expect( page.locator( `role=option[name="${ testData.optionText }"i]` ) @@ -276,7 +276,7 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => { await expect( page.locator( `role=option[name="${ testData.optionText }"i]` ) ).toBeVisible(); - await pageUtils.pressKeyTimes( 'ArrowDown', 6 ); + await pageUtils.pressKeys( 'ArrowDown', { times: 6 } ); await page.keyboard.press( 'Enter' ); await expect @@ -462,9 +462,9 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => { } ) => { await editor.canvas.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '@' ); - await pageUtils.pressKeyWithModifier( 'primary', 'b' ); + await pageUtils.pressKeys( 'primary+b' ); await page.keyboard.type( 'f' ); - await pageUtils.pressKeyWithModifier( 'primary', 'b' ); + await pageUtils.pressKeys( 'primary+b' ); await page.keyboard.type( 'r' ); await expect( page.locator( 'role=option', { hasText: 'Frodo Baggins' } ) diff --git a/test/e2e/specs/editor/various/block-deletion.spec.js b/test/e2e/specs/editor/various/block-deletion.spec.js index 78c63bfc64aac0..6e8329222d4183 100644 --- a/test/e2e/specs/editor/various/block-deletion.spec.js +++ b/test/e2e/specs/editor/various/block-deletion.spec.js @@ -138,7 +138,7 @@ test.describe( 'Block deletion', () => { ).toBeFocused(); // Remove the current paragraph via dedicated keyboard shortcut. - await pageUtils.pressKeyWithModifier( 'access', 'z' ); + await pageUtils.pressKeys( 'access+z' ); // Ensure the last block was removed. await expect.poll( editor.getBlocks ).toMatchObject( [ @@ -274,7 +274,7 @@ test.describe( 'Block deletion', () => { ).toBeFocused(); // Select the last two paragraphs. - await pageUtils.pressKeyWithModifier( 'shift', 'ArrowUp' ); + await pageUtils.pressKeys( 'shift+ArrowUp' ); await expect .poll( () => page.evaluate( () => diff --git a/test/e2e/specs/editor/various/content-only-lock.spec.js b/test/e2e/specs/editor/various/content-only-lock.spec.js index 41626ed986b8f2..c215da33f3ec57 100644 --- a/test/e2e/specs/editor/various/content-only-lock.spec.js +++ b/test/e2e/specs/editor/various/content-only-lock.spec.js @@ -14,7 +14,7 @@ test.describe( 'Content-only lock', () => { pageUtils, } ) => { // Add content only locked block in the code editor - await pageUtils.pressKeyWithModifier( 'secondary', 'M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor + await pageUtils.pressKeys( 'secondary+M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor await page.click( '.editor-post-text-editor' ); await page.keyboard .type( ` @@ -22,7 +22,7 @@ test.describe( 'Content-only lock', () => {

Hello

` ); - await pageUtils.pressKeyWithModifier( 'secondary', 'M' ); + await pageUtils.pressKeys( 'secondary+M' ); await page.click( 'role=document[name="Paragraph block"i]' ); await page.keyboard.type( ' World' ); diff --git a/test/e2e/specs/editor/various/copy-cut-paste.spec.js b/test/e2e/specs/editor/various/copy-cut-paste.spec.js index 5936071147e847..cb040504de4c81 100644 --- a/test/e2e/specs/editor/various/copy-cut-paste.spec.js +++ b/test/e2e/specs/editor/various/copy-cut-paste.spec.js @@ -18,11 +18,11 @@ test.describe( 'Copy/cut/paste', () => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( '2' ); await page.keyboard.press( 'ArrowUp' ); - await pageUtils.pressKeyWithModifier( 'primary', 'c' ); + await pageUtils.pressKeys( 'primary+c' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); await page.keyboard.press( 'ArrowDown' ); - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'primary+v' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); @@ -36,12 +36,12 @@ test.describe( 'Copy/cut/paste', () => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( '2' ); await page.keyboard.press( 'ArrowUp' ); - await pageUtils.pressKeyWithModifier( 'primary', 'x' ); + await pageUtils.pressKeys( 'primary+x' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); - await page.keyboard.press( 'Tab' ); + await pageUtils.pressKeys( 'Tab' ); await page.keyboard.press( 'ArrowDown' ); - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'primary+v' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); @@ -52,7 +52,7 @@ test.describe( 'Copy/cut/paste', () => { } ) => { await editor.insertBlock( { name: 'core/spacer' } ); // At this point the spacer wrapper should be focused. - await pageUtils.pressKeyWithModifier( 'primary', 'c' ); + await pageUtils.pressKeys( 'primary+c' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); // The block appender is only visible when there's no selection. @@ -60,7 +60,7 @@ test.describe( 'Copy/cut/paste', () => { window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock(); } ); await page.click( 'role=button[name="Add default block"i]' ); - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'primary+v' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); @@ -71,7 +71,7 @@ test.describe( 'Copy/cut/paste', () => { } ) => { await editor.insertBlock( { name: 'core/spacer' } ); // At this point the spacer wrapper should be focused. - await pageUtils.pressKeyWithModifier( 'primary', 'x' ); + await pageUtils.pressKeys( 'primary+x' ); expect( await editor.getEditedPostContent() ).toBe( '' ); // The block appender is only visible when there's no selection. @@ -79,7 +79,7 @@ test.describe( 'Copy/cut/paste', () => { window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock(); } ); await page.click( 'role=button[name="Add default block"i]' ); - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'primary+v' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); @@ -94,15 +94,15 @@ test.describe( 'Copy/cut/paste', () => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'Second block' ); await page.keyboard.press( 'ArrowUp' ); - await pageUtils.pressKeyWithModifier( 'shift', 'ArrowLeft' ); - await pageUtils.pressKeyWithModifier( 'shift', 'ArrowLeft' ); + await pageUtils.pressKeys( 'shift+ArrowLeft' ); + await pageUtils.pressKeys( 'shift+ArrowLeft' ); - await pageUtils.pressKeyWithModifier( 'primary', 'c' ); + await pageUtils.pressKeys( 'primary+c' ); await page.keyboard.press( 'ArrowRight' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); await page.keyboard.press( 'Enter' ); - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'primary+v' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); @@ -113,17 +113,17 @@ test.describe( 'Copy/cut/paste', () => { } ) => { await editor.insertBlock( { name: 'core/shortcode' } ); await page.keyboard.type( '[my-shortcode]' ); - await pageUtils.pressKeyWithModifier( 'shift', 'ArrowLeft' ); - await pageUtils.pressKeyWithModifier( 'shift', 'ArrowLeft' ); + await pageUtils.pressKeys( 'shift+ArrowLeft' ); + await pageUtils.pressKeys( 'shift+ArrowLeft' ); - await pageUtils.pressKeyWithModifier( 'primary', 'c' ); + await pageUtils.pressKeys( 'primary+c' ); await page.keyboard.press( 'ArrowRight' ); await page.keyboard.press( 'ArrowRight' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); await editor.insertBlock( { name: 'core/paragraph' } ); await page.keyboard.type( 'Pasted: ' ); - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'primary+v' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); @@ -143,7 +143,7 @@ test.describe( 'Copy/cut/paste', () => { ], } ); // Cut group. - await pageUtils.pressKeyWithModifier( 'primary', 'x' ); + await pageUtils.pressKeys( 'primary+x' ); expect( await editor.getEditedPostContent() ).toBe( '' ); await page.keyboard.press( 'Enter' ); @@ -170,7 +170,7 @@ test.describe( 'Copy/cut/paste', () => { } ); // Paste. - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'primary+v' ); // Blocks should only be modified once, not twice with new clientIds on a single paste action. const blocksUpdated = await page.evaluate( @@ -197,7 +197,7 @@ test.describe( 'Copy/cut/paste', () => { ], } ); // Cut group. - await pageUtils.pressKeyWithModifier( 'primary', 'x' ); + await pageUtils.pressKeys( 'primary+x' ); expect( await editor.getEditedPostContent() ).toBe( '' ); // Insert a non textual element (a spacer) @@ -224,7 +224,7 @@ test.describe( 'Copy/cut/paste', () => { } ); } ); - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'primary+v' ); // Paste should be handled on non-textual elements and only handled once. const blocksUpdated = await page.evaluate( @@ -246,10 +246,10 @@ test.describe( 'Copy/cut/paste', () => { await page.keyboard.type( 'B block' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); // Partial select from both blocks. - await pageUtils.pressKeyTimes( 'ArrowLeft', 5 ); - await pageUtils.pressKeyWithModifier( 'shift', 'ArrowUp' ); - await pageUtils.pressKeyWithModifier( 'primary', 'c' ); - await pageUtils.pressKeyWithModifier( 'primary', 'ArrowLeft' ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 5 } ); + await pageUtils.pressKeys( 'shift+ArrowUp' ); + await pageUtils.pressKeys( 'primary+c' ); + await pageUtils.pressKeys( 'primary+ArrowLeft' ); // Sometimes the caret has not moved to the correct position before pressing Enter. // @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887 await page.waitForFunction( @@ -258,7 +258,7 @@ test.describe( 'Copy/cut/paste', () => { // Create a new block at the top of the document to paste there. await page.keyboard.press( 'Enter' ); await page.keyboard.press( 'ArrowUp' ); - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'primary+v' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); @@ -274,10 +274,10 @@ test.describe( 'Copy/cut/paste', () => { await page.keyboard.type( 'B block' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); // Partial select from outer blocks. - await pageUtils.pressKeyTimes( 'ArrowLeft', 5 ); - await pageUtils.pressKeyWithModifier( 'shift', 'ArrowUp' ); - await pageUtils.pressKeyWithModifier( 'primary', 'c' ); - await pageUtils.pressKeyWithModifier( 'primary', 'ArrowLeft' ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 5 } ); + await pageUtils.pressKeys( 'shift+ArrowUp' ); + await pageUtils.pressKeys( 'primary+c' ); + await pageUtils.pressKeys( 'primary+ArrowLeft' ); // Sometimes the caret has not moved to the correct position before pressing Enter. // @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887 await page.waitForFunction( @@ -286,7 +286,7 @@ test.describe( 'Copy/cut/paste', () => { // Create a new block at the top of the document to paste there. await page.keyboard.press( 'Enter' ); await page.keyboard.press( 'ArrowUp' ); - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'primary+v' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); @@ -301,10 +301,10 @@ test.describe( 'Copy/cut/paste', () => { await page.keyboard.type( 'B block' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); // Partial select from both blocks. - await pageUtils.pressKeyTimes( 'ArrowLeft', 5 ); - await pageUtils.pressKeyWithModifier( 'shift', 'ArrowUp' ); - await pageUtils.pressKeyWithModifier( 'primary', 'x' ); - await pageUtils.pressKeyWithModifier( 'primary', 'ArrowLeft' ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 5 } ); + await pageUtils.pressKeys( 'shift+ArrowUp' ); + await pageUtils.pressKeys( 'primary+x' ); + await pageUtils.pressKeys( 'primary+ArrowLeft' ); // Sometimes the caret has not moved to the correct position before pressing Enter. // @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887 await page.waitForFunction( @@ -313,7 +313,7 @@ test.describe( 'Copy/cut/paste', () => { // Create a new block at the top of the document to paste there. await page.keyboard.press( 'Enter' ); await page.keyboard.press( 'ArrowUp' ); - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'primary+v' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); @@ -329,10 +329,10 @@ test.describe( 'Copy/cut/paste', () => { await page.keyboard.type( 'B block' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); // Partial select from outer blocks. - await pageUtils.pressKeyTimes( 'ArrowLeft', 5 ); - await pageUtils.pressKeyWithModifier( 'shift', 'ArrowUp' ); - await pageUtils.pressKeyWithModifier( 'primary', 'x' ); - await pageUtils.pressKeyWithModifier( 'primary', 'ArrowLeft' ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 5 } ); + await pageUtils.pressKeys( 'shift+ArrowUp' ); + await pageUtils.pressKeys( 'primary+x' ); + await pageUtils.pressKeys( 'primary+ArrowLeft' ); // Sometimes the caret has not moved to the correct position before pressing Enter. // @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887 await page.waitForFunction( @@ -341,7 +341,7 @@ test.describe( 'Copy/cut/paste', () => { // Create a new block at the top of the document to paste there. await page.keyboard.press( 'Enter' ); await page.keyboard.press( 'ArrowUp' ); - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'primary+v' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); @@ -356,10 +356,10 @@ test.describe( 'Copy/cut/paste', () => { await page.keyboard.type( 'Paragraph' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); // Partial select from outer blocks. - await pageUtils.pressKeyTimes( 'ArrowLeft', 2 ); - await pageUtils.pressKeyWithModifier( 'shift', 'ArrowUp' ); - await pageUtils.pressKeyWithModifier( 'primary', 'x' ); - await pageUtils.pressKeyWithModifier( 'primary', 'ArrowLeft' ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 2 } ); + await pageUtils.pressKeys( 'shift+ArrowUp' ); + await pageUtils.pressKeys( 'primary+x' ); + await pageUtils.pressKeys( 'primary+ArrowLeft' ); // Sometimes the caret has not moved to the correct position before pressing Enter. // @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887 await page.waitForFunction( @@ -368,7 +368,7 @@ test.describe( 'Copy/cut/paste', () => { // Create a new block at the top of the document to paste there. await page.keyboard.press( 'Enter' ); await page.keyboard.press( 'ArrowUp' ); - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'primary+v' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); @@ -383,10 +383,10 @@ test.describe( 'Copy/cut/paste', () => { await page.keyboard.type( 'Paragraph' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); // Partial select from outer blocks. - await pageUtils.pressKeyTimes( 'ArrowLeft', 2 ); - await pageUtils.pressKeyWithModifier( 'shift', 'ArrowUp' ); - await pageUtils.pressKeyWithModifier( 'primary', 'c' ); - await pageUtils.pressKeyWithModifier( 'primary', 'ArrowLeft' ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 2 } ); + await pageUtils.pressKeys( 'shift+ArrowUp' ); + await pageUtils.pressKeys( 'primary+c' ); + await pageUtils.pressKeys( 'primary+ArrowLeft' ); // Sometimes the caret has not moved to the correct position before pressing Enter. // @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887 await page.waitForFunction( @@ -394,7 +394,7 @@ test.describe( 'Copy/cut/paste', () => { ); // Create a new code block to paste there. await editor.insertBlock( { name: 'core/code' } ); - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'primary+v' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); @@ -410,7 +410,7 @@ test.describe( 'Copy/cut/paste', () => { pageUtils.setClipboardData( { html: 'Hello World', } ); - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'primary+v' ); // Expect the span to be filtered out. expect( await page.evaluate( () => document.activeElement.innerHTML ) @@ -426,7 +426,7 @@ test.describe( 'Copy/cut/paste', () => { pageUtils.setClipboardData( { html: 'x', } ); - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'primary+v' ); // Ensure the selection is correct. await page.keyboard.type( 'y' ); expect( @@ -443,7 +443,7 @@ test.describe( 'Copy/cut/paste', () => { html: '
x
', } ); await editor.insertBlock( { name: 'core/list' } ); - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'primary+v' ); // Ensure the selection is correct. await page.keyboard.type( 'y' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); diff --git a/test/e2e/specs/editor/various/duplicating-blocks.spec.js b/test/e2e/specs/editor/various/duplicating-blocks.spec.js index 1878db2013dc44..aed4fae223894c 100644 --- a/test/e2e/specs/editor/various/duplicating-blocks.spec.js +++ b/test/e2e/specs/editor/various/duplicating-blocks.spec.js @@ -19,7 +19,7 @@ test.describe( 'Duplicating blocks', () => { // Select the test we just typed // This doesn't do anything but we previously had a duplicationi bug // When the selection was not collapsed. - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); + await pageUtils.pressKeys( 'primary+a' ); await editor.clickBlockToolbarButton( 'Options' ); await page.click( 'role=menuitem[name=/Duplicate/i]' ); @@ -46,10 +46,10 @@ test.describe( 'Duplicating blocks', () => { // Select the test we just typed // This doesn't do anything but we previously had a duplicationi bug // When the selection was not collapsed. - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); + await pageUtils.pressKeys( 'primary+a' ); // Duplicate using the keyboard shortccut. - await pageUtils.pressKeyWithModifier( 'primaryShift', 'd' ); + await pageUtils.pressKeys( 'primaryShift+d' ); expect( await editor.getEditedPostContent() ).toBe( ` diff --git a/test/e2e/specs/editor/various/font-size-picker.spec.js b/test/e2e/specs/editor/various/font-size-picker.spec.js index df16108afcf180..e63a5984443bca 100644 --- a/test/e2e/specs/editor/various/font-size-picker.spec.js +++ b/test/e2e/specs/editor/various/font-size-picker.spec.js @@ -58,7 +58,7 @@ test.describe( 'Font Size Picker', () => {

Paragraph reset - custom size

` ); - await pageUtils.pressKeyTimes( 'Backspace', 2 ); + await pageUtils.pressKeys( 'Backspace', { times: 2 } ); await expect.poll( editor.getEditedPostContent ) .toBe( `

Paragraph reset - custom size

@@ -140,7 +140,7 @@ test.describe( 'Font Size Picker', () => { await page.click( 'role=group[name="Font size"i] >> role=button[name="Font size"i]' ); - await pageUtils.pressKeyTimes( 'ArrowDown', 4 ); + await pageUtils.pressKeys( 'ArrowDown', { times: 4 } ); await page.keyboard.press( 'Enter' ); await expect.poll( editor.getEditedPostContent ) @@ -162,7 +162,7 @@ test.describe( 'Font Size Picker', () => { await page.click( 'role=group[name="Font size"i] >> role=button[name="Font size"i]' ); - await pageUtils.pressKeyTimes( 'ArrowDown', 3 ); + await pageUtils.pressKeys( 'ArrowDown', { times: 3 } ); await page.keyboard.press( 'Enter' ); await expect.poll( editor.getEditedPostContent ) @@ -193,7 +193,7 @@ test.describe( 'Font Size Picker', () => { await page.click( 'role=group[name="Font size"i] >> role=button[name="Font size"i]' ); - await pageUtils.pressKeyTimes( 'ArrowDown', 2 ); + await pageUtils.pressKeys( 'ArrowDown', { times: 2 } ); await page.keyboard.press( 'Enter' ); await expect.poll( editor.getEditedPostContent ) @@ -205,7 +205,7 @@ test.describe( 'Font Size Picker', () => { 'role=region[name="Editor settings"i] >> role=button[name="Set custom size"i]' ); await page.click( 'role=spinbutton[name="Custom"i]' ); - await pageUtils.pressKeyWithModifier( 'primary', 'A' ); + await pageUtils.pressKeys( 'primary+A' ); await page.keyboard.press( 'Backspace' ); await expect.poll( editor.getEditedPostContent ) @@ -284,7 +284,7 @@ test.describe( 'Font Size Picker', () => { 'role=region[name="Editor settings"i] >> role=button[name="Set custom size"i]' ); await page.click( 'role=spinbutton[name="Custom"i]' ); - await pageUtils.pressKeyWithModifier( 'primary', 'A' ); + await pageUtils.pressKeys( 'primary+A' ); await page.keyboard.press( 'Backspace' ); await expect.poll( editor.getEditedPostContent ) diff --git a/test/e2e/specs/editor/various/list-view.spec.js b/test/e2e/specs/editor/various/list-view.spec.js index 46e86709c41313..906159c944d1e7 100644 --- a/test/e2e/specs/editor/various/list-view.spec.js +++ b/test/e2e/specs/editor/various/list-view.spec.js @@ -19,7 +19,7 @@ test.describe( 'List View', () => { await editor.insertBlock( { name: 'core/paragraph' } ); // Open List View. - await pageUtils.pressKeyWithModifier( 'access', 'o' ); + await pageUtils.pressKeys( 'access+o' ); const listView = page.getByRole( 'treegrid', { name: 'Block navigation structure', } ); @@ -72,7 +72,7 @@ test.describe( 'List View', () => { await editor.insertBlock( { name: 'core/paragraph' } ); // Open List View. - await pageUtils.pressKeyWithModifier( 'access', 'o' ); + await pageUtils.pressKeys( 'access+o' ); const listView = page.getByRole( 'treegrid', { name: 'Block navigation structure', } ); @@ -86,7 +86,7 @@ test.describe( 'List View', () => { ).toBeVisible(); // Go to the image block in List View. - await pageUtils.pressKeyTimes( 'ArrowUp', 2 ); + await pageUtils.pressKeys( 'ArrowUp', { times: 2 } ); await expect( listView .getByRole( 'gridcell', { @@ -127,7 +127,7 @@ test.describe( 'List View', () => { await editor.insertBlock( { name: 'core/paragraph' } ); // Open List View. - await pageUtils.pressKeyWithModifier( 'access', 'o' ); + await pageUtils.pressKeys( 'access+o' ); const listView = page.getByRole( 'treegrid', { name: 'Block navigation structure', } ); @@ -168,7 +168,7 @@ test.describe( 'List View', () => { await editor.insertBlock( { name: 'core/paragraph' } ); // Open List View. - await pageUtils.pressKeyWithModifier( 'access', 'o' ); + await pageUtils.pressKeys( 'access+o' ); const listView = page.getByRole( 'treegrid', { name: 'Block navigation structure', } ); @@ -182,7 +182,7 @@ test.describe( 'List View', () => { ).toBeVisible(); // Select the image block in List View. - await pageUtils.pressKeyTimes( 'ArrowUp', 2 ); + await pageUtils.pressKeys( 'ArrowUp', { times: 2 } ); await expect( listView .getByRole( 'gridcell', { @@ -221,7 +221,7 @@ test.describe( 'List View', () => { await editor.insertBlock( { name: 'core/heading' } ); // Open List View. - await pageUtils.pressKeyWithModifier( 'access', 'o' ); + await pageUtils.pressKeys( 'access+o' ); const listView = page.getByRole( 'treegrid', { name: 'Block navigation structure', } ); @@ -235,7 +235,7 @@ test.describe( 'List View', () => { ).toBeVisible(); // Select the Image block as well. - await pageUtils.pressKeyWithModifier( 'shift', 'ArrowUp' ); + await pageUtils.pressKeys( 'shift+ArrowUp' ); await expect( listView.getByRole( 'gridcell', { name: 'Image link', @@ -271,7 +271,7 @@ test.describe( 'List View', () => { .click(); // Open List View. - await pageUtils.pressKeyWithModifier( 'access', 'o' ); + await pageUtils.pressKeys( 'access+o' ); const listView = page.getByRole( 'treegrid', { name: 'Block navigation structure', } ); @@ -341,7 +341,7 @@ test.describe( 'List View', () => { await editor.insertBlock( { name: 'core/group' } ); // Open List View. - await pageUtils.pressKeyWithModifier( 'access', 'o' ); + await pageUtils.pressKeys( 'access+o' ); const listView = page.getByRole( 'treegrid', { name: 'Block navigation structure', } ); @@ -409,7 +409,7 @@ test.describe( 'List View', () => { ).toBeFocused(); // Open List View. - await pageUtils.pressKeyWithModifier( 'access', 'o' ); + await pageUtils.pressKeys( 'access+o' ); const listView = page.getByRole( 'treegrid', { name: 'Block navigation structure', } ); @@ -445,12 +445,12 @@ test.describe( 'List View', () => { // Since focus is now at the image block upload button in the canvas, // pressing the list view shortcut should bring focus back to the image // block in the list view. - await pageUtils.pressKeyWithModifier( 'access', 'o' ); + await pageUtils.pressKeys( 'access+o' ); await expect( imageItem ).toBeFocused(); // Since focus is now inside the list view, the shortcut should close // the sidebar. - await pageUtils.pressKeyWithModifier( 'access', 'o' ); + await pageUtils.pressKeys( 'access+o' ); // Focus should now be on the paragraph block since that is // where we opened the list view sidebar. This is not a perfect @@ -464,15 +464,15 @@ test.describe( 'List View', () => { await expect( listView ).not.toBeVisible(); // Open List View. - await pageUtils.pressKeyWithModifier( 'access', 'o' ); + await pageUtils.pressKeys( 'access+o' ); // Focus the list view close button and make sure the shortcut will // close the list view. This is to catch a bug where elements could be // out of range of the sidebar region. Must shift+tab 3 times to reach // close button before tabs. - await pageUtils.pressKeyWithModifier( 'shift', 'Tab' ); - await pageUtils.pressKeyWithModifier( 'shift', 'Tab' ); - await pageUtils.pressKeyWithModifier( 'shift', 'Tab' ); + await pageUtils.pressKeys( 'shift+Tab' ); + await pageUtils.pressKeys( 'shift+Tab' ); + await pageUtils.pressKeys( 'shift+Tab' ); await expect( editor.canvas.getByRole( 'button', { name: 'Close Document Overview Sidebar', @@ -480,15 +480,15 @@ test.describe( 'List View', () => { ).toBeFocused(); // Close List View and ensure it's closed. - await pageUtils.pressKeyWithModifier( 'access', 'o' ); + await pageUtils.pressKeys( 'access+o' ); await expect( listView ).not.toBeVisible(); // Open List View. - await pageUtils.pressKeyWithModifier( 'access', 'o' ); + await pageUtils.pressKeys( 'access+o' ); // Focus the outline tab and select it. This test ensures the outline // tab receives similar focus events based on the shortcut. - await pageUtils.pressKeyWithModifier( 'shift', 'Tab' ); + await pageUtils.pressKeys( 'shift+Tab' ); const outlineButton = editor.canvas.getByRole( 'button', { name: 'Outline', } ); @@ -497,14 +497,14 @@ test.describe( 'List View', () => { // From here, tab in to the editor so focus can be checked on return to // the outline tab in the sidebar. - await pageUtils.pressKeyTimes( 'Tab', 2 ); + await pageUtils.pressKeys( 'Tab', { times: 2 } ); // Focus should be placed on the outline tab button since there is // nothing to focus inside the tab itself. - await pageUtils.pressKeyWithModifier( 'access', 'o' ); + await pageUtils.pressKeys( 'access+o' ); await expect( outlineButton ).toBeFocused(); // Close List View and ensure it's closed. - await pageUtils.pressKeyWithModifier( 'access', 'o' ); + await pageUtils.pressKeys( 'access+o' ); await expect( listView ).not.toBeVisible(); } ); @@ -519,7 +519,7 @@ test.describe( 'List View', () => { await editor.insertBlock( { name: 'core/paragraph' } ); // Open List View. - await pageUtils.pressKeyWithModifier( 'access', 'o' ); + await pageUtils.pressKeys( 'access+o' ); const listView = page.getByRole( 'treegrid', { name: 'Block navigation structure', } ); @@ -533,7 +533,7 @@ test.describe( 'List View', () => { ).toBeVisible(); // Go to the image block in List View. - await pageUtils.pressKeyTimes( 'ArrowUp', 2 ); + await pageUtils.pressKeys( 'ArrowUp', { times: 2 } ); await expect( listView .getByRole( 'gridcell', { @@ -552,7 +552,7 @@ test.describe( 'List View', () => { ).toBeFocused(); // Triggering the List View shortcut should result in the image block gaining focus. - await pageUtils.pressKeyWithModifier( 'access', 'o' ); + await pageUtils.pressKeys( 'access+o' ); await expect( listView .getByRole( 'gridcell', { diff --git a/test/e2e/specs/editor/various/mentions.spec.js b/test/e2e/specs/editor/various/mentions.spec.js index 878cf148e8abf5..b7e75e046c471a 100644 --- a/test/e2e/specs/editor/various/mentions.spec.js +++ b/test/e2e/specs/editor/various/mentions.spec.js @@ -44,7 +44,7 @@ test.describe( 'autocomplete mentions', () => { } ) => { await page.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( 'Stuck in the middle with you' ); - await pageUtils.pressKeyTimes( 'ArrowLeft', 'you'.length ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 'you'.length } ); await page.keyboard.type( '@j' ); await expect( page.locator( 'role=listbox >> role=option[name=/testuser/i]' ) diff --git a/test/e2e/specs/editor/various/multi-block-selection.spec.js b/test/e2e/specs/editor/various/multi-block-selection.spec.js index d651001c8f2640..3e03a0c2805620 100644 --- a/test/e2e/specs/editor/various/multi-block-selection.spec.js +++ b/test/e2e/specs/editor/various/multi-block-selection.spec.js @@ -35,8 +35,8 @@ test.describe( 'Multi-block selection', () => { } // Multiselect via keyboard. - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); + await pageUtils.pressKeys( 'primary+a' ); + await pageUtils.pressKeys( 'primary+a' ); await expect .poll( multiBlockSelectionUtils.getSelectedFlatIndices ) @@ -67,10 +67,10 @@ test.describe( 'Multi-block selection', () => { .getByRole( 'document', { name: 'Empty block' } ) .click(); // Move to the middle of the first line. - await pageUtils.pressKeyTimes( 'ArrowUp', 4 ); + await pageUtils.pressKeys( 'ArrowUp', { times: 4 } ); await page.keyboard.press( 'ArrowRight' ); // Select mid line one to mid line four. - await pageUtils.pressKeyTimes( 'Shift+ArrowDown', 3 ); + await pageUtils.pressKeys( 'Shift+ArrowDown', { times: 3 } ); // Delete the text to see if the selection was correct. await page.keyboard.press( 'Backspace' ); @@ -227,8 +227,8 @@ test.describe( 'Multi-block selection', () => { attributes: { content: `${ i }` }, } ); } - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); + await pageUtils.pressKeys( 'primary+a' ); + await pageUtils.pressKeys( 'primary+a' ); await expect .poll( multiBlockSelectionUtils.getSelectedFlatIndices ) @@ -308,7 +308,7 @@ test.describe( 'Multi-block selection', () => { await editor.canvas .getByRole( 'document', { name: 'Paragraph block' } ) .click( { modifiers: [ 'Shift' ] } ); - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); + await pageUtils.pressKeys( 'primary+a' ); await page.keyboard.type( 'new content' ); await expect.poll( editor.getBlocks ).toMatchObject( [ @@ -468,13 +468,13 @@ test.describe( 'Multi-block selection', () => { attributes: { content: '2' }, } ); - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); - await pageUtils.pressKeyWithModifier( 'primary', 'x' ); + await pageUtils.pressKeys( 'primary+a' ); + await pageUtils.pressKeys( 'primary+a' ); + await pageUtils.pressKeys( 'primary+x' ); await expect.poll( editor.getBlocks ).toEqual( [] ); - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'primary+v' ); await expect.poll( editor.getBlocks ).toMatchObject( [ { name: 'core/paragraph', attributes: { content: '1' } }, @@ -492,16 +492,16 @@ test.describe( 'Multi-block selection', () => { attributes: { content: 'second paragraph' }, } ); - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); - await pageUtils.pressKeyWithModifier( 'primary', 'c' ); + await pageUtils.pressKeys( 'primary+a' ); + await pageUtils.pressKeys( 'primary+a' ); + await pageUtils.pressKeys( 'primary+c' ); await page.keyboard.press( 'Backspace' ); await expect .poll( editor.getBlocks, 'should select all blocks after copying' ) .toEqual( [] ); - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'primary+v' ); await expect .poll( editor.getBlocks, 'should copy and paste multiple blocks' ) .toMatchObject( [ @@ -520,9 +520,9 @@ test.describe( 'Multi-block selection', () => { { attributes: { content: 'second paragraph|' } }, ] ); - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'primary+a' ); + await pageUtils.pressKeys( 'primary+a' ); + await pageUtils.pressKeys( 'primary+v' ); await page.keyboard.type( '|' ); await expect .poll( editor.getBlocks, 'should replace blocks' ) @@ -532,8 +532,8 @@ test.describe( 'Multi-block selection', () => { ] ); await page.keyboard.press( 'Backspace' ); - await pageUtils.pressKeyTimes( 'ArrowLeft', 3 ); - await pageUtils.pressKeyWithModifier( 'primary', 'v' ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 3 } ); + await pageUtils.pressKeys( 'primary+v' ); await page.keyboard.type( '|' ); await expect .poll( editor.getBlocks, 'should paste mid-block' ) @@ -689,8 +689,8 @@ test.describe( 'Multi-block selection', () => { attributes: { content: `${ i }` }, } ); } - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); + await pageUtils.pressKeys( 'primary+a' ); + await pageUtils.pressKeys( 'primary+a' ); await page .getByRole( 'toolbar', { name: 'Block tools' } ) @@ -720,8 +720,8 @@ test.describe( 'Multi-block selection', () => { .click(); await page.keyboard.type( '1' ); - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); + await pageUtils.pressKeys( 'primary+a' ); + await pageUtils.pressKeys( 'primary+a' ); await page.keyboard.press( 'Enter' ); await expect.poll( editor.getBlocks ).toMatchObject( [ @@ -761,8 +761,8 @@ test.describe( 'Multi-block selection', () => { .nth( 1 ) .click(); - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); + await pageUtils.pressKeys( 'primary+a' ); + await pageUtils.pressKeys( 'primary+a' ); await expect .poll( multiBlockSelectionUtils.getSelectedBlocks ) @@ -771,13 +771,13 @@ test.describe( 'Multi-block selection', () => { { name: 'core/paragraph' }, ] ); - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); + await pageUtils.pressKeys( 'primary+a' ); await expect .poll( multiBlockSelectionUtils.getSelectedBlocks ) .toMatchObject( [ { name: 'core/column' } ] ); - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); + await pageUtils.pressKeys( 'primary+a' ); await expect .poll( multiBlockSelectionUtils.getSelectedBlocks ) @@ -818,17 +818,17 @@ test.describe( 'Multi-block selection', () => { .getByRole( 'textbox' ) .click(); - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); + await pageUtils.pressKeys( 'primary+a' ); await expect .poll( multiBlockSelectionUtils.getSelectedBlocks ) .toMatchObject( [ { name: 'core/list-item' } ] ); - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); + await pageUtils.pressKeys( 'primary+a' ); await expect .poll( multiBlockSelectionUtils.getSelectedBlocks ) .toMatchObject( [ { name: 'core/list' } ] ); - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); + await pageUtils.pressKeys( 'primary+a' ); await expect .poll( multiBlockSelectionUtils.getSelectedBlocks ) .toMatchObject( [ @@ -858,7 +858,7 @@ test.describe( 'Multi-block selection', () => { .poll( multiBlockSelectionUtils.getSelectedBlocks ) .toEqual( [] ); - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); + await pageUtils.pressKeys( 'primary+a' ); await page.keyboard.press( 'Backspace' ); @@ -883,7 +883,7 @@ test.describe( 'Multi-block selection', () => { .getByRole( 'textbox', { name: 'Add title' } ) .type( 'Post title' ); - await pageUtils.pressKeyWithModifier( 'primary', 'a' ); + await pageUtils.pressKeys( 'primary+a' ); await expect .poll( multiBlockSelectionUtils.getSelectedBlocks ) @@ -958,7 +958,7 @@ test.describe( 'Multi-block selection', () => { navButtons.nth( 3 ).getByRole( 'link', { includeHidden: true } ) ).toBeFocused(); // Press Up twice to highlight the second block. - await pageUtils.pressKeyTimes( 'ArrowUp', 2 ); + await pageUtils.pressKeys( 'ArrowUp', { times: 2 } ); await page.keyboard.press( 'Shift+ArrowDown' ); await expect @@ -976,7 +976,7 @@ test.describe( 'Multi-block selection', () => { ) .toEqual( [ 2, 3, 4 ] ); - await pageUtils.pressKeyTimes( 'Shift+ArrowUp', 3 ); + await pageUtils.pressKeys( 'Shift+ArrowUp', { times: 3 } ); await expect .poll( multiBlockSelectionUtils.getSelectedFlatIndices, @@ -985,7 +985,7 @@ test.describe( 'Multi-block selection', () => { .toEqual( [ 1, 2 ] ); // Navigate to the bottom of the list of blocks. - await pageUtils.pressKeyTimes( 'ArrowDown', 3 ); + await pageUtils.pressKeys( 'ArrowDown', { times: 3 } ); // This tests that shift selecting blocks by keyboard that are not adjacent // to an existing selection resets the selection. @@ -1022,7 +1022,7 @@ test.describe( 'Multi-block selection', () => { await page.keyboard.press( 'ArrowLeft' ); // Select everything between []. - await pageUtils.pressKeyTimes( 'Shift+ArrowLeft', 5 ); + await pageUtils.pressKeys( 'Shift+ArrowLeft', { times: 5 } ); await page.keyboard.press( 'Delete' ); @@ -1049,7 +1049,7 @@ test.describe( 'Multi-block selection', () => { await page.keyboard.type( ']2' ); await page.keyboard.press( 'ArrowLeft' ); // Select everything between []. - await pageUtils.pressKeyTimes( 'Shift+ArrowLeft', 3 ); + await pageUtils.pressKeys( 'Shift+ArrowLeft', { times: 3 } ); // Ensure selection is in the correct place. await page.keyboard.type( '|' ); @@ -1084,7 +1084,7 @@ test.describe( 'Multi-block selection', () => { .click(); await page.keyboard.press( 'ArrowLeft' ); // Select everything between []. - await pageUtils.pressKeyTimes( 'Shift+ArrowLeft', 5 ); + await pageUtils.pressKeys( 'Shift+ArrowLeft', { times: 5 } ); await page.keyboard.press( 'Enter' ); @@ -1127,7 +1127,7 @@ test.describe( 'Multi-block selection', () => { .filter( { hasText: 'a' } ) .click(); - await pageUtils.pressKeyTimes( 'Shift+ArrowDown', 2 ); + await pageUtils.pressKeys( 'Shift+ArrowDown', { times: 2 } ); await page.keyboard.press( 'Backspace' ); // Ensure selection is in the correct place. diff --git a/test/e2e/specs/editor/various/rtl.spec.js b/test/e2e/specs/editor/various/rtl.spec.js index d06c0ec8a43894..899dfd3c87ddec 100644 --- a/test/e2e/specs/editor/various/rtl.spec.js +++ b/test/e2e/specs/editor/various/rtl.spec.js @@ -151,9 +151,9 @@ test.describe( 'RTL', () => { pageUtils, } ) => { await page.click( 'role=button[name="Add default block"i]' ); - await pageUtils.pressKeyWithModifier( 'primary', 'b' ); + await pageUtils.pressKeys( 'primary+b' ); await page.keyboard.type( ARABIC_ONE ); - await pageUtils.pressKeyWithModifier( 'primary', 'b' ); + await pageUtils.pressKeys( 'primary+b' ); await page.keyboard.type( ARABIC_TWO ); // Insert a character at each boundary position. diff --git a/test/e2e/specs/editor/various/splitting-merging.spec.js b/test/e2e/specs/editor/various/splitting-merging.spec.js index 510c1cb46cf3b3..fc6d09fcc3240c 100644 --- a/test/e2e/specs/editor/various/splitting-merging.spec.js +++ b/test/e2e/specs/editor/various/splitting-merging.spec.js @@ -23,7 +23,7 @@ test.describe( 'splitting and merging blocks', () => { // Move caret between 'First' and 'Second' and press Enter to split // paragraph blocks. - await pageUtils.pressKeyTimes( 'ArrowLeft', 6 ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 6 } ); await page.keyboard.press( 'Enter' ); // Assert that there are now two paragraph blocks with correct content. @@ -55,16 +55,16 @@ test.describe( 'splitting and merging blocks', () => { ` ); - await pageUtils.pressKeyTimes( 'Backspace', 7 ); // Delete "Between" + await pageUtils.pressKeys( 'Backspace', { times: 7 } ); // Delete "Between" // Edge case: Without ensuring that the editor still has focus when // restoring a bookmark, the caret may be inadvertently moved back to // an inline boundary after a split occurs. await page.keyboard.press( 'Home' ); await page.keyboard.down( 'Shift' ); - await pageUtils.pressKeyTimes( 'ArrowRight', 5 ); + await pageUtils.pressKeys( 'ArrowRight', { times: 5 } ); await page.keyboard.up( 'Shift' ); - await pageUtils.pressKeyWithModifier( 'primary', 'b' ); + await pageUtils.pressKeys( 'primary+b' ); // Collapse selection, still within inline boundary. await page.keyboard.press( 'ArrowRight' ); await page.keyboard.press( 'Enter' ); @@ -90,13 +90,13 @@ test.describe( 'splitting and merging blocks', () => { // Regression Test: Caret should reset to end of inline boundary when // backspacing to delete second paragraph. await editor.insertBlock( { name: 'core/paragraph' } ); - await pageUtils.pressKeyWithModifier( 'primary', 'b' ); + await pageUtils.pressKeys( 'primary+b' ); await page.keyboard.type( 'Foo' ); await page.keyboard.press( 'Enter' ); await page.keyboard.press( 'Backspace' ); // Replace contents of first paragraph with "Bar". - await pageUtils.pressKeyTimes( 'Backspace', 4 ); + await pageUtils.pressKeys( 'Backspace', { times: 4 } ); await page.keyboard.type( 'Bar' ); const content = await editor.getEditedPostContent(); @@ -161,7 +161,7 @@ test.describe( 'splitting and merging blocks', () => { // Select text. await page.keyboard.down( 'Shift' ); - await pageUtils.pressKeyTimes( 'ArrowLeft', 3 ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 3 } ); await page.keyboard.up( 'Shift' ); // Delete selection. @@ -194,9 +194,9 @@ test.describe( 'splitting and merging blocks', () => { // The regression appeared to only affect paragraphs created while // within an inline boundary. await page.keyboard.down( 'Shift' ); - await pageUtils.pressKeyTimes( 'ArrowLeft', 3 ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 3 } ); await page.keyboard.up( 'Shift' ); - await pageUtils.pressKeyWithModifier( 'primary', 'b' ); + await pageUtils.pressKeys( 'primary+b' ); await page.keyboard.press( 'ArrowRight' ); await page.keyboard.press( 'Enter' ); await page.keyboard.press( 'Enter' ); @@ -331,7 +331,7 @@ test.describe( 'splitting and merging blocks', () => { await page.keyboard.type( '12' ); await page.keyboard.press( 'ArrowLeft' ); await page.keyboard.press( 'Enter' ); - await pageUtils.pressKeyWithModifier( 'primary', 'z' ); + await pageUtils.pressKeys( 'primary+z' ); // Check the content. expect( await editor.getEditedPostContent() ).toMatchSnapshot(); @@ -345,7 +345,7 @@ test.describe( 'splitting and merging blocks', () => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( '1' ); await page.keyboard.press( 'Enter' ); - await pageUtils.pressKeyWithModifier( 'shift', 'Enter' ); + await pageUtils.pressKeys( 'shift+Enter' ); await page.keyboard.type( '2' ); await page.keyboard.press( 'ArrowLeft' ); await page.keyboard.press( 'Backspace' ); @@ -377,7 +377,7 @@ test.describe( 'splitting and merging blocks', () => { await page.keyboard.type( 'item 1' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'item 2' ); - await pageUtils.pressKeyTimes( 'ArrowUp', 3 ); + await pageUtils.pressKeys( 'ArrowUp', { times: 3 } ); await page.keyboard.press( 'Delete' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); @@ -398,7 +398,7 @@ test.describe( 'splitting and merging blocks', () => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'item 2' ); await page.keyboard.press( 'ArrowUp' ); - await pageUtils.pressKeyTimes( 'ArrowLeft', 6 ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 6 } ); await page.keyboard.press( 'Backspace' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); diff --git a/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js b/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js index 0feb50f1b92330..7026be84c72a3f 100644 --- a/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js +++ b/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js @@ -93,6 +93,7 @@ test.describe( 'Toolbar roving tabindex', () => { editor, page, ToolbarRovingTabindexUtils, + pageUtils, } ) => { await editor.insertBlock( { name: 'core/table' } ); await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation( @@ -103,7 +104,7 @@ test.describe( 'Toolbar roving tabindex', () => { await page.keyboard.press( 'Home' ); await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Table' ); await page.click( `role=button[name="Create Table"i]` ); - await page.keyboard.press( 'Tab' ); + await pageUtils.pressKeys( 'Tab' ); await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation( 'Body cell text', 'Table' @@ -144,8 +145,8 @@ test.describe( 'Toolbar roving tabindex', () => { await ToolbarRovingTabindexUtils.focusBlockToolbar(); await page.keyboard.press( 'ArrowRight' ); await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Move up' ); - await page.keyboard.press( 'Tab' ); - await pageUtils.pressKeyWithModifier( 'shift', 'Tab' ); + await pageUtils.pressKeys( 'Tab' ); + await pageUtils.pressKeys( 'shift+Tab' ); await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Move up' ); } ); @@ -154,7 +155,7 @@ test.describe( 'Toolbar roving tabindex', () => { pageUtils, ToolbarRovingTabindexUtils, } ) => { - await pageUtils.pressKeyWithModifier( 'alt', 'F10' ); + await pageUtils.pressKeys( 'alt+F10' ); await page.keyboard.press( 'ArrowRight' ); await page.keyboard.press( 'ArrowRight' ); await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Bold' ); @@ -168,7 +169,7 @@ class ToolbarRovingTabindexUtils { } async focusBlockToolbar() { - await this.pageUtils.pressKeyWithModifier( 'alt', 'F10' ); + await this.pageUtils.pressKeys( 'alt+F10' ); } async testBlockToolbarKeyboardNavigation( @@ -179,9 +180,9 @@ class ToolbarRovingTabindexUtils { await this.expectLabelToHaveFocus( currentBlockTitle ); await this.page.keyboard.press( 'ArrowRight' ); await this.expectLabelToHaveFocus( 'Move up' ); - await this.page.keyboard.press( 'Tab' ); + await this.pageUtils.pressKeys( 'Tab' ); await this.expectLabelToHaveFocus( currentBlockLabel ); - await this.pageUtils.pressKeyWithModifier( 'shift', 'Tab' ); + await this.pageUtils.pressKeys( 'shift+Tab' ); await this.expectLabelToHaveFocus( 'Move up' ); } @@ -208,7 +209,7 @@ class ToolbarRovingTabindexUtils { await this.expectLabelToHaveFocus( 'Block: Group' ); await this.page.keyboard.press( 'ArrowRight' ); await this.expectLabelToHaveFocus( currentBlockLabel ); - await this.pageUtils.pressKeyWithModifier( 'shift', 'Tab' ); + await this.pageUtils.pressKeys( 'shift+Tab' ); await this.expectLabelToHaveFocus( 'Select Group' ); await this.page.keyboard.press( 'ArrowRight' ); await this.expectLabelToHaveFocus( currentBlockTitle ); diff --git a/test/e2e/specs/editor/various/writing-flow.spec.js b/test/e2e/specs/editor/various/writing-flow.spec.js index 64f28c4f5a0931..80e3fb3b126827 100644 --- a/test/e2e/specs/editor/various/writing-flow.spec.js +++ b/test/e2e/specs/editor/various/writing-flow.spec.js @@ -122,13 +122,13 @@ test.describe( 'Writing Flow', () => { await page.keyboard.type( 'Third' ); // Navigate to second paragraph. - await pageUtils.pressKeyTimes( 'ArrowLeft', 6 ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 6 } ); // Bold second paragraph text. await page.keyboard.down( 'Shift' ); - await pageUtils.pressKeyTimes( 'ArrowLeft', 6 ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 6 } ); await page.keyboard.up( 'Shift' ); - await pageUtils.pressKeyWithModifier( 'primary', 'b' ); + await pageUtils.pressKeys( 'primary+b' ); // Arrow left from selected bold should collapse to before the inline // boundary. Arrow once more to traverse into first paragraph. @@ -138,18 +138,18 @@ test.describe( 'Writing Flow', () => { // Arrow right from end of first should traverse to second, *BEFORE* // the bolded text. Another press should move within inline boundary. - await pageUtils.pressKeyTimes( 'ArrowRight', 2 ); + await pageUtils.pressKeys( 'ArrowRight', { times: 2 } ); await page.keyboard.type( 'Inside' ); // Arrow left from end of beginning of inline boundary should move to // the outside of the inline boundary. - await pageUtils.pressKeyTimes( 'ArrowLeft', 6 ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 6 } ); await page.keyboard.press( 'ArrowLeft' ); // Separate for emphasis. await page.keyboard.type( 'Before' ); // Likewise, test at the end of the inline boundary for same effect. await page.keyboard.press( 'ArrowRight' ); // Move inside - await pageUtils.pressKeyTimes( 'ArrowRight', 12 ); + await pageUtils.pressKeys( 'ArrowRight', { times: 12 } ); await page.keyboard.type( 'Inside' ); await page.keyboard.press( 'ArrowRight' ); @@ -176,18 +176,18 @@ test.describe( 'Writing Flow', () => { pageUtils, } ) => { await page.keyboard.press( 'Enter' ); - await pageUtils.pressKeyWithModifier( 'primary', 'b' ); + await pageUtils.pressKeys( 'primary+b' ); await page.keyboard.type( '1 2' ); await page.keyboard.down( 'Shift' ); await page.keyboard.press( 'ArrowLeft' ); await page.keyboard.up( 'Shift' ); - await pageUtils.pressKeyWithModifier( 'primary', 'i' ); + await pageUtils.pressKeys( 'primary+i' ); await page.keyboard.press( 'ArrowLeft' ); await page.keyboard.press( 'ArrowLeft' ); await page.keyboard.down( 'Shift' ); await page.keyboard.press( 'ArrowLeft' ); await page.keyboard.up( 'Shift' ); - await pageUtils.pressKeyWithModifier( 'primary', 'i' ); + await pageUtils.pressKeys( 'primary+i' ); await page.keyboard.press( 'ArrowLeft' ); await expect.poll( editor.getEditedPostContent ) @@ -228,7 +228,7 @@ test.describe( 'Writing Flow', () => { } ) => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'a' ); - await pageUtils.pressKeyWithModifier( 'shift', 'Enter' ); + await pageUtils.pressKeys( 'shift+Enter' ); await expect.poll( editor.getEditedPostContent ) .toBe( `

a

@@ -242,7 +242,7 @@ test.describe( 'Writing Flow', () => { } ) => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'a' ); - await pageUtils.pressKeyWithModifier( 'shift', 'Enter' ); + await pageUtils.pressKeys( 'shift+Enter' ); await page.keyboard.type( 'b' ); await expect.poll( editor.getEditedPostContent ) .toBe( ` @@ -258,7 +258,7 @@ test.describe( 'Writing Flow', () => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'ab' ); await page.keyboard.press( 'ArrowLeft' ); - await pageUtils.pressKeyWithModifier( 'shift', 'Enter' ); + await pageUtils.pressKeys( 'shift+Enter' ); await expect.poll( editor.getEditedPostContent ) .toBe( `

a
b

@@ -273,7 +273,7 @@ test.describe( 'Writing Flow', () => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'a' ); await page.keyboard.press( 'ArrowLeft' ); - await pageUtils.pressKeyWithModifier( 'shift', 'Enter' ); + await pageUtils.pressKeys( 'shift+Enter' ); await expect.poll( editor.getEditedPostContent ) .toBe( `


a

@@ -286,7 +286,7 @@ test.describe( 'Writing Flow', () => { pageUtils, } ) => { await page.keyboard.press( 'Enter' ); - await pageUtils.pressKeyWithModifier( 'shift', 'Enter' ); + await pageUtils.pressKeys( 'shift+Enter' ); await expect.poll( editor.getEditedPostContent ) .toBe( `


@@ -327,7 +327,7 @@ test.describe( 'Writing Flow', () => { ).toHaveClass( /is-selected/ ); // Should remain in title upon modifier + ArrowDown: - await pageUtils.pressKeyWithModifier( 'primary', 'ArrowDown' ); + await pageUtils.pressKeys( 'primary+ArrowDown' ); await expect( page.locator( 'role=document[name="Block: Shortcode"i]' ) ).toHaveClass( /is-selected/ ); @@ -346,7 +346,7 @@ test.describe( 'Writing Flow', () => { } ) => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( '1 2 3' ); - await pageUtils.pressKeyTimes( 'ArrowLeft', ' 3'.length ); + await pageUtils.pressKeys( 'ArrowLeft', { times: ' 3'.length } ); await page.keyboard.press( 'Backspace' ); await expect.poll( editor.getEditedPostContent ) @@ -369,11 +369,10 @@ test.describe( 'Writing Flow', () => { } ) => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'alpha beta gamma' ); - await pageUtils.pressKeyTimes( 'ArrowLeft', ' gamma'.length ); + await pageUtils.pressKeys( 'ArrowLeft', { times: ' gamma'.length } ); - await pageUtils.pressKeyWithModifier( - process.platform === 'darwin' ? 'alt' : 'primary', - 'Backspace' + await pageUtils.pressKeys( + `${ process.platform === 'darwin' ? 'Alt' : 'primary' }+Backspace` ); await expect.poll( editor.getEditedPostContent ) @@ -396,9 +395,9 @@ test.describe( 'Writing Flow', () => { } ) => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'alpha beta gamma' ); - await pageUtils.pressKeyTimes( 'ArrowLeft', ' gamma'.length ); + await pageUtils.pressKeys( 'ArrowLeft', { times: ' gamma'.length } ); await page.keyboard.down( 'Shift' ); - await pageUtils.pressKeyTimes( 'ArrowLeft', 'beta'.length ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 'beta'.length } ); await page.keyboard.up( 'Shift' ); await page.keyboard.press( 'Backspace' ); @@ -422,7 +421,7 @@ test.describe( 'Writing Flow', () => { pageUtils, } ) => { await page.keyboard.press( 'Enter' ); - await pageUtils.pressKeyTimes( 'Enter', 10 ); + await pageUtils.pressKeys( 'Enter', { times: 10 } ); // Check that none of the paragraph blocks have
in them. expect( await editor.getEditedPostContent() ).toMatchSnapshot(); @@ -486,10 +485,10 @@ test.describe( 'Writing Flow', () => { await page.keyboard.type( '1' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( '><<' ); - await pageUtils.pressKeyWithModifier( 'shift', 'Enter' ); + await pageUtils.pressKeys( 'shift+Enter' ); await page.keyboard.type( '<<<' ); await page.keyboard.down( 'Shift' ); - await pageUtils.pressKeyTimes( 'ArrowLeft', '<<\n<<<'.length ); + await pageUtils.pressKeys( 'ArrowLeft', { times: '<<\n<<<'.length } ); await page.keyboard.up( 'Shift' ); await page.keyboard.press( 'Backspace' ); @@ -578,8 +577,8 @@ test.describe( 'Writing Flow', () => { await page.keyboard.type( '2' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( '3' ); - await pageUtils.pressKeyTimes( 'ArrowUp', 2 ); - await pageUtils.pressKeyTimes( 'Delete', 2 ); + await pageUtils.pressKeys( 'ArrowUp', { times: 2 } ); + await pageUtils.pressKeys( 'Delete', { times: 2 } ); await expect.poll( editor.getEditedPostContent ) .toBe( `

1

@@ -629,7 +628,7 @@ test.describe( 'Writing Flow', () => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( '1' ); await page.keyboard.press( 'Enter' ); - await pageUtils.pressKeyWithModifier( 'shift', 'Enter' ); + await pageUtils.pressKeys( 'shift+Enter' ); await page.keyboard.type( '2' ); await page.keyboard.press( 'ArrowUp' ); await page.keyboard.press( 'ArrowUp' ); @@ -675,10 +674,10 @@ test.describe( 'Writing Flow', () => { await page.keyboard.type( 'cd' ); // Selects part of the first list item, although invisible. - await pageUtils.pressKeyWithModifier( 'shift', 'ArrowUp' ); + await pageUtils.pressKeys( 'shift+ArrowUp' ); await page.evaluate( () => new Promise( window.requestIdleCallback ) ); // Extends selection into the first paragraph - await pageUtils.pressKeyWithModifier( 'shift', 'ArrowUp' ); + await pageUtils.pressKeys( 'shift+ArrowUp' ); await page.evaluate( () => new Promise( window.requestIdleCallback ) ); // Mixed selection, so all content will be removed. @@ -731,6 +730,7 @@ test.describe( 'Writing Flow', () => { test( 'should not have a dead zone above an aligned block', async ( { editor, page, + pageUtils, } ) => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( '1' ); @@ -745,7 +745,7 @@ test.describe( 'Writing Flow', () => { await wideButton.click(); // Focus the block content - await page.keyboard.press( 'Tab' ); + await pageUtils.pressKeys( 'Tab' ); // Select the previous block. await page.keyboard.press( 'ArrowUp' ); @@ -791,13 +791,14 @@ test.describe( 'Writing Flow', () => { test( 'should only consider the content as one tab stop', async ( { editor, page, + pageUtils, } ) => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( '/table' ); await page.keyboard.press( 'Enter' ); // Tab to the "Create table" button. - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Tab' ); + await pageUtils.pressKeys( 'Tab' ); + await pageUtils.pressKeys( 'Tab' ); // Create the table. await page.keyboard.press( 'Space' ); await expect( @@ -881,12 +882,12 @@ test.describe( 'Writing Flow', () => { await page.keyboard.type( 'second' ); // Multi select both paragraphs. - await pageUtils.pressKeyTimes( 'ArrowLeft', 2 ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 2 } ); await page.keyboard.down( 'Shift' ); - await pageUtils.pressKeyTimes( 'ArrowLeft', 2 ); + await pageUtils.pressKeys( 'ArrowLeft', { times: 2 } ); await page.keyboard.press( 'ArrowUp' ); await page.keyboard.up( 'Shift' ); - await pageUtils.pressKeyWithModifier( 'primary', 'b' ); + await pageUtils.pressKeys( 'primary+b' ); await expect.poll( editor.getEditedPostContent ) .toBe( ` @@ -989,7 +990,7 @@ test.describe( 'Writing Flow', () => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'b' ); await page.keyboard.press( 'ArrowLeft' ); - await pageUtils.pressKeyWithModifier( 'alt', 'ArrowUp' ); + await pageUtils.pressKeys( 'alt+ArrowUp' ); await page.keyboard.type( '.' ); // Expect the "." to be added at the start of the paragraph diff --git a/test/e2e/specs/site-editor/writing-flow.spec.js b/test/e2e/specs/site-editor/writing-flow.spec.js index 2f9a83b4874e5e..d9c63a1da1ddc5 100644 --- a/test/e2e/specs/site-editor/writing-flow.spec.js +++ b/test/e2e/specs/site-editor/writing-flow.spec.js @@ -33,7 +33,7 @@ test.describe( 'Site editor writing flow', () => { await editor.selectBlocks( siteTitleBlock ); // Shift tab to the toolbar. - await pageUtils.pressKeyWithModifier( 'shift', 'Tab' ); + await pageUtils.pressKeys( 'shift+Tab' ); const blockToolbarButton = page.locator( 'role=toolbar[name="Block tools"i] >> role=button[name="Site Title"i]' ); @@ -64,7 +64,7 @@ test.describe( 'Site editor writing flow', () => { await editor.selectBlocks( siteTaglineBlock ); // Tab to the inspector, tabbing three times to go past the two resize handles. - await pageUtils.pressKeyTimes( 'Tab', 3 ); + await pageUtils.pressKeys( 'Tab', { times: 3 } ); const inspectorTemplateTab = page.locator( 'role=region[name="Editor settings"i] >> role=button[name="Template"i]' ); diff --git a/test/e2e/specs/widgets/customizing-widgets.spec.js b/test/e2e/specs/widgets/customizing-widgets.spec.js index 01b6cf7e13ea70..9bf3dcb32b371b 100644 --- a/test/e2e/specs/widgets/customizing-widgets.spec.js +++ b/test/e2e/specs/widgets/customizing-widgets.spec.js @@ -342,6 +342,7 @@ test.describe( 'Widgets Customizer', () => { editor, page, widgetsCustomizerPage, + pageUtils, } ) => { await widgetsCustomizerPage.visitCustomizerPage(); await widgetsCustomizerPage.expandWidgetArea( 'Footer #1' ); @@ -368,7 +369,7 @@ test.describe( 'Widgets Customizer', () => { await titleInput.type( 'Hello Title' ); // Unfocus the current legacy widget. - await page.keyboard.press( 'Tab' ); + await pageUtils.pressKeys( 'Tab' ); const previewFrame = widgetsCustomizerPage.previewFrame; const legacyWidgetPreviewFrame = page.frameLocator( @@ -403,7 +404,7 @@ test.describe( 'Widgets Customizer', () => { await titleInput.type( 'Hello again!' ); // Unfocus the current legacy widget. - await page.keyboard.press( 'Tab' ); + await pageUtils.pressKeys( 'Tab' ); // Expect the preview in block to show when unfocusing the legacy widget block. await expect(