Fix flakiness while creating a page with the checkout block

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-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/merchant.ts

@@ -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 );
+};