Dev: Move Klarna E2E tests to Playwright (#9377)

Author: danielmx-dev

changelog/dev-update-klarna-e2e-tests

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Migrate Klarna E2E tests to playwright. Reduce noise in E2E tests console output.

tests/e2e-pw/specs/shopper/klarna-checkout-purchase.spec.ts

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import { test, expect, Page } from '@playwright/test';
+
+/**
+ * Internal dependencies
+ */
+import * as shopper from '../../utils/shopper';
+import { getMerchant, getShopper } from '../../utils/helpers';
+import * as merchant from '../../utils/merchant';
+import { config } from '../../config/default';
+import {
+	goToProductPageBySlug,
+	goToShop,
+} from '../../utils/shopper-navigation';
+
+test.describe( 'Klarna Checkout', () => {
+	let merchantPage: Page;
+	let shopperPage: Page;
+	let wasMulticurrencyEnabled: boolean;
+
+	test.beforeAll( async ( { browser } ) => {
+		shopperPage = ( await getShopper( browser ) ).shopperPage;
+		merchantPage = ( await getMerchant( browser ) ).merchantPage;
+		wasMulticurrencyEnabled = await merchant.isMulticurrencyEnabled(
+			merchantPage
+		);
+		if ( wasMulticurrencyEnabled ) {
+			await merchant.deactivateMulticurrency( merchantPage );
+		}
+		await merchant.enablePaymentMethods( merchantPage, [ 'klarna' ] );
+	} );
+
+	test.afterAll( async () => {
+		await shopper.emptyCart( shopperPage );
+
+		await merchant.disablePaymentMethods( merchantPage, [ 'klarna' ] );
+
+		if ( wasMulticurrencyEnabled ) {
+			await merchant.activateMulticurrency( merchantPage );
+		}
+	} );
+
+	test( 'shows the message in the product page', async () => {
+		await goToProductPageBySlug( shopperPage, 'belt' );
+
+		// Since we cant' control the exact contents of the iframe, we just make sure it's there.
+		await expect(
+			shopperPage
+				.frameLocator( '#payment-method-message iframe' )
+				.locator( 'body' )
+		).not.toBeEmpty();
+	} );
+
+	test( 'allows to use Klarna as a payment method', async () => {
+		await goToShop( shopperPage );
+		await shopper.setupProductCheckout( shopperPage, [ [ 'Belt', 1 ] ], {
+			...config.addresses.customer.billing,
+			// these are Klarna-specific values:
+			// https://docs.klarna.com/resources/test-environment/sample-customer-data/#united-states-of-america
+			email: '[email protected]',
+			phone: '+13106683312',
+			firstname: 'Test',
+			lastname: 'Person-us',
+		} );
+
+		await shopperPage
+			.locator( '.wc_payment_methods' )
+			.getByText( 'Klarna' )
+			.click();
+
+		await shopper.placeOrder( shopperPage );
+
+		// Since we don't have control over the html in the Klarna playground page,
+		// verifying the redirect is all we can do consistently without introducing a
+		// flaky test.
+		await expect( shopperPage ).toHaveURL( /.*klarna\.com/ );
+	} );
+} );

tests/e2e-pw/utils/merchant.ts

@@ -21,13 +21,20 @@ export const saveWooPaymentsSettings = async ( page: Page ) => {
 	} );
 };
 
+export const isMulticurrencyEnabled = async ( page: Page ) => {
+	await navigation.goToWooPaymentsSettings( page );
+
+	const checkboxTestId = 'multi-currency-toggle';
+	const isEnabled = await page.getByTestId( checkboxTestId ).isChecked();
+
+	return isEnabled;
+};
+
 export const activateMulticurrency = async ( page: Page ) => {
 	await navigation.goToWooPaymentsSettings( page );
 
 	const checkboxTestId = 'multi-currency-toggle';
-	const wasInitiallyEnabled = await page
-		.getByTestId( checkboxTestId )
-		.isChecked();
+	const wasInitiallyEnabled = await isMulticurrencyEnabled( page );
 
 	if ( ! wasInitiallyEnabled ) {
 		await page.getByTestId( checkboxTestId ).check();
@@ -212,3 +219,34 @@ export const setCurrencyCharmPricing = async (
 	await page.getByTestId( 'price_charm' ).selectOption( charmPricing );
 	await saveWooPaymentsSettings( page );
 };
+
+export const enablePaymentMethods = async (
+	page: Page,
+	paymentMethods: string[]
+) => {
+	await navigation.goToWooPaymentsSettings( page );
+
+	for ( const paymentMethodName of paymentMethods ) {
+		await page.getByLabel( paymentMethodName ).check();
+	}
+
+	await saveWooPaymentsSettings( page );
+};
+
+export const disablePaymentMethods = async (
+	page: Page,
+	paymentMethods: string[]
+) => {
+	await navigation.goToWooPaymentsSettings( page );
+
+	for ( const paymentMethodName of paymentMethods ) {
+		const checkbox = await page.getByLabel( paymentMethodName );
+
+		if ( await checkbox.isChecked() ) {
+			await checkbox.click();
+			await page.getByRole( 'button', { name: 'Remove' } ).click();
+		}
+	}
+
+	await saveWooPaymentsSettings( page );
+};

tests/e2e-pw/utils/shopper-navigation.ts

@@ -7,6 +7,10 @@ import { Page } from 'playwright/test';
  */
 import { isUIUnblocked } from './shopper';
 
+export const goToShop = async ( page: Page ) => {
+	await page.goto( `/shop/`, { waitUntil: 'load' } );
+};
+
 export const goToShopWithCurrency = async ( page: Page, currency: string ) => {
 	await page.goto( `/shop/?currency=${ currency }`, { waitUntil: 'load' } );
 };

tests/e2e-pw/utils/shopper.ts

@@ -37,8 +37,17 @@ export const fillBillingAddress = async (
 	await page.locator( '#billing_email' ).fill( billingAddress.email );
 };
 
+// This is currently the source of some flaky tests since sometimes the form is not submitted
+// after the first click, so we retry until the ui is blocked.
 export const placeOrder = async ( page: Page ) => {
-	await page.locator( '#place_order' ).click();
+	let orderPlaced = false;
+	while ( ! orderPlaced ) {
+		await page.locator( '#place_order' ).click();
+
+		if ( await page.$( '.blockUI' ) ) {
+			orderPlaced = true;
+		}
+	}
 };
 
 export const addCartProduct = async (
@@ -192,19 +201,19 @@ export const setupCheckout = async (
 /**
  * Sets up checkout with any number of products.
  *
- * @param {CustomerAddress} billingAddress The billing address to use for the checkout.
  * @param {Array<[string, number]>} lineItems A 2D array of line items where each line item is an array
  * that contains the product title as the first element, and the quantity as the second.
  * For example, if you want to checkout x2 "Hoodie" and x3 "Belt" then set this parameter like this:
  *
  * `[ [ "Hoodie", 2 ], [ "Belt", 3 ] ]`.
+ * @param {CustomerAddress} billingAddress The billing address to use for the checkout.
  */
 export async function setupProductCheckout(
 	page: Page,
-	billingAddress: CustomerAddress,
 	lineItems: Array< [ string, number ] > = [
 		[ config.products.simple.name, 1 ],
-	]
+	],
+	billingAddress: CustomerAddress = config.addresses.customer.billing
 ) {
 	const cartSizeText = await page
 		.locator( '.cart-contents .count' )
@@ -241,9 +250,7 @@ export const placeOrderWithCurrency = async (
 	currency: string
 ) => {
 	await navigation.goToShopWithCurrency( page, currency );
-	await setupProductCheckout( page, config.addresses.customer.billing, [
-		[ config.products.simple.name, 1 ],
-	] );
+	await setupProductCheckout( page, [ [ config.products.simple.name, 1 ] ] );
 	await fillCardDetails( page, config.cards.basic );
 	// Takes off the focus out of the Stripe elements to let Stripe logic
 	// wrap up and make sure the Place Order button is clickable.

tests/e2e/config/jest.setup.js

@@ -36,7 +36,8 @@ const ERROR_MESSAGES_TO_IGNORE = [
 	'Failed to load resource: the server responded with a status of 400 (Bad Request)',
 	'No Amplitude API key provided',
 	'is registered with an invalid category',
-	'"Heading" is not a supported class',
+	'is not a supported class', // Silence stripe.js warnings regarding styles.
+	'is not a supported property for', // Silence stripe.js warnings regarding styles.
 ];
 
 ERROR_MESSAGES_TO_IGNORE.forEach( ( errorMessage ) => {