[e2e tests] Fix flaky test and refactor admin-tasks payment spec (#51269)

plugins/woocommerce/changelog/e2e-fix-flaky-and-refactor-payment-spec

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+

plugins/woocommerce/tests/e2e-pw/tests/admin-tasks/payment.spec.js

@@ -1,45 +1,12 @@
-const { test, expect } = require( '@playwright/test' );
+const { test: baseTest, expect } = require( '../../fixtures/fixtures' );
-const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
 
-test.describe( 'Payment setup task', () => {
+const test = baseTest.extend( {
-	test.use( { storageState: process.env.ADMINSTATE } );
+	storageState: process.env.ADMINSTATE,
-
+	page: async ( { api, page, wpApi, wcAdminApi }, use ) => {
-	test.beforeEach( async ( { baseURL } ) => {
+		await wcAdminApi.post( 'onboarding/profile', {
-		await new wcApi( {
-			url: baseURL,
-			consumerKey: process.env.CONSUMER_KEY,
-			consumerSecret: process.env.CONSUMER_SECRET,
-			version: 'wc-admin',
-		} ).post( 'onboarding/profile', {
 			skipped: true,
 		} );
-	} );
 
-	test.afterAll( async ( { baseURL } ) => {
-		const api = new wcApi( {
-			url: baseURL,
-			consumerKey: process.env.CONSUMER_KEY,
-			consumerSecret: process.env.CONSUMER_SECRET,
-			version: 'wc/v3',
-		} );
-		await api.put( 'payment_gateways/bacs', {
-			enabled: false,
-		} );
-		await api.put( 'payment_gateways/cod', {
-			enabled: false,
-		} );
-	} );
-
-	test( 'Saving valid bank account transfer details enables the payment method', async ( {
-		baseURL,
-		page,
-	} ) => {
-		const api = new wcApi( {
-			url: baseURL,
-			consumerKey: process.env.CONSUMER_KEY,
-			consumerSecret: process.env.CONSUMER_SECRET,
-			version: 'wc/v3',
-		} );
 		// Ensure store's base country location is a WooPayments non-supported country (AF).
 		// Otherwise, the WooPayments task page logic or WooPayments redirects will kick in.
 		await api.post( 'settings/general/batch', {
@@ -50,14 +17,44 @@ test.describe( 'Payment setup task', () => {
 				},
 			],
 		} );
+
+		const bacsInitialState = await api.get( 'payment_gateways/bacs' );
+		const codInitialState = await api.get( 'payment_gateways/cod' );
+
+		// Disable the help popover.
+		await wpApi.post( '/wp-json/wp/v2/users/1?_locale=user', {
+			data: {
+				woocommerce_meta: {
+					help_panel_highlight_shown: '"yes"',
+				},
+			},
+		} );
+
+		await use( page );
+
+		// Reset the payment gateways to their initial state.
+		await api.put( 'payment_gateways/bacs', {
+			enabled: bacsInitialState.data.enabled,
+		} );
+		await api.put( 'payment_gateways/cod', {
+			enabled: codInitialState.data.enabled,
+		} );
+	},
+} );
+
+test.describe( 'Payment setup task', () => {
+	test( 'Saving valid bank account transfer details enables the payment method', async ( {
+		page,
+		api,
+	} ) => {
+		await api.put( 'payment_gateways/bacs', {
+			enabled: false,
+		} );
+
 		// Load the bank transfer page.
 		await page.goto(
 			'wp-admin/admin.php?page=wc-admin&task=payments&id=bacs'
 		);
-		// purposely no await -- close the help dialog if/when it appears
-		page.locator( '.components-button.is-small.has-icon' )
-			.click()
-			.catch( () => {} );
 
 		// Fill in bank transfer form.
 		await page
@@ -93,25 +90,8 @@ test.describe( 'Payment setup task', () => {
 	} );
 
 	test( 'Can visit the payment setup task from the homescreen if the setup wizard has been skipped', async ( {
-		baseURL,
 		page,
 	} ) => {
-		const api = new wcApi( {
-			url: baseURL,
-			consumerKey: process.env.CONSUMER_KEY,
-			consumerSecret: process.env.CONSUMER_SECRET,
-			version: 'wc/v3',
-		} );
-		// Ensure store's base country location is a WooPayments non-supported country (AF).
-		// Otherwise, the WooPayments task page logic or WooPayments redirects will kick in.
-		await api.post( 'settings/general/batch', {
-			update: [
-				{
-					id: 'woocommerce_default_country',
-					value: 'AF',
-				},
-			],
-		} );
 		await page.goto( 'wp-admin/admin.php?page=wc-admin' );
 		await page.locator( 'text=Get paid' ).click();
 		await expect(
@@ -121,43 +101,31 @@ test.describe( 'Payment setup task', () => {
 
 	test( 'Enabling cash on delivery enables the payment method', async ( {
 		page,
-		baseURL,
+		api,
 	} ) => {
-		const api = new wcApi( {
+		await api.put( 'payment_gateways/cod', {
-			url: baseURL,
+			enabled: false,
-			consumerKey: process.env.CONSUMER_KEY,
-			consumerSecret: process.env.CONSUMER_SECRET,
-			version: 'wc/v3',
 		} );
-		// Ensure store's base country location is a WooPayments non-supported country (AF).
-		// Otherwise, the WooPayments task page logic or WooPayments redirects will kick in.
-		await api.post( 'settings/general/batch', {
-			update: [
-				{
-					id: 'woocommerce_default_country',
-					value: 'AF',
-				},
-			],
-		} );
-		await page.goto( 'wp-admin/admin.php?page=wc-admin&task=payments' );
 
-		// purposely no await -- close the help dialog if/when it appears
+		const paymentGatewaysResponse = page.waitForResponse(
-		page.locator( '.components-button.is-small.has-icon' )
+			( response ) =>
-			.click()
+				response.url().includes( 'wp-json/wc/v3/payment_gateways' ) &&
-			.catch( () => {} );
+				response.ok()
+		);
+		await page.goto( 'wp-admin/admin.php?page=wc-admin&task=payments' );
+		await paymentGatewaysResponse;
 
 		// Enable COD payment option.
 		await page
-			.locator(
+			.locator( 'div.woocommerce-task-payment-cod' )
-				'div.woocommerce-task-payment-cod > div.woocommerce-task-payment__footer > .woocommerce-task-payment__action'
+			.getByRole( 'button', { name: 'Enable' } )
-			)
 			.click();
 		// Check that COD was set up.
 		await expect(
-			page.locator(
+			page
-				'div.woocommerce-task-payment-cod > div.woocommerce-task-payment__footer > .woocommerce-task-payment__action'
+				.locator( 'div.woocommerce-task-payment-cod' )
-			)
+				.getByRole( 'button', { name: 'Manage' } )
-		).toContainText( 'Manage' );
+		).toBeVisible();
 
 		await page.goto( 'wp-admin/admin.php?page=wc-settings&tab=checkout' );