ci: attach Cypress CT diff-snapshots to CI report (#9293)

.github/screenshot-bot.config.toml

@@ -22,4 +22,4 @@ branchesIgnore = ["^release/.*", "^v[0-9].x$"]
 screenshotImageAttrs = []
 
 # Text which is placed at the beginning of section "Failed tests"
-failedTestsReportDescription = '### Before (main) <= Diff => After (local)'
+failedTestsReportDescription = '<h3 align="center">Before (main) ← Diff → After (local)</h3>'

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

@@ -1,7 +1,13 @@
-name: ⚙️ Playwright E2E testing
+name: ⚙️ E2E testing
 on:
   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_BASELINE_SNAPSHOTS_KEY: 'cy_baseline_${{ github.event.pull_request.head.sha }}'
+
 jobs:
   build-demo:
     if: ${{ !contains(github.head_ref , 'release/') }}
@@ -25,6 +31,60 @@ jobs:
           path: dist/demo
           key: ${{ env.CACHE_DIST_KEY }}
 
+  cypress:
+    runs-on: ubuntu-latest
+    name: Cypress / Component Testing
+    steps:
+      - uses: actions/[email protected]
+        with:
+          ref: ${{ github.base_ref }}
+      - uses: taiga-family/ci/actions/setup/[email protected]
+      - uses: taiga-family/ci/actions/setup/[email protected]
+
+      - name: Run tests for baseline state
+        run: npx nx component-test demo-cypress
+
+      - name: Save Cypress Baseline Snapshots
+        uses: actions/[email protected]
+        with:
+          path: ${{env.CYPRESS_BASELINE_SNAPSHOTS}}
+          name: ${{env.CYPRESS_BASELINE_SNAPSHOTS_KEY}}
+          if-no-files-found: ignore
+          compression-level: 0
+          retention-days: 1
+
+      - uses: actions/[email protected]
+      - uses: taiga-family/ci/actions/setup/[email protected]
+      - uses: taiga-family/ci/actions/setup/[email protected]
+
+      - name: Download Cypress Baseline Snapshots
+        uses: actions/[email protected]
+        with:
+          path: ${{env.CYPRESS_BASELINE_SNAPSHOTS}}
+          pattern: ${{ env.CYPRESS_BASELINE_SNAPSHOTS_KEY }}
+          merge-multiple: true
+
+      - name: Run tests for current state
+        run: npx nx component-test demo-cypress
+
+      - name: Prepare diff screenshots
+        run: |
+          npm install canvas
+          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
@@ -34,7 +94,7 @@ jobs:
       matrix:
         shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9]
         shardTotal: [9]
-    name: playwright / (${{ matrix.shardIndex }} of ${{ matrix.shardTotal }})
+    name: Playwright / (${{ matrix.shardIndex }} of ${{ matrix.shardTotal }})
     steps:
       - uses: actions/[email protected]
       - uses: taiga-family/ci/actions/setup/[email protected]
@@ -74,6 +134,7 @@ jobs:
       - name: Combine images to get diff reports
         run: |
           npm install canvas
+          npm view canvas version
           npx ts-node ./scripts/visual-testing/combine-playwright-failed-screenshots.ts
 
       - name: Debug output
@@ -112,13 +173,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:
@@ -127,6 +188,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: |

projects/demo-cypress/cypress-image-diff.config.js

@@ -6,4 +6,7 @@ module.exports = {
         FILENAME: 'report-summary',
         OVERWRITE: true,
     },
+    RETRY_OPTIONS: {
+        doNotFail: process.env.CI || false,
+    },
 };

projects/demo-cypress/src/tests/input-phone-international.cy.ts

@@ -29,7 +29,7 @@ import {createOutputSpy} from 'cypress/angular';
                 [formControl]="control"
                 [(countryIsoCode)]="countryIsoCode"
             >
-                <tui-icon icon="@tui.phone" />
+                <tui-icon icon="@tui.sun" />
             </tui-input-phone-international>
         </tui-root>
     `,

projects/demo/src/modules/components/chip/examples/4/index.html

@@ -3,7 +3,7 @@
     class="fade"
 >
     <div tuiFade>Very long value in chip</div>
-    <div>{{ 123456 | tuiAmount: 'RUB' | async }}</div>
+    <div>{{ 123000 | tuiAmount: 'RUB' | async }}</div>
 </tui-chip>
 
 <tui-chip

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));