Make the block grouping test more stable (#23266)

WordPress · Jun 18, 2020 · 69acbcf · 69acbcf
1 parent 9936625
commit 69acbcf
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 13 deletions.
diff --git a/packages/e2e-test-utils/src/click-block-toolbar-button.js b/packages/e2e-test-utils/src/click-block-toolbar-button.js
@@ -1,16 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import { showBlockToolbar } from './show-block-toolbar';
+
 /**
  * Clicks a block toolbar button.
  *
  * @param {string} buttonAriaLabel The aria label of the button to click.
  */
 export async function clickBlockToolbarButton( buttonAriaLabel ) {
+	await showBlockToolbar();
+
 	const BLOCK_TOOLBAR_SELECTOR = '.block-editor-block-toolbar';
 	const BUTTON_SELECTOR = `${ BLOCK_TOOLBAR_SELECTOR } button[aria-label="${ buttonAriaLabel }"]`;
-	if ( ( await page.$( BLOCK_TOOLBAR_SELECTOR ) ) === null ) {
-		// Move the mouse to show the block toolbar
-		await page.mouse.move( 0, 0 );
-		await page.mouse.move( 10, 10 );
-	}
 
 	// Hover the block switcher to show the movers
 	const switcher = await page.$(
@@ -20,6 +22,7 @@ export async function clickBlockToolbarButton( buttonAriaLabel ) {
 		await switcher.hover();
 	}
 
-	await page.waitForSelector( BUTTON_SELECTOR );
-	await page.click( BUTTON_SELECTOR );
+	const button = await page.waitForSelector( BUTTON_SELECTOR );
+	await button.evaluate( ( element ) => element.scrollIntoView() );
+	await button.click();
 }
diff --git a/packages/e2e-test-utils/src/show-block-toolbar.js b/packages/e2e-test-utils/src/show-block-toolbar.js
@@ -0,0 +1,5 @@
+export async function showBlockToolbar() {
+	// Move the mouse to disable the isTyping mode
+	await page.mouse.move( 50, 50 );
+	await page.mouse.move( 100, 100 );
+}
diff --git a/packages/e2e-test-utils/src/transform-block-to.js b/packages/e2e-test-utils/src/transform-block-to.js
@@ -1,11 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import { showBlockToolbar } from './show-block-toolbar';
+
 /**
  * Converts editor's block type.
  *
  * @param {string} name Block name.
  */
 export async function transformBlockTo( name ) {
-	await page.mouse.move( 0, 0 );
-	await page.mouse.move( 10, 10 );
+	await showBlockToolbar();
+
 	const switcherToggle = await page.waitForSelector(
 		'.block-editor-block-switcher__toggle'
 	);

diff --git a/packages/e2e-tests/specs/editor/various/block-grouping.test.js b/packages/e2e-tests/specs/editor/various/block-grouping.test.js
@@ -171,14 +171,24 @@ describe( 'Block Grouping', () => {
 			// Full width image.
 			await insertBlock( 'Image' );
 			await clickBlockToolbarButton( 'Change alignment' );
-			const FULL_WIDTH_BUTTON_XPATH = `//button[contains(@class,'components-dropdown-menu__menu-item') and contains(text(), 'Full width')]`;
-			await ( await page.$x( FULL_WIDTH_BUTTON_XPATH ) )[ 0 ].click();
+			const fullButton = await page.waitForXPath(
+				`//button[contains(@class,'components-dropdown-menu__menu-item') and contains(text(), 'Full width')]`
+			);
+			await fullButton.evaluate( ( element ) =>
+				element.scrollIntoView()
+			);
+			await fullButton.click();
 
 			// Wide width image.
 			await insertBlock( 'Image' );
 			await clickBlockToolbarButton( 'Change alignment' );
-			const WIDE_BUTTON_XPATH = `//button[contains(@class,'components-dropdown-menu__menu-item') and contains(text(), 'Wide width')]`;
-			await ( await page.$x( WIDE_BUTTON_XPATH ) )[ 0 ].click();
+			const wideButton = await page.waitForXPath(
+				`//button[contains(@class,'components-dropdown-menu__menu-item') and contains(text(), 'Wide width')]`
+			);
+			await wideButton.evaluate( ( element ) =>
+				element.scrollIntoView()
+			);
+			await wideButton.click();
 
 			await insertBlock( 'Paragraph' );
 			await page.keyboard.type( 'Some paragraph' );