From 18e83a2467d9c2011156e239ad918b000d19681a Mon Sep 17 00:00:00 2001 From: Jonathan Lane Date: Thu, 9 May 2024 01:33:26 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=AA=20Fix=20for=20a=20couple=20of=20fa?= =?UTF-8?q?iling=20e2e=20tests=20(#47253)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Jon Lane --- .../changelog/e2e-fix-flaky-buildkite-tests | 4 + ...eate-variable-product-block-editor.spec.js | 196 +++++++++--------- .../product-attributes-block-editor.spec.js | 4 + .../cart-checkout-calculate-tax.spec.js | 8 +- .../woocommerce/tests/e2e-pw/utils/login.js | 1 + 5 files changed, 115 insertions(+), 98 deletions(-) create mode 100644 plugins/woocommerce/changelog/e2e-fix-flaky-buildkite-tests diff --git a/plugins/woocommerce/changelog/e2e-fix-flaky-buildkite-tests b/plugins/woocommerce/changelog/e2e-fix-flaky-buildkite-tests new file mode 100644 index 00000000000..02e71e7d496 --- /dev/null +++ b/plugins/woocommerce/changelog/e2e-fix-flaky-buildkite-tests @@ -0,0 +1,4 @@ +Significance: patch +Type: dev + +Fix for a couple of flaky e2e tests diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/create-variable-product-block-editor.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/create-variable-product-block-editor.spec.js index 0eb65dc2902..62030d5744b 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/create-variable-product-block-editor.spec.js +++ b/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 disableVariableProductBlockTour( { page } ); + await test.step( 'Load new product editor, disable tour', async () => { + await page.goto( NEW_EDITOR_ADD_PRODUCT_URL ); + await disableVariableProductBlockTour( { page } ); + } ); - await clickOnTab( 'General', page ); - await page - .getByPlaceholder( 'e.g. 12 oz Coffee Mug' ) - .fill( productData.name ); - await page - .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 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' ) + .fill( productData.name ); 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' ) - ).toContainText( option ); - } + page.getByText( '$50.00' ).nth( 2 ) + ).toBeVisible(); - await page - .locator( '.woocommerce-new-attribute-modal__buttons' ) - .getByRole( 'button', { - name: 'Add', - } ) - .click(); + await expect( + page.getByLabel( 'Dismiss this notice' ) + ).toContainText( '3 variations updated.' ); - page.on( 'dialog', ( dialog ) => dialog.accept( '50' ) ); - await page.locator( `text=Set prices` ).click( { timeout: 3000 } ); + await expect( + page.getByRole( 'button', { name: 'Select all (3)' } ) + ).toBeVisible(); + } ); - await page.waitForResponse( - ( response ) => - response - .url() - .includes( '/variations/batch?_locale=user' ) && - response.status() === 200 - ); - - await expect( + await test.step( 'Publish the product', async () => { await page - .locator( - '.woocommerce-product-variations__table-body > div' - ) - .count() - ).toEqual( attributesData.options.length ); + .locator( '.woocommerce-product-header__actions' ) + .getByRole( 'button', { + name: 'Publish', + } ) + .click(); - await page - .locator( '.woocommerce-product-variations__table-body > div' ) - .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.` + const element = page.locator( + 'div.components-snackbar__content' ); - await expect( await element[ 1 ].innerText() ).toMatch( - /Product published/ - ); - } + if ( Array.isArray( element ) ) { + 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 } ) => { diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/product-attributes-block-editor.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/product-attributes-block-editor.spec.js index fbbe045204b..c1d8a6247ec 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/product-attributes-block-editor.spec.js +++ b/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(); diff --git a/plugins/woocommerce/tests/e2e-pw/tests/shopper/cart-checkout-calculate-tax.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/shopper/cart-checkout-calculate-tax.spec.js index 146b414fc81..9bb2148e31f 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/shopper/cart-checkout-calculate-tax.spec.js +++ b/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', { - name: 'Total $250.00 (includes $50.00 Nasty Tax)', + page.getByRole( 'cell', { + 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' } ) diff --git a/plugins/woocommerce/tests/e2e-pw/utils/login.js b/plugins/woocommerce/tests/e2e-pw/utils/login.js index 882f97f7b73..5e1c70ad9f2 100644 --- a/plugins/woocommerce/tests/e2e-pw/utils/login.js +++ b/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();