Fix more e2e test issues (#4592)

* Use more specific selector on product page
* Changelog
* Use button names for handleCheckout3DSChallenge(); use helper in SCA card test
* Ensure we select the color for the variable product
* Changelog

Author: daledupreez

changelog.txt

@@ -10,6 +10,7 @@
 * Tweak - Use more specific selector in express checkout e2e tests
 * Fix - Relax customer validation that was preventing payments from the pay for order page
 * Fix - Remove connection type requirement from PMC sync migration attempt
+* Tweak - Small improvements to e2e tests
 
 = 9.8.0 - 2025-08-11 =
 * Add - Adds the current setting value for the Optimized Checkout to the Stripe System Status Report data

readme.txt

@@ -120,5 +120,6 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
 * Tweak - Use more specific selector in express checkout e2e tests
 * Fix - Relax customer validation that was preventing payments from the pay for order page
 * Fix - Remove connection type requirement from PMC sync migration attempt
+* Tweak - Small improvements to e2e tests
 
 [See changelog for full details across versions](https://raw.githubusercontent.com/woocommerce/woocommerce-gateway-stripe/trunk/changelog.txt).

tests/e2e/tests/checkout/blocks/sca-card.spec.js

@@ -7,6 +7,7 @@ const {
 	setupCart,
 	setupBlocksCheckout,
 	fillCreditCardDetails,
+	handleCheckout3DSChallenge,
 } = payments;
 
 test( 'customer can checkout with a SCA card @smoke @blocks', async ( {
@@ -21,23 +22,7 @@ test( 'customer can checkout with a SCA card @smoke @blocks', async ( {
 	await fillCreditCardDetails( page, config.get( 'cards.3ds' ) );
 	await page.locator( 'text=Place order' ).click();
 
-	// Wait until the SCA frame is available
-	while (
-		! page.frame( {
-			name: 'stripe-challenge-frame',
-		} )
-	) {
-		await page.waitForTimeout( 1000 );
-	}
-	// Not ideal, but the iframe body gets repalced after load, so a waitFor does not work here.
-	await page.waitForTimeout( 2000 );
-
-	await page
-		.frame( {
-			name: 'stripe-challenge-frame',
-		} )
-		.getByRole( 'button', { name: 'Complete' } )
-		.click();
+	await handleCheckout3DSChallenge( page );
 
 	await page.waitForURL( '**/checkout/order-received/**' );
 

tests/e2e/tests/express-checkout/express-checkout.spec.js

@@ -102,6 +102,9 @@ test.describe( 'express checkout and variable products', () => {
 		page,
 	} ) => {
 		await page.goto( '/product/hoodie' );
+		await page
+			.getByLabel( 'color', { exact: true } )
+			.selectOption( 'Blue' );
 		await page.getByLabel( 'Logo', { exact: true } ).selectOption( 'Yes' );
 		const linkButton = await getLinkButton( page );
 		await expect( linkButton ).toBeVisible();

tests/e2e/utils/payments.js

@@ -677,12 +677,11 @@ export async function handleCheckout3DSChallenge( page, action = 'authorize' ) {
 		outerFrameLocator.locator( '.LightboxModalLoadingIndicator' )
 	).toBeHidden();
 
-	const buttonId =
-		action === 'authorize'
-			? '#test-source-authorize-3ds'
-			: '#test-source-fail-3ds';
-	await expect( innerFrameLocator.locator( buttonId ) ).toBeVisible();
-	await innerFrameLocator.locator( buttonId ).click();
+	const buttonName = action === 'authorize' ? 'Complete' : 'Fail';
+	await expect(
+		innerFrameLocator.getByRole( 'button', { name: buttonName } )
+	).toBeVisible();
+	await innerFrameLocator.getByRole( 'button', { name: buttonName } ).click();
 
 	if ( action === 'fail' ) {
 		await expect( innerFrameLocator.owner() ).toBeHidden();