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 rspack dependencies run: npm ci working-directory: build/rspack - name: Transpile source run: npm run transpile-client - name: Install Playwright Chromium run: npx playwright install chromium - name: Capture screenshots run: ./node_modules/.bin/component-explorer render --project ./test/componentFixtures/component-explorer.json - name: Upload screenshots uses: actions/upload-artifact@v7 with: name: screenshots path: test/componentFixtures/.screenshots/current/ - name: Trigger ingestion run: | curl -sS -X POST "https://hediet-screenshots.azurewebsites.net/ingest" \ -H "Content-Type: application/json" \ -d '{ "owner": "${{ github.repository_owner }}", "repo": "${{ github.event.repository.name }}", "runId": ${{ github.run_id }}, "artifactName": "screenshots" }' # - 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 - <