Add e2e test util

packages/block-editor/src/components/placeholder/index.js

@@ -19,7 +19,10 @@ import EmbeddedAdminContext from '../embedded-admin-context';
  */
 export default function IsolatedPlaceholder( props ) {
 	return (
-		<EmbeddedAdminContext aria-label={ props.label }>
+		<EmbeddedAdminContext
+			aria-label={ props.label }
+			className="wp-block-editor-placeholder"
+		>
 			<Placeholder
 				{ ...props }
 				role="dialog"

packages/e2e-test-utils/README.md

@@ -107,6 +107,14 @@ _Parameters_
 
 -   _buttonLabel_ `string`: The label to search the button for.
 
+### clickPlaceholderButton
+
+Clicks a button in a placeholder based on the label text.
+
+_Parameters_
+
+-   _buttonText_ `string`: The text that appears on the button to click.
+
 ### closeGlobalBlockInserter
 
 Undocumented declaration.

packages/e2e-test-utils/src/click-placeholder-button.js

@@ -0,0 +1,32 @@
+/**
+ * Clicks a button in a placeholder based on the label text.
+ *
+ * @param {string} buttonText The text that appears on the button to click.
+ */
+export async function clickPlaceholderButton( buttonText ) {
+	const _button = await page.waitForFunction(
+		( text ) => {
+			const placeholders = document.querySelectorAll(
+				'.wp-block-editor-placeholder'
+			);
+
+			for ( const placeholder of placeholders ) {
+				const buttons = placeholder.shadowRoot.querySelectorAll(
+					'button,label'
+				);
+
+				for ( const button of buttons ) {
+					if (
+						button.textContent === text ||
+						button.getAttribute( 'aria-label' ) === text
+					) {
+						return button;
+					}
+				}
+			}
+		},
+		{},
+		buttonText
+	);
+	await _button.click();
+}

packages/e2e-test-utils/src/index.js

@@ -14,6 +14,7 @@ export { clickButton } from './click-button';
 export { clickMenuItem } from './click-menu-item';
 export { clickOnCloseModalButton } from './click-on-close-modal-button';
 export { clickOnMoreMenuItem } from './click-on-more-menu-item';
+export { clickPlaceholderButton } from './click-placeholder-button';
 export { createNewPost } from './create-new-post';
 export { createUser } from './create-user';
 export { createURL } from './create-url';

packages/e2e-tests/specs/editor/blocks/columns.test.js

@@ -7,6 +7,7 @@ import {
 	insertBlock,
 	openGlobalBlockInserter,
 	closeGlobalBlockInserter,
+	clickPlaceholderButton,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Columns', () => {
@@ -16,9 +17,8 @@ describe( 'Columns', () => {
 
 	it( 'restricts all blocks inside the columns block', async () => {
 		await insertBlock( 'Columns' );
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Space' );
 		await closeGlobalBlockInserter();
+		await clickPlaceholderButton( 'Two columns; equal split' );
 		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
 		const columnBlockMenuItem = (
 			await page.$x(

packages/e2e-tests/specs/editor/blocks/table.test.js

@@ -8,8 +8,11 @@ import {
 	getEditedPostContent,
 	insertBlock,
 	openDocumentSettingsSidebar,
+	clickPlaceholderButton,
 } from '@wordpress/e2e-test-utils';
 
+const createButtonLabel = 'Create Table';
+
 /**
  * Utility function for changing the selected cell alignment.
  *
@@ -20,40 +23,34 @@ async function changeCellAlignment( align ) {
 	await clickButton( `Align column ${ align.toLowerCase() }` );
 }
 
-async function createTable( columnCount, rowCount ) {
-	await insertBlock( 'Table' );
-
-	if ( columnCount ) {
-		await page.keyboard.press( 'Backspace' );
-		await page.keyboard.type( columnCount );
-	}
-
-	// Navigate to "Row count"
-	await page.keyboard.press( 'Tab' );
-
-	if ( rowCount ) await page.keyboard.type( rowCount );
-
-	// Navigate to "Create Table"
-	await page.keyboard.press( 'Tab' );
-
-	// Create the table.
-	await page.keyboard.press( 'Space' );
-}
-
 describe( 'Table', () => {
 	beforeEach( async () => {
 		await createNewPost();
 	} );
 
 	it( 'displays a form for choosing the row and column count of the table', async () => {
-		await createTable( '5', '10' );
+		await insertBlock( 'Table' );
+
+		await clickPlaceholderButton( 'Column count' );
+		await page.keyboard.press( 'Backspace' );
+		await page.keyboard.type( '5' );
+
+		await clickPlaceholderButton( 'Row count' );
+		await page.keyboard.press( 'Backspace' );
+		await page.keyboard.type( '10' );
+
+		// Create the table.
+		await clickPlaceholderButton( createButtonLabel );
 
 		// Expect the post content to have a correctly sized table.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
 	it( 'allows text to by typed into cells', async () => {
-		await createTable();
+		await insertBlock( 'Table' );
+
+		// Create the table.
+		await clickPlaceholderButton( createButtonLabel );
 
 		// Click the first cell and add some text.
 		await page.click( 'td' );
@@ -76,16 +73,26 @@ describe( 'Table', () => {
 	} );
 
 	it( 'allows header and footer rows to be switched on and off', async () => {
-		await createTable();
+		await insertBlock( 'Table' );
 		await openDocumentSettingsSidebar();
 
+		const headerSwitchSelector = "//label[text()='Header section']";
+		const footerSwitchSelector = "//label[text()='Footer section']";
+
+		// Expect the header and footer switches not to be present before the table has been created.
+		let headerSwitch = await page.$x( headerSwitchSelector );
+		let footerSwitch = await page.$x( footerSwitchSelector );
+		expect( headerSwitch ).toHaveLength( 0 );
+		expect( footerSwitch ).toHaveLength( 0 );
+
+		// Create the table.
+		await clickPlaceholderButton( createButtonLabel );
+
 		// Expect the header and footer switches to be present now that the table has been created.
-		const headerSwitch = await page.$x(
-			"//label[text()='Header section']"
-		);
-		const footerSwitch = await page.$x(
-			"//label[text()='Footer section']"
-		);
+		headerSwitch = await page.$x( headerSwitchSelector );
+		footerSwitch = await page.$x( footerSwitchSelector );
+		expect( headerSwitch ).toHaveLength( 1 );
+		expect( footerSwitch ).toHaveLength( 1 );
 
 		// Toggle on the switches and add some content.
 		await headerSwitch[ 0 ].click();
@@ -112,9 +119,12 @@ describe( 'Table', () => {
 	} );
 
 	it( 'allows adding and deleting columns across the table header, body and footer', async () => {
-		await createTable();
+		await insertBlock( 'Table' );
 		await openDocumentSettingsSidebar();
 
+		// Create the table.
+		await clickPlaceholderButton( createButtonLabel );
+
 		// Toggle on the switches and add some content.
 		const headerSwitch = await page.$x(
 			"//label[text()='Header section']"
@@ -145,7 +155,14 @@ describe( 'Table', () => {
 	} );
 
 	it( 'allows columns to be aligned', async () => {
-		await createTable( '4' );
+		await insertBlock( 'Table' );
+
+		await clickPlaceholderButton( 'Column count' );
+		await page.keyboard.press( 'Backspace' );
+		await page.keyboard.type( '4' );
+
+		// Create the table.
+		await clickPlaceholderButton( createButtonLabel );
 
 		// Click the first cell and add some text. Don't align.
 		const cells = await page.$$( 'td,th' );
@@ -173,9 +190,12 @@ describe( 'Table', () => {
 
 	// Testing for regressions of https://github.com/WordPress/gutenberg/issues/14904.
 	it( 'allows cells to be selected when the cell area outside of the RichText is clicked', async () => {
-		await createTable();
+		await insertBlock( 'Table' );
 		await openDocumentSettingsSidebar();
 
+		// Create the table.
+		await clickPlaceholderButton( createButtonLabel );
+
 		// Enable fixed width as it exascerbates the amount of empty space around the RichText.
 		const [ fixedWidthSwitch ] = await page.$x(
 			"//label[text()='Fixed width table cells']"
@@ -207,7 +227,10 @@ describe( 'Table', () => {
 	} );
 
 	it( 'allows a caption to be added', async () => {
-		await createTable();
+		await insertBlock( 'Table' );
+
+		// Create the table.
+		await clickPlaceholderButton( createButtonLabel );
 
 		// Click the first cell and add some text.
 		await page.click( '.wp-block-table figcaption' );
@@ -217,7 +240,10 @@ describe( 'Table', () => {
 	} );
 
 	it( 'up and down arrow navigation', async () => {
-		await createTable();
+		await insertBlock( 'Table' );
+
+		// Create the table.
+		await clickPlaceholderButton( createButtonLabel );
 
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.type( '1' );

packages/e2e-tests/specs/editor/plugins/block-variations.test.js

@@ -11,6 +11,7 @@ import {
 	openDocumentSettingsSidebar,
 	togglePreferencesOption,
 	toggleMoreMenu,
+	clickPlaceholderButton,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Block variations', () => {
@@ -85,14 +86,7 @@ describe( 'Block variations', () => {
 	} );
 	test( 'Pick the additional variation in the inserted Columns block', async () => {
 		await insertBlock( 'Columns' );
-
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Space' );
+		await clickPlaceholderButton( 'Four columns' );
 
 		expect(
 			await page.$$(

packages/e2e-tests/specs/editor/plugins/image-size.test.js

@@ -15,6 +15,7 @@ import {
 	deactivatePlugin,
 	insertBlock,
 	openDocumentSettingsSidebar,
+	clickPlaceholderButton,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'changing image size', () => {
@@ -29,10 +30,7 @@ describe( 'changing image size', () => {
 
 	it( 'should insert and change my image size', async () => {
 		await insertBlock( 'Image' );
-
-		// Tab to the Media Library option.
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Space' );
+		await clickPlaceholderButton( 'Media Library' );
 
 		// Wait for media modal to appear and upload image.
 		await page.waitForSelector( '.media-modal input[type=file]' );

packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js

@@ -8,6 +8,7 @@ import {
 	pressKeyTimes,
 	pressKeyWithModifier,
 	openDocumentSettingsSidebar,
+	clickPlaceholderButton,
 } from '@wordpress/e2e-test-utils';
 
 async function openListViewSidebar() {
@@ -37,8 +38,7 @@ describe( 'Navigating the block hierarchy', () => {
 
 	it( 'should navigate using the list view sidebar', async () => {
 		await insertBlock( 'Columns' );
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Space' );
+		await clickPlaceholderButton( 'Two columns; equal split' );
 
 		// Add a paragraph in the first column.
 		await page.keyboard.press( 'ArrowDown' ); // Navigate to inserter.
@@ -94,8 +94,7 @@ describe( 'Navigating the block hierarchy', () => {
 
 	it( 'should navigate block hierarchy using only the keyboard', async () => {
 		await insertBlock( 'Columns' );
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Space' );
+		await clickPlaceholderButton( 'Two columns; equal split' );
 
 		// Add a paragraph in the first column.
 		await page.keyboard.press( 'ArrowDown' ); // Navigate to inserter.
@@ -153,7 +152,6 @@ describe( 'Navigating the block hierarchy', () => {
 		// Create an image block too.
 		await page.keyboard.press( 'Enter' );
 		await insertBlock( 'Image' );
-		await page.keyboard.press( 'Escape' );
 
 		// Return to first block.
 		await openListViewSidebar();

packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js

@@ -7,6 +7,10 @@ import {
 	clickBlockToolbarButton,
 	insertBlock,
 } from '@wordpress/e2e-test-utils';
+/**
+ * Internal dependencies
+ */
+import { clickPlaceholderButton } from '../../../../e2e-test-utils/src';
 
 async function focusBlockToolbar() {
 	await pressKeyWithModifier( 'alt', 'F10' );
@@ -90,37 +94,18 @@ describe( 'Toolbar roving tabindex', () => {
 
 	it( 'ensures image block toolbar uses roving tabindex', async () => {
 		await insertBlock( 'Image' );
-		await page.keyboard.press( 'Escape' );
-		await page.keyboard.press( 'ArrowUp' );
 		await testBlockToolbarKeyboardNavigation( 'Block: Image', 'Image' );
 		await wrapCurrentBlockWithGroup( 'Image' );
 		await testGroupKeyboardNavigation( 'Block: Image', 'Image' );
 	} );
 
 	it( 'ensures table block toolbar uses roving tabindex', async () => {
 		await insertBlock( 'Table' );
-		await page.keyboard.press( 'Escape' );
-		await page.keyboard.press( 'ArrowUp' );
 		await testBlockToolbarKeyboardNavigation( 'Block: Table', 'Table' );
 		// Move focus to the first toolbar item
 		await page.keyboard.press( 'Home' );
 		await expectLabelToHaveFocus( 'Table' );
-
-		// Tab to editor content.
-		await page.keyboard.press( 'Tab' );
-
-		// Navigate into the placeholder.
-		await page.keyboard.press( 'ArrowDown' );
-		await page.keyboard.press( 'Space' );
-
-		// Navigate to "Create Table"
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
-
-		// Create the table.
-		await page.keyboard.press( 'Space' );
-
+		await clickPlaceholderButton( 'Create Table' );
 		await page.keyboard.press( 'Tab' );
 		await testBlockToolbarKeyboardNavigation( 'Body cell text', 'Table' );
 		await wrapCurrentBlockWithGroup( 'Table' );