[e2e] External - Expand WPCOM suite, part 3 (#51422)

* Skip "Restricted coupon management" - error 500

* Make `wooPatterns` element more specific

* Skip "Merchant can view a list of all customers" - more customers due to using existing website

* No LYS on WPCOM

* Dismiss notice if shown

* Expand WPCOM suite

* Click on `Canada`

* Click on `Canada`

* Be more specific about `Delete` button

* Add changefile(s) from automation for the following project(s): woocommerce

* Skip two more tests - WC patterns and block

* Remove usage of `networkidle`

* Handle notice if present with `addLocatorHandler`

* Fix ESLint issue

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce/changelog/51422-e2e-external-expand-wpcom-suite-part3

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Expand the e2e suite we're running on WPCOM part #3.

plugins/woocommerce/tests/e2e-pw/envs/default-wpcom/playwright.config.js

@@ -23,6 +23,16 @@ config = {
 				'**/merchant/create-order.spec.js',
 				'**/merchant/create-page.spec.js',
 				'**/merchant/create-post.spec.js',
+				'**/merchant/create-restricted-coupons.spec.js',
+				'**/merchant/create-shipping-classes.spec.js',
+				'**/merchant/create-shipping-zones.spec.js',
+				'**/merchant/create-woocommerce-blocks.spec.js',
+				'**/merchant/create-woocommerce-patterns.spec.js',
+				'**/merchant/customer-list.spec.js',
+				'**/merchant/customer-payment-page.spec.js',
+				'**/merchant/launch-your-store.spec.js',
+				'**/merchant/lost-password.spec.js',
+				'**/merchant/order-bulk-edit.spec.js',
 			],
 			grepInvert: /@skip-on-default-wpcom/,
 		},

plugins/woocommerce/tests/e2e-pw/tests/merchant/create-restricted-coupons.spec.js

@@ -103,7 +103,10 @@ const test = baseTest.extend( {
 	},
 } );
 
-test.describe( 'Restricted coupon management', { tag: [ '@services' ] }, () => {
+test.describe(
+	'Restricted coupon management',
+	{ tag: [ '@services', '@skip-on-default-wpcom' ] },
+	() => {
 		for ( const couponType of Object.keys( couponData ) ) {
 			test( `can create new ${ couponType } coupon`, async ( {
 				page,
@@ -124,7 +127,9 @@ test.describe( 'Restricted coupon management', { tag: [ '@services' ] }, () => {
 					await page
 						.getByPlaceholder( '0' )
 						.fill( couponData[ couponType ].amount );
-				await expect( page.getByText( 'Move to Trash' ) ).toBeVisible();
+					await expect(
+						page.getByText( 'Move to Trash' )
+					).toBeVisible();
 				} );
 
 				// set up the restrictions for each coupon type
@@ -213,7 +218,10 @@ test.describe( 'Restricted coupon management', { tag: [ '@services' ] }, () => {
 				const skipBrandsTests = true;
 
 				// set exclude product brands
-			if ( couponType === 'excludeProductBrands' && ! skipBrandsTests ) {
+				if (
+					couponType === 'excludeProductBrands' &&
+					! skipBrandsTests
+				) {
 					await test.step( 'set exclude product brands coupon', async () => {
 						await page
 							.getByRole( 'link', {
@@ -224,7 +232,9 @@ test.describe( 'Restricted coupon management', { tag: [ '@services' ] }, () => {
 							.getByPlaceholder( 'No brands' )
 							.pressSequentially( 'WooCommerce Apparels' );
 						await page
-						.getByRole( 'option', { name: 'WooCommerce Apparels' } )
+							.getByRole( 'option', {
+								name: 'WooCommerce Apparels',
+							} )
 							.click();
 					} );
 				}
@@ -272,7 +282,9 @@ test.describe( 'Restricted coupon management', { tag: [ '@services' ] }, () => {
 							.click();
 						await page
 							.getByPlaceholder( 'No restrictions' )
-						.fill( couponData[ couponType ].allowedEmails[ 0 ] );
+							.fill(
+								couponData[ couponType ].allowedEmails[ 0 ]
+							);
 					} );
 				}
 				// set usage limit
@@ -312,7 +324,9 @@ test.describe( 'Restricted coupon management', { tag: [ '@services' ] }, () => {
 
 				// verify the creation of the coupon and basic details
 				await test.step( 'verify coupon creation', async () => {
-				await page.goto( 'wp-admin/edit.php?post_type=shop_coupon' );
+					await page.goto(
+						'wp-admin/edit.php?post_type=shop_coupon'
+					);
 					await expect(
 						page.getByRole( 'cell', {
 							name: couponData[ couponType ].code,
@@ -491,9 +505,12 @@ test.describe( 'Restricted coupon management', { tag: [ '@services' ] }, () => {
 							.click();
 						await expect(
 							page.getByLabel( 'Usage limit per user' )
-					).toHaveValue( couponData[ couponType ].usageLimitPerUser );
+						).toHaveValue(
+							couponData[ couponType ].usageLimitPerUser
+						);
 					} );
 				}
 			} );
 		}
-} );
+	}
+);

plugins/woocommerce/tests/e2e-pw/tests/merchant/create-shipping-zones.spec.js

@@ -60,8 +60,7 @@ test.describe( 'WooCommerce Shipping Settings - Add new shipping zone', () => {
 			// this shipping zone already exists, don't create it
 		} else {
 			await page.goto(
-				'wp-admin/admin.php?page=wc-settings&tab=shipping&zone_id=new',
+				'wp-admin/admin.php?page=wc-settings&tab=shipping&zone_id=new'
-				{ waitUntil: 'networkidle' }
 			);
 			await page
 				.getByPlaceholder( 'Zone name' )
@@ -92,10 +91,8 @@ test.describe( 'WooCommerce Shipping Settings - Add new shipping zone', () => {
 				.getByRole( 'button', { name: 'Continue' } )
 				.last()
 				.click();
-			await page.waitForLoadState( 'networkidle' );
 
 			await page.locator( '#btn-ok' ).click();
-			await page.waitForLoadState( 'networkidle' );
 
 			await expect(
 				page
@@ -132,8 +129,7 @@ test.describe( 'WooCommerce Shipping Settings - Add new shipping zone', () => {
 			// this shipping zone already exists, don't create it
 		} else {
 			await page.goto(
-				'wp-admin/admin.php?page=wc-settings&tab=shipping&zone_id=new',
+				'wp-admin/admin.php?page=wc-settings&tab=shipping&zone_id=new'
-				{ waitUntil: 'networkidle' }
 			);
 			await page
 				.getByPlaceholder( 'Zone name' )
@@ -159,10 +155,8 @@ test.describe( 'WooCommerce Shipping Settings - Add new shipping zone', () => {
 				.getByRole( 'button', { name: 'Continue' } )
 				.last()
 				.click();
-			await page.waitForLoadState( 'networkidle' );
 
 			await page.locator( '#btn-ok' ).click();
-			await page.waitForLoadState( 'networkidle' );
 
 			await expect(
 				page
@@ -196,8 +190,7 @@ test.describe( 'WooCommerce Shipping Settings - Add new shipping zone', () => {
 			// this shipping zone already exists, don't create it
 		} else {
 			await page.goto(
-				'wp-admin/admin.php?page=wc-settings&tab=shipping&zone_id=new',
+				'wp-admin/admin.php?page=wc-settings&tab=shipping&zone_id=new'
-				{ waitUntil: 'networkidle' }
 			);
 			await page
 				.getByPlaceholder( 'Zone name' )
@@ -209,7 +202,7 @@ test.describe( 'WooCommerce Shipping Settings - Add new shipping zone', () => {
 			input.click();
 			input.fill( 'Canada' );
 
-			await page.getByText( 'Canada' ).last().click();
+			await page.getByLabel( 'Canada', { exact: true } ).click();
 
 			// Close dropdown
 			await page.getByPlaceholder( 'Zone name' ).click();
@@ -222,10 +215,8 @@ test.describe( 'WooCommerce Shipping Settings - Add new shipping zone', () => {
 				.getByRole( 'button', { name: 'Continue' } )
 				.last()
 				.click();
-			await page.waitForLoadState( 'networkidle' );
 
 			await page.locator( '#btn-ok' ).click();
-			await page.waitForLoadState( 'networkidle' );
 
 			await expect(
 				page
@@ -240,7 +231,6 @@ test.describe( 'WooCommerce Shipping Settings - Add new shipping zone', () => {
 				.click();
 			await page.getByLabel( 'Cost', { exact: true } ).fill( '10' );
 			await page.getByRole( 'button', { name: 'Save' } ).last().click();
-			await page.waitForLoadState( 'networkidle' );
 
 			await page.goto(
 				'wp-admin/admin.php?page=wc-settings&tab=shipping'
@@ -342,8 +332,7 @@ test.describe( 'WooCommerce Shipping Settings - Add new shipping zone', () => {
 			// this shipping zone already exists, don't create it
 		} else {
 			await page.goto(
-				'wp-admin/admin.php?page=wc-settings&tab=shipping&zone_id=new',
+				'wp-admin/admin.php?page=wc-settings&tab=shipping&zone_id=new'
-				{ waitUntil: 'networkidle' }
 			);
 			await page.locator( '#zone_name' ).fill( shippingZoneNameFlatRate );
 
@@ -353,7 +342,7 @@ test.describe( 'WooCommerce Shipping Settings - Add new shipping zone', () => {
 			input.click();
 			input.type( 'Canada' );
 
-			await page.getByText( 'Canada' ).last().click();
+			await page.getByLabel( 'Canada', { exact: true } ).click();
 
 			// Close dropdown
 			await page.keyboard.press( 'Escape' );
@@ -366,10 +355,7 @@ test.describe( 'WooCommerce Shipping Settings - Add new shipping zone', () => {
 				.last()
 				.click();
 
-			await page.waitForLoadState( 'networkidle' );
-
 			await page.locator( '#btn-ok' ).click();
-			await page.waitForLoadState( 'networkidle' );
 
 			await expect(
 				page
@@ -384,13 +370,17 @@ test.describe( 'WooCommerce Shipping Settings - Add new shipping zone', () => {
 				.click();
 			await page.locator( '#woocommerce_flat_rate_cost' ).fill( '10' );
 			await page.locator( '#btn-ok' ).click();
-			await page.waitForLoadState( 'networkidle' );
 
-			await page.locator( 'text=Delete' ).waitFor();
+			await expect(
+				page.getByRole( 'cell', { name: 'Edit | Delete', exact: true } )
+			).toBeVisible();
 
 			page.on( 'dialog', ( dialog ) => dialog.accept() );
 
-			await page.locator( 'text=Delete' ).click();
+			await page
+				.getByRole( 'cell', { name: 'Edit | Delete', exact: true } )
+				.locator( 'text=Delete' )
+				.click();
 
 			await expect(
 				page.locator( '.wc-shipping-zone-method-blank-state' )
@@ -482,7 +472,6 @@ test.describe( 'Verifies shipping options from customer perspective', () => {
 		await context.clearCookies();
 
 		await page.goto( `/shop/?add-to-cart=${ productId }` );
-		await page.waitForLoadState( 'networkidle' );
 	} );
 
 	test.afterAll( async ( { baseURL } ) => {

plugins/woocommerce/tests/e2e-pw/tests/merchant/create-woocommerce-blocks.spec.js

@@ -52,7 +52,14 @@ const test = baseTest.extend( {
 
 test.describe(
 	'Add WooCommerce Blocks Into Page',
-	{ tag: [ '@gutenberg', '@services', '@skip-on-default-pressable' ] },
+	{
+		tag: [
+			'@gutenberg',
+			'@services',
+			'@skip-on-default-pressable',
+			'@skip-on-default-wpcom',
+		],
+	},
 	() => {
 		test.beforeAll( async ( { api } ) => {
 			// add product attribute

plugins/woocommerce/tests/e2e-pw/tests/merchant/create-woocommerce-patterns.spec.js

@@ -28,7 +28,14 @@ const test = baseTest.extend( {
 
 test.describe(
 	'Add WooCommerce Patterns Into Page',
-	{ tag: [ '@gutenberg', '@services', '@skip-on-default-pressable' ] },
+	{
+		tag: [
+			'@gutenberg',
+			'@services',
+			'@skip-on-default-pressable',
+			'@skip-on-default-wpcom',
+		],
+	},
 	() => {
 		test( 'can insert WooCommerce patterns into page', async ( {
 			page,
@@ -86,7 +93,9 @@ test.describe(
 			// check some elements from added patterns
 			for ( let i = 1; i < wooPatterns.length; i++ ) {
 				await expect(
-					page.getByText( `${ wooPatterns[ i ].button }` )
+					page.getByRole( 'link', {
+						name: `${ wooPatterns[ i ].button }`,
+					} )
 				).toBeVisible();
 			}
 		} );

plugins/woocommerce/tests/e2e-pw/tests/merchant/customer-list.spec.js

@@ -85,7 +85,7 @@ test.describe( 'Merchant > Customer List', { tag: '@services' }, () => {
 
 	test(
 		'Merchant can view a list of all customers, filter and download',
-		{ tag: '@skip-on-default-pressable' },
+		{ tag: [ '@skip-on-default-pressable', '@skip-on-default-wpcom' ] },
 		async ( { page, customers } ) => {
 			await test.step( 'Go to the customers reports page', async () => {
 				const responsePromise = page.waitForResponse(

plugins/woocommerce/tests/e2e-pw/tests/merchant/customer-payment-page.spec.js

@@ -110,6 +110,17 @@ test.describe(
 			await test.step( 'Select payment method and pay for the order', async () => {
 				// explicitly select the payment method
 				await page.getByText( 'Direct bank transfer' ).click();
+
+				// Handle notice if present
+				await page.addLocatorHandler(
+					page.getByRole( 'link', { name: 'Dismiss' } ),
+					async () => {
+						await page
+							.getByRole( 'link', { name: 'Dismiss' } )
+							.click();
+					}
+				);
+
 				// pay for the order
 				await page
 					.getByRole( 'button', { name: 'Pay for order' } )

plugins/woocommerce/tests/e2e-pw/tests/merchant/launch-your-store.spec.js

@@ -4,7 +4,7 @@ const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
 
 test.describe(
 	'Launch Your Store - logged in',
-	{ tag: [ '@gutenberg', '@services' ] },
+	{ tag: [ '@gutenberg', '@services', '@skip-on-default-wpcom' ] },
 	() => {
 		test.use( { storageState: process.env.ADMINSTATE } );