Test playwright cache 2

.github/actions/npm-cache/action.yml

@@ -42,4 +42,5 @@ runs:
     - name: ⏬ NPM ci
       shell: bash
       if: steps.cache.outputs.cache-hit != 'true'
-      run: npm ci
+      run: |
+        npm ci

.github/workflows/02-e2e-showcases.yml

@@ -8,64 +8,62 @@ permissions:
   contents: write
 
 jobs:
-  playwright-ct-react:
-    name: 🧪 with 🎭
+  playwright-showcases:
+    name: 🧪🎭 - ${{ matrix.framework }}:${{ matrix.shard }}
     runs-on: ubuntu-latest
     container:
       image: mcr.microsoft.com/playwright:v1.35.1-focal
     strategy:
       fail-fast: false
       matrix:
         framework: [angular, react, vue]
-
+        shard: [1/2, 2/2]
     steps:
-      - name: ⬇ Checkout repo
+      - name: ⏬ Checkout repo
         uses: actions/checkout@v3
 
-      - name: ⬇ Download foundations build
+      - name: 🔄 Init Cache
+        uses: ./.github/actions/npm-cache
+
+      - name: 📲 Install esbuild (binary workaround)
+        run: npm i -D esbuild-linux-64
+
+      - name: ⏬ Download foundations build
         uses: ./.github/actions/download-tar-artifact
         with:
           name: db-ui-foundations-build
           path: packages/foundations/build
 
-      - name: ⬇ Download output
+      - name: ⏬ Download output
         uses: ./.github/actions/download-tar-artifact
         with:
           name: db-ui-output
           path: output
 
-      - name: ⬇ Download components styles build
+      - name: ⏬ Download components styles build
         uses: ./.github/actions/download-tar-artifact
         with:
           name: db-ui-components-build
           path: packages/components/build
 
-      - name: ⬇ Download showcases
+      - name: ⏬ Download showcases
         uses: ./.github/actions/download-tar-artifact
         with:
           name: db-ui-showcases
           path: build-showcases
 
-      - name: 📥 Download deps
-        uses: bahmutov/npm-install@v1
-        with:
-          install-command: npm ci --ignore-scripts
-
-      - name: 📲 Install esbuild (binary workaround)
-        run: npm i -D esbuild-linux-64
-
       - name: 👩‍🔬 Test showcase with Playwright 🎭
         env:
           HOME: /root
-        run: npm run test:${{ matrix.framework }}-showcase
+        run: npm run test:${{ matrix.framework }}-showcase -- -- --shard=${{ matrix.shard }}
 
-      - name: 🆙 Upload playwright-report
+      - name: 🆙 Upload blob report to GitHub Actions Artifacts
         if: always()
         uses: actions/upload-artifact@v3
         with:
-          name: ${{ matrix.framework}}-showcase-playwright-report
-          path: ./showcases/${{ matrix.framework }}-showcase/playwright-report
-          retention-days: 30
+          name: all-blob-reports
+          path: ./showcases/blob-report
+          retention-days: 1
 
       - name: 🆙 Upload test results
         if: failure()

.github/workflows/02-e2e.yml

@@ -8,47 +8,44 @@ permissions:
   contents: write
 
 jobs:
-  playwright-ct-react:
-    name: 🧪 with 🎭
+  playwright-ct:
+    name: 🧪🎭 - ${{ matrix.framework }}:${{ matrix.shard }}
     runs-on: ubuntu-latest
     container:
       image: mcr.microsoft.com/playwright:v1.35.1-focal
     strategy:
       fail-fast: false
       matrix:
         framework: [react, vue]
-
+        shard: [1/4, 2/4, 3/4, 4/4]
     steps:
-      - name: ⬇ Checkout repo
+      - name: ⏬ Checkout repo
         uses: actions/checkout@v3
 
-      - name: ⬇ Download foundations build
+      - name: 🔄 Init Cache
+        uses: ./.github/actions/npm-cache
+
+      - name: 📲 Install esbuild (binary workaround)
+        run: npm i -D esbuild-linux-64
+
+      - name: ⏬ Download foundations build
         uses: ./.github/actions/download-tar-artifact
         with:
           name: db-ui-foundations-build
           path: packages/foundations/build
 
-      - name: ⬇ Download output
+      - name: ⏬ Download output
         uses: ./.github/actions/download-tar-artifact
         with:
           name: db-ui-output
           path: output
 
-      - name: ⬇ Download components styles build
+      - name: ⏬ Download components styles build
         uses: ./.github/actions/download-tar-artifact
         with:
           name: db-ui-components-build
           path: packages/components/build
 
-      - name: 📥 Download deps
-        uses: bahmutov/npm-install@v1
-        with:
-          install-command: npm ci --ignore-scripts
-
-      - name: 📲 Install esbuild (binary workaround)
-        working-directory: ./output/react
-        run: npm i -D esbuild-linux-64
-
       - name: 🚋 Get working directory
         id: workingDirectory
         shell: bash
@@ -63,15 +60,15 @@ jobs:
         working-directory: ./output/${{ steps.workingDirectory.outputs.dir }}
         env:
           HOME: /root
-        run: npx playwright test
+        run: npx playwright test --shard=${{ matrix.shard }}
 
-      - name: 🆙 Upload playwright-report
+      - name: 🆙 Upload blob report to GitHub Actions Artifacts
         if: always()
         uses: actions/upload-artifact@v3
         with:
-          name: ${{ matrix.framework}}-playwright-report
-          path: ./output/${{ steps.workingDirectory.outputs.dir }}/playwright-report
-          retention-days: 30
+          name: all-blob-reports
+          path: ./output/${{ steps.workingDirectory.outputs.dir }}/blob-report
+          retention-days: 1
 
       - name: 🆙 Upload test results
         if: failure()

.github/workflows/03-e2e-merge-reports.yml

@@ -0,0 +1,38 @@
+name: 🎭 Merge Playwright Reports
+
+on:
+  workflow_call:
+
+permissions:
+  actions: write
+  contents: write
+
+jobs:
+  merge-playwright-reports:
+    name: 🎭 Merge Playwright Reports
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⏬ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: 🔄 Init Cache
+        uses: ./.github/actions/npm-cache
+
+      - name: ⏬ Download blob reports from GitHub Actions Artifacts
+        uses: actions/download-artifact@v3
+        with:
+          name: all-blob-reports
+          path: all-blob-reports
+
+      - name: 🔀 Merge into HTML Report
+        shell: bash
+        run: |
+          npx playwright merge-reports --reporter html ./all-blob-reports
+          npx playwright merge-reports --reporter github ./all-blob-reports
+
+      - name: 🆙 Upload HTML report
+        uses: actions/upload-artifact@v3
+        with:
+          name: report--attempt-${{ github.run_attempt }}
+          path: playwright-report
+          retention-days: 14

.github/workflows/default.yml

@@ -46,6 +46,10 @@ jobs:
     uses: ./.github/workflows/02-e2e-showcases.yml
     needs: [build-showcases]
 
+  merge-reports:
+    uses: ./.github/workflows/03-e2e-merge-reports.yml
+    needs: [test-components, test-showcases]
+
   checks-done:
     if: ${{ always() }}
     runs-on: ubuntu-latest

.github/workflows/release.yml

@@ -47,6 +47,10 @@ jobs:
     uses: ./.github/workflows/02-e2e-showcases.yml
     needs: [build-showcases]
 
+  merge-reports:
+    uses: ./.github/workflows/03-e2e-merge-reports.yml
+    needs: [test-components, test-showcases]
+
   checks-done:
     runs-on: ubuntu-latest
     steps:

packages/components/test/playwright/config.ts

@@ -20,16 +20,14 @@ const config = defineConfig({
 	workers: process.env.CI ? 1 : undefined,
 	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
 	reporter: process.env.CI
-		? [['github'], ['html', { open: 'never' }]]
+		? 'blob'
 		: [['list'], ['html', { open: 'never' }]],
 	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
 	use: {
 		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
 		trace: 'on-first-retry',
 		/* Port to use for Playwright component endpoint. */
-		ctPort: 3100,
-		/* Playwright Test can record videos for your tests, controlled by the video option. By default videos are off. */
-		video: 'on-first-retry'
+		ctPort: 3100
 	},
 	/* Configure projects for major browsers */
 	projects: [

showcases/playwright.config.ts

@@ -28,9 +28,7 @@ const config: PlaywrightTestConfig = {
 	/* Opt out of parallel tests on CI. */
 	workers: process.env.CI ? 1 : undefined,
 	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
-	reporter: process.env.CI
-		? [['github'], ['html', { open: 'never' }]]
-		: [['list'], ['html', { open: 'never' }]],
+	reporter: process.env.CI ? 'blob' : [['list'], ['html', { open: 'never' }]],
 	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
 	use: {
 		/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
@@ -39,7 +37,7 @@ const config: PlaywrightTestConfig = {
 		baseURL: `http://localhost:8080/${process.env.showcase}/`,
 
 		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-		trace: process.env.CI ? 'retain-on-failure' : 'on'
+		trace: process.env.CI ? 'on-first-retry' : 'on'
 	},
 	webServer: {
 		command: `cd ${process.env.showcase} && npm run preview`,
@@ -84,20 +82,6 @@ const config: PlaywrightTestConfig = {
 				...devices['iPhone 12']
 			}
 		}
-
-		/* Test against branded browsers. */
-		// {
-		//   name: 'Microsoft Edge',
-		//   use: {
-		//     channel: 'msedge',
-		//   },
-		// },
-		// {
-		//   name: 'Google Chrome',
-		//   use: {
-		//     channel: 'chrome',
-		//   },
-		// },
 	],
 
 	/* Folder for test artifacts such as screenshots, videos, traces, etc. */