Use a stricter locator when asserting the size variation

woocommerce · Mar 19, 2024 · 86ccd5a · 86ccd5a
1 parent f2a8c7f
commit 86ccd5a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 38 deletions.
diff --git a/plugins/woocommerce/changelog/e2e-fix-flaky-create-variable-product-test b/plugins/woocommerce/changelog/e2e-fix-flaky-create-variable-product-test
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+E2E tests: fix variable product flakiness
diff --git a/.../e2e-pw/tests/merchant/products/block-editor/create-variable-product-block-editor.spec.js b/.../e2e-pw/tests/merchant/products/block-editor/create-variable-product-block-editor.spec.js
@@ -53,7 +53,7 @@ test.describe( 'Variations tab', () => {
 			'The block product editor is not being tested'
 		);
 
-		test( 'can create a variation option and publish the product', async ( {
+		test.only( 'can create a variation option and publish the product', async ( {
 			page,
 		} ) => {
 			await page.goto( NEW_EDITOR_ADD_PRODUCT_URL );
@@ -94,45 +94,19 @@ test.describe( 'Variations tab', () => {
 
 			await expect( attributeColumn ).toHaveValue( 'Size' );
 
-			await page
-				.locator( '//input[@placeholder="Search or create value"]' )
-				.fill( attributesData.options[ 0 ] );
-
-			await page
-				.locator( `text=Create "${ attributesData.options[ 0 ] }"` )
-				.click();
-
-			await expect(
-				page.getByText( attributesData.options[ 0 ] ).first()
-			).toBeVisible();
-
-			await page
-				.locator(
-					'.woocommerce-new-attribute-modal__table-attribute-value-column .woocommerce-experimental-select-control__input'
-				)
-				.fill( attributesData.options[ 1 ] );
-
-			await page
-				.locator( `text=Create "${ attributesData.options[ 1 ] }"` )
-				.click();
-
-			await expect(
-				page.getByText( attributesData.options[ 1 ] ).first()
-			).toBeVisible();
-
-			await page
-				.locator(
-					'.woocommerce-new-attribute-modal__table-attribute-value-column .woocommerce-experimental-select-control__input'
-				)
-				.fill( attributesData.options[ 2 ] );
+			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 "${ attributesData.options[ 2 ] }"` )
-				.click();
+				await page.locator( `text=Create "${ option }"` ).click();
 
-			await expect(
-				page.getByText( attributesData.options[ 2 ] ).first()
-			).toBeVisible();
+				await expect(
+					page.locator( '.woocommerce-attribute-term-field' )
+				).toContainText( option );
+			}
 
 			await page
 				.locator( '.woocommerce-new-attribute-modal__buttons' )