🧪 Fix for a couple of failing e2e tests (#47253)

Co-authored-by: Jon Lane <jon.lane@automattic.com>

plugins/woocommerce/changelog/e2e-fix-flaky-buildkite-tests

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Fix for a couple of flaky e2e tests

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

@@ -79,9 +79,12 @@ test.describe( 'Variations tab', () => {
 		test.skip( 'can create a variation option and publish the product', async ( {
 			page,
 		} ) => {
+			await test.step( 'Load new product editor, disable tour', async () => {
 				await page.goto( NEW_EDITOR_ADD_PRODUCT_URL );
 				await disableVariableProductBlockTour( { page } );
+			} );
 
+			await test.step( 'Click on General tab, enter product name and summary', async () => {
 				await clickOnTab( 'General', page );
 				await page
 					.getByPlaceholder( 'e.g. 12 oz Coffee Mug' )
@@ -92,7 +95,9 @@ test.describe( 'Variations tab', () => {
 					)
 					.last()
 					.fill( productData.summary );
+			} );
 
+			await test.step( 'Click on Variations tab, add a new attribute', async () => {
 				await clickOnTab( 'Variations', page );
 				await page
 					.getByRole( 'heading', { name: 'Variation options' } )
@@ -104,11 +109,15 @@ test.describe( 'Variations tab', () => {
 						name: 'Add sizes',
 					} )
 					.click();
+			} );
 
+			await test.step( 'Add attribute options', async () => {
 				await page
 					.getByRole( 'heading', { name: 'Add variation options' } )
 					.isVisible();
 
+				await page.waitForLoadState( 'domcontentloaded' );
+
 				await page.locator( 'text=Create "Size"' ).click();
 
 				const attributeColumn = page.getByPlaceholder(
@@ -137,32 +146,35 @@ test.describe( 'Variations tab', () => {
 						name: 'Add',
 					} )
 					.click();
+			} );
 
-			page.on( 'dialog', ( dialog ) => dialog.accept( '50' ) );
+			await test.step( 'Add prices to variations', async () => {
-			await page.locator( `text=Set prices` ).click( { timeout: 3000 } );
+				await expect(
+					page.getByText(
+						'3 variations do not have prices. Variations that do not have prices will not be visible to customers.Set prices'
+					)
+				).toBeVisible();
 
-			await page.waitForResponse(
+				await page.on( 'dialog', ( dialog ) => dialog.accept( '50' ) );
-				( response ) =>
+
-					response
+				await page
-						.url()
+					.getByRole( 'button', { name: 'Set prices' } )
-						.includes( '/variations/batch?_locale=user' ) &&
+					.click();
-					response.status() === 200
-			);
 
 				await expect(
-				await page
+					page.getByText( '$50.00' ).nth( 2 )
-					.locator(
+				).toBeVisible();
-						'.woocommerce-product-variations__table-body > div'
-					)
-					.count()
-			).toEqual( attributesData.options.length );
 
-			await page
+				await expect(
-				.locator( '.woocommerce-product-variations__table-body > div' )
+					page.getByLabel( 'Dismiss this notice' )
-				.first()
+				).toContainText( '3 variations updated.' );
-				.locator( 'text="$50.00"' )
-				.waitFor( { state: 'visible', timeout: 3000 } );
 
+				await expect(
+					page.getByRole( 'button', { name: 'Select all (3)' } )
+				).toBeVisible();
+			} );
+
+			await test.step( 'Publish the product', async () => {
 				await page
 					.locator( '.woocommerce-product-header__actions' )
 					.getByRole( 'button', {
@@ -170,14 +182,9 @@ test.describe( 'Variations tab', () => {
 					} )
 					.click();
 
-			// await page
+				const element = page.locator(
-			// 	.locator( '.woocommerce-product-publish-panel__header' )
+					'div.components-snackbar__content'
-			// 	.getByRole( 'button', {
+				);
-			// 		name: 'Publish',
-			// 	} )
-			// 	.click();
-
-			const element = page.locator( 'div.components-snackbar__content' );
 				if ( Array.isArray( element ) ) {
 					await expect( await element[ 0 ].innerText() ).toMatch(
 						`${ attributesData.options.length } variations updated.`
@@ -187,6 +194,7 @@ test.describe( 'Variations tab', () => {
 					);
 				}
 			} );
+		} );
 
 		test( 'can edit a variation', async ( { page } ) => {
 			await page.goto(

plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/product-attributes-block-editor.spec.js

@@ -114,6 +114,8 @@ test.skip( 'can create and add attributes', async ( { page, product } ) => {
 	await test.step( 'add new attributes', async () => {
 		await page.getByRole( 'button', { name: 'Add new' } ).click();
 
+		await page.waitForLoadState( 'domcontentloaded' );
+
 		// Add attributes that do not exist
 		await page.getByPlaceholder( 'Search or create attribute' ).click();
 
@@ -214,6 +216,8 @@ test.skip( 'can add existing attributes', async ( {
 	await test.step( 'add an existing attribute', async () => {
 		await page.getByRole( 'button', { name: 'Add new' } ).click();
 
+		await page.waitForLoadState( 'domcontentloaded' );
+
 		// Add attributes that do not exist
 		await page.getByPlaceholder( 'Search or create attribute' ).click();
 

plugins/woocommerce/tests/e2e-pw/tests/shopper/cart-checkout-calculate-tax.spec.js

@@ -159,7 +159,7 @@ test.describe.serial( 'Tax rates in the cart and checkout', () => {
 				).toBeVisible();
 				await expect(
 					page.getByRole( 'cell', {
-						name: '$250.00 (includes $50.00 Nasty Tax)',
+						name: '$250.00 (includes $50.00 Tax)',
 					} )
 				).toBeVisible();
 			} );
@@ -180,8 +180,8 @@ test.describe.serial( 'Tax rates in the cart and checkout', () => {
 					} )
 				).toBeVisible();
 				await expect(
-					page.getByRole( 'row', {
+					page.getByRole( 'cell', {
-						name: 'Total $250.00 (includes $50.00 Nasty Tax)',
+						name: '$250.00 (includes $50.00 Tax)',
 					} )
 				).toBeVisible();
 			} );
@@ -274,7 +274,7 @@ test.describe.serial( 'Tax rates in the cart and checkout', () => {
 					page.getByRole( 'row', { name: 'Subtotal $200.00' } )
 				).toBeVisible();
 				await expect(
-					page.getByRole( 'row', { name: 'Nasty Tax $50.00' } )
+					page.getByRole( 'row', { name: 'Tax $50.00' } )
 				).toBeVisible();
 				await expect(
 					page.getByRole( 'row', { name: 'Total $250.00' } )

plugins/woocommerce/tests/e2e-pw/utils/login.js

@@ -1,5 +1,6 @@
 const { expect } = require( '../fixtures/fixtures' );
 const logIn = async ( page, username, password, assertSuccess = true ) => {
+	await page.waitForSelector( 'form' );
 	await page.getByLabel( 'Username or Email Address' ).fill( username );
 	await page.getByRole( 'textbox', { name: 'Password' } ).fill( password );
 	await page.getByRole( 'button', { name: 'Log In' } ).click();