Add sharding to Blocks e2e tests

.github/workflows/blocks-playwright.yml

@@ -19,30 +19,27 @@ jobs:
             run:
                 working-directory: plugins/woocommerce-blocks
         strategy:
+            fail-fast: false
             matrix:
                 config:
-                    [
-                        {
-                            name: Normal,
-                            file: playwright.config.ts,
-                            resultPath: test-results,
-                        },
-                        {
-                            name: Classic,
-                            file: playwright.classic-theme.config.ts,
-                            resultPath: test-results-classic-theme,
-                        },
-                        {
-                            name: SideEffects,
-                            file: playwright.side-effects.config.ts,
-                            resultPath: test-results-side-effects,
-                        },
-                        {
-                            name: BlockThemeWithTemplates,
-                            file: playwright.block-theme-with-templates.config.ts,
-                            resultPath: test-results-block-theme-with-templates,
-                        },
-                    ]
+                    - name: Normal
+                      file: playwright.config.ts
+                      resultPath: test-results
+                    - name: Classic
+                      file: playwright.classic-theme.config.ts
+                      resultPath: test-results-classic-theme
+                    - name: SideEffects
+                      file: playwright.side-effects.config.ts
+                      resultPath: test-results-side-effects
+                    - name: BlockThemeWithTemplates
+                      file: playwright.block-theme-with-templates.config.ts
+                      resultPath: test-results-block-theme-with-templates
+                shards:
+                    - name: 1/5
+                    - name: 2/5
+                    - name: 3/5
+                    - name: 4/5
+                    - name: 5/5
         steps:
             - uses: actions/checkout@v3
 
@@ -60,11 +57,10 @@ jobs:
 
             - name: Run Playwright tests
               working-directory: plugins/woocommerce-blocks
-              run: pnpm playwright test --config=tests/e2e/${{ matrix.config.file }}
+              run: pnpm playwright test --config=tests/e2e/${{ matrix.config.file }} --shard ${{ matrix.shards.name }}
 
             - uses: actions/upload-artifact@v3
               if: ${{ failure() }}
-
               with:
                   name: playwright-report-${{ matrix.config.name }}
                   path: plugins/woocommerce-blocks/tests/e2e/artifacts/${{ matrix.config.resultPath }}

plugins/woocommerce-blocks/README.md

@@ -1,6 +1,6 @@
 # WooCommerce Blocks <!-- omit in toc -->
 
-This is the client for WooCommerce + Gutenberg. This package serves as a space to iterate and explore new Blocks and updates to existing blocks for WooCommerce, and how WooCommerce might work with the block editor.
+This is the client for WooCommerce + Gutenberg. This package serves as a space to iterate and explore new Blocks and updates to existing blocks for WooCommerce, and how WooCommerce might work with the Block Editor.
 
 ## Table of Contents <!-- omit in toc -->
 

plugins/woocommerce-blocks/tests/e2e/tests/price-filter/price-filter.block_theme.side_effects.spec.ts

@@ -63,8 +63,16 @@ test.describe( `${ blockData.name } Block - with All products Block`, () => {
 			name: 'Filter products by maximum price',
 		} );
 
+		// All Products block will be deprecated in the future, so we are not going to optimize it.
+
+		// eslint-disable-next-line playwright/no-networkidle
+		await page.waitForLoadState( 'networkidle' );
+
 		await frontendUtils.selectTextInput( maxPriceInput );
-		await maxPriceInput.fill( '$10' );
+		await maxPriceInput.fill( '$10', {
+			// eslint-disable-next-line playwright/no-force-option
+			force: true,
+		} );
 		await maxPriceInput.press( 'Tab' );
 		await page.waitForResponse( ( response ) =>
 			response.url().includes( blockData.endpointAPI )
@@ -83,7 +91,7 @@ test.describe( `${ blockData.name } Block - with All products Block`, () => {
 
 		const products = await allProductsBlock.getByRole( 'listitem' ).all();
 
-		expect( products ).toHaveLength( 2 );
+		expect( products ).toHaveLength( 1 );
 		expect( page.url() ).toContain(
 			blockData.urlSearchParamWhenFilterIsApplied
 		);

plugins/woocommerce/changelog/dev-try-sharding-blocks-tests

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Shard Blocks Playwright test execution