Add e2e tests for express checkout (Link) (#3846)

* Add e2e test for Link in product page

* Add e2e test for enabling Link in settings

* Add e2e tests for other pages

* Make adding to cart step less flaky

* Add changelog and readme entries

---------

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

Author: annemirasol

changelog.txt

@@ -1,6 +1,7 @@
 *** Changelog ***
 
 = 9.2.0 - xxxx-xx-xx =
+* Dev - Add new E2E tests for Link express checkout.
 * Add - Add Amazon Pay to block cart and block checkout.
 * Fix - Remove intentional delay when displaying tax-related notice for express checkout, causing click event to time out.
 * Fix - Fixes an issue when saving Bancontact and iDEAL methods with SEPA Direct Debit disabled.

readme.txt

@@ -111,6 +111,7 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
 == Changelog ==
 
 = 9.2.0 - xxxx-xx-xx =
+* Dev - Add new E2E tests for Link express checkout.
 * Add - Add Amazon Pay to block cart and block checkout.
 * Fix - Remove intentional delay when displaying tax-related notice for express checkout, causing click event to time out.
 * Fix - Fixes an issue when saving Bancontact and iDEAL methods with SEPA Direct Debit disabled.

tests/e2e/tests/default.setup.js

@@ -21,3 +21,19 @@ setup( 'Disable legacy checkout experience', async ( { browser } ) => {
 		page.getByTestId( 'legacy-checkout-experience-checkbox' )
 	).not.toBeChecked();
 } );
+
+setup( 'enable Link', async ( { browser } ) => {
+	const adminContext = await browser.newContext( {
+		storageState: process.env.ADMINSTATE,
+	} );
+	const page = await adminContext.newPage();
+
+	await page.goto(
+		'/wp-admin/admin.php?page=wc-settings&tab=checkout&section=stripe&panel=methods'
+	);
+	await page.getByLabel( 'Link by Stripe Input' ).check();
+	await page.click( 'text=Save changes' );
+
+	await expect( page.getByText( 'Settings saved.' ) ).toBeDefined();
+	await expect( page.getByLabel( 'Link by Stripe Input' ) ).toBeChecked();
+} );

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

@@ -0,0 +1,76 @@
+const { test, expect } = require( '@playwright/test' );
+
+const addProductToCart = async ( page, productSlug = 'beanie' ) => {
+	// Add a product to the cart
+	await page.goto( `/product/${ productSlug }` );
+
+	const addToCartButton = await page.getByRole( 'button', {
+		name: 'Add to cart',
+	} );
+	await expect( addToCartButton ).toBeEnabled();
+	await addToCartButton.dispatchEvent( 'click' );
+
+	// Wait for the cart update to complete - look for success message or cart count update
+	await expect(
+		page.getByText( 'has been added to your cart' )
+	).toBeVisible();
+};
+
+const testLink = async ( page, navigateTo, isBlockPage = false ) => {
+	await page.goto( navigateTo );
+
+	let frameLocator;
+	if ( isBlockPage ) {
+		frameLocator = await page.frameLocator(
+			'#express-payment-method-express_checkout_element_link iframe[name^="__privateStripeFrame"]'
+		);
+	} else {
+		frameLocator = await page.frameLocator(
+			'#wc-stripe-express-checkout-element-link iframe[name^="__privateStripeFrame"]'
+		);
+	}
+	const linkButton = await frameLocator.getByRole( 'button', {
+		name: 'Pay with Link',
+	} );
+	await expect( linkButton ).toBeEnabled();
+
+	const context = await page.context();
+	const [ popup ] = await Promise.all( [
+		context.waitForEvent( 'page' ),
+		linkButton.dispatchEvent( 'click' ),
+	] );
+
+	// Check that the payment modal gets loaded.
+	await popup.waitForLoadState();
+
+	// Back in the main window, check that Link's "Continue payment" button is visible.
+	const continuePaymentButton = await page.getByRole( 'button', {
+		name: 'Continue payment',
+	} );
+	await expect( continuePaymentButton ).toBeVisible();
+};
+
+test.describe( 'customer can use Link express checkout', () => {
+	test( 'inside the product page', async ( { page } ) =>
+		await testLink( page, '/product/beanie' ) );
+
+	test( 'inside the cart page (classic)', async ( { page } ) => {
+		await addProductToCart( page );
+		await testLink( page, '/cart-shortcode', false );
+	} );
+
+	test( 'inside the checkout page (classic)', async ( { page } ) => {
+		await addProductToCart( page );
+		await testLink( page, '/checkout-shortcode', false );
+	} );
+
+	test( 'inside the cart page (block)', async ( { page } ) => {
+		await addProductToCart( page );
+		await testLink( page, '/cart', true );
+	} );
+
+	test( 'inside the checkout page (block)', async ( { page } ) => {
+		await addProductToCart( page );
+		await testLink( page, '/checkout', true );
+	} );
+} );