E2E: Test the basic Affirm payment flow (#4436)

* E2E: Test the basic Affirm payment flow

* Add changelog entries

* Update code comment

Co-authored-by: Diego Curbelo <[email protected]>

* Update Affirm payment test to include Stripe URL in validation

* Update URLs in shortcode checkout

Also update the code comment

---------

Co-authored-by: Diego Curbelo <[email protected]>

Author: malithsen

changelog.txt

@@ -40,6 +40,7 @@
 * Tweak - Remove Payment Method Configurations fallback cache
 * Tweak - Update deprecation notice message to specify that legacy checkout experience has been deprecated since version 9.6.0
 * Update - Remove legacy checkout checkbox from settings
+* Dev - Add e2e tests to cover Affirm purchase flow
 
 = 9.5.3 - 2025-06-23 =
 * Fix - Reimplement mapping of Express Checkout state values to align with WooCommerce's expected state formats

readme.txt

@@ -152,5 +152,6 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
 * Dev - Add Klarna e2e tests
 * Tweak - Update deprecation notice message to specify that legacy checkout experience has been deprecated since version 9.6.0
 * Update - Remove legacy checkout checkbox from settings
+* Dev - Add e2e tests to cover Affirm purchase flow
 
 [See changelog for full details across versions](https://raw.githubusercontent.com/woocommerce/woocommerce-gateway-stripe/trunk/changelog.txt).

tests/e2e/tests/checkout/blocks/affirm.spec.js

@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test';
+import { admin, payments } from '../../../utils';
+
+const { setupAffirmCheckout } = payments;
+
+test.describe( 'Affirm payment tests @blocks', () => {
+	test.beforeAll( async ( { browser } ) => {
+		await test.step( 'Setup test environment', async () => {
+			// Enable Affirm in admin
+			await admin.togglePaymentMethod( browser, 'Affirm', true );
+		} );
+	} );
+
+	test.describe.configure( { mode: 'parallel' } );
+
+	test( 'customer can pay with Affirm @smoke', async ( { page } ) => {
+		await setupAffirmCheckout( page, 'blocks' );
+		await page.locator( 'text=Place order' ).click();
+		// Since we don't have control over the Affirm payment flow,
+		// verifying the redirect to Stripe or Affirm is all we can do consistently
+		// without introducing a flaky test.
+		await expect( page ).toHaveURL( /.*(affirm\.com|stripe\.com)/ );
+	} );
+} );

tests/e2e/tests/checkout/shortcode/affirm.spec.js

@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test';
+import { admin, payments } from '../../../utils';
+
+const { setupAffirmCheckout } = payments;
+
+test.describe( 'Affirm payment tests @shortcode', () => {
+	test.beforeAll( async ( { browser } ) => {
+		await test.step( 'Setup test environment', async () => {
+			// Enable Affirm in admin
+			await admin.togglePaymentMethod( browser, 'Affirm', true );
+		} );
+	} );
+
+	test.describe.configure( { mode: 'parallel' } );
+
+	test( 'customer can pay with Affirm @smoke', async ( { page } ) => {
+		await setupAffirmCheckout( page, 'shortcode' );
+		await page.locator( 'text=Place order' ).click();
+		// Since we don't have control over the Affirm payment flow,
+		// verifying the redirect to Stripe or Affirm is all we can do consistently
+		// without introducing a flaky test.
+		await expect( page ).toHaveURL( /.*(affirm\.com|stripe\.com)/ );
+	} );
+} );

tests/e2e/utils/payments.js

@@ -859,6 +859,46 @@ export const fillBECSDetails = async ( page, checkoutType = 'blocks' ) => {
 	await stripeFrame.locator( '[name="auBsb"]' ).fill( '000000' );
 };
 
+/**
+ * Set up the checkout page for Affirm payment.
+ *
+ * @param {Page} page Playwright page fixture.
+ * @param {string} checkoutType The type of checkout ('blocks' or 'shortcode').
+ */
+export const setupAffirmCheckout = async ( page, checkoutType = 'blocks' ) => {
+	// Affirm is only available when the price is above $50.
+	const lineItems = [ [ config.get( 'products.simple.name' ), 5 ] ];
+
+	await emptyCart( page );
+	await setupCart( page, lineItems );
+
+	const isBlocks = checkoutType === 'blocks';
+
+	// Fill billing details
+	const billingDetails = config.get( 'addresses.customer.billing' );
+	if ( isBlocks ) {
+		await setupBlocksCheckout( page, billingDetails );
+	} else {
+		await setupShortcodeCheckout( page, billingDetails );
+	}
+
+	await page.waitForTimeout( 1000 );
+
+	// Wait for the payment method selector to be available
+	if ( isBlocks ) {
+		await page
+			.locator( 'label', { hasText: 'Affirm' } )
+			.waitFor( { state: 'visible', timeout: 5000 } );
+		await page.locator( 'label' ).filter( { hasText: 'Affirm' } ).click();
+	} else {
+		await page
+			.getByText( 'Affirm' )
+			.waitFor( { state: 'visible', timeout: 5000 } );
+		await page.getByText( 'Affirm' ).click();
+	}
+	await page.waitForTimeout( 1000 );
+};
+
 /**
  * Set up the checkout page for Klarna payment.
  *
@@ -895,6 +935,7 @@ export const setupKlarnaCheckout = async ( page, checkoutType = 'blocks' ) => {
 	}
 	await page.waitForTimeout( 1000 );
 };
+
 /**
  * Complete the Klarna payment flow.
  *