A number of fixes for some of the top flaky e2e tests (#46494)

Co-authored-by: Jon Lane <jon.lane@automattic.com>

plugins/woocommerce/changelog/fix-flaky-test-fixes

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Fix a few flaky e2e tests

plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/linked-product-tab-product-block-editor.spec.js

@@ -90,12 +90,9 @@ test.describe( 'General tab', () => {
 						) && response.status() === 200
 			);
 
-			await page.waitForFunction(
+			await expect(
-				( [ selector, expectedCount ] ) =>
+				page.getByRole( 'row', { name: 'Product name' } )
-					document.querySelectorAll( selector ).length ===
+			).toHaveCount( 4 );
-					expectedCount,
-				[ '.woocommerce-product-list div[role="row"]', 4 ]
-			);
 
 			const upsellsRows = page.locator(
 				'div.woocommerce-product-list div[role="table"] div[role="rowgroup"] div[role="row"]'

plugins/woocommerce/tests/e2e-pw/tests/shopper/account-email-receiving.spec.js

@@ -44,6 +44,8 @@ test.describe( 'Shopper Account Email Receiving', () => {
 		// create a new customer
 		await page.goto( 'wp-admin/user-new.php' );
 
+		await page.waitForLoadState( 'networkidle' );
+
 		await page.getByLabel( ' Username (required) ' ).fill( username );
 		await page.getByLabel( ' Email (required) ' ).fill( email );
 		await page.getByLabel( ' First Name ' ).fill( 'New' );
@@ -86,6 +88,8 @@ test.describe( 'Shopper Account Email Receiving', () => {
 		// create a new customer
 		await page.goto( 'wp-admin/user-new.php' );
 
+		await page.waitForLoadState( 'networkidle' );
+
 		await page.getByLabel( ' Username (required) ' ).fill( username );
 		await page.getByLabel( ' Email (required) ' ).fill( email );
 		await page.getByLabel( ' First Name ' ).fill( 'New' );

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

@@ -22,6 +22,7 @@ const shippingZoneNamePT = 'Portugal Flat Local';
 const shippingCountryPT = 'PT';
 
 test.describe( 'Cart Block Calculate Shipping', () => {
+	test.use( { storageState: process.env.ADMINSTATE } );
 	let product1Id, product2Id, shippingZoneNLId, shippingZonePTId;
 
 	test.beforeAll( async ( { baseURL } ) => {
@@ -130,21 +131,9 @@ test.describe( 'Cart Block 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=${ product1Id }` );
-		await page.waitForLoadState( 'networkidle' );
-	} );
-
 	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 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 } );
 
@@ -172,7 +161,13 @@ test.describe( 'Cart Block Calculate Shipping', () => {
 
 	test( 'allows customer to calculate Free Shipping in cart block if in Netherlands', async ( {
 		page,
+		context,
 	} ) => {
+		await context.clearCookies();
+
+		await page.goto( `/shop/?add-to-cart=${ product1Id }` );
+		await page.waitForLoadState( 'networkidle' );
+
 		await page.goto( cartBlockPageSlug );
 
 		// Set shipping country to Netherlands
@@ -204,7 +199,13 @@ test.describe( 'Cart Block Calculate Shipping', () => {
 
 	test( 'allows customer to calculate Flat rate and Local pickup in cart block if in Portugal', async ( {
 		page,
+		context,
 	} ) => {
+		await context.clearCookies();
+
+		await page.goto( `/shop/?add-to-cart=${ product1Id }` );
+		await page.waitForLoadState( 'networkidle' );
+
 		await page.goto( cartBlockPageSlug );
 
 		// Set shipping country to Portugal
@@ -259,7 +260,13 @@ test.describe( 'Cart Block Calculate Shipping', () => {
 
 	test( 'should show correct total cart block price after updating quantity', async ( {
 		page,
+		context,
 	} ) => {
+		await context.clearCookies();
+
+		await page.goto( `/shop/?add-to-cart=${ product1Id }` );
+		await page.waitForLoadState( 'networkidle' );
+
 		await page.goto( cartBlockPageSlug );
 
 		// Set shipping country to Portugal
@@ -295,7 +302,13 @@ test.describe( 'Cart Block Calculate Shipping', () => {
 
 	test( 'should show correct total cart block price with 2 different products and flat rate/local pickup', async ( {
 		page,
+		context,
 	} ) => {
+		await context.clearCookies();
+
+		await page.goto( `/shop/?add-to-cart=${ product1Id }` );
+		await page.waitForLoadState( 'networkidle' );
+
 		await page.goto( `/shop/?add-to-cart=${ product2Id }` );
 		await page.waitForLoadState( 'networkidle' );
 

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

@@ -31,6 +31,7 @@ let productId,
 	shippingMethodId;
 
 test.describe( 'Shopper Cart & Checkout Block Tax Display', () => {
+	test.use( { storageState: process.env.ADMINSTATE } );
 	test.beforeAll( async ( { baseURL } ) => {
 		const api = new wcApi( {
 			url: baseURL,
@@ -47,6 +48,9 @@ test.describe( 'Shopper Cart & Checkout Block Tax Display', () => {
 		await api.put( 'settings/tax/woocommerce_tax_total_display', {
 			value: 'itemized',
 		} );
+		await api.put( 'settings/tax/woocommerce_tax_display_cart', {
+			value: 'incl',
+		} );
 		await api
 			.post( 'products', {
 				name: productName,
@@ -71,16 +75,6 @@ test.describe( 'Shopper Cart & Checkout Block Tax Display', () => {
 			} );
 	} );
 
-	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',
-		} );
-	} );
-
 	test.afterAll( async ( { baseURL } ) => {
 		const api = new wcApi( {
 			url: baseURL,
@@ -108,9 +102,6 @@ test.describe( 'Shopper Cart & Checkout Block Tax Display', () => {
 	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 } );
 
@@ -139,9 +130,6 @@ test.describe( 'Shopper Cart & Checkout Block Tax Display', () => {
 	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 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 } );
 
@@ -169,7 +157,12 @@ test.describe( 'Shopper Cart & Checkout Block Tax Display', () => {
 
 	test( 'that inclusive tax is displayed properly in blockbased Cart & Checkout pages', async ( {
 		page,
+		context,
 	} ) => {
+		await context.clearCookies();
+		await page.goto( `/shop/?add-to-cart=${ productId }`, {
+			waitUntil: 'networkidle',
+		} );
 		await test.step( 'Load cart page and confirm price display', async () => {
 			await page.goto( cartBlockPageSlug );
 			await expect(
@@ -212,6 +205,7 @@ test.describe( 'Shopper Cart & Checkout Block Tax Display', () => {
 	test( 'that exclusive tax is displayed properly in blockbased Cart & Checkout pages', async ( {
 		page,
 		baseURL,
+		context,
 	} ) => {
 		const api = new wcApi( {
 			url: baseURL,
@@ -223,6 +217,10 @@ test.describe( 'Shopper Cart & Checkout Block Tax Display', () => {
 			value: 'excl',
 		} );
 
+		await context.clearCookies();
+		await page.goto( `/shop/?add-to-cart=${ productId }`, {
+			waitUntil: 'networkidle',
+		} );
 		await test.step( 'Load cart page and confirm price display', async () => {
 			await page.goto( cartBlockPageSlug );
 			await expect(

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

@@ -36,6 +36,7 @@ const checkoutBlockPageSlug = checkoutBlockPageTitle
 let productId, orderId, limitedCouponId;
 
 test.describe( 'Checkout Block Applying Coupons', () => {
+	test.use( { storageState: process.env.ADMINSTATE } );
 	const couponBatchId = [];
 
 	test.beforeAll( async ( { baseURL } ) => {
@@ -116,17 +117,9 @@ test.describe( 'Checkout Block Applying Coupons', () => {
 		} );
 	} );
 
-	test.beforeEach( async ( { context } ) => {
-		// Shopping cart is very sensitive to cookies, so be explicit
-		await context.clearCookies();
-	} );
-
 	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 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 } );
 
@@ -154,7 +147,9 @@ test.describe( 'Checkout Block Applying Coupons', () => {
 
 	test( 'allows checkout 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 and go to checkout
 		await page.goto( `/shop/?add-to-cart=${ productId }` );
@@ -198,7 +193,9 @@ test.describe( 'Checkout Block Applying Coupons', () => {
 
 	test( 'allows checkout 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' ];
@@ -250,7 +247,9 @@ test.describe( 'Checkout Block Applying Coupons', () => {
 
 	test( 'prevents checkout block applying same coupon twice', async ( {
 		page,
+		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' );
@@ -288,7 +287,9 @@ test.describe( 'Checkout Block Applying Coupons', () => {
 
 	test( 'prevents checkout block applying coupon with usage limit', async ( {
 		page,
+		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' );