[E2E][QIT] Migrate remaining shopper specs

changelog/dev-qit-e2e-shopper-remaining-specs

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Migrate remaining shopper E2E specs to QIT (my account, multicurrency, alternative payment methods)

tests/qit/e2e/specs/woopayments/shopper/alipay-checkout-purchase.spec.ts

@@ -0,0 +1,142 @@
+/**
+ * External dependencies
+ */
+import type { BrowserContext, Page } from '@playwright/test';
+import { test, expect, getAuthState } from '../../../fixtures/auth';
+
+/**
+ * Internal dependencies
+ */
+import { config } from '../../../config/default';
+import * as merchant from '../../../utils/merchant';
+import * as shopper from '../../../utils/shopper';
+import { goToCheckoutWCB } from '../../../utils/shopper-navigation';
+
+// Skip: Alipay payments require specific Stripe account configuration that
+// is not available in the QIT test environment. The payment method can be
+// enabled in settings but checkout fails with "Invalid or missing payment details".
+test.describe.skip( 'Alipay Checkout', { tag: '@shopper' }, () => {
+	let merchantContext: BrowserContext;
+	let merchantPage: Page;
+	let shopperContext: BrowserContext;
+	let shopperPage: Page;
+	let wasMulticurrencyEnabled = false;
+
+	test.beforeAll( async ( { browser } ) => {
+		merchantContext = await browser.newContext( {
+			storageState: await getAuthState( browser, 'admin' ),
+		} );
+		merchantPage = await merchantContext.newPage();
+
+		shopperContext = await browser.newContext( {
+			storageState: await getAuthState( browser, 'customer' ),
+		} );
+		shopperPage = await shopperContext.newPage();
+
+		// Alipay may not work correctly with multi-currency enabled
+		wasMulticurrencyEnabled = await merchant.isMulticurrencyEnabled(
+			merchantPage
+		);
+		if ( wasMulticurrencyEnabled ) {
+			await merchant.deactivateMulticurrency( merchantPage );
+		}
+
+		await merchant.enablePaymentMethods( merchantPage, [ 'alipay' ] );
+	} );
+
+	test.afterAll( async () => {
+		if ( shopperPage ) {
+			await shopper.emptyCart( shopperPage );
+		}
+
+		if ( merchantPage ) {
+			await merchant.disablePaymentMethods( merchantPage, [ 'alipay' ] );
+			if ( wasMulticurrencyEnabled ) {
+				await merchant.activateMulticurrency( merchantPage );
+			}
+		}
+
+		await merchantContext?.close();
+		await shopperContext?.close();
+	} );
+
+	test.beforeEach( async () => {
+		await shopper.emptyCart( shopperPage );
+	} );
+
+	test(
+		'checkout on shortcode checkout page',
+		{ tag: '@critical' },
+		async () => {
+			await shopper.setupProductCheckout(
+				shopperPage,
+				[ [ config.products.belt, 1 ] ],
+				config.addresses.customer.billing
+			);
+
+			await shopper.selectPaymentMethod( shopperPage, 'Alipay' );
+			await shopper.placeOrder( shopperPage );
+
+			// Verify redirect to Stripe's Alipay test page
+			await expect( shopperPage ).toHaveURL( /.*stripe\.com.*alipay/ );
+
+			await shopperPage.getByText( 'Authorize Test Payment' ).click();
+
+			await expect(
+				shopperPage.getByRole( 'heading', {
+					name: 'Order received',
+				} )
+			).toBeVisible();
+			await expect(
+				shopperPage.getByRole( 'img', {
+					name: 'Alipay',
+				} )
+			).toBeVisible();
+		}
+	);
+
+	test.describe(
+		'checkout on block-based checkout page',
+		{ tag: [ '@critical', '@blocks' ] },
+		() => {
+			test( 'completes payment successfully', async () => {
+				await shopper.setupProductCheckout(
+					shopperPage,
+					[ [ config.products.cap, 1 ] ],
+					config.addresses.customer.billing
+				);
+				await goToCheckoutWCB( shopperPage );
+				await shopper.fillBillingAddressWCB(
+					shopperPage,
+					config.addresses.customer.billing
+				);
+
+				await shopperPage
+					.getByRole( 'radio', {
+						name: 'Alipay',
+					} )
+					.click();
+
+				await shopper.placeOrderWCB( shopperPage, false );
+
+				// Verify redirect to Stripe's Alipay test page
+				await expect( shopperPage ).toHaveURL(
+					/.*stripe\.com.*alipay/
+				);
+
+				await shopperPage.getByText( 'Authorize Test Payment' ).click();
+
+				await expect(
+					shopperPage.getByRole( 'heading', {
+						name: 'Order received',
+					} )
+				).toBeVisible();
+				await expect(
+					shopperPage.getByRole( 'img', {
+						name: 'Alipay',
+					} )
+				).toBeVisible();
+			} );
+		}
+	);
+} );

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

@@ -0,0 +1,96 @@
+/**
+ * External dependencies
+ */
+import type { BrowserContext, Page } from '@playwright/test';
+import { test, expect, getAuthState } from '../../../fixtures/auth';
+
+/**
+ * Internal dependencies
+ */
+import { config } from '../../../config/default';
+import * as merchant from '../../../utils/merchant';
+import * as shopper from '../../../utils/shopper';
+import { goToProductPageBySlug } from '../../../utils/shopper-navigation';
+
+test.describe( 'Klarna Checkout', { tag: '@shopper' }, () => {
+	let merchantContext: BrowserContext;
+	let shopperContext: BrowserContext;
+	let merchantPage: Page;
+	let shopperPage: Page;
+	let wasMulticurrencyEnabled = false;
+
+	test.beforeAll( async ( { browser } ) => {
+		merchantContext = await browser.newContext( {
+			storageState: await getAuthState( browser, 'admin' ),
+		} );
+		merchantPage = await merchantContext.newPage();
+
+		shopperContext = await browser.newContext( {
+			storageState: await getAuthState( browser, 'customer' ),
+		} );
+		shopperPage = await shopperContext.newPage();
+
+		wasMulticurrencyEnabled = await merchant.isMulticurrencyEnabled(
+			merchantPage
+		);
+		if ( wasMulticurrencyEnabled ) {
+			await merchant.deactivateMulticurrency( merchantPage );
+		}
+		await merchant.enablePaymentMethods( merchantPage, [ 'klarna' ] );
+	} );
+
+	test.afterAll( async () => {
+		if ( shopperPage ) {
+			await shopper.emptyCart( shopperPage );
+		}
+		if ( merchantPage ) {
+			await merchant.disablePaymentMethods( merchantPage, [ 'klarna' ] );
+			if ( wasMulticurrencyEnabled ) {
+				await merchant.activateMulticurrency( merchantPage );
+			}
+		}
+		await merchantContext?.close();
+		await shopperContext?.close();
+	} );
+
+	test.beforeEach( async () => {
+		await shopper.emptyCart( shopperPage );
+	} );
+
+	test( 'shows the message in the product page', async () => {
+		await goToProductPageBySlug( shopperPage, 'belt' );
+
+		// Since we can't 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',
+		{ tag: '@critical' },
+		async () => {
+			const klarnaBillingAddress = {
+				...config.addresses.customer.billing,
+				email: '[email protected]',
+				phone: '+13106683312',
+				firstname: 'Test',
+				lastname: 'Person-us',
+			};
+
+			await shopper.setupProductCheckout(
+				shopperPage,
+				[ [ config.products.belt, 1 ] ],
+				klarnaBillingAddress
+			);
+			await shopper.selectPaymentMethod( shopperPage, 'Klarna' );
+			await shopper.placeOrder( shopperPage );
+
+			// Since we don't control the HTML in the Klarna playground page,
+			// verifying the redirect is all we can do consistently.
+			await expect( shopperPage ).toHaveURL( /.*klarna\.com/ );
+		}
+	);
+} );