🧪 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,113 +79,121 @@ test.describe( 'Variations tab', () => {
 		test.skip( 'can create a variation option and publish the product', async ( {
 			page,
 		} ) => {
-			await page.goto( NEW_EDITOR_ADD_PRODUCT_URL );
+			await test.step( 'Load new product editor, disable tour', async () => {
-			await disableVariableProductBlockTour( { page } );
+				await page.goto( NEW_EDITOR_ADD_PRODUCT_URL );
+				await disableVariableProductBlockTour( { page } );
+			} );
 
-			await clickOnTab( 'General', page );
+			await test.step( 'Click on General tab, enter product name and summary', async () => {
-			await page
+				await clickOnTab( 'General', page );
-				.getByPlaceholder( 'e.g. 12 oz Coffee Mug' )
+				await page
-				.fill( productData.name );
+					.getByPlaceholder( 'e.g. 12 oz Coffee Mug' )
-			await page
+					.fill( productData.name );
-				.locator(
-					'[data-template-block-id="basic-details"] .components-summary-control'
-				)
-				.last()
-				.fill( productData.summary );
-
-			await clickOnTab( 'Variations', page );
-			await page
-				.getByRole( 'heading', { name: 'Variation options' } )
-				.isVisible();
-
-			await page
-				.locator( '.woocommerce-attribute-field' )
-				.getByRole( 'button', {
-					name: 'Add sizes',
-				} )
-				.click();
-
-			await page
-				.getByRole( 'heading', { name: 'Add variation options' } )
-				.isVisible();
-
-			await page.locator( 'text=Create "Size"' ).click();
-
-			const attributeColumn = page.getByPlaceholder(
-				'Search or create attribute'
-			);
-
-			await expect( attributeColumn ).toHaveValue( 'Size' );
-
-			for ( const option of attributesData.options ) {
 				await page
 					.locator(
-						'.woocommerce-new-attribute-modal__table-attribute-value-column .woocommerce-experimental-select-control__input'
+						'[data-template-block-id="basic-details"] .components-summary-control'
 					)
-					.fill( option );
+					.last()
+					.fill( productData.summary );
+			} );
 
-				await page.locator( `text=Create "${ option }"` ).click();
+			await test.step( 'Click on Variations tab, add a new attribute', async () => {
+				await clickOnTab( 'Variations', page );
+				await page
+					.getByRole( 'heading', { name: 'Variation options' } )
+					.isVisible();
+
+				await page
+					.locator( '.woocommerce-attribute-field' )
+					.getByRole( 'button', {
+						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(
+					'Search or create attribute'
+				);
+
+				await expect( attributeColumn ).toHaveValue( 'Size' );
+
+				for ( const option of attributesData.options ) {
+					await page
+						.locator(
+							'.woocommerce-new-attribute-modal__table-attribute-value-column .woocommerce-experimental-select-control__input'
+						)
+						.fill( option );
+
+					await page.locator( `text=Create "${ option }"` ).click();
+
+					await expect(
+						page.locator( '.woocommerce-attribute-term-field' )
+					).toContainText( option );
+				}
+
+				await page
+					.locator( '.woocommerce-new-attribute-modal__buttons' )
+					.getByRole( 'button', {
+						name: 'Add',
+					} )
+					.click();
+			} );
+
+			await test.step( 'Add prices to variations', async () => {
+				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.on( 'dialog', ( dialog ) => dialog.accept( '50' ) );
+
+				await page
+					.getByRole( 'button', { name: 'Set prices' } )
+					.click();
 
 				await expect(
-					page.locator( '.woocommerce-attribute-term-field' )
+					page.getByText( '$50.00' ).nth( 2 )
-				).toContainText( option );
+				).toBeVisible();
-			}
 
-			await page
+				await expect(
-				.locator( '.woocommerce-new-attribute-modal__buttons' )
+					page.getByLabel( 'Dismiss this notice' )
-				.getByRole( 'button', {
+				).toContainText( '3 variations updated.' );
-					name: 'Add',
-				} )
-				.click();
 
-			page.on( 'dialog', ( dialog ) => dialog.accept( '50' ) );
+				await expect(
-			await page.locator( `text=Set prices` ).click( { timeout: 3000 } );
+					page.getByRole( 'button', { name: 'Select all (3)' } )
+				).toBeVisible();
+			} );
 
-			await page.waitForResponse(
+			await test.step( 'Publish the product', async () => {
-				( response ) =>
-					response
-						.url()
-						.includes( '/variations/batch?_locale=user' ) &&
-					response.status() === 200
-			);
-
-			await expect(
 				await page
-					.locator(
+					.locator( '.woocommerce-product-header__actions' )
-						'.woocommerce-product-variations__table-body > div'
+					.getByRole( 'button', {
-					)
+						name: 'Publish',
-					.count()
+					} )
-			).toEqual( attributesData.options.length );
+					.click();
 
-			await page
+				const element = page.locator(
-				.locator( '.woocommerce-product-variations__table-body > div' )
+					'div.components-snackbar__content'
-				.first()
-				.locator( 'text="$50.00"' )
-				.waitFor( { state: 'visible', timeout: 3000 } );
-
-			await page
-				.locator( '.woocommerce-product-header__actions' )
-				.getByRole( 'button', {
-					name: 'Publish',
-				} )
-				.click();
-
-			// await page
-			// 	.locator( '.woocommerce-product-publish-panel__header' )
-			// 	.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.`
 				);
-				await expect( await element[ 1 ].innerText() ).toMatch(
+				if ( Array.isArray( element ) ) {
-					/Product published/
+					await expect( await element[ 0 ].innerText() ).toMatch(
-				);
+						`${ attributesData.options.length } variations updated.`
-			}
+					);
+					await expect( await element[ 1 ].innerText() ).toMatch(
+						/Product published/
+					);
+				}
+			} );
 		} );
 
 		test( 'can edit a variation', async ( { page } ) => {

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();