Convert the Progressive Onboarding spec to Playwright (#10130)

changelog/dev-9968-convert-merchant-progressive-onboarding-spec

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Converted E2E merchant-progressive-onboarding spec from Puppeteer to Playwright.

tests/e2e-pw/specs/merchant/merchant-progressive-onboarding.spec.ts

@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import { test, expect } from '@playwright/test';
+
+/**
+ * Internal dependencies
+ */
+import { useMerchant } from '../../utils/helpers';
+import * as devtools from '../../utils/devtools';
+import { goToConnect } from '../../utils/merchant-navigation';
+
+test.describe( 'Admin merchant progressive onboarding', () => {
+	useMerchant();
+
+	test.beforeAll( async ( { browser } ) => {
+		const page = await browser.newPage();
+		await devtools.enableActAsDisconnectedFromWCPay( page );
+	} );
+
+	test.afterAll( async ( { browser } ) => {
+		const page = await browser.newPage();
+		await devtools.disableActAsDisconnectedFromWCPay( page );
+	} );
+
+	test( 'should pass merchant flow without any errors', async ( {
+		page,
+	} ) => {
+		// Open connect account page and click the primary CTA to start onboarding.
+		await goToConnect( page );
+		// Start onboarding process
+		await page
+			.getByRole( 'button', { name: 'Verify business details' } )
+			.click();
+		// Pick Individual business entity
+		await page
+			.getByRole( 'button', {
+				name: 'What type of legal entity is',
+			} )
+			.click();
+		await page.getByRole( 'option', { name: 'Individual' } ).click();
+		// Pick Software MCC
+		await page.getByLabel( 'Select an option' ).click();
+		await page.getByText( 'Software' ).click();
+		// Accept terms and conditions
+		await page.getByRole( 'button', { name: 'Continue' } ).click();
+		// Pick annual revenue
+		await page
+			.getByRole( 'button', {
+				name: 'What is your estimated annual',
+			} )
+			.click();
+		await page.getByRole( 'option', { name: 'Less than $250k' } ).click();
+		// Pick estimated time to launch
+		await page
+			.getByRole( 'button', { name: 'What is the estimated timeline' } )
+			.click();
+		await page.getByRole( 'option', { name: 'Within 1 month' } ).click();
+		await page.getByRole( 'button', { name: 'Continue' } ).click();
+
+		// Check that Stripe Embedded KYC iframe is loaded.
+		await expect(
+			page.locator(
+				'iframe[data-testid="stripe-connect-ui-layer-stripe-connect-account-onboarding"]'
+			)
+		).toBeAttached();
+	} );
+} );

tests/e2e-pw/utils/devtools.ts

@@ -21,6 +21,16 @@ const toggleCardTestingProtection = ( page: Page ) =>
 		.locator( 'label[for="wcpaydev_force_card_testing_protection_on"]' )
 		.click();
 
+const getIsActAsDisconnectedFromWCPayEnabled = ( page: Page ) =>
+	page
+		.getByLabel( 'act as disconnected from the Transact Platform Server' )
+		.isChecked();
+
+const toggleActAsDisconnectedFromWCPay = ( page: Page ) =>
+	page
+		.getByLabel( 'act as disconnected from the Transact Platform Server' )
+		.click();
+
 export const enableCardTestingProtection = async ( page: Page ) => {
 	await goToDevToolsSettings( page );
 
@@ -38,3 +48,21 @@ export const disableCardTestingProtection = async ( page: Page ) => {
 		await saveDevToolsSettings( page );
 	}
 };
+
+export const enableActAsDisconnectedFromWCPay = async ( page: Page ) => {
+	await goToDevToolsSettings( page );
+
+	if ( ! ( await getIsActAsDisconnectedFromWCPayEnabled( page ) ) ) {
+		await toggleActAsDisconnectedFromWCPay( page );
+		await saveDevToolsSettings( page );
+	}
+};
+
+export const disableActAsDisconnectedFromWCPay = async ( page: Page ) => {
+	await goToDevToolsSettings( page );
+
+	if ( await getIsActAsDisconnectedFromWCPayEnabled( page ) ) {
+		await toggleActAsDisconnectedFromWCPay( page );
+		await saveDevToolsSettings( page );
+	}
+};

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

@@ -56,3 +56,10 @@ export const goToMultiCurrencyOnboarding = async ( page: Page ) => {
 	);
 	await dataHasLoaded( page );
 };
+
+export const goToConnect = async ( page: Page ) => {
+	await page.goto(
+		'/wp-admin/admin.php?page=wc-admin&path=/payments/connect'
+	);
+	await dataHasLoaded( page );
+};