E2E Test Utils: Try improved stability for transformBlockTo (#18771)

* E2E Test Utils: Try improved stability for transformBlockTo

* E2E Test Utils: Use canonical `block-editor-` switcher classname

packages/e2e-test-utils/src/transform-block-to.js

@@ -1,21 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import { pressKeyWithModifier } from './press-key-with-modifier';
+
 /**
  * Converts editor's block type.
  *
  * @param {string} name Block name.
  */
 export async function transformBlockTo( name ) {
-	await page.mouse.move( 200, 300, { steps: 10 } );
-	await page.mouse.move( 250, 350, { steps: 10 } );
-	await page.click( '.block-editor-block-switcher__toggle' );
-	const insertButton = ( await page.$x(
-		`//button//span[contains(text(), '${ name }')]`
-	) )[ 0 ];
+	// Transition to block toolbar by key combination.
+	await pressKeyWithModifier( 'alt', 'F10' );
+
+	// Press Enter in the focused toggle button.
+	const switcherToggle = await page.waitForSelector( '.block-editor-block-switcher__toggle:focus' );
+	await switcherToggle.press( 'Enter' );
+
+	// Find the block button option within the switcher popover.
+	const switcher = await page.$( '.block-editor-block-switcher__container' );
+	const insertButton = ( await switcher.$x( `//button[.='${ name }']` ) )[ 0 ];
+
+	// Clicks may fail if the button is out of view. Assure it is before click.
 	await insertButton.evaluate( ( element ) => element.scrollIntoView() );
 	await insertButton.click();
+
+	// Wait for the transformed block to appear.
 	const BLOCK_SELECTOR = '.block-editor-block-list__block';
 	const BLOCK_NAME_SELECTOR = `[aria-label="Block: ${ name }"]`;
-	// Wait for the transformed block to appear.
-	await page.waitForSelector(
-		`${ BLOCK_SELECTOR }${ BLOCK_NAME_SELECTOR }`
-	);
+	await page.waitForSelector( `${ BLOCK_SELECTOR }${ BLOCK_NAME_SELECTOR }` );
 }