From 6b05ffe4597c517a858b221563fd559d5833e220 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 5 Jan 2023 19:54:16 +0700 Subject: [PATCH 1/6] Update edit button class for Site Editor in latest Gutenberg tests --- tests/e2e/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/e2e/utils.js b/tests/e2e/utils.js index 077ed862419..a67a185230c 100644 --- a/tests/e2e/utils.js +++ b/tests/e2e/utils.js @@ -66,7 +66,7 @@ const SELECTORS = { }, templateEditor: { editButton: - '.edit-site-layout__edit-button[aria-label="Open the editor"]', + '.edit-site-site-hub__edit-button[aria-label="Open the editor"]', }, }; From cc2b8cbe366e82563f94698f25829c3b94d44c60 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Fri, 6 Jan 2023 09:53:33 +0700 Subject: [PATCH 2/6] try: use waitForCanvas to prevent flaky tests --- tests/e2e/specs/shopper/filter-products-by-rating.test.ts | 1 + tests/e2e/specs/shopper/filter-products-by-stock.test.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/tests/e2e/specs/shopper/filter-products-by-rating.test.ts b/tests/e2e/specs/shopper/filter-products-by-rating.test.ts index 443a35cf6a8..610f9b1cdec 100644 --- a/tests/e2e/specs/shopper/filter-products-by-rating.test.ts +++ b/tests/e2e/specs/shopper/filter-products-by-rating.test.ts @@ -265,6 +265,7 @@ describe( `${ block.name } Block`, () => { it( 'should refresh the page only if the user click on button', async () => { await page.goto( editorPageUrl ); + await waitForCanvas(); await ensureSidebarOpened(); await selectBlockByName( block.slug ); await setCheckbox( diff --git a/tests/e2e/specs/shopper/filter-products-by-stock.test.ts b/tests/e2e/specs/shopper/filter-products-by-stock.test.ts index b1558a9d4ce..d5cc56098c6 100644 --- a/tests/e2e/specs/shopper/filter-products-by-stock.test.ts +++ b/tests/e2e/specs/shopper/filter-products-by-stock.test.ts @@ -271,6 +271,7 @@ describe( `${ block.name } Block`, () => { it( 'should refresh the page only if the user clicks on button', async () => { await page.goto( editorPageUrl ); + await waitForCanvas(); await ensureSidebarOpened(); await selectBlockByName( block.slug ); await setCheckbox( From ab1b3e2f1afbd55a13f420b179c853d18a0f8f29 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Fri, 6 Jan 2023 09:57:38 +0700 Subject: [PATCH 3/6] wait for attribute list before clicking --- tests/e2e/specs/shopper/filter-products-by-attribute.test.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts b/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts index f9bfd49982b..295f85b27ee 100644 --- a/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts +++ b/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts @@ -246,6 +246,9 @@ describe( `${ block.name } Block`, () => { await insertBlock( block.name ); await page.waitForNetworkIdle(); + await page.waitForSelector( + block.selectors.editor.firstAttributeInTheList + ); // It seems that .click doesn't work well with radio input element. await page.$eval( block.selectors.editor.firstAttributeInTheList, From 33757f331efe8d442e7b5f9c024792beb3590411 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Fri, 6 Jan 2023 10:32:24 +0700 Subject: [PATCH 4/6] sidebar setting belong to page, not editor canvas --- tests/utils/find-tools-panel-with-title.ts | 7 +------ tests/utils/get-form-element-id-by-label.ts | 9 ++------- tests/utils/get-toggle-id-by-label.ts | 9 ++------- 3 files changed, 5 insertions(+), 20 deletions(-) diff --git a/tests/utils/find-tools-panel-with-title.ts b/tests/utils/find-tools-panel-with-title.ts index 9620d217dd1..ca22aedb85a 100644 --- a/tests/utils/find-tools-panel-with-title.ts +++ b/tests/utils/find-tools-panel-with-title.ts @@ -1,10 +1,5 @@ -/** - * External dependencies - */ -import { canvas } from '@wordpress/e2e-test-utils'; - export const findToolsPanelWithTitle = async ( panelTitle: string ) => { const panelToggleSelector = `//div[contains(@class, "components-tools-panel-header")]//h2[contains(@class, "components-heading") and contains(text(),"${ panelTitle }")]`; const panelSelector = `${ panelToggleSelector }/ancestor::*[contains(concat(" ", @class, " "), " components-tools-panel ")]`; - return await canvas().waitForXPath( panelSelector ); + return await page.waitForXPath( panelSelector ); }; diff --git a/tests/utils/get-form-element-id-by-label.ts b/tests/utils/get-form-element-id-by-label.ts index c3400b80663..f107cff491b 100644 --- a/tests/utils/get-form-element-id-by-label.ts +++ b/tests/utils/get-form-element-id-by-label.ts @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { canvas } from '@wordpress/e2e-test-utils'; - export const getFormElementIdByLabel = async ( text: string, className: string @@ -10,11 +5,11 @@ export const getFormElementIdByLabel = async ( // Remove leading dot if className is passed with it. className = className.replace( /^\./, '' ); - const labelElement = await canvas().waitForXPath( + const labelElement = await page.waitForXPath( `//label[contains(text(), "${ text }") and contains(@class, "${ className }")]`, { visible: true } ); - return await canvas().evaluate( + return await page.evaluate( ( label ) => `#${ label.getAttribute( 'for' ) }`, labelElement ); diff --git a/tests/utils/get-toggle-id-by-label.ts b/tests/utils/get-toggle-id-by-label.ts index 814204e6bf2..d67c7f4092b 100644 --- a/tests/utils/get-toggle-id-by-label.ts +++ b/tests/utils/get-toggle-id-by-label.ts @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { canvas } from '@wordpress/e2e-test-utils'; - /** * Internal dependencies */ @@ -26,12 +21,12 @@ export const getToggleIdByLabel = async ( ): Promise< string > => { const delay = 1000; // Wait a bit for toggle to finish rerendering. - await canvas().waitForTimeout( delay ); + await page.waitForTimeout( delay ); const checkboxId = await getFormElementIdByLabel( label, 'components-toggle-control__label' ); - const checkbox = await canvas().$( checkboxId ); + const checkbox = await page.$( checkboxId ); if ( ! checkbox ) { if ( retry * delay < DEFAULT_TIMEOUT ) { return await getToggleIdByLabel( label, retry + 1 ); From ec75accc8e64b9c824c4944f7f9d1b190f472722 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Fri, 6 Jan 2023 13:41:28 +0700 Subject: [PATCH 5/6] canvas now available in the page editor, so we need to use canvas() to access elements inside the content area --- .../e2e/specs/shopper/filter-products-by-attribute.test.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts b/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts index 295f85b27ee..2647ad8b908 100644 --- a/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts +++ b/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts @@ -246,15 +246,15 @@ describe( `${ block.name } Block`, () => { await insertBlock( block.name ); await page.waitForNetworkIdle(); - await page.waitForSelector( + await canvas().waitForSelector( block.selectors.editor.firstAttributeInTheList ); // It seems that .click doesn't work well with radio input element. - await page.$eval( + await canvas().$eval( block.selectors.editor.firstAttributeInTheList, ( el ) => ( el as HTMLInputElement ).click() ); - await page.click( selectors.editor.doneButton ); + await canvas().click( selectors.editor.doneButton ); await publishPost(); editorPageUrl = page.url(); From e9187af292a29409bd59e88f4ee28b26039b7524 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Fri, 6 Jan 2023 17:33:17 +0700 Subject: [PATCH 6/6] disable flaky test due to issue with fixture data --- .../product-query/popular-filters.test.ts | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/tests/e2e/specs/backend/product-query/popular-filters.test.ts b/tests/e2e/specs/backend/product-query/popular-filters.test.ts index 4847883e43b..86bb8241716 100644 --- a/tests/e2e/specs/backend/product-query/popular-filters.test.ts +++ b/tests/e2e/specs/backend/product-query/popular-filters.test.ts @@ -124,14 +124,20 @@ describeOrSkip( GUTENBERG_EDITOR_CONTEXT === 'gutenberg' )( filter: 'Newest', shortcode: '[products orderby="date" order="DESC" limit="9"]', }, - { - filter: 'Best Selling', - shortcode: '[products best_selling="true" limit="9"]', - }, - { - filter: 'Top Rated', - shortcode: '[products top_rated="true" limit="9"]', - }, + /** + * The following tests are commented out because they are flaky + * due to the lack of orders and reviews in the test environment. + * + * @see https://github.com/woocommerce/woocommerce-blocks/issues/8116 + */ + // { + // filter: 'Best Selling', + // shortcode: '[products best_selling="true" limit="9"]', + // }, + // { + // filter: 'Top Rated', + // shortcode: '[products top_rated="true" limit="9"]', + // }, ] )( '$filter', ( { filter, shortcode } ) => { beforeEach( async () => { await selectPopularFilter( filter );