Fix flakiness while creating a page with the checkout block (#10340)

Co-authored-by: Allie Mims <[email protected]>

changelog/dev-10339-wcb-checkout

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Fix potential flakiness while creating a page with the checkout block.

tests/e2e-pw/specs/wcpay/shopper/shopper-myaccount-renew-subscription.spec.ts

@@ -31,18 +31,10 @@ describeif( shouldRunSubscriptionsTests )(
 		} );
 
 		test( 'should be able to purchase a subscription', async () => {
-			await shopper.addToCartFromShopPage(
-				page,
-				config.products.subscription_signup_fee
-			);
-
-			await shopper.setupCheckout( page, customerBillingConfig );
-			await shopper.selectPaymentMethod( page );
-			await shopper.fillCardDetails( page, config.cards.basic );
-			await shopper.placeOrder( page );
-			await expect(
-				page.getByRole( 'heading', { name: 'Order received' } )
-			).toBeVisible();
+			await shopper.placeOrderWithOptions( page, {
+				product: config.products.subscription_signup_fee,
+				billingAddress: customerBillingConfig,
+			} );
 
 			subscriptionId = await page
 				.getByLabel( 'View subscription number' )
@@ -70,6 +62,7 @@ describeif( shouldRunSubscriptionsTests )(
 			).toBeVisible();
 			await shopper.focusPlaceOrderButton( page );
 			await shopper.placeOrder( page );
+			await page.waitForURL( /\/order-received\// );
 			await expect(
 				page.getByRole( 'heading', { name: 'Order received' } )
 			).toBeVisible();

tests/e2e-pw/specs/wcpay/shopper/shopper-pay-for-order.spec.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { test, expect } from '@playwright/test';
+import { test, expect, Page } from '@playwright/test';
 
 /**
  * Internal dependencies
@@ -18,14 +18,21 @@ const cardTestingPreventionStates = [
 ];
 
 test.describe( 'Shopper > Pay for Order', () => {
+	let merchantPage: Page;
+	let shopperPage: Page;
+
+	test.beforeAll( async ( { browser } ) => {
+		merchantPage = ( await getMerchant( browser ) ).merchantPage;
+		shopperPage = ( await getShopper( browser ) ).shopperPage;
+	} );
+
+	test.afterAll( async () => {
+		await devtools.disableCardTestingProtection( merchantPage );
+	} );
+
 	cardTestingPreventionStates.forEach(
 		( { cardTestingPreventionEnabled } ) => {
-			test( `should be able to pay for a failed order with card testing protection ${ cardTestingPreventionEnabled }`, async ( {
-				browser,
-			} ) => {
-				const { merchantPage } = await getMerchant( browser );
-				const { shopperPage } = await getShopper( browser );
-
+			test( `should be able to pay for a failed order with card testing protection ${ cardTestingPreventionEnabled }`, async () => {
 				// Enable or disable card testing protection.
 				if ( ! cardTestingPreventionEnabled ) {
 					await devtools.disableCardTestingProtection( merchantPage );
@@ -67,7 +74,7 @@ test.describe( 'Shopper > Pay for Order', () => {
 					config.cards.basic
 				);
 
-				// Check for the fraud prevenction token presence.
+				// Check for the fraud prevention token presence.
 				const token = await shopperPage.evaluate( () => {
 					return ( window as any ).wcpayFraudPreventionToken;
 				} );
@@ -84,11 +91,6 @@ test.describe( 'Shopper > Pay for Order', () => {
 				await expect(
 					shopperPage.getByText( 'Order received' ).first()
 				).toBeVisible();
-
-				// Disable card testing protection if necessary.
-				if ( cardTestingPreventionEnabled ) {
-					await devtools.disableCardTestingProtection( merchantPage );
-				}
 			} );
 		}
 	);

tests/e2e-pw/specs/wcpay/shopper/shopper-wc-blocks-checkout-failures.spec.ts

@@ -108,14 +108,7 @@ describeif( shouldRunWCBlocksTests )(
 				await shopper.placeOrderWCB( shopperPage, false );
 
 				if ( auth ) {
-					const placeOrderButton = shopperPage.locator(
-						'.wc-block-components-checkout-place-order-button'
-					);
-					await expect( placeOrderButton ).toBeDisabled();
-					await expect( placeOrderButton ).toHaveClass(
-						/wc-block-components-button--loading/
-					);
-					await shopper.confirmCardAuthentication( shopperPage );
+					await shopper.confirmCardAuthenticationWCB( shopperPage );
 				}
 
 				if ( errorsInsideStripeFrame.includes( card ) ) {

tests/e2e-pw/specs/wcpay/shopper/shopper-wc-blocks-checkout-purchase.spec.ts

@@ -17,9 +17,10 @@ import { addWCBCheckoutPage } from '../../../utils/merchant';
 import { goToCheckoutWCB } from '../../../utils/shopper-navigation';
 import {
 	addToCartFromShopPage,
-	confirmCardAuthentication,
+	confirmCardAuthenticationWCB,
 	fillBillingAddressWCB,
 	fillCardDetailsWCB,
+	placeOrderWCB,
 } from '../../../utils/shopper';
 import { config } from '../../../config/default';
 
@@ -49,14 +50,7 @@ describeif( shouldRunWCBlocksTests )(
 				config.addresses.customer.billing
 			);
 			await fillCardDetailsWCB( shopperPage, config.cards.basic );
-			await shopperPage
-				.getByRole( 'button', { name: 'Place Order' } )
-				.click();
-			await expect(
-				shopperPage.getByRole( 'heading', {
-					name: 'Order received',
-				} )
-			).toBeVisible();
+			await placeOrderWCB( shopperPage );
 		} );
 
 		test( 'using a 3DS card', async () => {
@@ -70,10 +64,8 @@ describeif( shouldRunWCBlocksTests )(
 				config.addresses.customer.billing
 			);
 			await fillCardDetailsWCB( shopperPage, config.cards[ '3ds' ] );
-			await shopperPage
-				.getByRole( 'button', { name: 'Place Order' } )
-				.click();
-			await confirmCardAuthentication( shopperPage );
+			await placeOrderWCB( shopperPage, false );
+			await confirmCardAuthenticationWCB( shopperPage );
 			await expect(
 				shopperPage.getByRole( 'heading', {
 					name: 'Order received',

tests/e2e-pw/utils/devtools.ts

@@ -14,7 +14,7 @@ const saveDevToolsSettings = async ( page: Page ) => {
 };
 
 const getIsCardTestingProtectionEnabled = ( page: Page ) =>
-	page.getByLabel( 'Card testing mitigations enabled' ).isChecked();
+	page.getByLabel( /Card testing mitigations enabled/ ).isChecked();
 
 const setCardTestingProtection = ( page: Page, enabled: boolean ) =>
 	page

tests/e2e-pw/utils/merchant.ts

@@ -427,7 +427,7 @@ export const addWCBCheckoutPage = async ( page: Page ) => {
 
 	await page
 		.locator( '#wpbody-content' )
-		.getByRole( 'link', { name: 'Add New Page' } )
+		.getByRole( 'link', { name: /^Add( New)? Page$/ } )
 		.click();
 	await page.waitForLoadState( 'load' );
 
@@ -442,8 +442,6 @@ export const addWCBCheckoutPage = async ( page: Page ) => {
 	await editor.getByLabel( 'Add title' ).fill( 'Checkout WCB' );
 	await editor.getByLabel( 'Add block' ).click();
 
-	await ensureBlockSettingsPanelIsOpen( page );
-
 	await page.getByPlaceholder( 'Search' ).fill( 'Checkout' );
 	await page.getByRole( 'option', { name: 'Checkout', exact: true } ).click();
 
@@ -452,6 +450,8 @@ export const addWCBCheckoutPage = async ( page: Page ) => {
 	await page.keyboard.press( 'Escape' ); // to dismiss a dialog if present
 
 	// Enable the "Company" field if it's not already enabled.
+	await ensureBlockSettingsPanelIsOpen( page );
+
 	await page.getByLabel( 'Document Overview' ).click();
 	await page.waitForTimeout( 1000 );
 	await expect( page.locator( '.editor-list-view-sidebar' ) ).toBeVisible();

tests/e2e-pw/utils/shopper.ts

@@ -615,3 +615,25 @@ export const removeCoupon = async ( page: Page ) => {
 		).toBeVisible();
 	}
 };
+
+/**
+ * When using a 3DS card, call this function after clicking the 'Place order' button
+ * to confirm the card authentication.
+ *
+ * @param  {Page}          page The Shopper page object.
+ * @param  {boolean}       authorize Whether to authorize the transaction or not.
+ * @return {Promise<void>}      Void.
+ */
+export const confirmCardAuthenticationWCB = async (
+	page: Page,
+	authorize = true
+): Promise< void > => {
+	const placeOrderButton = page.locator(
+		'.wc-block-components-checkout-place-order-button'
+	);
+	await expect( placeOrderButton ).toBeDisabled();
+	await expect( placeOrderButton ).toHaveClass(
+		/wc-block-components-button--loading/
+	);
+	await confirmCardAuthentication( page, authorize );
+};