ci: attach Cypress CT diff-snapshots to CI report #9669
Workflow file for this run
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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' | |
| jobs: | |
| build-demo: | |
| if: ${{ !contains(github.head_ref , 'release/') }} | |
| name: Build demo | |
| runs-on: ubuntu-latest | |
| steps: | |
| - uses: actions/[email protected] | |
| with: | |
| fetch-depth: 10 | |
| - uses: taiga-family/ci/actions/setup/[email protected] | |
| - uses: taiga-family/ci/actions/run/[email protected] | |
| continue-on-error: true | |
| - uses: taiga-family/ci/actions/setup/[email protected] | |
| - name: Building demo-app of git-branch without cache | |
| run: npx nx build demo | |
| - name: Upload cache / ${{ env.CACHE_DIST_KEY }} | |
| uses: actions/cache/[email protected] | |
| with: | |
| 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] | |
| id: node | |
| - name: Restore cache for baseline | |
| uses: actions/cache/[email protected] | |
| id: baseline_cache | |
| with: | |
| path: ${{ env.CYPRESS_BASELINE_REPO }}/node_modules | |
| # TODO: replace with ${{ steps.node.outputs.node-version }} | |
| key: | |
| "${{ runner.os }}-node-20.x__${{ hashFiles(format('{0}/package-lock.json', env.CYPRESS_BASELINE_REPO)) }}" | |
| - name: Install dependencies for baseline state | |
| if: steps.baseline_cache.outputs.cache-hit != 'true' | |
| run: cd ${{ env.CYPRESS_BASELINE_REPO }} && npm i --workspaces --include-workspace-root | |
| - name: Run tests for baseline state | |
| run: | | |
| tree -d -L 1 | |
| tree -d ${{ env.CYPRESS_BASELINE_REPO }} -L 1 | |
| 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 | |
| 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 | |
| needs: [build-demo] | |
| strategy: | |
| fail-fast: false | |
| matrix: | |
| shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9] | |
| shardTotal: [9] | |
| name: Playwright / (${{ matrix.shardIndex }} of ${{ matrix.shardTotal }}) | |
| steps: | |
| - uses: actions/[email protected] | |
| - uses: taiga-family/ci/actions/setup/[email protected] | |
| - uses: taiga-family/ci/actions/setup/[email protected] | |
| - uses: taiga-family/ci/actions/setup/[email protected] | |
| - name: Download cache / ${{ env.CACHE_DIST_KEY }} | |
| uses: actions/cache/[email protected] | |
| with: | |
| path: dist/demo | |
| key: ${{ env.CACHE_DIST_KEY }} | |
| - uses: taiga-family/ci/actions/run/[email protected] | |
| with: | |
| port: ${{ env.NG_SERVER_PORT }} | |
| directory: ${{ env.DIST }} | |
| replaceBaseUrl: false | |
| - name: Run screenshot tests on ${{ env.DIST }} | |
| run: npx nx e2e demo-playwright -- --update-snapshots --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} | |
| - uses: taiga-family/ci/actions/run/[email protected] | |
| with: | |
| branch: snapshots/demo/next/${{ github.base_ref }} | |
| destination: ${{ env.DIST_NEXT }} | |
| - uses: taiga-family/ci/actions/run/[email protected] | |
| with: | |
| port: ${{ env.NG_SERVER_PORT }} | |
| directory: ${{ env.DIST_NEXT }} | |
| replaceBaseUrl: false | |
| - name: Run screenshot tests on ${{ env.DIST_NEXT }} | |
| continue-on-error: true | |
| run: npx nx e2e demo-playwright --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} | |
| - 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 | |
| continue-on-error: true | |
| run: tree ${{ env.PLAYWRIGHT_SNAPSHOTS_PATH }} | |
| - name: Upload artifacts / ${{ env.PLAYWRIGHT_SNAPSHOTS_ARTIFACTS_KEY }} | |
| uses: actions/[email protected] | |
| with: | |
| path: | | |
| ./projects/demo-playwright/tests-results/**/*.diff.png | |
| !./projects/demo-playwright/tests-results/**/*-retry*/*.diff.png | |
| name: '${{ env.PLAYWRIGHT_SNAPSHOTS_ARTIFACTS_KEY }}_${{ matrix.shardIndex }}' | |
| if-no-files-found: ignore | |
| compression-level: 0 | |
| retention-days: 1 | |
| # workaround for status checks -- check this one job instead of each individual E2E job in the matrix | |
| # see https://github.com/orgs/community/discussions/9141#discussioncomment-2296809 | |
| playwright-composite-result: | |
| name: Playwright E2E Tests matrix result | |
| if: ${{ always() }} | |
| needs: | |
| - playwright | |
| runs-on: ubuntu-latest | |
| steps: | |
| - run: | | |
| result="${{ needs.playwright.result }}" | |
| # mark as successful even if skipped | |
| if [[ $result == "success" || $result == "skipped" ]]; then | |
| exit 0 | |
| else | |
| exit 1 | |
| fi | |
| result: | |
| if: ${{ !contains(github.head_ref , 'release/') }} | |
| name: E2E result | |
| needs: [playwright, cypress] | |
| runs-on: ubuntu-latest | |
| steps: | |
| - uses: actions/[email protected] | |
| - uses: taiga-family/ci/actions/setup/[email protected] | |
| - name: Download artifacts for Playwright | |
| continue-on-error: true | |
| uses: actions/[email protected] | |
| with: | |
| path: ./total/playwright | |
| pattern: ${{ env.PLAYWRIGHT_SNAPSHOTS_ARTIFACTS_KEY }}_* | |
| 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: | | |
| echo "diff_exist=$(find ./total -regex '.*diff\.png$' | wc -l | sed -e 's/^[[:space:]]*//')" >> $GITHUB_OUTPUT | |
| - name: Fall with an error if diff-output exists | |
| if: ${{ steps.diff_checker.outputs.diff_exist != '0' }} | |
| run: | | |
| find ./total -regex '.*diff\.png$' -exec echo "{}" \; | |
| exit 1 | |
| concurrency: | |
| group: ${{ github.workflow }}-${{ github.ref }} | |
| cancel-in-progress: true |