Fix failing tests in Gutenberg stable and nightly tests (#49548)

plugins/woocommerce/changelog/e2e-fix-gutenberg-daily-tests

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+E2E tests: Fix flaky Gutenberg tests

plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js

@@ -2,6 +2,7 @@ const { test: base, expect, request } = require( '@playwright/test' );
 const { AssemblerPage } = require( './assembler.page' );
 const { activateTheme, DEFAULT_THEME } = require( '../../../utils/themes' );
 const { setOption } = require( '../../../utils/options' );
+const { encodeCredentials } = require( '../../../utils/plugin-utils' );
 
 const test = base.extend( {
 	pageObject: async ( { page }, use ) => {
@@ -163,21 +164,50 @@ test.skip( 'Assembler -> Homepage', { tag: '@gutenberg' }, () => {
 		await waitResponse;
 
 		await page.goto( baseURL );
-		// Get all the content between the header and the footer.
-		const homepageHTML = await page
-			.locator(
-				'//header/following-sibling::*[following-sibling::footer]'
-			)
-			.all();
 
-		let index = 0;
-		for ( const element of homepageHTML ) {
-			await expect(
-				await element.getAttribute( 'class' )
-			).toMatchSnapshot( {
-				name: `selected-homepage-blocks-class-frontend-${ index }`,
-			} );
-			index++;
+		// Check if Gutenberg is installed
+		const apiContext = await request.newContext( {
+			baseURL,
+			extraHTTPHeaders: {
+				Authorization: `Basic ${ encodeCredentials(
+					'admin',
+					'password'
+				) }`,
+				cookie: '',
+			},
+		} );
+		const listPluginsResponse = await apiContext.get(
+			`/wp-json/wp/v2/plugins`,
+			{
+				failOnStatusCode: true,
+			}
+		);
+		const pluginsList = await listPluginsResponse.json();
+		const withGutenbergPlugin = pluginsList.find(
+			( { textdomain } ) => textdomain === 'gutenberg'
+		);
+
+		// if testing with Gutenberg, perform Gutenberg-specific testing
+		// eslint-disable-next-line playwright/no-conditional-in-test
+		if ( withGutenbergPlugin ) {
+			// Get all the content between the header and the footer.
+			const homepageHTML = await page
+				.locator(
+					'//header/following-sibling::*[following-sibling::footer]'
+				)
+				.all();
+
+			let index = 0;
+			for ( const element of homepageHTML ) {
+				await expect(
+					await element.getAttribute( 'class' )
+				).toMatchSnapshot( {
+					name: `${
+						withGutenbergPlugin ? 'gutenberg' : ''
+					}-selected-homepage-blocks-class-frontend-${ index }`,
+				} );
+				index++;
+			}
 		}
 	} );
 

plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js-snapshots/gutenberg-selected-homepage-blocks-class-frontend-0

@@ -0,0 +1 @@
+wp-block-group alignfull has-global-padding is-content-justification-center is-layout-constrained wp-container-core-group-is-layout-5 wp-block-group-is-layout-constrained

plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js-snapshots/gutenberg-selected-homepage-blocks-class-frontend-1

@@ -0,0 +1 @@
+wp-block-group alignfull has-global-padding is-content-justification-center is-layout-constrained wp-container-core-group-is-layout-7 wp-block-group-is-layout-constrained

plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js-snapshots/gutenberg-selected-homepage-blocks-class-frontend-2

@@ -0,0 +1 @@
+wp-block-group alignfull has-global-padding is-content-justification-center is-layout-constrained wp-container-core-group-is-layout-8 wp-block-group-is-layout-constrained

plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js-snapshots/gutenberg-selected-homepage-blocks-class-frontend-3

@@ -0,0 +1 @@
+wp-block-group alignfull has-global-padding is-content-justification-center is-layout-constrained wp-container-core-group-is-layout-9 wp-block-group-is-layout-constrained

plugins/woocommerce/tests/e2e-pw/tests/merchant/create-page.spec.js

@@ -4,6 +4,7 @@ const {
 	fillPageTitle,
 	getCanvas,
 	publishPage,
+	closeChoosePatternModal,
 } = require( '../../utils/editor' );
 
 const test = baseTest.extend( {
@@ -18,6 +19,8 @@ test.describe(
 		test( 'can create new page', async ( { page, testPage } ) => {
 			await goToPageEditor( { page } );
 
+			await closeChoosePatternModal( { page } );
+
 			await fillPageTitle( page, testPage.title );
 
 			const canvas = await getCanvas( page );

plugins/woocommerce/tests/e2e-pw/tests/merchant/create-post.spec.js

@@ -14,7 +14,6 @@ test.describe(
 	'Can create a new post',
 	{ tag: [ '@gutenberg', '@services' ] },
 	() => {
-		// eslint-disable-next-line playwright/expect-expect
 		test( 'can create new post', async ( { page, testPost } ) => {
 			await goToPostEditor( { page } );
 

plugins/woocommerce/tests/e2e-pw/tests/merchant/create-woocommerce-blocks.spec.js

@@ -5,6 +5,7 @@ const {
 	insertBlock,
 	getCanvas,
 	publishPage,
+	closeChoosePatternModal,
 } = require( '../../utils/editor' );
 const { getInstalledWordPressVersion } = require( '../../utils/wordpress' );
 
@@ -146,6 +147,9 @@ test.describe(
 			testPage,
 		} ) => {
 			await goToPageEditor( { page } );
+
+			await closeChoosePatternModal( { page } );
+
 			await fillPageTitle( page, testPage.title );
 
 			const wordPressVersion = await getInstalledWordPressVersion();

plugins/woocommerce/tests/e2e-pw/tests/merchant/create-woocommerce-patterns.spec.js

@@ -5,6 +5,7 @@ const {
 	insertBlock,
 	getCanvas,
 	publishPage,
+	closeChoosePatternModal,
 } = require( '../../utils/editor' );
 const { getInstalledWordPressVersion } = require( '../../utils/wordpress' );
 
@@ -34,6 +35,9 @@ test.describe(
 			testPage,
 		} ) => {
 			await goToPageEditor( { page } );
+
+			await closeChoosePatternModal( { page } );
+
 			await fillPageTitle( page, testPage.title );
 
 			const wordPressVersion = await getInstalledWordPressVersion();

plugins/woocommerce/tests/e2e-pw/utils/editor.js

@@ -1,14 +1,13 @@
 const { expect } = require( '@playwright/test' );
 
-const closeWelcomeModal = async ( { page } ) => {
-	// Close welcome popup if prompted
-	try {
-		await page
-			.getByLabel( 'Close', { exact: true } )
-			.click( { timeout: 5000 } );
-	} catch ( error ) {
-		// Welcome modal wasn't present, skipping action.
-	}
+const closeChoosePatternModal = async ( { page } ) => {
+	const closeModal = page.getByRole( 'button', {
+		name: 'Close',
+		exact: true,
+	} );
+	await page.addLocatorHandler( closeModal, async () => {
+		await closeModal.click();
+	} );
 };
 
 const disableWelcomeModal = async ( { page } ) => {
@@ -42,14 +41,23 @@ const getCanvas = async ( page ) => {
 const goToPageEditor = async ( { page } ) => {
 	await page.goto( 'wp-admin/post-new.php?post_type=page' );
 	await disableWelcomeModal( { page } );
+	await page.waitForResponse(
+		( response ) =>
+			response.url().includes( '//page' ) && response.status() === 200
+	);
 };
 
 const goToPostEditor = async ( { page } ) => {
 	await page.goto( 'wp-admin/post-new.php' );
 	await disableWelcomeModal( { page } );
+	await page.waitForResponse(
+		( response ) =>
+			response.url().includes( '//single' ) && response.status() === 200
+	);
 };
 
 const fillPageTitle = async ( page, title ) => {
+	await ( await getCanvas( page ) ).getByLabel( 'Add title' ).click();
 	await ( await getCanvas( page ) ).getByLabel( 'Add title' ).fill( title );
 };
 
@@ -132,7 +140,7 @@ const publishPage = async ( page, pageTitle ) => {
 };
 
 module.exports = {
-	closeWelcomeModal,
+	closeChoosePatternModal,
 	goToPageEditor,
 	goToPostEditor,
 	disableWelcomeModal,