name: Screenshot Tests on: push: branches: [main] pull_request: branches: - main - 'release/*' permissions: contents: read pull-requests: write checks: write statuses: write concurrency: group: screenshots-${{ github.event.pull_request.number || github.sha }} cancel-in-progress: true jobs: screenshots: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 with: lfs: true - name: Setup Node.js uses: actions/setup-node@v4 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: npx component-explorer screenshot --project ./test/componentFixtures/component-explorer.json - name: Compare screenshots id: compare run: | npx 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@v4 with: name: component-explorer path: /tmp/explorer-artifact/ - name: Upload screenshot report if: steps.compare.outcome == 'failure' uses: actions/upload-artifact@v4 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" 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" else TITLE="Screenshots match" fi SHA="${{ github.event.pull_request.head.sha || github.sha }}" CHECK_RUN_ID=$(gh api "repos/${{ github.repository }}/commits/$SHA/check-runs" \ --jq '.check_runs[] | select(.name == "screenshots") | .id') DETAILS_URL="https://hediet-ghartifactpreview.azurewebsites.net/${{ github.repository }}/run/${{ github.run_id }}/component-explorer/___explorer.html?report=./screenshot-report/report.json" if [ -n "$CHECK_RUN_ID" ]; then gh api "repos/${{ github.repository }}/check-runs/$CHECK_RUN_ID" \ -X PATCH --input - <> $GITHUB_STEP_SUMMARY else echo "## Screenshots ✅" >> $GITHUB_STEP_SUMMARY echo "No visual changes detected." >> $GITHUB_STEP_SUMMARY fi # - name: Post PR comment # if: github.event_name == 'pull_request' # env: # GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} # run: | # COMMENT_MARKER="" # BODY="$COMMENT_MARKER"$'\n' # # if [ -f test/componentFixtures/.screenshots/report.md ]; then # BODY+=$(cat test/componentFixtures/.screenshots/report.md) # BODY+=$'\n\n' # BODY+="📦 [Download the \`screenshot-diff\` artifact](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}) to review images." # else # BODY+="## Screenshots ✅"$'\n\n' # BODY+="No visual changes detected." # fi # # # Find existing comment # EXISTING=$(gh api "repos/${{ github.repository }}/issues/${{ github.event.pull_request.number }}/comments" \ # --paginate --jq ".[] | select(.body | startswith(\"$COMMENT_MARKER\")) | .id" | head -1) # # if [ -n "$EXISTING" ]; then # gh api "repos/${{ github.repository }}/issues/comments/$EXISTING" -X PATCH -f body="$BODY" # else # gh pr comment "${{ github.event.pull_request.number }}" --body "$BODY" # fi