chore: merge cypress and playwright jobs

.github/workflows/e2e-playwright.yml → .github/workflows/e2e.yml

@@ -1,7 +1,14 @@
-name: ⚙️ Playwright E2E testing
+name: ⚙️ E2E testing
 on:
-  push:
-    branches: [never]
+  pull_request:
+
+env:
+  CYPRESS_BASELINE_REPO: 'baseline'
+  CYPRESS_RESULTS_FOLDER: 'projects/demo-cypress/tests-results'
+  CYPRESS_BASELINE_SNAPSHOTS: 'projects/demo-cypress/tests-results/snapshots/baseline'
+  CYPRESS_SNAPSHOTS_ARTIFACTS_KEY:
+    'cypress-e2e-artifacts--${{ github.event.pull_request.head.sha || github.sha }}-${{ github.run_id
+    }}-${{github.event.number }}'
 
 jobs:
   build-demo:
@@ -26,6 +33,54 @@ jobs:
           path: dist/demo
           key: ${{ env.CACHE_DIST_KEY }}
 
+  cypress:
+    runs-on: ubuntu-latest
+    name: Cypress Component Testing
+    steps:
+      - uses: actions/[email protected]
+      - uses: actions/[email protected]
+        with:
+          ref: ${{ github.base_ref }}
+          path: ${{ env.CYPRESS_BASELINE_REPO }}
+      - uses: taiga-family/ci/actions/setup/[email protected]
+      - uses: taiga-family/ci/actions/setup/[email protected]
+
+      - name: Share node_modules between current and baseline states
+        run: |
+          cp -r node_modules ${{ env.CYPRESS_BASELINE_REPO }}/node_modules
+          tree -d -L 1
+          tree -d ${{ env.CYPRESS_BASELINE_REPO }} -L 1
+
+      - name: Run tests for baseline state
+        run: |
+          cd ${{ env.CYPRESS_BASELINE_REPO }}
+          npx nx component-test demo-cypress
+          cd ../
+          mkdir -p ${{ env.CYPRESS_BASELINE_SNAPSHOTS }} && cp -r ${{ env.CYPRESS_BASELINE_REPO }}/${{env.CYPRESS_BASELINE_SNAPSHOTS }}/. ${{ env.CYPRESS_BASELINE_SNAPSHOTS }}
+          rm -r ${{ env.CYPRESS_BASELINE_REPO }}
+
+      - name: Run tests for current state
+        run: npx nx component-test demo-cypress
+
+      - name: Prepare diff screenshots
+        run: |
+          npm install canvas
+          npm view canvas version
+          npx ts-node ./scripts/visual-testing/combine-cypress-failed-screenshots.ts
+
+      - name: Debug output
+        continue-on-error: true
+        run: tree ${{ env.CYPRESS_RESULTS_FOLDER }}  -L 1
+
+      - name: Upload artifacts
+        uses: actions/[email protected]
+        with:
+          path: '${{ env.CYPRESS_RESULTS_FOLDER }}/**/*.diff.png'
+          name: ${{ env.CYPRESS_SNAPSHOTS_ARTIFACTS_KEY }}
+          if-no-files-found: ignore
+          compression-level: 0
+          retention-days: 1
+
   playwright:
     if: ${{ !contains(github.head_ref , 'release/') }}
     runs-on: ubuntu-latest
@@ -113,13 +168,13 @@ jobs:
   result:
     if: ${{ !contains(github.head_ref , 'release/') }}
     name: E2E result
-    needs: [playwright]
+    needs: [playwright, cypress]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/[email protected]
       - uses: taiga-family/ci/actions/setup/[email protected]
 
-      - name: Download artifacts / ${{ env.PLAYWRIGHT_SNAPSHOTS_ARTIFACTS_KEY }}
+      - name: Download artifacts for Playwright
         continue-on-error: true
         uses: actions/[email protected]
         with:
@@ -128,6 +183,15 @@ jobs:
           merge-multiple: true
       - run: ls -R ./total/playwright || echo "not found"
 
+      - name: Download artifacts for Cypress
+        continue-on-error: true
+        uses: actions/[email protected]
+        with:
+          path: ./total/cypress
+          pattern: ${{ env.CYPRESS_SNAPSHOTS_ARTIFACTS_KEY }}
+          merge-multiple: true
+      - run: ls -R ./total/cypress || echo "not found"
+
       - name: Check if diff-output exists
         id: diff_checker
         run: |

scripts/visual-testing/combine-snapshots.ts

@@ -4,13 +4,11 @@
  * (not friendly for our external contributors).
  * https://github.com/Automattic/node-canvas/issues/1511
  */
-import {createCanvas, loadImage, version} from 'canvas';
+import {createCanvas, loadImage} from 'canvas';
 
 export async function combineSnapshots(
     imagesPaths: string[],
 ): Promise<NodeJS.ArrayBufferView> {
-    console.info('canvas:', version);
-
     const images = await Promise.all(imagesPaths.map(loadImage));
     const totalWidth = images.reduce((acc: number, {width}) => acc + width, 0);
     const maxHeight = Math.max(...images.map(({height}) => height));