Convert Shopper Blocks Checkout Failures spec to Playwright

changelog/dev-10073-convert-shopper-wc-blocks-checkout-failures-spec

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Convert shopper-wc-blocks-checkout-failures spec from Puppeteer to Playwright
+
+

changelog/dev-10075-playwright-migration-shopper-wc-blocks-saved-card-checkout-and-usage

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Convert Shopper WC Blocks saved card checkout and usage test to Playwright

tests/e2e-pw/specs/shopper/shopper-wc-blocks-checkout-failures.spec.ts

@@ -0,0 +1,107 @@
+/**
+ * External dependencies
+ */
+import test, { Page, expect } from '@playwright/test';
+
+/**
+ * Internal dependencies
+ */
+import {
+	checkPageExists,
+	describeif,
+	getMerchant,
+	getShopper,
+} from '../../utils/helpers';
+import * as navigation from '../../utils/shopper-navigation';
+import * as shopper from '../../utils/shopper';
+import { addWCBCheckoutPage } from '../../utils/merchant';
+import { shouldRunWCBlocksTests } from '../../utils/constants';
+import { config } from '../../config/default';
+
+const failures = [
+	{
+		card: config.cards.declined,
+		error: 'Your card was declined.',
+	},
+	{
+		card: config.cards[ 'invalid-exp-date' ],
+		error: 'Your card’s expiration year is in the past.',
+	},
+	{
+		card: config.cards[ 'invalid-cvv-number' ],
+		error: 'Your card’s security code is incomplete.',
+	},
+	{
+		card: config.cards[ 'declined-funds' ],
+		error: 'Your card has insufficient funds.',
+	},
+	{
+		card: config.cards[ 'declined-expired' ],
+		error: 'Your card has expired.',
+	},
+	{
+		card: config.cards[ 'declined-cvc' ],
+		error: "Your card's security code is incorrect.",
+	},
+	{
+		card: config.cards[ 'declined-processing' ],
+		error:
+			'An error occurred while processing your card. Try again in a little bit.',
+	},
+	{
+		card: config.cards[ 'declined-incorrect' ],
+		error: 'Your card number is invalid.',
+	},
+	{
+		card: config.cards[ 'declined-3ds' ],
+		error: 'Your card has been declined.',
+		auth: true,
+	},
+];
+
+describeif( shouldRunWCBlocksTests )(
+	'WooCommerce Blocks > Checkout failures',
+	() => {
+		let shopperPage: Page;
+
+		test.beforeAll( async ( { browser }, { project } ) => {
+			shopperPage = ( await getShopper( browser ) ).shopperPage;
+
+			if (
+				! ( await checkPageExists(
+					shopperPage,
+					project.use.baseURL + '/checkout-wcb'
+				) )
+			) {
+				const { merchantPage } = await getMerchant( browser );
+				await addWCBCheckoutPage( merchantPage );
+			}
+
+			await shopper.addCartProduct( shopperPage );
+			await navigation.goToCheckoutWCB( shopperPage );
+			await shopper.fillBillingAddressWCB(
+				shopperPage,
+				config.addresses.customer.billing
+			);
+		} );
+
+		test.afterAll( async () => {
+			await shopper.emptyCart( shopperPage );
+		} );
+
+		for ( const { card, error, auth } of failures ) {
+			test( `Should show error – ${ error }`, async () => {
+				await shopper.fillCardDetailsWCB( shopperPage, card );
+				await shopperPage
+					.getByRole( 'button', { name: 'Place Order' } )
+					.click();
+				if ( auth ) {
+					await shopper.confirmCardAuthentication( shopperPage );
+				}
+				await expect(
+					shopperPage.getByLabel( 'Checkout' ).getByText( error )
+				).toBeVisible();
+			} );
+		}
+	}
+);

tests/e2e-pw/specs/shopper/shopper-wc-blocks-saved-card-checkout-and-usage.spec.ts

@@ -0,0 +1,113 @@
+/**
+ * External dependencies
+ */
+import test, { Page, expect } from '@playwright/test';
+
+/**
+ * Internal dependencies
+ */
+import {
+	checkPageExists,
+	describeif,
+	getMerchant,
+	getShopper,
+} from '../../utils/helpers';
+import { shouldRunWCBlocksTests } from '../../utils/constants';
+import {
+	goToMyAccount,
+	goToShop,
+	goToCheckoutWCB,
+} from '../../utils/shopper-navigation';
+import {
+	addCartProduct,
+	deleteSavedCard,
+	emptyCart,
+	fillBillingAddressWCB,
+	fillCardDetailsWCB,
+	selectSavedCardOnCheckout,
+} from '../../utils/shopper';
+import { addWCBCheckoutPage } from '../../utils/merchant';
+import { config } from '../../config/default';
+
+describeif( shouldRunWCBlocksTests )(
+	'WooCommerce Blocks > Saved cards',
+	() => {
+		let shopperPage: Page;
+		const card = config.cards.basic;
+
+		test.beforeAll( async ( { browser }, { project } ) => {
+			shopperPage = ( await getShopper( browser ) ).shopperPage;
+			if (
+				! ( await checkPageExists(
+					shopperPage,
+					project.use.baseURL + '/checkout-wcb'
+				) )
+			) {
+				const { merchantPage } = await getMerchant( browser );
+				await addWCBCheckoutPage( merchantPage );
+			}
+		} );
+
+		test( 'should be able to save basic card on Blocks checkout', async () => {
+			await emptyCart( shopperPage );
+			await goToShop( shopperPage );
+			await addCartProduct( shopperPage );
+			await goToCheckoutWCB( shopperPage );
+			await fillBillingAddressWCB(
+				shopperPage,
+				config.addresses.customer.billing
+			);
+			await fillCardDetailsWCB( shopperPage, config.cards.basic );
+			await shopperPage
+				.getByLabel(
+					'Save payment information to my account for future purchases.'
+				)
+				.click();
+			await shopperPage
+				.getByRole( 'button', { name: 'Place Order' } )
+				.click();
+			await expect(
+				shopperPage.getByRole( 'heading', {
+					name: 'Order received',
+				} )
+			).toBeVisible();
+			await goToMyAccount( shopperPage, 'payment-methods' );
+			await expect(
+				shopperPage.getByText( card.label ).first()
+			).toBeVisible();
+			await expect(
+				shopperPage
+					.getByText(
+						`${ card.expires.month }/${ card.expires.year }`
+					)
+					.first()
+			).toBeVisible();
+		} );
+
+		test( 'should process a payment with the saved card from Blocks checkout', async () => {
+			await goToShop( shopperPage );
+			await addCartProduct( shopperPage );
+			await goToCheckoutWCB( shopperPage );
+			await fillBillingAddressWCB(
+				shopperPage,
+				config.addresses.customer.billing
+			);
+			await selectSavedCardOnCheckout( shopperPage, card );
+			await shopperPage
+				.getByRole( 'button', { name: 'Place Order' } )
+				.click();
+			await expect(
+				shopperPage.getByRole( 'heading', {
+					name: 'Order received',
+				} )
+			).toBeVisible();
+		} );
+		test( 'should delete the card ', async () => {
+			await goToMyAccount( shopperPage, 'payment-methods' );
+			await deleteSavedCard( shopperPage, card );
+			await expect(
+				shopperPage.getByText( 'Payment method deleted.' )
+			).toBeVisible();
+		} );
+	}
+);

tests/e2e-pw/utils/constants.ts

@@ -4,6 +4,8 @@ export const shouldRunSubscriptionsTests =
 export const shouldRunActionSchedulerTests =
 	process.env.SKIP_WC_ACTION_SCHEDULER_TESTS !== '1';
 
+export const shouldRunWCBlocksTests = process.env.SKIP_WC_BLOCKS_TESTS !== '1';
+
 export const products = {
 	SUBSCRIPTION_SIGNUP_FEE: 70,
 	SUBSCRIPTION_NO_SIGNUP_FEE: 88,

tests/e2e-pw/utils/helpers.ts

@@ -135,3 +135,23 @@ export const getAnonymousShopper = async (
  */
 export const describeif = ( condition: boolean ) =>
 	condition ? test.describe : test.describe.skip;
+
+export const checkPageExists = async (
+	page: Page,
+	pageUrl: string
+): Promise< boolean > => {
+	// Check whether specified page exists
+	return page
+		.goto( pageUrl, {
+			waitUntil: 'load',
+		} )
+		.then( ( response ) => {
+			if ( response.status() === 404 ) {
+				return false;
+			}
+			return true;
+		} )
+		.catch( () => {
+			return false;
+		} );
+};

tests/e2e-pw/utils/merchant.ts

@@ -388,6 +388,42 @@ export const deactivateWooPay = async ( page: Page ) => {
 	await saveWooPaymentsSettings( page );
 };
 
+export const addWCBCheckoutPage = async ( page: Page ) => {
+	await page.goto( '/wp-admin/edit.php?post_type=page', {
+		waitUntil: 'load',
+	} );
+
+	await page
+		.locator( '#wpbody-content' )
+		.getByRole( 'link', { name: 'Add New Page' } )
+		.click();
+	await page.waitForLoadState( 'load' );
+
+	const welcomeGuide = page.locator( '.components-guide' );
+	if ( await welcomeGuide.isVisible() ) {
+		await page.getByLabel( 'Close', { exact: true } ).click();
+		await page.waitForTimeout( 1500 );
+	}
+
+	// Handle whether the editor uses iframe or not.
+	const editor = page.frame( 'editor-canvas' ) || page;
+	await editor.getByLabel( 'Add title' ).fill( 'Checkout WCB' );
+	await editor.getByLabel( 'Add block' ).click();
+
+	await page.getByPlaceholder( 'Search' ).fill( 'Checkout' );
+	await page.getByRole( 'option', { name: 'Checkout', exact: true } ).click();
+
+	// Dismiss dialog about potentially compatibility issues
+	await page.waitForTimeout( 500 );
+	await page.keyboard.press( 'Escape' ); // to dismiss a dialog if present
+
+	// Publish the page
+	await page.locator( 'button.editor-post-publish-panel__toggle' ).click();
+	await page.waitForTimeout( 500 );
+	await page.locator( 'button.editor-post-publish-button' ).click();
+	await expect( page.getByText( 'Checkout WCB is now live.' ) ).toBeVisible();
+};
+
 export const isCaptureLaterEnabled = async ( page: Page ) => {
 	await navigation.goToWooPaymentsSettings( page );
 

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

@@ -36,6 +36,12 @@ export const goToCheckout = async ( page: Page ) => {
 	await isUIUnblocked( page );
 };
 
+export const goToCheckoutWCB = async ( page: Page ) => {
+	await page.goto( '/checkout-wcb', {
+		waitUntil: 'load',
+	} );
+};
+
 export const goToOrders = async ( page: Page ) => {
 	await page.goto( '/my-account/orders/', {
 		waitUntil: 'load',