Reduce flakiness of `create-variable-product` and `create-coupon` specs (#38321)

plugins/woocommerce/changelog/e2e-increase-timeouts

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Increase default timeout and test timeout of create-variable-product spec.

plugins/woocommerce/tests/e2e-pw/README.md

@@ -53,12 +53,12 @@ Other ways of running tests (make sure you are in the `plugins/woocommerce` fold
 -   `pnpm test:e2e-pw --headed` (headed -- displaying browser window and test interactions)
 -   `pnpm test:e2e-pw --debug` (runs tests in debug mode)
 -   `pnpm test:e2e-pw ./tests/e2e-pw/tests/activate-and-setup/basic-setup.spec.js` (runs a single test)
--   `pnpm test:e2e-pw --ui` (open tests in [Playwright UI mode](https://playwright.dev/docs/test-ui-mode)). You may need to increase the [test timeout](https://playwright.dev/docs/api/class-testconfig#test-config-timeout) from the 90-second default, as tests might take longer to execute when ran through the Playwright UI. You may do this by setting the `DEFAULT_TIMEOUT_OVERRIDE` environment variable like so:
-	```bash
-	# Increase test timeout to 3 minutes
-	export DEFAULT_TIMEOUT_OVERRIDE=180000
-	pnpm test:e2e-pw --ui
-	```
+-   `pnpm test:e2e-pw --ui` (open tests in [Playwright UI mode](https://playwright.dev/docs/test-ui-mode)). You may need to increase the [test timeout](https://playwright.dev/docs/api/class-testconfig#test-config-timeout) by setting the `DEFAULT_TIMEOUT_OVERRIDE` environment variable like so:
+    ```bash
+    # Increase test timeout to 3 minutes
+    export DEFAULT_TIMEOUT_OVERRIDE=180000
+    pnpm test:e2e-pw --ui
+    ```
 
 To see all options, make sure you are in the `plugins/woocommerce` folder and run `pnpm playwright test --help`
 

plugins/woocommerce/tests/e2e-pw/playwright.config.js

@@ -11,7 +11,7 @@ const {
 const config = {
 	timeout: DEFAULT_TIMEOUT_OVERRIDE
 		? Number( DEFAULT_TIMEOUT_OVERRIDE )
-		: 90 * 1000,
+		: 120 * 1000,
 	expect: { timeout: 20 * 1000 },
 	outputDir: './test-results/report',
 	globalSetup: require.resolve( './global-setup' ),

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

@@ -29,14 +29,20 @@ test.describe( 'Add New Coupon Page', () => {
 			waitUntil: 'networkidle',
 		} );
 
-		await page.fill( '#title', couponCode );
+		await page.locator( '#title' ).fill( couponCode );
 
-		await page.fill( '#woocommerce-coupon-description', 'test coupon' );
+		// Blur then wait for the auto-save to finish
+		await page.locator( '#title' ).blur();
+		await page.waitForLoadState( 'networkidle' );
 
-		await page.fill( '#coupon_amount', '100' );
+		await page
+			.locator( '#woocommerce-coupon-description' )
+			.fill( 'test coupon' );
 
-		await expect( page.locator( '#publish:not(.disabled)' ) ).toBeVisible();
-		await page.click( '#publish' );
+		await page.locator( '#coupon_amount' ).fill( '100' );
+
+		await page.locator( '#publish:not(.disabled)' ).click();
+		await page.waitForLoadState( 'networkidle' );
 
 		await expect(
 			page

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

@@ -203,6 +203,8 @@ async function createVariableProductFixture( baseURL ) {
 }
 
 test.describe( 'Add New Variable Product Page', () => {
+	test.describe.configure( { timeout: 180 * 1000 } );
+
 	test.use( { storageState: process.env.ADMINSTATE } );
 
 	test.beforeAll( async ( { baseURL } ) => {
@@ -241,7 +243,9 @@ test.describe( 'Add New Variable Product Page', () => {
 		await test.step(
 			'Select the "Variable product" product type.',
 			async () => {
-				await page.selectOption( '#product-type', 'variable' );
+				await page
+					.locator( '#product-type' )
+					.selectOption( 'variable' );
 			}
 		);
 
@@ -370,6 +374,7 @@ test.describe( 'Add New Variable Product Page', () => {
 			'Save before going to the Variations tab to prevent variations from all attributes to be automatically created.',
 			async () => {
 				await page.locator( '#save-post' ).click();
+				await page.waitForLoadState( 'networkidle' );
 			}
 		);
 
@@ -383,7 +388,7 @@ test.describe( 'Add New Variable Product Page', () => {
 		);
 
 		await test.step( 'Click on the "Variations" tab.', async () => {
-			await page.click( 'a[href="#variable_product_options"]' );
+			await page.locator( 'a[href="#variable_product_options"]' ).click();
 		} );
 
 		await test.step(
@@ -392,7 +397,7 @@ test.describe( 'Add New Variable Product Page', () => {
 				// event listener for handling the link_all_variations confirmation dialog
 				page.on( 'dialog', ( dialog ) => dialog.accept() );
 
-				await page.click( 'button.generate_variations' );
+				await page.locator( 'button.generate_variations' ).click();
 			}
 		);
 
@@ -426,6 +431,7 @@ test.describe( 'Add New Variable Product Page', () => {
 
 		await test.step( 'Click "Save Draft" button.', async () => {
 			await page.locator( '#save-post' ).click();
+			await page.waitForLoadState( 'networkidle' );
 		} );
 
 		await test.step(
@@ -771,6 +777,7 @@ test.describe( 'Add New Variable Product Page', () => {
 
 		// Save before going to the Variations tab to prevent variations from all attributes to be automatically created
 		await page.locator( '#save-post' ).click();
+		await page.waitForLoadState( 'networkidle' );
 		await expect(
 			page.getByText( 'Product draft updated. ' )
 		).toBeVisible();
@@ -799,6 +806,7 @@ test.describe( 'Add New Variable Product Page', () => {
 		}
 
 		await page.locator( '#save-post' ).click();
+		await page.waitForLoadState( 'networkidle' );
 		await expect(
 			page.getByText( 'Product draft updated. ' )
 		).toBeVisible();
@@ -823,7 +831,7 @@ test.describe( 'Add New Variable Product Page', () => {
 		).not.toBeVisible();
 		await firstVariationContainer
 			.getByLabel( 'Stock quantity' )
-			.nth(1)
+			.nth( 1 )
 			.fill( stockAmount );
 		await page.selectOption( '#variable_backorders0', 'notify', {
 			force: true,