Improve flaky e2e tests (#44208)

* Fix flaky guest checkout tests

* Removed a couple of extra assertions (not needed)

* Enable payment gateway

* Add changelog

---------

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

plugins/woocommerce/changelog/fix-improve-flaky-e2e-tests

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

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

@@ -22,6 +22,10 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 		await api.put( 'settings/general/woocommerce_currency', {
 			value: 'USD',
 		} );
+		// enable COD
+		await api.put( 'payment_gateways/cod', {
+			enabled: true,
+		} );
 		// add categories
 		await api
 			.post( 'products/categories', {
@@ -154,6 +158,10 @@ test.describe( 'Cart & Checkout Restricted Coupons', () => {
 			force: true,
 		} );
 		await api.post( 'coupons/batch', { delete: [ ...couponBatchId ] } );
+
+		await api.put( 'payment_gateways/cod', {
+			enabled: false,
+		} );
 	} );
 
 	test( 'expired coupon cannot be used', async ( { page, context } ) => {

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

@@ -298,12 +298,15 @@ test.describe( 'Checkout page', () => {
 	} );
 
 	test( 'allows guest customer to place an order', async ( { page } ) => {
+		await test.step( 'Add 2 products to the cart', async () => {
 			await addProductsToCart( page, simpleProductName, '2' );
+		} );
 
+		await test.step( 'Go to checkout and confirm that products and totals are as expected', async () => {
 			await page.goto( '/checkout/' );
-		await expect( page.locator( 'strong.product-quantity' ) ).toContainText(
+			await expect(
-			'2'
+				page.locator( 'strong.product-quantity' )
-		);
+			).toContainText( '2' );
 			let totalPrice = await page
 				.getByRole( 'row', { name: 'Total' } )
 				.last()
@@ -312,24 +315,35 @@ test.describe( 'Checkout page', () => {
 			totalPrice = Number( totalPrice.replace( /\$([\d.]+).*/, '$1' ) );
 			await expect( totalPrice ).toBeGreaterThanOrEqual(
 				Number( twoProductPrice )
-		);
+			); // account for taxes or shipping that may be present
+		} );
 
-		await page.locator( '#billing_first_name' ).fill( 'Lisa' );
+		await test.step( 'Complete the checkout form', async () => {
-		await page.locator( '#billing_last_name' ).fill( 'Simpson' );
 			await page
-			.locator( '#billing_address_1' )
+				.getByRole( 'textbox', { name: 'First name *' } )
+				.fill( 'Lisa' );
+			await page
+				.getByRole( 'textbox', { name: 'Last name *' } )
+				.fill( 'Simpson' );
+			await page
+				.getByRole( 'textbox', { name: 'Street address *' } )
 				.fill( '123 Evergreen Terrace' );
-		await page.locator( '#billing_city' ).fill( 'Springfield' );
+			await page
+				.getByRole( 'textbox', { name: 'Town / City *' } )
+				.fill( 'Springfield' );
 			await page.locator( '#billing_state' ).selectOption( 'OR' );
-		await page.locator( '#billing_postcode' ).fill( '97403' );
+			await page
-		await page.locator( '#billing_phone' ).fill( '555 555-5555' );
+				.getByRole( 'textbox', { name: 'ZIP Code *' } )
-		await page.locator( '#billing_email' ).fill( guestEmail );
+				.fill( '97403' );
+			await page.getByLabel( 'Phone *' ).fill( '555 555-5555' );
+			await page.getByLabel( 'Email address *' ).fill( guestEmail );
 
-		await page.locator( 'text=Cash on delivery' ).click();
+			await page.getByText( 'Cash on delivery' ).click();
-		await expect( page.locator( 'div.payment_method_cod' ) ).toBeVisible();
 
-		await page.locator( 'text=Place order' ).click();
+			await page.getByRole( 'button', { name: 'Place order' } ).click();
+		} );
 
+		await test.step( 'Load the order confirmation page, extract order number', async () => {
 			await expect(
 				page.getByRole( 'heading', { name: 'Order received' } )
 			).toBeVisible();
@@ -338,8 +352,12 @@ test.describe( 'Checkout page', () => {
 			const orderReceivedText = await page
 				.locator( '.woocommerce-order-overview__order.order' )
 				.textContent();
-		guestOrderId = await orderReceivedText.split( /(\s+)/ )[ 6 ].toString();
+			guestOrderId = await orderReceivedText
+				.split( /(\s+)/ )[ 6 ]
+				.toString();
+		} );
 
+		await test.step( 'Simulate cookies cleared, but within 10 minute grace period', async () => {
 			// Let's simulate a new browser context (by dropping all cookies), and reload the page. This approximates a
 			// scenario where the server can no longer identify the shopper. However, so long as we are within the 10 minute
 			// grace period following initial order placement, the 'order received' page should still be rendered.
@@ -348,7 +366,9 @@ test.describe( 'Checkout page', () => {
 			await expect(
 				page.getByRole( 'heading', { name: 'Order received' } )
 			).toBeVisible();
+		} );
 
+		await test.step( 'Simulate cookies cleared, outside 10 minute window', async () => {
 			// Let's simulate a scenario where the 10 minute grace period has expired. This time, we expect the shopper to
 			// be presented with a request to verify their email address.
 			await setFilterValue(
@@ -356,29 +376,46 @@ test.describe( 'Checkout page', () => {
 				'woocommerce_order_email_verification_grace_period',
 				0
 			);
-		await page.reload();
+			await page.waitForTimeout( 2000 ); // needs some time before reload for change to take effect.
+			await page.reload( { waitForLoadState: 'networkidle' } );
+			await expect(
+				page.getByRole( 'button', { name: 'Verify' } )
+			).toBeVisible();
+			await expect( page.getByLabel( 'Email address *' ) ).toBeVisible();
 			await expect(
 				page.locator( 'form.woocommerce-verify-email p:nth-child(3)' )
-		).toContainText( /verify the email address associated with the order/ );
+			).toContainText(
+				/verify the email address associated with the order/
+			);
+		} );
 
+		await test.step( 'Supply incorrect email address for the order, error', async () => {
 			// Supplying an email address other than the actual order billing email address will take them back to the same
 			// page with an error message.
-		await page.fill( '#email', 'incorrect@email.address' );
+			await page
-		await page.locator( 'form.woocommerce-verify-email button' ).click();
+				.getByLabel( 'Email address *' )
+				.fill( 'incorrect@email.address' );
+			await page.getByRole( 'button', { name: 'Verify' } ).click();
 			await expect(
 				page.locator( 'form.woocommerce-verify-email p:nth-child(4)' )
-		).toContainText( /verify the email address associated with the order/ );
+			).toContainText(
-		await expect( page.locator( '.is-error' ) ).toContainText(
+				/verify the email address associated with the order/
+			);
+			await expect( page.getByRole( 'alert' ) ).toContainText(
 				/We were unable to verify the email address you provided/
 			);
+		} );
 
+		await test.step( 'Supply the correct email address for the order, display order confirmation', async () => {
 			// However if they supply the *correct* billing email address, they should see the order received page again.
-		await page.fill( '#email', guestEmail );
+			await page.getByLabel( 'Email address *' ).fill( guestEmail );
-		await page.locator( 'form.woocommerce-verify-email button' ).click();
+			await page.getByRole( 'button', { name: 'Verify' } ).click();
 			await expect(
 				page.getByRole( 'heading', { name: 'Order received' } )
 			).toBeVisible();
+		} );
 
+		await test.step( 'Confirm order details on the backend (as a merchant)', async () => {
 			await page.goto( 'wp-login.php' );
 			await page.locator( 'input[name="log"]' ).fill( admin.username );
 			await page.locator( 'input[name="pwd"]' ).fill( admin.password );
@@ -397,17 +434,18 @@ test.describe( 'Checkout page', () => {
 			await expect( page.locator( '.wc-order-item-name' ) ).toContainText(
 				simpleProductName
 			);
-		await expect( page.locator( 'td.quantity >> nth=0' ) ).toContainText(
+			await expect(
-			'2'
+				page.locator( 'td.quantity >> nth=0' )
-		);
+			).toContainText( '2' );
-		await expect( page.locator( 'td.item_cost >> nth=0' ) ).toContainText(
+			await expect(
-			singleProductPrice
+				page.locator( 'td.item_cost >> nth=0' )
-		);
+			).toContainText( singleProductPrice );
-		await expect( page.locator( 'td.line_cost >> nth=0' ) ).toContainText(
+			await expect(
-			twoProductPrice
+				page.locator( 'td.line_cost >> nth=0' )
-		);
+			).toContainText( twoProductPrice );
 			await clearFilters( page );
 		} );
+	} );
 
 	test( 'allows existing customer to place order', async ( { page } ) => {
 		await page.goto( 'my-account/' );