visual diffing #1462
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
| # This is a basic workflow to help you get started with Actions | |
| # env: | |
| # PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1 # Skip downloading during yarn install | |
| # PLAYWRIGHT_BROWSERS_PATH: 0 # Places binaries to node_modules/@playwright/test | |
| name: Visual diff | |
| # Controls when the action will run. | |
| on: | |
| # Triggers the workflow on push or pull request events but only for the main branch | |
| push: | |
| branches: | |
| - main | |
| pull_request: | |
| branches: | |
| - main | |
| # Allows you to run this workflow manually from the Actions tab | |
| workflow_dispatch: | |
| concurrency: | |
| group: ${{ github.ref }}-visual-diff | |
| cancel-in-progress: true | |
| # A workflow run is made up of one or more jobs that can run sequentially or in parallel | |
| jobs: | |
| # This workflow contains a single job called "build" | |
| visual-diff: | |
| # The type of runner that the job will run on | |
| runs-on: windows-latest | |
| permissions: | |
| pages: write # to deploy to Pages | |
| id-token: write # to verify the deployment originates from an appropriate source | |
| # Steps represent a sequence of tasks that will be executed as part of the job | |
| steps: | |
| # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it | |
| - uses: actions/checkout@v3 | |
| - name: Use Node.js 20.9.0 | |
| uses: actions/setup-node@v3 | |
| with: | |
| node-version: '20.9.0' | |
| # Monorepo installation | |
| - name: Npm install | |
| run: npm ci; | |
| - name: Install Playwright Deps | |
| run: npx playwright install-deps | |
| - name: Install Playright | |
| run: npx playwright install | |
| # Take images | |
| - name: Take screenshots for baseline [push|main] | |
| if: ${{ github.event_name == 'push' && github.ref_name == 'main' }} | |
| id: 'visual_diff_all' | |
| run: npm run screenshots:all | |
| # On pushes to main, upload images for baseline against pull_request runs | |
| - name: Upload baseline screenshots [push|main] | |
| if: ${{ github.event_name == 'push' && github.ref_name == 'main' }} | |
| uses: actions/upload-artifact@v4 | |
| with: | |
| name: visual_diff_baseline_shapshots | |
| path: ./integration/visual-diff/screenshots/updated | |
| # On pull requests into main, download images for baseline | |
| - name: Take screenshots [pull_request] | |
| if: ${{ github.event_name == 'pull_request' && github.base_ref == 'main' }} | |
| id: 'visual_diff_light' | |
| run: npm run screenshots:light | |
| # Temporarily upload screenshots for pull requests, just to verify they are as we'd expect | |
| - name: Upload screenshots [pull_request] | |
| if: ${{ github.event_name == 'pull_request' && github.base_ref == 'main' }} | |
| uses: actions/upload-artifact@v4 | |
| with: | |
| name: visual_diff_pull_request_shapshots-${{ github.sha }} | |
| path: ./integration/visual-diff/screenshots/updated | |
| - name: Download baseline screenshots [pull_request] | |
| if: ${{ github.event_name == 'pull_request' && github.base_ref == 'main' }} | |
| uses: actions/upload-artifact@v4 | |
| with: | |
| name: visual_diff_baseline_shapshots | |
| path: ./integration/visual-diff/screenshots/baseline | |
| - name: Download baseline screenshots [pull_request] | |
| if: ${{ github.event_name == 'pull_request' && github.base_ref == 'main' }} | |
| uses: actions/upload-artifact@v4 | |
| with: | |
| name: visual_diff_baseline_shapshots | |
| path: ./integration/visual-diff/screenshots/baseline | |
| # populate ./integration/visual-diff/screenshots/ with the contents of the diff site | |
| - name: Compare Screenshots and Generate Site | |
| run: npm run compare -w @microsoft/atlas-integration | |
| # Ready for Parcel to build the thing | |
| - name: Build diff report site | |
| run: npm run build-report -w @microsoft/atlas-integration | |
| # # Pages setup and upload | |
| # - name: Setup Pages | |
| # uses: actions/configure-pages@v5 | |
| # - name: Upload artifact | |
| # uses: actions/upload-pages-artifact@v3 | |
| # with: | |
| # name: github-pages | |
| # # Upload entire repository | |
| # path: './integration/visual-diff/screenshots/' | |
| # - name: Deploy to GitHub Pages | |
| # id: deployment | |
| # uses: actions/deploy-pages@v4 |