E2E tests: Introduce insertBlock() util (#7013)

Refactor some tests to use insertBlock() which correctly opens the
inserter, searches for a term, then selects the first result.

The utility method correctly waits for the inserter to appear which is
important since, if this is not done, intermittent test failures can
happen.

test/e2e/specs/adding-blocks.test.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import '../support/bootstrap';
-import { newPost, newDesktopBrowserPage } from '../support/utils';
+import { newPost, newDesktopBrowserPage, insertBlock } from '../support/utils';
 
 describe( 'adding blocks', () => {
 	beforeAll( async () => {
@@ -49,12 +49,7 @@ describe( 'adding blocks', () => {
 		await page.keyboard.type( 'Quote block' );
 
 		// Using the regular inserter
-		await page.click( '.edit-post-header [aria-label="Add block"]' );
-		await page.waitForSelector( '.editor-inserter__menu' );
-		await page.keyboard.type( 'code' );
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Enter' );
+		await insertBlock( 'code' );
 		await page.keyboard.type( 'Code block' );
 
 		// Unselect blocks to avoid conflicts with the inbetween inserter

test/e2e/specs/multi-block-selection.test.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import '../support/bootstrap';
-import { newPost, newDesktopBrowserPage, pressWithModifier } from '../support/utils';
+import { newPost, newDesktopBrowserPage, pressWithModifier, insertBlock } from '../support/utils';
 
 describe( 'Multi-block selection', () => {
 	beforeAll( async () => {
@@ -19,16 +19,8 @@ describe( 'Multi-block selection', () => {
 		// Creating test blocks
 		await page.click( '.editor-default-block-appender' );
 		await page.keyboard.type( 'First Paragraph' );
-		await page.click( '.edit-post-header [aria-label="Add block"]' );
-		await page.keyboard.type( 'Image' );
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Enter' );
-		await page.click( '.edit-post-header [aria-label="Add block"]' );
-		await page.keyboard.type( 'Quote' );
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Enter' );
+		await insertBlock( 'Image' );
+		await insertBlock( 'Quote' );
 		await page.keyboard.type( 'Quote Block' );
 
 		const blocks = [ firstBlockSelector, secondBlockSelector, thirdBlockSelector ];

test/e2e/specs/splitting-merging.test.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import '../support/bootstrap';
-import { newPost, newDesktopBrowserPage } from '../support/utils';
+import { newPost, newDesktopBrowserPage, insertBlock } from '../support/utils';
 
 describe( 'splitting and merging blocks', () => {
 	beforeAll( async () => {
@@ -12,11 +12,7 @@ describe( 'splitting and merging blocks', () => {
 
 	it( 'Should split and merge paragraph blocks using Enter and Backspace', async () => {
 		//Use regular inserter to add paragraph block and text
-		await page.click( '.edit-post-header [aria-label="Add block"]' );
-		await page.keyboard.type( 'paragraph' );
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Enter' );
+		await insertBlock( 'paragraph' );
 		await page.keyboard.type( 'FirstSecond' );
 
 		//Move caret between 'First' and 'Second' and press Enter to split paragraph blocks

test/e2e/support/utils.js

@@ -92,6 +92,23 @@ export async function getHTMLFromCodeEditor() {
 	return textEditorContent;
 }
 
+/**
+ * Opens the inserter, searches for the given term, then selects the first
+ * result that appears.
+ *
+ * @param {string} searchTerm The text to search the inserter for.
+ */
+export async function insertBlock( searchTerm ) {
+	await page.click( '.edit-post-header [aria-label="Add block"]' );
+	// Waiting here is necessary because sometimes the inserter takes more time to
+	// render than Puppeteer takes to complete the 'click' action
+	await page.waitForSelector( '.editor-inserter__menu' );
+	await page.keyboard.type( searchTerm );
+	await page.keyboard.press( 'Tab' );
+	await page.keyboard.press( 'Tab' );
+	await page.keyboard.press( 'Enter' );
+}
+
 /**
  * Performs a key press with modifier (Shift, Control, Meta, Mod), where "Mod"
  * is normalized to platform-specific modifier (Meta in MacOS, else Control).