From 3ad9ebf52a0dc016c890099005afadabfa991b16 Mon Sep 17 00:00:00 2001 From: Bart Kalisz Date: Wed, 8 May 2024 11:26:52 +0200 Subject: [PATCH] Blocks E2E: Fix flaky Product Collection tests (#47211) --- ...ollection.block_theme.side_effects.spec.ts | 99 +++++++++++-------- .../product-collection.page.ts | 44 +++------ ...211-fix-e2e-flaky-product-collection-tests | 4 + 3 files changed, 74 insertions(+), 73 deletions(-) create mode 100644 plugins/woocommerce/changelog/47211-fix-e2e-flaky-product-collection-tests diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.block_theme.side_effects.spec.ts index 698114b7eb60c..945e4b8e9c170 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.block_theme.side_effects.spec.ts @@ -2,7 +2,7 @@ * External dependencies */ import { test as base, expect } from '@woocommerce/e2e-playwright-utils'; -import type { Request, Locator } from '@playwright/test'; +import type { Request } from '@playwright/test'; /** * Internal dependencies @@ -79,73 +79,90 @@ test.describe( 'Product Collection', () => { }, ]; - await Promise.all( - productElements.map( async ( productElement ) => { - await pageObject.insertBlockInProductCollection( - productElement - ); - } ) - ); - }; - - const verifyProductContent = async ( product: Locator ) => { - await expect( product ).toContainText( 'Beanie' ); // core/post-title - await expect( product ).toContainText( - '$20.00 Original price was: $20.00.$18.00Current price is: $18.00.' - ); // woocommerce/product-price - await expect( product ).toContainText( 'woo-beanie' ); // woocommerce/product-sku - await expect( product ).toContainText( 'In stock' ); // woocommerce/product-stock-indicator - await expect( product ).toContainText( - 'This is a simple product.' - ); // core/post-excerpt - await expect( product ).toContainText( 'Accessories' ); // core/post-terms - product_cat - await expect( product ).toContainText( 'Recommended' ); // core/post-terms - product_tag - await expect( product ).toContainText( 'SaleProduct on sale' ); // woocommerce/product-sale-badge - await expect( product ).toContainText( 'Add to cart' ); // woocommerce/product-button + for ( const productElement of productElements ) { + await pageObject.insertBlockInProductCollection( + productElement + ); + } }; - // Expects are collected in verifyProductContent function - // eslint-disable-next-line playwright/expect-expect - test( 'In a post', async ( { pageObject } ) => { + const expectedProductContent = [ + 'Beanie', // core/post-title + '$20.00 Original price was: $20.00.$18.00Current price is: $18.00.', // woocommerce/product-price + 'woo-beanie', // woocommerce/product-sku + 'In stock', // woocommerce/product-stock-indicator + 'This is a simple product.', // core/post-excerpt + 'Accessories', // core/post-terms - product_cat + 'Recommended', // core/post-terms - product_tag + 'SaleProduct on sale', // woocommerce/product-sale-badge + 'Add to cart', // woocommerce/product-button + ]; + + test( 'In a post', async ( { page, pageObject } ) => { await pageObject.createNewPostAndInsertBlock(); + + await expect( + page.locator( '[data-testid="product-image"]:visible' ) + ).toHaveCount( 9 ); + await insertProductElements( pageObject ); await pageObject.publishAndGoToFrontend(); - const product = pageObject.products.nth( 1 ); - - await verifyProductContent( product ); + for ( const content of expectedProductContent ) { + await expect( + page.locator( '.wc-block-product-template' ) + ).toContainText( content ); + } } ); - // Expects are collected in verifyProductContent function - // eslint-disable-next-line playwright/expect-expect test( 'In a Product Archive (Product Catalog)', async ( { - pageObject, + page, editor, + pageObject, } ) => { await pageObject.replaceProductsWithProductCollectionInTemplate( 'woocommerce/woocommerce//archive-product' ); + + await expect( + editor.canvas.locator( '[data-testid="product-image"]:visible' ) + ).toHaveCount( 16 ); + await insertProductElements( pageObject ); await editor.saveSiteEditorEntities(); await pageObject.goToProductCatalogFrontend(); - const product = pageObject.products.nth( 1 ); + // Workaround for the issue with the product change not being + // reflected in the frontend yet. + try { + await page.getByText( 'woo-beanie' ).waitFor(); + } catch ( _error ) { + await page.reload(); + } - await verifyProductContent( product ); + for ( const content of expectedProductContent ) { + await expect( + page.locator( '.wc-block-product-template' ) + ).toContainText( content ); + } } ); - // Expects are collected in verifyProductContent function - // eslint-disable-next-line playwright/expect-expect - test( 'On a Home Page', async ( { pageObject, editor } ) => { + test( 'On a Home Page', async ( { page, editor, pageObject } ) => { await pageObject.goToHomePageAndInsertCollection(); + await expect( + editor.canvas.locator( '[data-testid="product-image"]:visible' ) + ).toHaveCount( 9 ); + await insertProductElements( pageObject ); await editor.saveSiteEditorEntities(); await pageObject.goToHomePageFrontend(); - const product = pageObject.products.nth( 1 ); - - await verifyProductContent( product ); + for ( const content of expectedProductContent ) { + await expect( + page.locator( '.wc-block-product-template' ) + ).toContainText( content ); + } } ); } ); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.page.ts b/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.page.ts index 0c37cb2df1a1e..2b7a9859f95d3 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.page.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.page.ts @@ -3,7 +3,7 @@ */ import { Locator, Page } from '@playwright/test'; import { TemplateApiUtils, EditorUtils } from '@woocommerce/e2e-utils'; -import { Editor, Admin } from '@wordpress/e2e-test-utils-playwright'; +import { expect, Editor, Admin } from '@wordpress/e2e-test-utils-playwright'; /** * Internal dependencies @@ -124,15 +124,13 @@ class ProductCollectionPage { ? collectionToButtonNameMap[ collection ] : collectionToButtonNameMap.productCatalog; - await this.admin.page - .frameLocator( 'iframe[name="editor-canvas"]' ) + await this.editor.canvas .getByRole( 'button', { name: buttonName } ) .click(); } async createNewPostAndInsertBlock( collection?: Collections ) { await this.admin.createNewPost( { legacyCanvas: true } ); - await this.editorUtils.closeWelcomeGuideModal(); await this.insertProductCollection(); await this.chooseCollectionInPost( collection ); await this.refreshLocators( 'editor' ); @@ -145,7 +143,6 @@ class ProductCollectionPage { collection: Collections; } ) { await this.admin.createNewPost(); - await this.editorUtils.closeWelcomeGuideModal(); await this.insertProductCollection(); const productResponsePromise = this.page.waitForResponse( @@ -167,10 +164,8 @@ class ProductCollectionPage { } async publishAndGoToFrontend() { - await this.editor.publishPost(); - const url = new URL( this.page.url() ); - const postId = url.searchParams.get( 'post' ); - await this.page.goto( `/?p=${ postId }`, { waitUntil: 'commit' } ); + const postId = await this.editor.publishPost(); + await this.page.goto( `/?p=${ postId }` ); await this.refreshLocators( 'frontend' ); } @@ -178,13 +173,17 @@ class ProductCollectionPage { template: string, collection?: Collections ) { - await this.templateApiUtils.revertTemplate( template ); await this.admin.visitSiteEditor( { postId: template, postType: 'wp_template', } ); - await this.editorUtils.waitForSiteEditorFinishLoading(); + await this.editorUtils.enterEditMode(); + + await expect( + this.editor.canvas.locator( `[data-type="core/query"]` ) + ).toBeVisible(); + await this.editorUtils.replaceBlockByBlockName( 'core/query', this.BLOCK_SLUG @@ -212,17 +211,15 @@ class ProductCollectionPage { template: string, collection?: Collections ) { - await this.templateApiUtils.revertTemplate( template ); await this.admin.visitSiteEditor( { postId: template, postType: 'wp_template', } ); - await this.editorUtils.waitForSiteEditorFinishLoading(); - await this.page.click( 'body' ); + await this.editorUtils.enterEditMode(); + await this.editor.canvas.locator( 'body' ).click(); await this.insertProductCollection(); await this.chooseCollectionInTemplate( collection ); await this.refreshLocators( 'editor' ); - await this.editor.saveSiteEditorEntities(); } async goToHomePageAndInsertCollection( collection?: Collections ) { @@ -542,7 +539,6 @@ class ProductCollectionPage { name: string; attributes: object; } ) { - await this.waitForProductsToLoad(); const productTemplate = await this.editorUtils.getBlockByName( 'woocommerce/product-template' ); @@ -609,8 +605,6 @@ class ProductCollectionPage { } async refreshLocators( currentUI: 'editor' | 'frontend' ) { - await this.waitForProductsToLoad(); - if ( currentUI === 'editor' ) { await this.initializeLocatorsForEditor(); } else { @@ -657,20 +651,6 @@ class ProductCollectionPage { ); this.pagination = this.page.locator( SELECTORS.pagination.onFrontend ); } - - private async waitForProductsToLoad() { - const loaderInTemplate = this.page - .frameLocator( 'iframe[name="editor-canvas"]' ) - .getByLabel( 'Block: Product Template' ) - .locator( 'circle' ); - const loaderInPost = this.page - .getByLabel( 'Block: Product Template' ) - .locator( 'circle' ); - await Promise.all( [ - loaderInTemplate.waitFor( { state: 'hidden', timeout: 100000 } ), - loaderInPost.waitFor( { state: 'hidden', timeout: 100000 } ), - ] ); - } } export default ProductCollectionPage; diff --git a/plugins/woocommerce/changelog/47211-fix-e2e-flaky-product-collection-tests b/plugins/woocommerce/changelog/47211-fix-e2e-flaky-product-collection-tests new file mode 100644 index 0000000000000..d3ba816dab5fb --- /dev/null +++ b/plugins/woocommerce/changelog/47211-fix-e2e-flaky-product-collection-tests @@ -0,0 +1,4 @@ +Significance: patch +Type: dev + +Blocks E2E: Fix flaky Product Collection tests