Fix E2E shopper tests around 3DS and UPE settings

changelog/fix-e2e-tests

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Fix for E2E shopper tests around 3DS and UPE settings

tests/e2e/config/default.json

@@ -84,6 +84,7 @@
           "addressfirstline": "Rue de l’Étuve, 1000",
           "addresssecondline": "billing-be",
           "city": "Bruxelles",
+          "postcode": "1000",
           "phone": "123456789",
           "email": "[email protected]"
         },
@@ -95,6 +96,7 @@
           "addressfirstline": "Petuelring 130",
           "addresssecondline": "billing-de",
           "city": "München",
+          "postcode": "80809",
           "state": "DE-BY",
           "phone": "123456789",
           "email": "[email protected]"

tests/e2e/specs/blocks/shopper/shopper-wc-blocks-checkout-failures.spec.js

@@ -197,7 +197,7 @@ describeif( RUN_WC_BLOCKS_TESTS )(
 			await expect( page ).toClick( 'button > span', {
 				text: 'Place Order',
 			} );
-			await confirmCardAuthentication( page, '3DS' );
+			await confirmCardAuthentication( page );
 			await page.waitForSelector( 'div.wc-block-components-notices' );
 			const declined3dsCardError = await page.$eval(
 				'div.wc-block-components-notices > div > div.components-notice__content',

tests/e2e/specs/blocks/shopper/shopper-wc-blocks-checkout-purchase.spec.js

@@ -77,7 +77,7 @@ describeif( RUN_WC_BLOCKS_TESTS )(
 				'.wc-block-components-main button:not(:disabled)'
 			);
 			await expect( page ).toClick( 'button', { text: 'Place Order' } );
-			await confirmCardAuthentication( page, '3DS' );
+			await confirmCardAuthentication( page );
 			await page.waitForNavigation( {
 				waitUntil: 'networkidle0',
 			} );

tests/e2e/specs/subscriptions/shopper/shopper-subscriptions-purchase-free-trial.spec.js

@@ -116,7 +116,7 @@ describeif( RUN_SUBSCRIPTIONS_TESTS )(
 			await expect( page ).toClick(
 				testSelectors.checkoutPlaceOrderButton
 			);
-			await confirmCardAuthentication( page, '3DS', true );
+			await confirmCardAuthentication( page, true );
 			await page.waitForNavigation( {
 				waitUntil: 'networkidle0',
 			} );

tests/e2e/specs/wcpay/shopper/shopper-checkout-purchase.spec.js

@@ -40,7 +40,7 @@ describe( 'Successful purchase', () => {
 		const card = config.get( 'cards.3ds' );
 		await fillCardDetails( page, card );
 		await expect( page ).toClick( '#place_order' );
-		await confirmCardAuthentication( page, '3DS' );
+		await confirmCardAuthentication( page );
 		await page.waitForNavigation( {
 			waitUntil: 'networkidle0',
 		} );

tests/e2e/specs/wcpay/shopper/shopper-checkout-save-card-and-purchase.spec.js

@@ -45,7 +45,7 @@ describe( 'Saved cards ', () => {
 					await shopper.placeOrder();
 				} else {
 					await expect( page ).toClick( '#place_order' );
-					await confirmCardAuthentication( page, cardType );
+					await confirmCardAuthentication( page );
 					await page.waitForNavigation( {
 						waitUntil: 'networkidle0',
 					} );
@@ -73,7 +73,7 @@ describe( 'Saved cards ', () => {
 					await shopper.placeOrder();
 				} else {
 					await expect( page ).toClick( '#place_order' );
-					await confirmCardAuthentication( page, cardType );
+					await confirmCardAuthentication( page );
 					await page.waitForNavigation( {
 						waitUntil: 'networkidle0',
 					} );

tests/e2e/specs/wcpay/shopper/shopper-myaccount-payment-methods-add-fail.spec.js

@@ -50,7 +50,7 @@ describe( 'Payment Methods', () => {
 					text: 'Add payment method',
 				} );
 				if ( cardType === 'declined-3ds' ) {
-					await confirmCardAuthentication( page, '3DS2' );
+					await confirmCardAuthentication( page );
 				}
 				await expect( page ).toMatchElement( '.woocommerce-error', {
 					timeout: 30000,

tests/e2e/specs/wcpay/shopper/shopper-myaccount-save-card-and-checkout.spec.js

@@ -54,7 +54,7 @@ describe( 'Saved cards ', () => {
 					await shopper.placeOrder();
 				} else {
 					await expect( page ).toClick( '#place_order' );
-					await confirmCardAuthentication( page, cardType );
+					await confirmCardAuthentication( page );
 					await page.waitForNavigation( {
 						waitUntil: 'networkidle0',
 					} );

tests/e2e/utils/flows.js

@@ -191,7 +191,7 @@ export const shopperWCP = {
 			! cardType.toLowerCase().includes( 'declined' );
 
 		if ( cardIs3DS ) {
-			await confirmCardAuthentication( page, cardType );
+			await confirmCardAuthentication( page );
 		}
 
 		await page.waitForNavigation( {
@@ -426,7 +426,17 @@ export const merchantWCP = {
 					button.click()
 				);
 			}
-			await page.$eval( paymentMethod, ( method ) => method.click() );
+			// Check if paymentMethod is an XPath
+			if ( paymentMethod.startsWith( '//' ) ) {
+				// Find the element using XPath and click it
+				const elements = await page.$x( paymentMethod );
+				if ( elements.length > 0 ) {
+					await elements[ 0 ].click();
+				}
+			} else {
+				// If it's a CSS selector, use $eval
+				await page.$eval( paymentMethod, ( method ) => method.click() );
+			}
 			await expect( page ).toClick( 'button', {
 				text: 'Remove',
 			} );

tests/e2e/utils/payments.js

@@ -177,11 +177,7 @@ export async function clearWCBCardDetails() {
 	await page.keyboard.press( 'Backspace' );
 }
 
-export async function confirmCardAuthentication(
-	page,
-	cardType = '3DS',
-	authorize = true
-) {
+export async function confirmCardAuthentication( page, authorize = true ) {
 	const target = authorize
 		? '#test-source-authorize-3ds'
 		: '#test-source-fail-3ds';
@@ -195,14 +191,7 @@ export async function confirmCardAuthentication(
 	const challengeFrameHandle = await stripeFrame.waitForSelector(
 		'iframe#challengeFrame'
 	);
-	let challengeFrame = await challengeFrameHandle.contentFrame();
-	// 3DS 1 cards have another iframe enclosing the authorize form
-	if ( cardType.toUpperCase() === '3DS' ) {
-		const acsFrameHandle = await challengeFrame.waitForSelector(
-			'iframe[name="acsFrame"]'
-		);
-		challengeFrame = await acsFrameHandle.contentFrame();
-	}
+	const challengeFrame = await challengeFrameHandle.contentFrame();
 	// Need to wait for the CSS animations to complete.
 	await page.waitFor( 500 );
 	const button = await challengeFrame.waitForSelector( target );