Fix: Adjust Playwright E2E tests for WP 6.3 (https://github.com/woocommerce/woocommerce-blocks/pull/10516)

Co-authored-by: Luigi <gigitux@gmail.com>

- Updates the `@wordpress/e2e-test-utils-playwright` package to use the npm release.
- Removes hard-coded WP version in `.wp-env.json` to use the latest Core release.
- Fixes failing Playwright tests when using WP 6.3.
- Pins the core version (6.2.2) for Jest E2E tests so they can keep passing. We decided not to fix those tests because we're moving to Playwright.

plugins/woocommerce-blocks/.github/workflows/php-js-e2e-tests.yml

@@ -153,6 +153,7 @@ jobs:
         env:
           WOOCOMMERCE_BLOCKS_PHASE: 3
         run: |
+          node ./bin/wp-env-with-wp-622.js
           npm run wp-env start
           npm run wp-env:config && npx cross-env NODE_CONFIG_DIR=tests/e2e-jest/config wp-scripts test-e2e --config tests/e2e-jest/config/jest.config.js --listTests > ~/.jest-e2e-tests
           npx cross-env JEST_PUPPETEER_CONFIG=tests/e2e-jest/config/jest-puppeteer.config.js cross-env NODE_CONFIG_DIR=tests/e2e-jest/config wp-scripts test-e2e --config tests/e2e-jest/config/jest.config.js --runInBand --runTestsByPath $( awk 'NR % 5 == ${{ matrix.part }} - 1' < ~/.jest-e2e-tests )

plugins/woocommerce-blocks/.wp-env.json

@@ -1,5 +1,5 @@
 {
-	"core": "WordPress/WordPress#6.2.2",
+	"core": null,
 	"plugins": [
 		"https://downloads.wordpress.org/plugin/woocommerce.latest-stable.zip",
 		"https://github.com/WP-API/Basic-Auth/archive/master.zip",

plugins/woocommerce-blocks/bin/wp-env-with-wp-622.js

@@ -0,0 +1,19 @@
+const fs = require( 'fs' );
+const path = require( 'path' );
+
+const wpEnvRaw = fs.readFileSync(
+	path.join( __dirname, '..', '.wp-env.json' )
+);
+const wpEnv = JSON.parse( wpEnvRaw );
+
+// Pin the core version to 6.2.2 for Jest E2E test so we can keep the test
+// passing when new WordPress versions are released. We do this because we're
+// moving to Playwright and will abandon the Jest E2E tests once the migration
+// is complete.
+wpEnv.core = 'WordPress/WordPress#6.2.2';
+
+// We write the new file to .wp-env.override.json (https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/#wp-env-override-json)
+fs.writeFileSync(
+	path.join( __dirname, '..', '.wp-env.override.json' ),
+	JSON.stringify( wpEnv )
+);

plugins/woocommerce-blocks/package.json

@@ -164,7 +164,7 @@
 		"@wordpress/dependency-extraction-webpack-plugin": "3.2.1",
 		"@wordpress/dom": "3.27.0",
 		"@wordpress/e2e-test-utils": "10.1.0",
-		"@wordpress/e2e-test-utils-playwright": "https://github.com/woocommerce/woocommerce-blocks/files/11286971/wordpress-e2e-test-utils-playwright-0.0.0.tgz",
+		"@wordpress/e2e-test-utils-playwright": "0.6.0",
 		"@wordpress/e2e-tests": "^4.6.0",
 		"@wordpress/element": "4.20.0",
 		"@wordpress/env": "7.0.0",
@@ -175,6 +175,7 @@
 		"@wordpress/scripts": "24.6.0",
 		"autoprefixer": "10.4.14",
 		"axios": "0.27.2",
+		"babel-jest": "^29.6.2",
 		"babel-plugin-explicit-exports-references": "^1.0.2",
 		"babel-plugin-react-docgen": "4.2.1",
 		"babel-plugin-transform-async-generator-functions": "6.24.1",

plugins/woocommerce-blocks/tests/e2e/tests/cart-checkout/cart-block.merchant.block_theme.spec.ts

@@ -41,8 +41,9 @@ test.describe( 'Merchant → Cart', () => {
 		test( 'can only be inserted once', async ( { page, editorUtils } ) => {
 			await editorUtils.openGlobalBlockInserter();
 			await page.getByPlaceholder( 'Search' ).fill( blockData.slug );
-			const cartBlockButton = page.locator( 'button', {
+			const cartBlockButton = page.getByRole( 'option', {
-				has: page.locator( `text="${ blockData.name }"` ),
+				name: blockData.name,
+				exact: true,
 			} );
 			await expect( cartBlockButton ).toHaveAttribute(
 				'aria-disabled',
@@ -61,7 +62,9 @@ test.describe( 'Merchant → Cart', () => {
 				.getByRole( 'toolbar', { name: 'Block tools' } )
 				.getByRole( 'button', { name: 'Options' } );
 			await options.click();
-			const removeButton = page.getByText( 'Remove Cart' );
+			const removeButton = page.getByRole( 'menuitem', {
+				name: 'Delete',
+			} );
 			await removeButton.click();
 			// Expect block to have been removed.
 			await expect(

plugins/woocommerce-blocks/tests/e2e/tests/customer-account/customer-account.block_theme.spec.ts

@@ -55,7 +55,7 @@ test.describe( `${ blockData.name } Block`, () => {
 		page,
 		frontendUtils,
 	} ) => {
-		await admin.createNewPost();
+		await admin.createNewPost( { legacyCanvas: true } );
 		await editor.insertBlock( { name: blockData.name } );
 
 		await selectTextOnlyOption( { page } );
@@ -78,7 +78,7 @@ test.describe( `${ blockData.name } Block`, () => {
 		page,
 		frontendUtils,
 	} ) => {
-		await admin.createNewPost();
+		await admin.createNewPost( { legacyCanvas: true } );
 		await editor.insertBlock( { name: blockData.name } );
 
 		await selectIconOnlyOption( { page } );
@@ -101,7 +101,7 @@ test.describe( `${ blockData.name } Block`, () => {
 		page,
 		frontendUtils,
 	} ) => {
-		await admin.createNewPost();
+		await admin.createNewPost( { legacyCanvas: true } );
 		await editor.insertBlock( { name: blockData.name } );
 
 		await selectIconAndTextOption( { page } );

plugins/woocommerce-blocks/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts

@@ -23,7 +23,7 @@ const getMiniCartButton = async ( { page } ) => {
 test.describe( `${ blockData.name } Block`, () => {
 	test.describe( `standalone`, () => {
 		test.beforeEach( async ( { admin, page, editor } ) => {
-			await admin.createNewPost();
+			await admin.createNewPost( { legacyCanvas: true } );
 			await editor.insertBlock( { name: blockData.name } );
 			await editor.publishPost();
 			const url = new URL( page.url() );
@@ -108,7 +108,7 @@ test.describe( `${ blockData.name } Block`, () => {
 
 	test.describe( `with All products Block`, () => {
 		test.beforeEach( async ( { admin, page, editor } ) => {
-			await admin.createNewPost();
+			await admin.createNewPost( { legacyCanvas: true } );
 			await editor.insertBlock( { name: blockData.name } );
 			await editor.insertBlock( { name: 'woocommerce/all-products' } );
 			await editor.publishPost();

plugins/woocommerce-blocks/tests/e2e/tests/price-filter/price-filter.block_theme.side_effects.spec.ts

@@ -28,7 +28,7 @@ const blockData: BlockData< {
 
 test.describe( `${ blockData.name } Block - with All products Block`, () => {
 	test.beforeEach( async ( { admin, page, editor } ) => {
-		await admin.createNewPost();
+		await admin.createNewPost( { legacyCanvas: true } );
 		await editor.insertBlock( { name: 'woocommerce/all-products' } );
 		await editor.insertBlock( {
 			name: 'woocommerce/filter-wrapper',

plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.page.ts

@@ -62,7 +62,7 @@ class ProductCollectionPage {
 	}
 
 	async createNewPostAndInsertBlock() {
-		await this.admin.createNewPost();
+		await this.admin.createNewPost( { legacyCanvas: true } );
 		await this.editor.insertBlock( {
 			name: this.BLOCK_NAME,
 		} );

plugins/woocommerce-blocks/tests/e2e/tests/products/products.block_theme.side_effects.spec.ts

@@ -159,15 +159,6 @@ for ( const {
 				),
 			] );
 
-			// @todo This is a workaround to wait for the save button to be enabled. It works only without Gutenberg enabled. We have to refactor this.
-			await page
-				.locator(
-					"button.edit-site-save-button__button[aria-label='Save'][aria-disabled='true']"
-				)
-				.waitFor( {
-					state: 'visible',
-				} );
-
 			await page.goto( frontendPage, {
 				waitUntil: 'load',
 			} );

plugins/woocommerce-blocks/tests/e2e/tests/templates/cart-template.block_theme.spec.ts

@@ -14,17 +14,19 @@ test.describe( 'Test the cart template', async () => {
 	} );
 
 	test( 'Template can be opened in the site editor', async ( {
+		admin,
 		page,
 		editorUtils,
 	} ) => {
-		await page.goto( '/wp-admin/site-editor.php' );
+		await admin.visitAdminPage( 'site-editor.php' );
+		await editorUtils.waitForSiteEditorFinishLoading();
 		await page.getByRole( 'button', { name: /Templates/i } ).click();
 		await page.getByRole( 'button', { name: /Cart/i } ).click();
 		await editorUtils.enterEditMode();
 
 		await expect(
 			page
-				.frameLocator( 'iframe' )
+				.frameLocator( 'iframe[title="Editor canvas"i]' )
 				.locator( 'button:has-text("Proceed to checkout")' )
 				.first()
 		).toBeVisible();
@@ -45,13 +47,16 @@ test.describe( 'Test the cart template', async () => {
 			name: 'core/paragraph',
 			attributes: { content: 'Hello World' },
 		} );
-		await editor.saveSiteEditorEntities();
 
+		await Promise.all( [
+			editor.saveSiteEditorEntities(),
 			// Wait for the response after saving the post because sometimes there's a race condition, and loading the post
 			// shows a version without the newly saved content.
-		await editor.page.waitForResponse( ( response ) =>
+			editor.page.waitForResponse( ( response ) =>
 				response.url().includes( permalink )
-		);
+			),
+		] );
+
 		await page.goto( permalink, { waitUntil: 'commit' } );
 
 		await expect( page.getByText( 'Hello World' ).first() ).toBeVisible();

plugins/woocommerce-blocks/tests/e2e/tests/templates/checkout-header-template-part.block_theme.spec.ts

@@ -14,11 +14,15 @@ test.afterAll( async ( { requestUtils } ) => {
 
 test.describe( 'Test the checkout header template part', async () => {
 	test( 'Template can be opened in the site editor', async ( { page } ) => {
-		await page.goto( '/wp-admin/site-editor.php' );
+		await page.goto(
-		await page.getByRole( 'button', { name: /Template Parts/i } ).click();
+			'/wp-admin/site-editor.php?path=/wp_template_part/all'
-		await page.getByRole( 'button', { name: /Checkout Header/i } ).click();
+		);
+		await page.getByText( 'Checkout Header', { exact: true } ).click();
 
-		const editButton = page.getByRole( 'button', { name: /Edit/i } );
+		const editButton = page.getByRole( 'button', {
+			name: 'Edit',
+			exact: true,
+		} );
 		await expect( editButton ).toBeVisible();
 	} );
 

plugins/woocommerce-blocks/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts

@@ -14,10 +14,12 @@ test.describe( 'Test the checkout template', async () => {
 	} );
 
 	test( 'Template can be opened in the site editor', async ( {
+		admin,
 		page,
 		editorUtils,
 	} ) => {
-		await page.goto( '/wp-admin/site-editor.php' );
+		await admin.visitAdminPage( 'site-editor.php' );
+		await editorUtils.waitForSiteEditorFinishLoading();
 		await page.getByRole( 'button', { name: /Templates/i } ).click();
 		await page.getByRole( 'button', { name: /Checkout/i } ).click();
 		await editorUtils.enterEditMode();

plugins/woocommerce-blocks/tests/e2e/utils/editor/editor-utils.page.ts

@@ -123,11 +123,12 @@ export class EditorUtils {
 	}
 
 	async enterEditMode() {
-		await this.editor.page.waitForSelector(
+		await this.editor.page
-			'.edit-site-visual-editor__editor-canvas[role="button"]',
+			.getByRole( 'button', {
-			{ timeout: 3000 }
+				name: 'Edit',
-		);
+				exact: true,
-		await this.editor.canvas.click( 'body' );
+			} )
+			.click();
 	}
 
 	async isBlockEarlierThan< T >(
@@ -173,4 +174,15 @@ export class EditorUtils {
 
 		return firstBlockIndex < secondBlockIndex;
 	}
+
+	async waitForSiteEditorFinishLoading() {
+		await this.page
+			.frameLocator( 'iframe[title="Editor canvas"i]' )
+			.locator( 'body > *' )
+			.first()
+			.waitFor();
+		await this.page
+			.locator( '.edit-site-canvas-spinner' )
+			.waitFor( { state: 'hidden' } );
+	}
 }