This repository was archived by the owner on Jan 28, 2026. It is now read-only.
Screenshot feature #28
Workflow file for this run
This file contains hidden or 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: Playwright Visual Review | |
| concurrency: | |
| group: playwright-screenshots-${{ github.head_ref }} | |
| cancel-in-progress: true | |
| on: | |
| pull_request: | |
| types: [opened, reopened, synchronize] | |
| permissions: | |
| contents: write | |
| pull-requests: write | |
| jobs: | |
| visual-review: | |
| runs-on: ubuntu-latest | |
| permissions: | |
| contents: write | |
| pull-requests: write | |
| steps: | |
| - name: Checkout code | |
| uses: actions/checkout@v4 | |
| with: | |
| fetch-depth: 0 | |
| - name: Setup Node.js | |
| uses: actions/setup-node@v4 | |
| with: | |
| node-version: '20' | |
| cache: 'npm' | |
| - name: Resolve dependencies | |
| run: | | |
| npm install --package-lock-only --ignore-scripts | |
| npm install | |
| - name: Install Playwright | |
| run: npx playwright install --with-deps | |
| - name: Capture GUI screenshots | |
| run: node scripts/screenshot.js | |
| # UPLOAD SCREENSHOTS TO REPOSITORY BRANCH | |
| - name: Upload screenshots to repo | |
| uses: JamesIves/github-pages-deploy-action@v4 | |
| with: | |
| branch: gh-pages # Special branch for hosting content | |
| folder: tests_artifacts | |
| clean: true | |
| clean-exclude: | | |
| *.js | |
| *.html | |
| *.css | |
| commit-message: "Upload GUI screenshots [skip ci]" | |
| # GENERATE DIRECT IMAGE LINKS | |
| - name: Prepare image URLs | |
| id: images | |
| run: | | |
| BASE_URL="https://raw.githubusercontent.com/${{ github.repository }}/gh-pages/" | |
| IMAGES=$(find tests_artifacts -name '*.png') | |
| MARKDOWN="" | |
| for image in $IMAGES; do | |
| FILENAME=$(basename "$image") | |
| URL="$BASE_URL$FILENAME" | |
| MARKDOWN+="\n\n" | |
| done | |
| echo "markdown_images<<EOF" >> $GITHUB_OUTPUT | |
| echo -e "$MARKDOWN" >> $GITHUB_OUTPUT | |
| echo "EOF" >> $GITHUB_OUTPUT | |
| # POST COMMENT WITH EMBEDDED IMAGES | |
| - name: Post PR comment with images | |
| uses: marocchino/sticky-pull-request-comment@v2 | |
| with: | |
| header: gui-screenshots | |
| message: | | |
| ## 🖼️ Automated GUI Test Preview | |
| Below are the UI states captured during tests: | |
| ${{ steps.images.outputs.markdown_images }} |