Skip to content

Commit

Permalink
Blocks E2E: Fix flaky Product Collection tests (woocommerce#47211)
Browse files Browse the repository at this point in the history
  • Loading branch information
@WunderBart
WunderBart authored May 8, 2024
1 parent 99bed6d commit 3ad9ebf
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 73 deletions.
99 changes: 58 additions & 41 deletions ...ks/tests/e2e/tests/product-collection/product-collection.block_theme.side_effects.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 );
}
} );
} );

Expand Down
44 changes: 12 additions & 32 deletions plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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' );
Expand All @@ -145,7 +143,6 @@ class ProductCollectionPage {
collection: Collections;
} ) {
await this.admin.createNewPost();
await this.editorUtils.closeWelcomeGuideModal();
await this.insertProductCollection();

const productResponsePromise = this.page.waitForResponse(
Expand All @@ -167,24 +164,26 @@ 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' );
}

async replaceProductsWithProductCollectionInTemplate(
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
Expand Down Expand Up @@ -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 ) {
Expand Down Expand Up @@ -542,7 +539,6 @@ class ProductCollectionPage {
name: string;
attributes: object;
} ) {
await this.waitForProductsToLoad();
const productTemplate = await this.editorUtils.getBlockByName(
'woocommerce/product-template'
);
Expand Down Expand Up @@ -609,8 +605,6 @@ class ProductCollectionPage {
}

async refreshLocators( currentUI: 'editor' | 'frontend' ) {
await this.waitForProductsToLoad();

if ( currentUI === 'editor' ) {
await this.initializeLocatorsForEditor();
} else {
Expand Down Expand Up @@ -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;
4 changes: 4 additions & 0 deletions plugins/woocommerce/changelog/47211-fix-e2e-flaky-product-collection-tests
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: dev

Blocks E2E: Fix flaky Product Collection tests

0 comments on commit 3ad9ebf

Please sign in to comment.