Add clickBlockToolbarButton end to end test util (#14254)

This PR adds an end 2 end test util that allows clicking in a block toolbar button and refactors existing code to use it.

## How has this been tested?
We only need to verify that the end 2 end tests pass.

packages/e2e-test-utils/src/click-block-toolbar-button.js

@@ -0,0 +1,15 @@
+/**
+ * Clicks a block toolbar button.
+ *
+ * @param {string} buttonAriaLabel The aria label of the button to click.
+ */
+export async function clickBlockToolbarButton( buttonAriaLabel ) {
+	const BLOCK_TOOLBAR_SELECTOR = '.editor-block-toolbar';
+	const BUTTON_SELECTOR = `${ BLOCK_TOOLBAR_SELECTOR } button[aria-label="${ buttonAriaLabel }"]`;
+	if ( await page.$( BLOCK_TOOLBAR_SELECTOR ) === null ) {
+		// Press escape to show the block toolbar
+		await page.keyboard.press( 'Escape' );
+	}
+	await page.waitForSelector( BUTTON_SELECTOR );
+	await page.click( BUTTON_SELECTOR );
+}

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

@@ -2,6 +2,7 @@ export { activatePlugin } from './activate-plugin';
 export { arePrePublishChecksEnabled } from './are-pre-publish-checks-enabled';
 export { clearLocalStorage } from './clear-local-storage';
 export { clickBlockAppender } from './click-block-appender';
+export { clickBlockToolbarButton } from './click-block-toolbar-button';
 export { clickButton } from './click-button';
 export { clickOnCloseModalButton } from './click-on-close-modal-button';
 export { clickOnMoreMenuItem } from './click-on-more-menu-item';

packages/e2e-tests/specs/blocks/list.test.js

@@ -3,6 +3,7 @@
  */
 import {
 	clickBlockAppender,
+	clickBlockToolbarButton,
 	getEditedPostContent,
 	createNewPost,
 	pressKeyTimes,
@@ -124,11 +125,7 @@ describe( 'List', () => {
 		await insertBlock( 'List' );
 		await page.keyboard.type( 'one' );
 		await page.keyboard.press( 'Enter' );
-		// Pointer device is needed. Shift+Tab won't focus the toolbar.
-		// To do: fix so Shift+Tab works.
-		// Press escape to show the block toolbar
-		await page.keyboard.press( 'Escape' );
-		await page.click( 'button[aria-label="Indent list item"]' );
+		await clickBlockToolbarButton( 'Indent list item' );
 		await page.keyboard.type( 'two' );
 		await transformBlockTo( 'Paragraph' );
 
@@ -198,11 +195,7 @@ describe( 'List', () => {
 		await insertBlock( 'List' );
 		await page.keyboard.type( 'one' );
 		await page.keyboard.press( 'Enter' );
-		// Pointer device is needed. Shift+Tab won't focus the toolbar.
-		// To do: fix so Shift+Tab works.
-		// Press escape to show the block toolbar
-		await page.keyboard.press( 'Escape' );
-		await page.click( 'button[aria-label="Indent list item"]' );
+		await clickBlockToolbarButton( 'Indent list item' );
 		await page.keyboard.type( 'two' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'three' );
@@ -233,12 +226,7 @@ describe( 'List', () => {
 		await pressKeyWithModifier( 'primary', 'm' );
 		await page.keyboard.type( '1' );
 
-		// Pointer device is needed. Shift+Tab won't focus the toolbar.
-		// To do: fix so Shift+Tab works.
-		// Press escape to show the block toolbar
-		await page.keyboard.press( 'Escape' );
-
-		await page.click( 'button[aria-label="Convert to ordered list"]' );
+		await clickBlockToolbarButton( 'Convert to ordered list' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );

packages/e2e-tests/specs/invalid-block.test.js

@@ -4,6 +4,7 @@
 import {
 	createNewPost,
 	clickBlockAppender,
+	clickBlockToolbarButton,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'invalid blocks', () => {
@@ -16,10 +17,7 @@ describe( 'invalid blocks', () => {
 		await clickBlockAppender();
 		await page.keyboard.type( 'hello' );
 
-		// Press escape to show the block toolbar
-		await page.keyboard.press( 'Escape' );
-		// Click the 'more options'
-		await page.click( 'button[aria-label="More options"]' );
+		await clickBlockToolbarButton( 'More options' );
 
 		// Change to HTML mode and close the options
 		const changeModeButton = await page.waitForXPath( '//button[text()="Edit as HTML"]' );

packages/e2e-tests/specs/links.test.js

@@ -3,6 +3,7 @@
  */
 import {
 	clickBlockAppender,
+	clickBlockToolbarButton,
 	getEditedPostContent,
 	createNewPost,
 	pressKeyWithModifier,
@@ -219,10 +220,7 @@ describe( 'Links', () => {
 		await clickBlockAppender();
 		await page.keyboard.type( 'Text' );
 
-		// Press escape to show the block toolbar
-		await page.keyboard.press( 'Escape' );
-		await page.waitForSelector( 'button[aria-label="Link"]' );
-		await page.click( 'button[aria-label="Link"]' );
+		await clickBlockToolbarButton( 'Link' );
 
 		// Typing "left" should not close the dialog
 		await page.keyboard.press( 'ArrowLeft' );

packages/e2e-tests/specs/plugins/format-api.test.js

@@ -4,6 +4,7 @@
 import {
 	activatePlugin,
 	clickBlockAppender,
+	clickBlockToolbarButton,
 	createNewPost,
 	deactivatePlugin,
 	getEditedPostContent,
@@ -26,19 +27,15 @@ describe( 'Using Format API', () => {
 	it( 'Format toolbar is present in a paragraph block', async () => {
 		await clickBlockAppender();
 		await page.keyboard.type( 'First paragraph' );
-		// Press escape to show the block toolbar
-		await page.keyboard.press( 'Escape' );
-		expect( await page.$( '[aria-label="Custom Link"]' ) ).not.toBeNull();
+		await clickBlockToolbarButton( 'Custom Link' );
 	} );
 
 	it( 'Clicking the control wraps the selected text properly with HTML code', async () => {
 		await clickBlockAppender();
 		await page.keyboard.type( 'First paragraph' );
 		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
 		await pressKeyWithModifier( 'primary', 'A' );
-		// Press escape to show the block toolbar
-		await page.keyboard.press( 'Escape' );
-		await page.click( '[aria-label="Custom Link"]' );
+		await clickBlockToolbarButton( 'Custom Link' );
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 } );

packages/e2e-tests/specs/reusable-blocks.test.js

@@ -4,6 +4,7 @@
 import {
 	insertBlock,
 	createNewPost,
+	clickBlockToolbarButton,
 	pressKeyWithModifier,
 	searchForBlock,
 	getEditedPostContent,
@@ -34,12 +35,8 @@ describe( 'Reusable Blocks', () => {
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.type( 'Hello there!' );
 
-		// Press escape to show the block toolbar
-		await page.keyboard.press( 'Escape' );
+		await clickBlockToolbarButton( 'More options' );
 
-		// Convert block to a reusable block
-		await page.waitForSelector( 'button[aria-label="More options"]' );
-		await page.click( 'button[aria-label="More options"]' );
 		const convertButton = await page.waitForXPath( '//button[text()="Add to Reusable Blocks"]' );
 		await convertButton.click();
 
@@ -80,12 +77,8 @@ describe( 'Reusable Blocks', () => {
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.type( 'Hello there!' );
 
-		// Press escape to show the block toolbar
-		await page.keyboard.press( 'Escape' );
+		await clickBlockToolbarButton( 'More options' );
 
-		// Convert block to a reusable block
-		await page.waitForSelector( 'button[aria-label="More options"]' );
-		await page.click( 'button[aria-label="More options"]' );
 		const convertButton = await page.waitForXPath( '//button[text()="Add to Reusable Blocks"]' );
 		await convertButton.click();
 

packages/e2e-tests/specs/style-variation.test.js

@@ -1,7 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { createNewPost, insertBlock, getEditedPostContent } from '@wordpress/e2e-test-utils';
+import {
+	createNewPost,
+	clickBlockToolbarButton,
+	insertBlock,
+	getEditedPostContent,
+} from '@wordpress/e2e-test-utils';
 
 describe( 'adding blocks', () => {
 	beforeAll( async () => {
@@ -13,12 +18,8 @@ describe( 'adding blocks', () => {
 		await insertBlock( 'Quote' );
 		await page.keyboard.type( 'Quote content' );
 
-		// Press escape to show the block toolbar
-		await page.keyboard.press( 'Escape' );
+		await clickBlockToolbarButton( 'Change block type' );
 
-		// Use a different style variation
-		await page.waitForSelector( 'button[aria-label="Change block type"]' );
-		await page.click( 'button[aria-label="Change block type"]' );
 		const styleVariations = await page.$$( '.editor-block-styles__item' );
 		await styleVariations[ 1 ].click();