name: Checking Component Screenshots on: push: branches: [main] pull_request: branches: - main - 'release/*' permissions: contents: read statuses: write concurrency: group: screenshots-${{ github.event.pull_request.number || github.sha }} cancel-in-progress: true jobs: screenshots: name: Checking Component Screenshots runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v6 with: lfs: true - name: Setup Node.js uses: actions/setup-node@v6 with: node-version-file: .nvmrc - name: Install dependencies run: npm ci --ignore-scripts env: ELECTRON_SKIP_BINARY_DOWNLOAD: 1 PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1 GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - name: Install build dependencies run: npm ci working-directory: build - name: Install build/vite dependencies run: rm -f package-lock.json && npm install working-directory: build/vite - name: Build vite run: npm run build working-directory: build/vite - name: Install Playwright Chromium run: npx playwright install chromium - name: Capture screenshots run: ./node_modules/.bin/component-explorer screenshot --project ./test/componentFixtures/component-explorer.json - name: Compare screenshots id: compare run: | ./node_modules/.bin/component-explorer screenshot:compare \ --project ./test/componentFixtures \ --report ./test/componentFixtures/.screenshots/report continue-on-error: true - name: Prepare explorer artifact run: | mkdir -p /tmp/explorer-artifact/screenshot-report cp -r build/vite/dist/* /tmp/explorer-artifact/ if [ -d test/componentFixtures/.screenshots/report ]; then cp -r test/componentFixtures/.screenshots/report/* /tmp/explorer-artifact/screenshot-report/ fi - name: Upload explorer artifact uses: actions/upload-artifact@v7 with: name: component-explorer path: /tmp/explorer-artifact/ - name: Upload screenshot report if: steps.compare.outcome == 'failure' uses: actions/upload-artifact@v7 with: name: screenshot-diff path: | test/componentFixtures/.screenshots/current/ test/componentFixtures/.screenshots/report/ - name: Set check title env: GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} run: | REPORT="test/componentFixtures/.screenshots/report/report.json" STATE="success" if [ -f "$REPORT" ]; then CHANGED=$(node -e "const r = require('./$REPORT'); console.log(r.summary.added + r.summary.removed + r.summary.changed)") TITLE="⚠ ${CHANGED} screenshots changed" BLOCKS_CI=$(node -e " const r = require('./$REPORT'); const blocking = Object.entries(r.fixtures).filter(([, f]) => f.status !== 'unchanged' && (f.labels || []).includes('blocks-ci') ); if (blocking.length > 0) { console.log(blocking.map(([name]) => name).join(', ')); } ") if [ -n "$BLOCKS_CI" ]; then STATE="failure" TITLE="❌ ${CHANGED} screenshots changed (blocks CI: ${BLOCKS_CI})" fi else TITLE="✅ Screenshots match" fi SHA="${{ github.event.pull_request.head.sha || github.sha }}" DETAILS_URL="https://hediet-ghartifactpreview.azurewebsites.net/${{ github.repository }}/run/${{ github.run_id }}/component-explorer/___explorer.html?report=./screenshot-report/report.json&search=changed" gh api "repos/${{ github.repository }}/statuses/$SHA" \ --input - <