diff --git a/packages/e2e-test-utils/src/transform-block-to.js b/packages/e2e-test-utils/src/transform-block-to.js index 1be70bd1dda52..5c105363ca74b 100644 --- a/packages/e2e-test-utils/src/transform-block-to.js +++ b/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 }` ); }