[e2e tests] Fix more e2e tests with Gutenberg active (#46861)

* Add publish page util

* Update create-woocommerce-patterns.spec.js to use canvas

* Update create-woocommerce-blocks.spec.js to use the publishPage util

* Fix check for pattern

* Add changelog

* Update cart-block-calculate-shipping.spec.js to use canvas

* Add utility for adding a product to cart and only waiting for the relevant request instead of networkidle

* Update cart-block-coupons.spec.js to use canvas and new utils

* Update shopper/cart-block.spec.js to use canvas and new utils

* Update shopper/cart-calculate-shipping.spec.js to use new utils

* Update shopper/cart-checkout-block-calculate-tax.spec.js to use canvas and new utils.

* Use uuid instead of Date.now()

* Update shopper/cart-checkout-calculate-tax.spec.js to use new utils

* Suppress testing-library/await-async-utils eslint rule

* Add currency for a more strict text based locator

* Don't wait for networkidle

* Don't wait for networkidle in cart-checkout-restricted-coupons.spec.js

* Don't wait for networkidle in cart-redirection.spec.js

* Fix cart.spec.js

* Fix checkout-block-coupons.spec.js

* Fix checkout-block.spec.js

* Fix shop-products-filter-by-price.spec.js

* Add gutenberg to wp-env config

* Dirty fix for multiple coupons test

* Remove Gutenberg from wp-env

plugins/woocommerce/.wp-env.json

@@ -30,9 +30,7 @@
 				"https://github.com/WP-API/Basic-Auth/archive/master.zip",
 				"https://downloads.wordpress.org/plugin/wp-mail-logging.zip"
 			],
-			"themes": [
-				"https://downloads.wordpress.org/theme/twentynineteen.zip"
-			],
+			"themes": [],
 			"config": {
 				"WP_TESTS_DOMAIN": "localhost",
 				"ALTERNATE_WP_CRON": false

plugins/woocommerce/changelog/e2e-fix-fixes-for-gutenberg-active

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+E2E tests: more fixes for tests with Gutenberg active

plugins/woocommerce/tests/e2e-pw/.eslintrc.js

@@ -6,5 +6,7 @@ module.exports = {
 		'jest/no-test-callback': 'off',
 		'jest/no-disabled-tests': 'off',
 		'jest/valid-expect': 'off',
+		'jest/expect-expect': 'off',
+		'testing-library/await-async-utils': 'off',
 	},
 };

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

@@ -5,8 +5,9 @@ const {
 	insertBlock,
 	transformIntoBlocks,
 } = require( '../../utils/editor' );
+const uuid = require( 'uuid' );
 
-const transformedCartBlockTitle = `Transformed Cart ${ Date.now() }`;
+const transformedCartBlockTitle = `Transformed Cart ${ uuid.v1() }`;
 const transformedCartBlockSlug = transformedCartBlockTitle
 	.replace( / /gi, '-' )
 	.toLowerCase();

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

@@ -7,8 +7,9 @@ const {
 	transformIntoBlocks,
 } = require( '../../utils/editor' );
 const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
+const uuid = require( 'uuid' );
 
-const transformedCheckoutBlockTitle = `Transformed Checkout ${ Date.now() }`;
+const transformedCheckoutBlockTitle = `Transformed Checkout ${ uuid.v1() }`;
 const transformedCheckoutBlockSlug = transformedCheckoutBlockTitle
 	.replace( / /gi, '-' )
 	.toLowerCase();

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

@@ -4,10 +4,12 @@ const {
 	fillPageTitle,
 	insertBlock,
 	getCanvas,
+	publishPage,
 } = require( '../../utils/editor' );
 const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
+const uuid = require( 'uuid' );
 
-const allWooBlocksPageTitle = `Insert All Woo Blocks ${ Date.now() }`;
+const allWooBlocksPageTitle = `Insert All Woo Blocks ${ uuid.v1() }`;
 
 const simpleProductName = 'Simplest Product';
 const singleProductPrice = '555.00';
@@ -225,17 +227,7 @@ test.describe( 'Insert All WooCommerce Blocks Into Page', () => {
 			} );
 		}
 
-		// save and publish the page
-		await page
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await page
-			.getByRole( 'region', { name: 'Editor publish' } )
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await expect(
-			page.getByText( `${ allWooBlocksPageTitle } is now live.` )
-		).toBeVisible();
+		await publishPage( page, allWooBlocksPageTitle );
 
 		// check all blocks inside the page after publishing
 		// except the product price due to invisibility and false-positive

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

@@ -1,7 +1,14 @@
 const { test, expect } = require( '@playwright/test' );
-const { disableWelcomeModal } = require( '../../utils/editor' );
+const {
+	goToPageEditor,
+	fillPageTitle,
+	insertBlock,
+	getCanvas,
+	publishPage,
+} = require( '../../utils/editor' );
+const uuid = require( 'uuid' );
 
-const wooPatternsPageTitle = `Insert Woo Patterns ${ Date.now() }`;
+const wooPatternsPageTitle = `Insert Woo Patterns ${ uuid.v1() }`;
 const wooPatternsPageSlug = wooPatternsPageTitle
 	.replace( / /gi, '-' )
 	.toLowerCase();
@@ -30,62 +37,35 @@ test.describe( 'Insert WooCommerce Patterns Into Page', () => {
 	test.use( { storageState: process.env.ADMINSTATE } );
 
 	test( 'can insert WooCommerce patterns into page', async ( { page } ) => {
-		// go to create a new page
-		await page.goto( 'wp-admin/post-new.php?post_type=page' );
+		await goToPageEditor( { page } );
+		await fillPageTitle( page, wooPatternsPageTitle );
 
-		await disableWelcomeModal( { page } );
-
-		// fill page title
-		await page
-			.getByRole( 'textbox', { name: 'Add title' } )
-			.fill( wooPatternsPageTitle );
-
-		// add Woo Patterns and verify them as added into page
 		for ( let i = 0; i < wooPatterns.length; i++ ) {
-			// click title field for block inserter to show up
-			await page.getByRole( 'textbox', { name: 'Add title' } ).click();
+			await test.step( `Insert ${ wooPatterns[ i ].name } pattern`, async () => {
+				await insertBlock( page, wooPatterns[ i ].name );
 
-			// add pattern into page
-			await page.getByLabel( 'Add block' ).click();
-			await page
-				.getByPlaceholder( 'Search', { exact: true } )
-				.fill( wooPatterns[ i ].name );
-			await page
-				.getByRole( 'option', {
-					name: wooPatterns[ i ].name,
-					exact: true,
-				} )
-				.click();
-			await expect(
-				page.getByLabel( 'Dismiss this notice' ).filter( {
-					hasText: `Block pattern "${ wooPatterns[ i ].name }" inserted.`,
-				} )
-			).toBeVisible();
+				await expect(
+					page.getByLabel( 'Dismiss this notice' ).filter( {
+						hasText: `Block pattern "${ wooPatterns[ i ].name }" inserted.`,
+					} )
+				).toBeVisible();
 
-			// verify added patterns into page
-			await expect(
-				page
-					.getByRole( 'textbox' )
-					.filter( { hasText: `${ wooPatterns[ i ].button }` } )
-			).toBeVisible();
+				const canvas = await getCanvas( page );
+				await expect(
+					canvas
+						.getByRole( 'textbox' )
+						.filter( { hasText: `${ wooPatterns[ i ].button }` } )
+				).toBeVisible();
+			} );
 		}
 
-		// save and publish the page
-		await page
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await page
-			.getByRole( 'region', { name: 'Editor publish' } )
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await expect(
-			page.getByText( `${ wooPatternsPageTitle } is now live.` )
-		).toBeVisible();
+		await publishPage( page, wooPatternsPageTitle );
 
 		// check again added patterns after publishing
+		const canvas = await getCanvas( page );
 		for ( let i = 1; i < wooPatterns.length; i++ ) {
 			await expect(
-				page
+				canvas
 					.getByRole( 'textbox' )
 					.filter( { hasText: `${ wooPatterns[ i ].button }` } )
 			).toBeVisible();

plugins/woocommerce/tests/e2e-pw/tests/shopper/cart-block-calculate-shipping.spec.js

@@ -1,6 +1,13 @@
 const { test, expect } = require( '@playwright/test' );
-const { disableWelcomeModal } = require( '../../utils/editor' );
+const {
+	goToPageEditor,
+	fillPageTitle,
+	insertBlockByShortcut,
+	publishPage,
+} = require( '../../utils/editor' );
+const { addAProductToCart } = require( '../../utils/cart' );
 const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
+const uuid = require( 'uuid' );
 
 const firstProductName = 'First Product';
 const firstProductPrice = '10.00';
@@ -8,7 +15,7 @@ const secondProductName = 'Second Product';
 const secondProductPrice = '20.00';
 const firstProductWithFlatRate = +firstProductPrice + 5;
 
-const cartBlockPageTitle = 'Cart Block';
+const cartBlockPageTitle = `Cart Block ${ uuid.v1() }`;
 const cartBlockPageSlug = cartBlockPageTitle
 	.replace( / /gi, '-' )
 	.toLowerCase();
@@ -128,32 +135,12 @@ test.describe( 'Cart Block Calculate Shipping', () => {
 		} );
 	} );
 
+	// eslint-disable-next-line playwright/expect-expect,jest/expect-expect
 	test( 'create Cart Block page', async ( { page } ) => {
-		// create a new page with cart block
-		await page.goto( 'wp-admin/post-new.php?post_type=page' );
-
-		await disableWelcomeModal( { page } );
-
-		await page
-			.getByRole( 'textbox', { name: 'Add title' } )
-			.fill( cartBlockPageTitle );
-		await page.getByRole( 'button', { name: 'Add default block' } ).click();
-		await page
-			.getByRole( 'document', {
-				name: 'Empty block; start writing or type forward slash to choose a block',
-			} )
-			.fill( '/cart' );
-		await page.keyboard.press( 'Enter' );
-		await page
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await page
-			.getByRole( 'region', { name: 'Editor publish' } )
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await expect(
-			page.getByText( `${ cartBlockPageTitle } is now live.` )
-		).toBeVisible();
+		await goToPageEditor( { page } );
+		await fillPageTitle( page, cartBlockPageTitle );
+		await insertBlockByShortcut( page, '/cart' );
+		await publishPage( page, cartBlockPageTitle );
 	} );
 
 	test( 'allows customer to calculate Free Shipping in cart block if in Netherlands', async ( {
@@ -162,10 +149,7 @@ test.describe( 'Cart Block Calculate Shipping', () => {
 	} ) => {
 		await context.clearCookies();
 
-		await page.goto( `/shop/?add-to-cart=${ product1Id }` );
-		// eslint-disable-next-line playwright/no-networkidle
-		await page.waitForLoadState( 'networkidle' );
-
+		await addAProductToCart( page, product1Id );
 		await page.goto( cartBlockPageSlug );
 
 		// Set shipping country to Netherlands
@@ -191,10 +175,7 @@ test.describe( 'Cart Block Calculate Shipping', () => {
 	} ) => {
 		await context.clearCookies();
 
-		await page.goto( `/shop/?add-to-cart=${ product1Id }` );
-		// eslint-disable-next-line playwright/no-networkidle
-		await page.waitForLoadState( 'networkidle' );
-
+		await addAProductToCart( page, product1Id );
 		await page.goto( cartBlockPageSlug );
 
 		// Set shipping country to Portugal
@@ -210,7 +191,7 @@ test.describe( 'Cart Block Calculate Shipping', () => {
 		).toBeVisible();
 		await expect( page.getByText( 'Shipping$5.00Flat' ) ).toBeVisible();
 		await expect(
-			page.getByText( firstProductWithFlatRate.toString() )
+			page.getByText( `$${ firstProductWithFlatRate }` )
 		).toBeVisible();
 
 		// Set shipping to local pickup instead of flat rate
@@ -229,10 +210,7 @@ test.describe( 'Cart Block Calculate Shipping', () => {
 	} ) => {
 		await context.clearCookies();
 
-		await page.goto( `/shop/?add-to-cart=${ product1Id }` );
-		// eslint-disable-next-line playwright/no-networkidle
-		await page.waitForLoadState( 'networkidle' );
-
+		await addAProductToCart( page, product1Id );
 		await page.goto( cartBlockPageSlug );
 
 		// Set shipping country to Portugal
@@ -246,11 +224,11 @@ test.describe( 'Cart Block Calculate Shipping', () => {
 		await page.getByLabel( 'Increase quantity of First' ).click();
 		await expect(
 			page.getByText(
-				(
+				`$${
 					parseInt( firstProductPrice, 10 ) +
 					parseInt( firstProductPrice, 10 ) +
 					5
-				).toString()
+				}`.toString()
 			)
 		).toBeVisible();
 	} );
@@ -261,14 +239,8 @@ test.describe( 'Cart Block Calculate Shipping', () => {
 	} ) => {
 		await context.clearCookies();
 
-		await page.goto( `/shop/?add-to-cart=${ product1Id }` );
-		// eslint-disable-next-line playwright/no-networkidle
-		await page.waitForLoadState( 'networkidle' );
-
-		await page.goto( `/shop/?add-to-cart=${ product2Id }` );
-		// eslint-disable-next-line playwright/no-networkidle
-		await page.waitForLoadState( 'networkidle' );
-
+		await addAProductToCart( page, product1Id );
+		await addAProductToCart( page, product2Id );
 		await page.goto( cartBlockPageSlug );
 
 		// Set shipping country to Portugal
@@ -285,11 +257,11 @@ test.describe( 'Cart Block Calculate Shipping', () => {
 		await expect( page.getByText( 'Shipping$5.00Flat' ) ).toBeVisible();
 		await expect(
 			page.getByText(
-				(
+				`$${
 					parseInt( firstProductPrice, 10 ) +
 					parseInt( secondProductPrice, 10 ) +
 					5
-				).toString()
+				}`.toString()
 			)
 		).toBeVisible();
 

plugins/woocommerce/tests/e2e-pw/tests/shopper/cart-block-coupons.spec.js

@@ -1,7 +1,13 @@
 const { test, expect } = require( '@playwright/test' );
-const { admin } = require( '../../test-data/data' );
-const { disableWelcomeModal } = require( '../../utils/editor' );
+const {
+	goToPageEditor,
+	fillPageTitle,
+	insertBlockByShortcut,
+	publishPage,
+} = require( '../../utils/editor' );
+const { addAProductToCart } = require( '../../utils/cart' );
 const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
+const uuid = require( 'uuid' );
 
 const simpleProductName = 'Cart Coupons Product';
 const singleProductFullPrice = '110.00';
@@ -28,7 +34,7 @@ const customerBilling = {
 	email: 'john.doe.merchant.test@example.com',
 };
 
-const cartBlockPageTitle = 'Cart Block';
+const cartBlockPageTitle = `Cart Block Coupons ${ uuid.v1() }`;
 const cartBlockPageSlug = cartBlockPageTitle
 	.replace( / /gi, '-' )
 	.toLowerCase();
@@ -36,6 +42,7 @@ const cartBlockPageSlug = cartBlockPageTitle
 let productId, orderId, limitedCouponId;
 
 test.describe( 'Cart Block Applying Coupons', () => {
+	test.use( { storageState: process.env.ADMINSTATE } );
 	const couponBatchId = [];
 
 	test.beforeAll( async ( { baseURL } ) => {
@@ -116,50 +123,25 @@ test.describe( 'Cart Block Applying Coupons', () => {
 		} );
 	} );
 
-	test.beforeEach( async ( { context } ) => {
-		// Shopping cart is very sensitive to cookies, so be explicit
-		await context.clearCookies();
-	} );
-
+	// eslint-disable-next-line playwright/expect-expect,jest/expect-expect
 	test( 'can create Cart Block page', async ( { page } ) => {
-		// create a new page with cart block
-		await page.goto( 'wp-admin/post-new.php?post_type=page' );
-		await page.locator( 'input[name="log"]' ).fill( admin.username );
-		await page.locator( 'input[name="pwd"]' ).fill( admin.password );
-		await page.locator( 'text=Log In' ).click();
-
-		await disableWelcomeModal( { page } );
-
-		await page
-			.getByRole( 'textbox', { name: 'Add title' } )
-			.fill( cartBlockPageTitle );
-		await page.getByRole( 'button', { name: 'Add default block' } ).click();
-		await page
-			.getByRole( 'document', {
-				name: 'Empty block; start writing or type forward slash to choose a block',
-			} )
-			.fill( '/cart' );
-		await page.keyboard.press( 'Enter' );
-		await page
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await page
-			.getByRole( 'region', { name: 'Editor publish' } )
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await expect(
-			page.getByText( `${ cartBlockPageTitle } is now live.` )
-		).toBeVisible();
+		await goToPageEditor( { page } );
+		await fillPageTitle( page, cartBlockPageTitle );
+		await insertBlockByShortcut( page, '/cart' );
+		await publishPage( page, cartBlockPageTitle );
 	} );
 
 	test( 'allows cart block to apply coupon of any type', async ( {
 		page,
+		context,
 	} ) => {
+		await context.clearCookies();
+
 		const totals = [ '$50.00', '$27.50', '$45.00' ];
-		// add product to cart block
-		await page.goto( `/shop/?add-to-cart=${ productId }` );
-		await page.waitForLoadState( 'networkidle' );
+
+		await addAProductToCart( page, productId );
 		await page.goto( cartBlockPageSlug );
+
 		await expect(
 			page.getByRole( 'heading', { name: cartBlockPageTitle } )
 		).toBeVisible();
@@ -196,14 +178,19 @@ test.describe( 'Cart Block Applying Coupons', () => {
 		}
 	} );
 
-	test( 'allows cart block to apply multiple coupons', async ( { page } ) => {
+	test( 'allows cart block to apply multiple coupons', async ( {
+		page,
+		context,
+	} ) => {
+		await context.clearCookies();
+
 		const totals = [ '$50.00', '$22.50', '$12.50' ];
 		const totalsReverse = [ '$17.50', '$45.00', '$55.00' ];
 		const discounts = [ '-$5.00', '-$32.50', '-$42.50' ];
-		// add product to cart block
-		await page.goto( `/shop/?add-to-cart=${ productId }` );
-		await page.waitForLoadState( 'networkidle' );
+
+		await addAProductToCart( page, productId );
 		await page.goto( cartBlockPageSlug );
+
 		await expect(
 			page.getByRole( 'heading', { name: cartBlockPageTitle } )
 		).toBeVisible();
@@ -248,11 +235,13 @@ test.describe( 'Cart Block Applying Coupons', () => {
 
 	test( 'prevents cart block applying same coupon twice', async ( {
 		page,
+		context,
 	} ) => {
-		// add product to cart block
-		await page.goto( `/shop/?add-to-cart=${ productId }` );
-		await page.waitForLoadState( 'networkidle' );
+		await context.clearCookies();
+
+		await addAProductToCart( page, productId );
 		await page.goto( cartBlockPageSlug );
+
 		await expect(
 			page.getByRole( 'heading', { name: cartBlockPageTitle } )
 		).toBeVisible();
@@ -286,11 +275,13 @@ test.describe( 'Cart Block Applying Coupons', () => {
 
 	test( 'prevents cart block applying coupon with usage limit', async ( {
 		page,
+		context,
 	} ) => {
-		// add product to cart block and go to cart
-		await page.goto( `/shop/?add-to-cart=${ productId }` );
-		await page.waitForLoadState( 'networkidle' );
+		await context.clearCookies();
+
+		await addAProductToCart( page, productId );
 		await page.goto( cartBlockPageSlug );
+
 		await expect(
 			page.getByRole( 'heading', { name: cartBlockPageTitle } )
 		).toBeVisible();

plugins/woocommerce/tests/e2e-pw/tests/shopper/cart-block.spec.js

@@ -1,6 +1,13 @@
 const { test, expect } = require( '@playwright/test' );
-const { disableWelcomeModal } = require( '../../utils/editor' );
+const {
+	goToPageEditor,
+	fillPageTitle,
+	insertBlockByShortcut,
+	publishPage,
+} = require( '../../utils/editor' );
+const { addAProductToCart } = require( '../../utils/cart' );
 const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
+const uuid = require( 'uuid' );
 
 const simpleProductName = 'Single Simple Product';
 const simpleProductDesc = 'Lorem ipsum dolor sit amet.';
@@ -14,7 +21,7 @@ const singleProductWithCrossSellProducts =
 	+firstCrossSellProductPrice +
 	+secondCrossSellProductPrice;
 
-const cartBlockPageTitle = `Cart Block ${ Date.now() }`;
+const cartBlockPageTitle = `Cart Block ${ uuid.v1() }`;
 const cartBlockPageSlug = cartBlockPageTitle
 	.replace( / /gi, '-' )
 	.toLowerCase();
@@ -85,31 +92,10 @@ test.describe( 'Cart Block page', () => {
 	test( 'can see empty cart, add and remove simple & cross sell product, increase to max quantity', async ( {
 		page,
 	} ) => {
-		// create a new page with cart block
-		await page.goto( 'wp-admin/post-new.php?post_type=page' );
-
-		await disableWelcomeModal( { page } );
-
-		await page
-			.getByRole( 'textbox', { name: 'Add title' } )
-			.fill( cartBlockPageTitle );
-		await page.getByRole( 'button', { name: 'Add default block' } ).click();
-		await page
-			.getByRole( 'document', {
-				name: 'Empty block; start writing or type forward slash to choose a block',
-			} )
-			.fill( '/cart' );
-		await page.keyboard.press( 'Enter' );
-		await page
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await page
-			.getByRole( 'region', { name: 'Editor publish' } )
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await expect(
-			page.getByText( `${ cartBlockPageTitle } is now live.` )
-		).toBeVisible();
+		await goToPageEditor( { page } );
+		await fillPageTitle( page, cartBlockPageTitle );
+		await insertBlockByShortcut( page, '/cart' );
+		await publishPage( page, cartBlockPageTitle );
 
 		// go to the page to test empty cart block
 		await page.goto( cartBlockPageSlug );
@@ -127,8 +113,7 @@ test.describe( 'Cart Block page', () => {
 			page.getByRole( 'heading', { name: 'Shop' } )
 		).toBeVisible();
 
-		// add product to cart block
-		await page.goto( `/shop/?add-to-cart=${ product1Id }` );
+		await addAProductToCart( page, product1Id );
 		await page.goto( cartBlockPageSlug );
 		await expect(
 			page.getByRole( 'heading', { name: cartBlockPageTitle } )

plugins/woocommerce/tests/e2e-pw/tests/shopper/cart-calculate-shipping.spec.js

@@ -1,3 +1,4 @@
+const { addAProductToCart } = require( '../../utils/cart' );
 const { test, expect } = require( '@playwright/test' );
 const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
 
@@ -97,10 +98,7 @@ test.describe( 'Cart Calculate Shipping', () => {
 	test.beforeEach( async ( { page, context } ) => {
 		// Shopping cart is very sensitive to cookies, so be explicit
 		await context.clearCookies();
-
-		// all tests use the first product
-		await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-		await page.waitForLoadState( 'networkidle' );
+		await addAProductToCart( page, firstProductId );
 	} );
 
 	test.afterAll( async ( { baseURL } ) => {
@@ -194,8 +192,7 @@ test.describe( 'Cart Calculate Shipping', () => {
 	test( 'should show correct total cart price with 2 products and flat rate', async ( {
 		page,
 	} ) => {
-		await page.goto( `/shop/?add-to-cart=${ secondProductId }` );
-		await page.waitForLoadState( 'networkidle' );
+		await addAProductToCart( page, secondProductId );
 
 		await page.goto( '/cart/' );
 		await page.locator( 'a.shipping-calculator-button' ).click();
@@ -215,8 +212,7 @@ test.describe( 'Cart Calculate Shipping', () => {
 	test( 'should show correct total cart price with 2 products without flat rate', async ( {
 		page,
 	} ) => {
-		await page.goto( `/shop/?add-to-cart=${ secondProductId }` );
-		await page.waitForLoadState( 'networkidle' );
+		await addAProductToCart( page, secondProductId );
 
 		// Set shipping country to Spain
 		await page.goto( '/cart/' );

plugins/woocommerce/tests/e2e-pw/tests/shopper/cart-checkout-block-calculate-tax.spec.js

@@ -1,18 +1,24 @@
 const { test, expect } = require( '@playwright/test' );
 const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
-const { admin } = require( '../../test-data/data' );
-const { disableWelcomeModal } = require( '../../utils/editor' );
+const {
+	goToPageEditor,
+	fillPageTitle,
+	insertBlockByShortcut,
+	publishPage,
+} = require( '../../utils/editor' );
+const { addAProductToCart } = require( '../../utils/cart' );
+const uuid = require( 'uuid' );
 
 const productName = 'First Product Cart Block Taxing';
 const productPrice = '100.00';
 const messyProductPrice = '13.47';
 const secondProductName = 'Second Product Cart Block Taxing';
 
-const cartBlockPageTitle = 'Cart Block';
+const cartBlockPageTitle = `Cart Block ${ uuid.v1() }`;
 const cartBlockPageSlug = cartBlockPageTitle
 	.replace( / /gi, '-' )
 	.toLowerCase();
-const checkoutBlockPageTitle = 'Checkout Block';
+const checkoutBlockPageTitle = `Checkout Block ${ uuid.v1() }`;
 const checkoutBlockPageSlug = checkoutBlockPageTitle
 	.replace( / /gi, '-' )
 	.toLowerCase();
@@ -99,60 +105,20 @@ test.describe( 'Shopper Cart & Checkout Block Tax Display', () => {
 		} );
 	} );
 
+	// eslint-disable-next-line playwright/expect-expect
 	test( 'can create Cart Block page', async ( { page } ) => {
-		// create a new page with cart block
-		await page.goto( 'wp-admin/post-new.php?post_type=page' );
-
-		await disableWelcomeModal( { page } );
-
-		await page
-			.getByRole( 'textbox', { name: 'Add title' } )
-			.fill( cartBlockPageTitle );
-		await page.getByRole( 'button', { name: 'Add default block' } ).click();
-		await page
-			.getByRole( 'document', {
-				name: 'Empty block; start writing or type forward slash to choose a block',
-			} )
-			.fill( '/cart' );
-		await page.keyboard.press( 'Enter' );
-		await page
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await page
-			.getByRole( 'region', { name: 'Editor publish' } )
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await expect(
-			page.getByText( `${ cartBlockPageTitle } is now live.` )
-		).toBeVisible();
+		await goToPageEditor( { page } );
+		await fillPageTitle( page, cartBlockPageTitle );
+		await insertBlockByShortcut( page, '/cart' );
+		await publishPage( page, cartBlockPageTitle );
 	} );
 
+	// eslint-disable-next-line playwright/expect-expect
 	test( 'can create Checkout Block page', async ( { page } ) => {
-		// create a new page with checkout block
-		await page.goto( 'wp-admin/post-new.php?post_type=page' );
-
-		await disableWelcomeModal( { page } );
-
-		await page
-			.getByRole( 'textbox', { name: 'Add title' } )
-			.fill( checkoutBlockPageTitle );
-		await page.getByRole( 'button', { name: 'Add default block' } ).click();
-		await page
-			.getByRole( 'document', {
-				name: 'Empty block; start writing or type forward slash to choose a block',
-			} )
-			.fill( '/checkout' );
-		await page.keyboard.press( 'Enter' );
-		await page
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await page
-			.getByRole( 'region', { name: 'Editor publish' } )
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await expect(
-			page.getByText( `${ checkoutBlockPageTitle } is now live.` )
-		).toBeVisible();
+		await goToPageEditor( { page } );
+		await fillPageTitle( page, checkoutBlockPageTitle );
+		await insertBlockByShortcut( page, '/checkout' );
+		await publishPage( page, checkoutBlockPageTitle );
 	} );
 
 	test( 'that inclusive tax is displayed properly in blockbased Cart & Checkout pages', async ( {
@@ -160,9 +126,9 @@ test.describe( 'Shopper Cart & Checkout Block Tax Display', () => {
 		context,
 	} ) => {
 		await context.clearCookies();
-		await page.goto( `/shop/?add-to-cart=${ productId }`, {
-			waitUntil: 'networkidle',
-		} );
+
+		await addAProductToCart( page, productId );
+
 		await test.step( 'Load cart page and confirm price display', async () => {
 			await page.goto( cartBlockPageSlug );
 			await expect(
@@ -218,9 +184,8 @@ test.describe( 'Shopper Cart & Checkout Block Tax Display', () => {
 		} );
 
 		await context.clearCookies();
-		await page.goto( `/shop/?add-to-cart=${ productId }`, {
-			waitUntil: 'networkidle',
-		} );
+		await addAProductToCart( page, productId );
+
 		await test.step( 'Load cart page and confirm price display', async () => {
 			await page.goto( cartBlockPageSlug );
 			await expect(
@@ -327,15 +292,9 @@ test.describe( 'Shopper Cart & Checkout Block Tax Rounding', () => {
 		await context.clearCookies();
 
 		// all tests use the same products
-		await page.goto( `/shop/?add-to-cart=${ productId }`, {
-			waitUntil: 'networkidle',
-		} );
-		await page.goto( `/shop/?add-to-cart=${ productId2 }`, {
-			waitUntil: 'networkidle',
-		} );
-		await page.goto( `/shop/?add-to-cart=${ productId2 }`, {
-			waitUntil: 'networkidle',
-		} );
+		await addAProductToCart( page, productId );
+		await addAProductToCart( page, productId2 );
+		await addAProductToCart( page, productId2 );
 	} );
 
 	test.afterAll( async ( { baseURL } ) => {
@@ -622,9 +581,7 @@ test.describe( 'Shopper Cart & Checkout Block Tax Levels', () => {
 		await context.clearCookies();
 
 		// all tests use the first product
-		await page.goto( `/shop/?add-to-cart=${ productId }`, {
-			waitUntil: 'networkidle',
-		} );
+		await addAProductToCart( page, productId );
 	} );
 
 	test.afterAll( async ( { baseURL } ) => {
@@ -894,9 +851,7 @@ test.describe( 'Shipping Cart & Checkout Block Tax', () => {
 		await context.clearCookies();
 
 		// all tests use the first product
-		await page.goto( `/shop/?add-to-cart=${ productId }`, {
-			waitUntil: 'networkidle',
-		} );
+		await addAProductToCart( page, productId );
 	} );
 
 	test.afterAll( async ( { baseURL } ) => {

plugins/woocommerce/tests/e2e-pw/tests/shopper/cart-checkout-calculate-tax.spec.js

@@ -1,11 +1,13 @@
 const { test, expect } = require( '@playwright/test' );
 const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
 const { customer } = require( '../../test-data/data' );
+const { addAProductToCart } = require( '../../utils/cart' );
+const uuid = require( 'uuid' );
 
-const productName = `Taxed products are awesome ${ Date.now() }`;
+const productName = `Taxed products are awesome ${ uuid.v1() }`;
 const productPrice = '200.00';
 const messyProductPrice = '13.47';
-const secondProductName = `Other products are also awesome ${ Date.now() }`;
+const secondProductName = `Other products are also awesome ${ uuid.v1() }`;
 
 let productId,
 	productId2,
@@ -92,11 +94,8 @@ test.describe.serial( 'Tax rates in the cart and checkout', () => {
 		test.beforeEach( async ( { page, context } ) => {
 			// Shopping cart is very sensitive to cookies, so be explicit
 			await context.clearCookies();
-
 			// all tests use the first product
-			await page.goto( `/shop/?add-to-cart=${ productId }`, {
-				waitUntil: 'networkidle',
-			} );
+			await addAProductToCart( page, productId );
 		} );
 
 		test.afterAll( async ( { baseURL } ) => {
@@ -378,16 +377,9 @@ test.describe.serial( 'Tax rates in the cart and checkout', () => {
 			// Shopping cart is very sensitive to cookies, so be explicit
 			await context.clearCookies();
 
-			// all tests use the first product
-			await page.goto( `/shop/?add-to-cart=${ productId }`, {
-				waitUntil: 'networkidle',
-			} );
-			await page.goto( `/shop/?add-to-cart=${ productId2 }`, {
-				waitUntil: 'networkidle',
-			} );
-			await page.goto( `/shop/?add-to-cart=${ productId2 }`, {
-				waitUntil: 'networkidle',
-			} );
+			await addAProductToCart( page, productId );
+			await addAProductToCart( page, productId2 );
+			await addAProductToCart( page, productId2 );
 		} );
 
 		test.afterAll( async ( { baseURL } ) => {
@@ -607,11 +599,8 @@ test.describe.serial( 'Tax rates in the cart and checkout', () => {
 		test.beforeEach( async ( { page, context } ) => {
 			// Shopping cart is very sensitive to cookies, so be explicit
 			await context.clearCookies();
-
 			// all tests use the first product
-			await page.goto( `/shop/?add-to-cart=${ productId }`, {
-				waitUntil: 'networkidle',
-			} );
+			await addAProductToCart( page, productId );
 		} );
 
 		test.afterAll( async ( { baseURL } ) => {
@@ -899,11 +888,8 @@ test.describe.serial( 'Tax rates in the cart and checkout', () => {
 		test.beforeEach( async ( { page, context } ) => {
 			// Shopping cart is very sensitive to cookies, so be explicit
 			await context.clearCookies();
-
 			// all tests use the first product
-			await page.goto( `/shop/?add-to-cart=${ productId }`, {
-				waitUntil: 'networkidle',
-			} );
+			await addAProductToCart( page, productId );
 		} );
 
 		test.afterAll( async ( { baseURL } ) => {

plugins/woocommerce/tests/e2e-pw/tests/shopper/cart-checkout-coupons.spec.js

@@ -1,3 +1,4 @@
+const { addAProductToCart } = require( '../../utils/cart' );
 const { test, expect } = require( '@playwright/test' );
 const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
 
@@ -64,7 +65,7 @@ test.describe( 'Cart & Checkout applying coupons', () => {
 			} );
 	} );
 
-	test.beforeEach( async ( { page, context } ) => {
+	test.beforeEach( async ( { context } ) => {
 		// Shopping cart is very sensitive to cookies, so be explicit
 		await context.clearCookies();
 	} );
@@ -91,8 +92,7 @@ test.describe( 'Cart & Checkout applying coupons', () => {
 			context,
 		} ) => {
 			await test.step( 'Load cart page and apply coupons', async () => {
-				await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-				await page.waitForLoadState( 'networkidle' );
+				await addAProductToCart( page, firstProductId );
 
 				await page.goto( '/cart/' );
 				await page.locator( '#coupon_code' ).fill( coupons[ i ].code );
@@ -116,10 +116,9 @@ test.describe( 'Cart & Checkout applying coupons', () => {
 			await context.clearCookies();
 
 			await test.step( 'Load checkout page and apply coupons', async () => {
-				await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-				await page.waitForLoadState( 'networkidle' );
+				await addAProductToCart( page, firstProductId );
 
-				await page.goto( '/checkout/', { waitUntil: 'networkidle' } );
+				await page.goto( '/checkout' );
 				await page
 					.locator( 'text=Click here to enter your code' )
 					.click();
@@ -144,8 +143,7 @@ test.describe( 'Cart & Checkout applying coupons', () => {
 		context,
 	} ) => {
 		await test.step( 'Load cart page and try applying same coupon twice', async () => {
-			await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-			await page.waitForLoadState( 'networkidle' );
+			await addAProductToCart( page, firstProductId );
 
 			await page.goto( '/cart/' );
 			await page.locator( '#coupon_code' ).fill( coupons[ 0 ].code );
@@ -154,12 +152,12 @@ test.describe( 'Cart & Checkout applying coupons', () => {
 			await expect(
 				page.getByText( 'Coupon code applied successfully.' )
 			).toBeVisible();
-			await page.waitForLoadState( 'networkidle' );
+
 			// try to apply the same coupon
 			await page.goto( '/cart/' );
 			await page.locator( '#coupon_code' ).fill( coupons[ 0 ].code );
 			await page.getByRole( 'button', { name: 'Apply coupon' } ).click();
-			await page.waitForLoadState( 'networkidle' );
+
 			// error received
 			await expect(
 				page.getByText( 'Coupon code already applied!' )
@@ -176,8 +174,7 @@ test.describe( 'Cart & Checkout applying coupons', () => {
 		await context.clearCookies();
 
 		await test.step( 'Load checkout page and try applying same coupon twice', async () => {
-			await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-			await page.waitForLoadState( 'networkidle' );
+			await addAProductToCart( page, firstProductId );
 
 			await page.goto( '/checkout/' );
 			await page.locator( 'text=Click here to enter your code' ).click();
@@ -207,8 +204,7 @@ test.describe( 'Cart & Checkout applying coupons', () => {
 
 	test( 'allows applying multiple coupons', async ( { page, context } ) => {
 		await test.step( 'Load cart page and try applying multiple coupons', async () => {
-			await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-			await page.waitForLoadState( 'networkidle' );
+			await addAProductToCart( page, firstProductId );
 
 			await page.goto( '/cart/' );
 			await page.locator( '#coupon_code' ).fill( coupons[ 0 ].code );
@@ -218,7 +214,9 @@ test.describe( 'Cart & Checkout applying coupons', () => {
 				page.getByText( 'Coupon code applied successfully.' )
 			).toBeVisible();
 
-			await page.waitForLoadState( 'networkidle' );
+			// If not waiting the next coupon is not applied correctly. This should be temporary, we need a better way to handle this.
+			await page.waitForTimeout( 2000 );
+
 			await page.locator( '#coupon_code' ).fill( coupons[ 2 ].code );
 			await page.getByRole( 'button', { name: 'Apply coupon' } ).click();
 			// successful
@@ -240,8 +238,7 @@ test.describe( 'Cart & Checkout applying coupons', () => {
 		await context.clearCookies();
 
 		await test.step( 'Load checkout page and try applying multiple coupons', async () => {
-			await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-			await page.waitForLoadState( 'networkidle' );
+			await addAProductToCart( page, firstProductId );
 
 			await page.goto( '/checkout/' );
 			await page.locator( 'text=Click here to enter your code' ).click();
@@ -251,6 +248,10 @@ test.describe( 'Cart & Checkout applying coupons', () => {
 			await expect(
 				page.getByText( 'Coupon code applied successfully.' )
 			).toBeVisible();
+
+			// If not waiting the next coupon is not applied correctly. This should be temporary, we need a better way to handle this.
+			await page.waitForTimeout( 2000 );
+
 			await page.locator( 'text=Click here to enter your code' ).click();
 			await page.locator( '#coupon_code' ).fill( coupons[ 2 ].code );
 			await page.locator( 'text=Apply coupon' ).click();
@@ -276,8 +277,7 @@ test.describe( 'Cart & Checkout applying coupons', () => {
 		context,
 	} ) => {
 		await test.step( 'Load cart page and try restoring total when removed coupons', async () => {
-			await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-			await page.waitForLoadState( 'networkidle' );
+			await addAProductToCart( page, firstProductId );
 
 			await page.goto( '/cart/' );
 			await page.locator( '#coupon_code' ).fill( coupons[ 0 ].code );
@@ -292,7 +292,6 @@ test.describe( 'Cart & Checkout applying coupons', () => {
 			).toContainText( totals[ 0 ] );
 
 			await page.locator( 'a.woocommerce-remove-coupon' ).click();
-			await page.waitForLoadState( 'networkidle' );
 
 			await expect(
 				page.locator( '.order-total .amount' )
@@ -302,8 +301,7 @@ test.describe( 'Cart & Checkout applying coupons', () => {
 		await context.clearCookies();
 
 		await test.step( 'Load checkout page and try restoring total when removed coupons', async () => {
-			await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-			await page.waitForLoadState( 'networkidle' );
+			await addAProductToCart( page, firstProductId );
 
 			await page.goto( '/checkout/' );
 			await page.locator( 'text=Click here to enter your code' ).click();

plugins/woocommerce/tests/e2e-pw/tests/shopper/cart-checkout-restricted-coupons.spec.js

@@ -1,5 +1,6 @@
 const { test, expect } = require( '@playwright/test' );
 const { getOrderIdFromUrl } = require( '../../utils/order' );
+const { addAProductToCart } = require( '../../utils/cart' );
 const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
 
 const includedProductName = 'Included test product';
@@ -185,8 +186,7 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 
 	test( 'expired coupon cannot be used', async ( { page, context } ) => {
 		await test.step( 'Load cart page and try expired coupon usage', async () => {
-			await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-			await page.waitForLoadState( 'networkidle' );
+			await addAProductToCart( page, firstProductId );
 
 			await page.goto( '/cart/' );
 			await page
@@ -201,8 +201,7 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 		await context.clearCookies();
 
 		await test.step( 'Load checkout page and try expired coupon usage', async () => {
-			await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-			await page.waitForLoadState( 'networkidle' );
+			await addAProductToCart( page, firstProductId );
 
 			await page.goto( '/checkout/' );
 			await page
@@ -223,8 +222,7 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 		context,
 	} ) => {
 		await test.step( 'Load cart page and try limited coupon usage', async () => {
-			await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-			await page.waitForLoadState( 'networkidle' );
+			await addAProductToCart( page, firstProductId );
 
 			await page.goto( '/cart/' );
 			await page
@@ -238,8 +236,7 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 
 			// add a couple more in order to hit minimum spend
 			for ( let i = 0; i < 2; i++ ) {
-				await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-				await page.waitForLoadState( 'networkidle' );
+				await addAProductToCart( page, firstProductId );
 			}
 			// passed because we're between 50 and 200 dollars
 			await page.goto( '/cart/' );
@@ -267,8 +264,7 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 		await context.clearCookies();
 
 		await test.step( 'Load checkout page and try limited coupon usage', async () => {
-			await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-			await page.waitForLoadState( 'networkidle' );
+			await addAProductToCart( page, firstProductId );
 
 			await page.goto( '/checkout/' );
 			await page
@@ -285,8 +281,7 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 
 			// add a couple more in order to hit minimum spend
 			for ( let i = 0; i < 2; i++ ) {
-				await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-				await page.waitForLoadState( 'networkidle' );
+				await addAProductToCart( page, firstProductId );
 			}
 			// passed because we're between 50 and 200 dollars
 			await page.goto( '/checkout/' );
@@ -320,8 +315,7 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 
 	test( 'coupon cannot be used on sale item', async ( { page, context } ) => {
 		await test.step( 'Load cart page and try coupon usage on sale item', async () => {
-			await page.goto( `/shop/?add-to-cart=${ secondProductId }` );
-			await page.waitForLoadState( 'networkidle' );
+			await addAProductToCart( page, secondProductId );
 
 			await page.goto( '/cart/' );
 			await page
@@ -339,8 +333,7 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 		await context.clearCookies();
 
 		await test.step( 'Load checkout page and try coupon usage on sale item', async () => {
-			await page.goto( `/shop/?add-to-cart=${ secondProductId }` );
-			await page.waitForLoadState( 'networkidle' );
+			await addAProductToCart( page, secondProductId );
 
 			await page.goto( '/checkout/' );
 			await page
@@ -400,8 +393,7 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 		}
 
 		await test.step( 'Load cart page and try over limit coupon usage', async () => {
-			await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-			await page.waitForLoadState( 'networkidle' );
+			await addAProductToCart( page, firstProductId );
 
 			await page.goto( '/cart/' );
 			await page
@@ -419,8 +411,7 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 		await context.clearCookies();
 
 		await test.step( 'Load checkout page and try over limit coupon usage', async () => {
-			await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-			await page.waitForLoadState( 'networkidle' );
+			await addAProductToCart( page, firstProductId );
 
 			await page.goto( '/checkout/' );
 			await page
@@ -448,8 +439,7 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 		context,
 	} ) => {
 		await test.step( 'Load cart page and try included certain items coupon usage', async () => {
-			await page.goto( `/shop/?add-to-cart=${ secondProductId }` );
-			await page.waitForLoadState( 'networkidle' );
+			await addAProductToCart( page, secondProductId );
 
 			await page.goto( '/cart/' );
 			await page
@@ -467,8 +457,7 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 		await context.clearCookies();
 
 		await test.step( 'Load checkout page and try included certain items coupon usage', async () => {
-			await page.goto( `/shop/?add-to-cart=${ secondProductId }` );
-			await page.waitForLoadState( 'networkidle' );
+			await addAProductToCart( page, secondProductId );
 
 			await page.goto( '/checkout/' );
 			await page
@@ -492,8 +481,7 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 		context,
 	} ) => {
 		await test.step( 'Load cart page and try on certain products coupon usage', async () => {
-			await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-			await page.waitForLoadState( 'networkidle' );
+			await addAProductToCart( page, firstProductId );
 
 			await page.goto( '/cart/' );
 			await page
@@ -509,8 +497,7 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 		await context.clearCookies();
 
 		await test.step( 'Load checkout page and try on certain products coupon usage', async () => {
-			await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-			await page.waitForLoadState( 'networkidle' );
+			await addAProductToCart( page, firstProductId );
 
 			await page.goto( '/checkout/' );
 			await page
@@ -532,8 +519,7 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 		context,
 	} ) => {
 		await test.step( 'Load cart page and try excluded items coupon usage', async () => {
-			await page.goto( `/shop/?add-to-cart=${ secondProductId }` );
-			await page.waitForLoadState( 'networkidle' );
+			await addAProductToCart( page, secondProductId );
 
 			await page.goto( '/cart/' );
 			await page
@@ -551,8 +537,7 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 		await context.clearCookies();
 
 		await test.step( 'Load checkout page and try excluded items coupon usage', async () => {
-			await page.goto( `/shop/?add-to-cart=${ secondProductId }` );
-			await page.waitForLoadState( 'networkidle' );
+			await addAProductToCart( page, secondProductId );
 
 			await page.goto( '/checkout/' );
 			await page
@@ -576,8 +561,7 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 		context,
 	} ) => {
 		await test.step( 'Load cart page and try coupon usage on other items', async () => {
-			await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-			await page.waitForLoadState( 'networkidle' );
+			await addAProductToCart( page, firstProductId );
 
 			await page.goto( '/cart/' );
 			await page
@@ -593,8 +577,7 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 		await context.clearCookies();
 
 		await test.step( 'Load checkout page and try coupon usage on other items', async () => {
-			await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-			await page.waitForLoadState( 'networkidle' );
+			await addAProductToCart( page, firstProductId );
 
 			await page.goto( '/checkout/' );
 			await page
@@ -614,8 +597,7 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 	test( 'coupon cannot be used by any customer on cart (email restricted)', async ( {
 		page,
 	} ) => {
-		await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-		await page.waitForLoadState( 'networkidle' );
+		await addAProductToCart( page, firstProductId );
 
 		await page.goto( '/cart/' );
 		await page.getByPlaceholder( 'Coupon code' ).fill( 'email-restricted' );
@@ -631,8 +613,7 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 	test( 'coupon cannot be used by any customer on checkout (email restricted)', async ( {
 		page,
 	} ) => {
-		await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-		await page.waitForLoadState( 'networkidle' );
+		await addAProductToCart( page, firstProductId );
 
 		await page.goto( '/checkout/' );
 
@@ -656,8 +637,6 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 		await page.getByPlaceholder( 'Coupon code' ).fill( 'email-restricted' );
 		await page.getByRole( 'button', { name: 'Apply coupon' } ).click();
 
-		await page.waitForLoadState( 'networkidle' );
-
 		await expect(
 			page.getByText(
 				'Please enter a valid email to use coupon code "email-restricted".'
@@ -676,8 +655,7 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 			version: 'wc/v3',
 		} );
 
-		await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-		await page.waitForLoadState( 'networkidle' );
+		await addAProductToCart( page, firstProductId );
 
 		await page.goto( '/checkout/' );
 
@@ -712,8 +690,7 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 		const newOrderId = getOrderIdFromUrl( page );
 
 		// try to order a second time, but should get an error
-		await page.goto( `/shop/?add-to-cart=${ firstProductId }` );
-		await page.waitForLoadState( 'networkidle' );
+		await addAProductToCart( page, firstProductId );
 
 		await page.goto( '/checkout/' );
 

plugins/woocommerce/tests/e2e-pw/tests/shopper/cart-redirection.spec.js

@@ -58,7 +58,6 @@ test.describe( 'Cart > Redirect to cart from shop', () => {
 		await page
 			.locator( `a[data-product_id='${ productId }'][href*=add-to-cart]` )
 			.click();
-		await page.waitForLoadState( 'networkidle' );
 
 		await expect( page ).toHaveURL( /.*\/cart/ );
 		await expect( page.locator( 'td.product-name' ) ).toContainText(
@@ -69,7 +68,6 @@ test.describe( 'Cart > Redirect to cart from shop', () => {
 	test( 'can redirect user to cart from detail page', async ( { page } ) => {
 		await page.goto( '/shop/' );
 		await page.locator( `text=${ productName }` ).click();
-		await page.waitForLoadState( 'networkidle' );
 
 		await page.getByRole( 'button', { name: 'Add to cart' } ).click();
 

plugins/woocommerce/tests/e2e-pw/tests/shopper/cart.spec.js

@@ -1,7 +1,7 @@
 const { test, expect } = require( '@playwright/test' );
 const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
 
-const productName = 'Cart product test';
+const productName = `Cart product test ${ Date.now() }`;
 const productPrice = '13.99';
 const twoProductPrice = +productPrice * 2;
 const fourProductPrice = +productPrice * 4;
@@ -72,8 +72,13 @@ test.describe( 'Cart page', () => {
 
 	async function goToShopPageAndAddProductToCart( page, prodName ) {
 		await page.goto( '/shop/?orderby=date' );
-		await page.getByLabel( `Add to cart: “${ prodName }”` ).click();
-		await page.waitForLoadState( 'networkidle' );
+		const responsePromise = page.waitForResponse(
+			'**/wp-json/wc/store/v1/batch?**'
+		);
+		await page
+			.getByLabel( `Add to cart: “${ prodName }”`, { exact: true } )
+			.click();
+		await responsePromise;
 	}
 
 	test( 'should display no item in the cart', async ( { page } ) => {
@@ -204,17 +209,22 @@ test.describe( 'Cart page', () => {
 		await expect( page.locator( '.cross-sells' ) ).toContainText(
 			'You may be interested in…'
 		);
+
 		await page
 			.getByLabel( `Add to cart: “${ productName } cross-sell 1”` )
 			.click();
+		await expect(
+			page.getByLabel( `Remove ${ productName } cross-sell 1 from cart` )
+		).toBeVisible();
 		await page
 			.getByLabel( `Add to cart: “${ productName } cross-sell 2”` )
 			.click();
-		await page.waitForLoadState( 'networkidle' );
+		await expect(
+			page.getByLabel( `Remove ${ productName } cross-sell 2 from cart` )
+		).toBeVisible();
 
 		// reload page and confirm added products
-		await page.reload();
-		await page.waitForLoadState( 'networkidle' );
+		await page.reload( { waitUntil: 'domcontentloaded' } );
 		await expect( page.locator( '.cross-sells' ) ).toBeHidden();
 		await expect( page.locator( '.order-total .amount' ) ).toContainText(
 			`$${ fourProductPrice }`

plugins/woocommerce/tests/e2e-pw/tests/shopper/checkout-block-coupons.spec.js

@@ -1,9 +1,15 @@
+const {
+	goToPageEditor,
+	fillPageTitle,
+	insertBlockByShortcut,
+	publishPage,
+} = require( '../../utils/editor' );
+const { addAProductToCart } = require( '../../utils/cart' );
 const { test, expect } = require( '@playwright/test' );
-const { admin } = require( '../../test-data/data' );
-const { disableWelcomeModal } = require( '../../utils/editor' );
 const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
+const uuid = require( 'uuid' );
 
-const simpleProductName = 'Checkout Coupons Product';
+const simpleProductName = `Checkout Coupons Product ${ uuid.v1() }`;
 const singleProductFullPrice = '110.00';
 const singleProductSalePrice = '55.00';
 const coupons = [
@@ -28,7 +34,7 @@ const customerBilling = {
 	email: 'john.doe.merchant.test@example.com',
 };
 
-const checkoutBlockPageTitle = 'Checkout Block';
+const checkoutBlockPageTitle = `Checkout Block ${ uuid.v1() }`;
 const checkoutBlockPageSlug = checkoutBlockPageTitle
 	.replace( / /gi, '-' )
 	.toLowerCase();
@@ -117,32 +123,12 @@ test.describe( 'Checkout Block Applying Coupons', () => {
 		} );
 	} );
 
+	// eslint-disable-next-line playwright/expect-expect
 	test( 'can create checkout block page', async ( { page } ) => {
-		// create a new page with checkout block
-		await page.goto( 'wp-admin/post-new.php?post_type=page' );
-
-		await disableWelcomeModal( { page } );
-
-		await page
-			.getByRole( 'textbox', { name: 'Add title' } )
-			.fill( checkoutBlockPageTitle );
-		await page.getByRole( 'button', { name: 'Add default block' } ).click();
-		await page
-			.getByRole( 'document', {
-				name: 'Empty block; start writing or type forward slash to choose a block',
-			} )
-			.fill( '/checkout' );
-		await page.keyboard.press( 'Enter' );
-		await page
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await page
-			.getByRole( 'region', { name: 'Editor publish' } )
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await expect(
-			page.getByText( `${ checkoutBlockPageTitle } is now live.` )
-		).toBeVisible();
+		await goToPageEditor( { page } );
+		await fillPageTitle( page, checkoutBlockPageTitle );
+		await insertBlockByShortcut( page, '/checkout' );
+		await publishPage( page, checkoutBlockPageTitle );
 	} );
 
 	test( 'allows checkout block to apply coupon of any type', async ( {
@@ -151,10 +137,10 @@ test.describe( 'Checkout Block Applying Coupons', () => {
 	} ) => {
 		await context.clearCookies();
 		const totals = [ '$50.00', '$27.50', '$45.00' ];
-		// add product to cart block and go to checkout
-		await page.goto( `/shop/?add-to-cart=${ productId }` );
-		await page.waitForLoadState( 'networkidle' );
+
+		await addAProductToCart( page, productId );
 		await page.goto( checkoutBlockPageSlug );
+
 		await expect(
 			page.getByRole( 'heading', { name: checkoutBlockPageTitle } )
 		).toBeVisible();
@@ -199,10 +185,10 @@ test.describe( 'Checkout Block Applying Coupons', () => {
 		const totals = [ '$50.00', '$22.50', '$12.50' ];
 		const totalsReverse = [ '$17.50', '$45.00', '$55.00' ];
 		const discounts = [ '-$5.00', '-$32.50', '-$42.50' ];
-		// add product to cart block and go to checkout
-		await page.goto( `/shop/?add-to-cart=${ productId }` );
-		await page.waitForLoadState( 'networkidle' );
+
+		await addAProductToCart( page, productId );
 		await page.goto( checkoutBlockPageSlug );
+
 		await expect(
 			page.getByRole( 'heading', { name: checkoutBlockPageTitle } )
 		).toBeVisible();
@@ -250,10 +236,10 @@ test.describe( 'Checkout Block Applying Coupons', () => {
 		context,
 	} ) => {
 		await context.clearCookies();
-		// add product to cart block and go to checkout
-		await page.goto( `/shop/?add-to-cart=${ productId }` );
-		await page.waitForLoadState( 'networkidle' );
+
+		await addAProductToCart( page, productId );
 		await page.goto( checkoutBlockPageSlug );
+
 		await expect(
 			page.getByRole( 'heading', { name: checkoutBlockPageTitle } )
 		).toBeVisible();
@@ -290,10 +276,10 @@ test.describe( 'Checkout Block Applying Coupons', () => {
 		context,
 	} ) => {
 		await context.clearCookies();
-		// add product to cart block and go to checkout
-		await page.goto( `/shop/?add-to-cart=${ productId }` );
-		await page.waitForLoadState( 'networkidle' );
+
+		await addAProductToCart( page, productId );
 		await page.goto( checkoutBlockPageSlug );
+
 		await expect(
 			page.getByRole( 'heading', { name: checkoutBlockPageTitle } )
 		).toBeVisible();

plugins/woocommerce/tests/e2e-pw/tests/shopper/checkout-block.spec.js

@@ -2,13 +2,21 @@ const { test, expect } = require( '@playwright/test' );
 const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
 const { admin, customer } = require( '../../test-data/data' );
 const { setFilterValue, clearFilters } = require( '../../utils/filters' );
-const { addProductsToCart } = require( '../../utils/pdp' );
+const {
+	addProductsToCart: pdpAddProductsToCart,
+} = require( '../../utils/pdp' );
+const { addAProductToCart } = require( '../../utils/cart' );
 const {
 	fillShippingCheckoutBlocks,
 	fillBillingCheckoutBlocks,
 } = require( '../../utils/checkout' );
 const { getOrderIdFromUrl } = require( '../../utils/order' );
-const { disableWelcomeModal } = require( '../../utils/editor' );
+const {
+	goToPageEditor,
+	fillPageTitle,
+	insertBlockByShortcut,
+	publishPage,
+} = require( '../../utils/editor' );
 
 const guestEmail = 'checkout-guest@example.com';
 const newAccountEmail = 'marge-test-account@example.com';
@@ -20,7 +28,7 @@ const singleProductSalePrice = '75.00';
 const twoProductPrice = ( singleProductSalePrice * 2 ).toString();
 const threeProductPrice = ( singleProductSalePrice * 3 ).toString();
 
-const checkoutBlockPageTitle = 'Checkout Block';
+const checkoutBlockPageTitle = `Checkout Block ${ Date.now() }`;
 const checkoutBlockPageSlug = checkoutBlockPageTitle
 	.replace( / /gi, '-' )
 	.toLowerCase();
@@ -33,6 +41,8 @@ let guestOrderId1,
 	shippingZoneId;
 
 test.describe( 'Checkout Block page', () => {
+	test.use( { storageState: process.env.ADMINSTATE } );
+
 	test.beforeAll( async ( { baseURL } ) => {
 		const api = new wcApi( {
 			url: baseURL,
@@ -205,40 +215,12 @@ test.describe( 'Checkout Block page', () => {
 		} );
 	} );
 
-	test.beforeEach( async ( { context } ) => {
-		// Shopping cart is very sensitive to cookies, so be explicit
-		await context.clearCookies();
-	} );
-
 	test( 'can see empty checkout block page', async ( { page } ) => {
 		// create a new page with checkout block
-		await page.goto( 'wp-admin/post-new.php?post_type=page' );
-		await page.locator( 'input[name="log"]' ).fill( admin.username );
-		await page.locator( 'input[name="pwd"]' ).fill( admin.password );
-		await page.locator( 'text=Log In' ).click();
-
-		await disableWelcomeModal( { page } );
-
-		await page
-			.getByRole( 'textbox', { name: 'Add title' } )
-			.fill( checkoutBlockPageTitle );
-		await page.getByRole( 'button', { name: 'Add default block' } ).click();
-		await page
-			.getByRole( 'document', {
-				name: 'Empty block; start writing or type forward slash to choose a block',
-			} )
-			.fill( '/checkout' );
-		await page.keyboard.press( 'Enter' );
-		await page
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await page
-			.getByRole( 'region', { name: 'Editor publish' } )
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await expect(
-			page.getByText( `${ checkoutBlockPageTitle } is now live.` )
-		).toBeVisible();
+		await goToPageEditor( { page } );
+		await fillPageTitle( page, checkoutBlockPageTitle );
+		await insertBlockByShortcut( page, '/checkout' );
+		await publishPage( page, checkoutBlockPageTitle );
 
 		// go to the page to test empty cart block
 		await page.goto( checkoutBlockPageSlug );
@@ -259,9 +241,12 @@ test.describe( 'Checkout Block page', () => {
 
 	test( 'allows customer to choose available payment methods', async ( {
 		page,
+		context,
 	} ) => {
+		await context.clearCookies();
+
 		// this time we're going to add two products to the cart
-		await addProductsToCart( page, simpleProductName, '2' );
+		await pdpAddProductsToCart( page, simpleProductName, '2' );
 
 		await page.goto( checkoutBlockPageSlug );
 		await expect(
@@ -290,9 +275,14 @@ test.describe( 'Checkout Block page', () => {
 		await expect( page.getByLabel( 'Cash on delivery' ) ).toBeChecked();
 	} );
 
-	test( 'allows customer to fill shipping details', async ( { page } ) => {
+	test( 'allows customer to fill shipping details', async ( {
+		page,
+		context,
+	} ) => {
+		await context.clearCookies();
+
 		// this time we're going to add three products to the cart
-		await addProductsToCart( page, simpleProductName, '3' );
+		await pdpAddProductsToCart( page, simpleProductName, '3' );
 
 		await page.goto( checkoutBlockPageSlug );
 		await expect(
@@ -330,16 +320,22 @@ test.describe( 'Checkout Block page', () => {
 
 	test( 'allows customer to fill different shipping and billing details', async ( {
 		page,
+		context,
 	} ) => {
-		await page.goto( `/shop/?add-to-cart=${ productId }`, {
-			waitUntil: 'networkidle', // eslint-disable-line playwright/no-networkidle
-		} );
+		await context.clearCookies();
+
+		await addAProductToCart( page, productId );
 		await page.goto( checkoutBlockPageSlug );
 		await expect(
 			page.getByRole( 'heading', { name: checkoutBlockPageTitle } )
 		).toBeVisible();
 
+		// For flakiness, sometimes the email address is not filled
+		await page.getByLabel( 'Email address' ).click();
 		await page.getByLabel( 'Email address' ).fill( guestEmail );
+		await expect( page.getByLabel( 'Email address' ) ).toHaveValue(
+			guestEmail
+		);
 
 		// fill shipping address
 		await fillShippingCheckoutBlocks( page );
@@ -366,10 +362,7 @@ test.describe( 'Checkout Block page', () => {
 		// get order ID from the page
 		guestOrderId2 = getOrderIdFromUrl( page );
 
-		// go again to the checkout to verify details
-		await page.goto( `/shop/?add-to-cart=${ productId }`, {
-			waitUntil: 'networkidle', // eslint-disable-line playwright/no-networkidle
-		} );
+		await addAProductToCart( page, productId );
 		await page.goto( checkoutBlockPageSlug );
 		await expect(
 			page.getByRole( 'heading', { name: checkoutBlockPageTitle } )
@@ -438,16 +431,22 @@ test.describe( 'Checkout Block page', () => {
 
 	test( 'allows customer to fill shipping details and toggle different billing', async ( {
 		page,
+		context,
 	} ) => {
-		await page.goto( `/shop/?add-to-cart=${ productId }`, {
-			waitUntil: 'networkidle', // eslint-disable-line playwright/no-networkidle
-		} );
+		await context.clearCookies();
+
+		await addAProductToCart( page, productId );
 		await page.goto( checkoutBlockPageSlug );
 		await expect(
 			page.getByRole( 'heading', { name: checkoutBlockPageTitle } )
 		).toBeVisible();
 
+		// For flakiness, sometimes the email address is not filled
+		await page.getByLabel( 'Email address' ).click();
 		await page.getByLabel( 'Email address' ).fill( customer.email );
+		await expect( page.getByLabel( 'Email address' ) ).toHaveValue(
+			customer.email
+		);
 
 		// fill shipping address and check the toggle to use a different address for billing
 		await fillShippingCheckoutBlocks( page );
@@ -465,16 +464,22 @@ test.describe( 'Checkout Block page', () => {
 
 	test( 'can choose different shipping types in the checkout', async ( {
 		page,
+		context,
 	} ) => {
-		await page.goto( `/shop/?add-to-cart=${ productId }`, {
-			waitUntil: 'networkidle', // eslint-disable-line playwright/no-networkidle
-		} );
+		await context.clearCookies();
+
+		await addAProductToCart( page, productId );
 		await page.goto( checkoutBlockPageSlug );
 		await expect(
 			page.getByRole( 'heading', { name: checkoutBlockPageTitle } )
 		).toBeVisible();
 
+		// For flakiness, sometimes the email address is not filled
+		await page.getByLabel( 'Email address' ).click();
 		await page.getByLabel( 'Email address' ).fill( customer.email );
+		await expect( page.getByLabel( 'Email address' ) ).toHaveValue(
+			customer.email
+		);
 
 		// fill shipping address
 		await fillShippingCheckoutBlocks( page );
@@ -540,15 +545,25 @@ test.describe( 'Checkout Block page', () => {
 		).toContainText( twoProductPrice );
 	} );
 
-	test( 'allows guest customer to place an order', async ( { page } ) => {
-		await addProductsToCart( page, simpleProductName, '2' );
+	test( 'allows guest customer to place an order', async ( {
+		page,
+		context,
+	} ) => {
+		await context.clearCookies();
+
+		await pdpAddProductsToCart( page, simpleProductName, '2' );
 
 		await page.goto( checkoutBlockPageSlug );
 		await expect(
 			page.getByRole( 'heading', { name: checkoutBlockPageTitle } )
 		).toBeVisible();
 
+		// For flakiness, sometimes the email address is not filled
+		await page.getByLabel( 'Email address' ).click();
 		await page.getByLabel( 'Email address' ).fill( guestEmail );
+		await expect( page.getByLabel( 'Email address' ) ).toHaveValue(
+			guestEmail
+		);
 
 		// fill shipping address and check cash on delivery method
 		await fillShippingCheckoutBlocks( page );
@@ -611,7 +626,12 @@ test.describe( 'Checkout Block page', () => {
 		).toBeVisible();
 
 		// However if they supply the *correct* billing email address, they should see the order received page again.
+		// For flakiness, sometimes the email address is not filled
+		await page.getByLabel( 'Email address' ).click();
 		await page.getByLabel( 'Email address' ).fill( guestEmail );
+		await expect( page.getByLabel( 'Email address' ) ).toHaveValue(
+			guestEmail
+		);
 		await page.getByRole( 'button', { name: /Verify|Confirm/ } ).click();
 		await expect(
 			page.getByText( 'Your order has been received' )
@@ -647,8 +667,13 @@ test.describe( 'Checkout Block page', () => {
 		await clearFilters( page );
 	} );
 
-	test( 'allows existing customer to place an order', async ( { page } ) => {
-		await addProductsToCart( page, simpleProductName, '2' );
+	test( 'allows existing customer to place an order', async ( {
+		page,
+		context,
+	} ) => {
+		await context.clearCookies();
+
+		await pdpAddProductsToCart( page, simpleProductName, '2' );
 
 		await page.goto( checkoutBlockPageSlug );
 		await expect(
@@ -657,7 +682,6 @@ test.describe( 'Checkout Block page', () => {
 
 		// click to log in and make sure you are on the same page after logging in
 		await page.locator( 'text=Log in.' ).click();
-		await page.waitForLoadState( 'networkidle' ); // eslint-disable-line playwright/no-networkidle
 		await page
 			.locator( 'input[name="username"]' )
 			.fill( customer.username );
@@ -665,7 +689,6 @@ test.describe( 'Checkout Block page', () => {
 			.locator( 'input[name="password"]' )
 			.fill( customer.password );
 		await page.locator( 'text=Log in' ).click();
-		await page.waitForLoadState( 'networkidle' ); // eslint-disable-line playwright/no-networkidle
 		await expect(
 			page.getByRole( 'heading', { name: checkoutBlockPageTitle } )
 		).toBeVisible();
@@ -748,10 +771,13 @@ test.describe( 'Checkout Block page', () => {
 		);
 	} );
 
-	test( 'can create an account during checkout', async ( { page } ) => {
-		await page.goto( `/shop/?add-to-cart=${ productId }`, {
-			waitUntil: 'networkidle', // eslint-disable-line playwright/no-networkidle
-		} );
+	test( 'can create an account during checkout', async ( {
+		page,
+		context,
+	} ) => {
+		await context.clearCookies();
+
+		await addAProductToCart( page, productId );
 		await page.goto( checkoutBlockPageSlug );
 		await expect(
 			page.getByRole( 'heading', { name: checkoutBlockPageTitle } )
@@ -762,7 +788,12 @@ test.describe( 'Checkout Block page', () => {
 		await page.getByLabel( 'Create an account?' ).check();
 		await expect( page.getByLabel( 'Create an account?' ) ).toBeChecked();
 
+		// For flakiness, sometimes the email address is not filled
+		await page.getByLabel( 'Email address' ).click();
 		await page.getByLabel( 'Email address' ).fill( newAccountEmail );
+		await expect( page.getByLabel( 'Email address' ) ).toHaveValue(
+			newAccountEmail
+		);
 
 		// fill shipping address and check cash on delivery method
 		await fillShippingCheckoutBlocks( page, 'Marge' );
@@ -798,7 +829,6 @@ test.describe( 'Checkout Block page', () => {
 
 		// sign in as admin to confirm account creation
 		await page.goto( 'wp-admin/users.php' );
-		await page.waitForLoadState( 'networkidle' ); // eslint-disable-line playwright/no-networkidle
 		await page.locator( 'input[name="log"]' ).fill( admin.username );
 		await page.locator( 'input[name="pwd"]' ).fill( admin.password );
 		await page.locator( 'text=Log in' ).click();

plugins/woocommerce/tests/e2e-pw/tests/shopper/mini-cart.spec.js

@@ -1,8 +1,9 @@
 const { test, expect } = require( '@playwright/test' );
 const { disableWelcomeModal } = require( '../../utils/editor' );
 const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
+const uuid = require( 'uuid' );
 
-const miniCartPageTitle = `Mini Cart ${ Date.now() }`;
+const miniCartPageTitle = `Mini Cart ${ uuid.v1() }`;
 const miniCartPageSlug = miniCartPageTitle.replace( / /gi, '-' ).toLowerCase();
 const miniCartButton = 'main .wc-block-mini-cart__button';
 const miniCartBadge = 'main .wc-block-mini-cart__badge';

plugins/woocommerce/tests/e2e-pw/tests/shopper/shop-products-filter-by-price.spec.js

@@ -1,6 +1,13 @@
 const { test, expect } = require( '@playwright/test' );
-const { disableWelcomeModal } = require( '../../utils/editor' );
+const {
+	goToPageEditor,
+	fillPageTitle,
+	insertBlock,
+	insertBlockByShortcut,
+	publishPage,
+} = require( '../../utils/editor' );
 const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
+const uuid = require( 'uuid' );
 
 const singleProductPrice1 = '10';
 const singleProductPrice2 = '50';
@@ -8,7 +15,7 @@ const singleProductPrice3 = '200';
 
 const simpleProductName = 'AAA Filter Products';
 
-const productsFilteringPageTitle = `Products Filtering ${ Date.now() }`;
+const productsFilteringPageTitle = `Products Filtering ${ uuid.v1() }`;
 const productsFilteringPageSlug = productsFilteringPageTitle
 	.replace( / /gi, '-' )
 	.toLowerCase();
@@ -72,45 +79,11 @@ test.describe( 'Filter items in the shop by product price', () => {
 	} ) => {
 		const sortingProductsDropdown = '.wc-block-sort-select__select';
 
-		// go to create a new page with filtering products by price
-		await page.goto( 'wp-admin/post-new.php?post_type=page' );
-
-		await disableWelcomeModal( { page } );
-
-		await page
-			.getByRole( 'textbox', { name: 'Add title' } )
-			.fill( productsFilteringPageTitle );
-		await page.getByRole( 'button', { name: 'Add default block' } ).click();
-		await page
-			.getByRole( 'document', {
-				name: 'Empty block; start writing or type forward slash to choose a block',
-			} )
-			.fill( '/filter' );
-		await page
-			.getByRole( 'option' )
-			.filter( { hasText: 'Filter by Price' } )
-			.click();
-
-		await page.getByRole( 'textbox', { name: 'Add title' } ).click();
-		await page.getByLabel( 'Add block' ).click();
-		await page
-			.getByPlaceholder( 'Search', { exact: true } )
-			.fill( 'products' );
-		await page
-			.getByRole( 'option' )
-			.filter( { hasText: 'All Products' } )
-			.click();
-
-		await page
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await page
-			.getByRole( 'region', { name: 'Editor publish' } )
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await expect(
-			page.getByText( `${ productsFilteringPageTitle } is now live.` )
-		).toBeVisible();
+		await goToPageEditor( { page } );
+		await fillPageTitle( page, productsFilteringPageTitle );
+		await insertBlockByShortcut( page, '/filter' );
+		await insertBlock( page, 'All Products' );
+		await publishPage( page, productsFilteringPageTitle );
 
 		// go to the page to test filtering products by price
 		await page.goto( productsFilteringPageSlug );

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

@@ -0,0 +1,11 @@
+const addAProductToCart = async ( page, productId ) => {
+	const responsePromise = page.waitForResponse(
+		'**/wp-json/wc/store/v1/cart?**'
+	);
+	await page.goto( `/shop/?add-to-cart=${ productId }` );
+	await responsePromise;
+};
+
+module.exports = {
+	addAProductToCart,
+};

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

@@ -32,13 +32,11 @@ const getCanvas = async ( page ) => {
 
 const goToPageEditor = async ( { page } ) => {
 	await page.goto( 'wp-admin/post-new.php?post_type=page' );
-
 	await disableWelcomeModal( { page } );
 };
 
 const goToPostEditor = async ( { page } ) => {
 	await page.goto( 'wp-admin/post-new.php' );
-
 	await disableWelcomeModal( { page } );
 };
 
@@ -57,6 +55,17 @@ const insertBlock = async ( page, blockName ) => {
 	await page.getByRole( 'option', { name: blockName, exact: true } ).click();
 };
 
+const insertBlockByShortcut = async ( page, blockShortcut ) => {
+	const canvas = await getCanvas( page );
+	await canvas.getByRole( 'button', { name: 'Add default block' } ).click();
+	await canvas
+		.getByRole( 'document', {
+			name: 'Empty block; start writing or type forward slash to choose a block',
+		} )
+		.fill( blockShortcut );
+	await page.keyboard.press( 'Enter' );
+};
+
 const transformIntoBlocks = async ( page ) => {
 	const canvas = await getCanvas( page );
 
@@ -75,6 +84,17 @@ const transformIntoBlocks = async ( page ) => {
 	);
 };
 
+const publishPage = async ( page, pageTitle ) => {
+	await page.getByRole( 'button', { name: 'Publish', exact: true } ).click();
+	await page
+		.getByRole( 'region', { name: 'Editor publish' } )
+		.getByRole( 'button', { name: 'Publish', exact: true } )
+		.click();
+	await expect(
+		page.getByText( `${ pageTitle } is now live.` )
+	).toBeVisible();
+};
+
 module.exports = {
 	closeWelcomeModal,
 	goToPageEditor,
@@ -83,5 +103,7 @@ module.exports = {
 	getCanvas,
 	fillPageTitle,
 	insertBlock,
+	insertBlockByShortcut,
 	transformIntoBlocks,
+	publishPage,
 };

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

@@ -4,6 +4,7 @@ const variableProducts = require( './variable-products' );
 const features = require( './features' );
 const tours = require( './tours' );
 const login = require( './login' );
+const editor = require( './editor' );
 
 module.exports = {
 	api,
@@ -12,4 +13,5 @@ module.exports = {
 	features,
 	tours,
 	login,
+	editor,
 };