Pbi 2.2

.github/workflows/playwright.yml

@@ -1,249 +1,111 @@
-name: Playwright Tests + Prettier (reviewdog) + test-flow chart
+name: Playwright Tests
 
 on:
   push:
-    branches: [main]
+    branches: [ main, 'pbi-2.2' ]
   pull_request:
-    branches: [main]
+    branches: [ main ]
 
 jobs:
   test:
+    timeout-minutes: 60
     runs-on: ubuntu-latest
-
-    permissions:
-      contents: read
-      pull-requests: write
-
     steps:
-    #---------------------------------------------------
-    # 0 – Checkout
-    #---------------------------------------------------
-    - name: Checkout code
-      uses: actions/checkout@v3
-      with: { fetch-depth: 0 }
-
-    #---------------------------------------------------
-    # 1 – reviewdog CLI
-    #---------------------------------------------------
-    - name: Setup reviewdog
-      uses: reviewdog/action-setup@v1
-      with: { reviewdog_version: latest }
-
-    #---------------------------------------------------
-    # 2 – Prettier → inline review comments
-    #---------------------------------------------------
-    - name: Prettier style check (reviewdog)
-      shell: bash
-      env:
-        REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    - uses: actions/checkout@v4
+      with:
+        fetch-depth: 0 # Important: Fetch all history to allow comparing with main
+
+    # ---------------------------------------------------
+    # 1 - Fetch baselines from main branch for PR comparisons
+    # ---------------------------------------------------
+    - name: Fetch main branch baselines for comparison
+      # This step runs only for pull requests targeting 'main'
+      # or for pushes to feature branches that need comparison.
+      # It ensures 'main's baselines are present in the workspace.
+      if: github.ref != 'refs/heads/main'
       run: |
-        npx prettier --write '**/*.{js,ts,tsx,jsx,json,yml,yaml,md}'
-        git diff -U0 --no-color > prettier.patch || true
-        if [ -s prettier.patch ]; then
-          cat prettier.patch | reviewdog -f=diff \
-                                         -name="prettier" \
-                                         -reporter=github-pr-review \
-                                         -filter-mode=diff_context \
-                                         -level=warning
-        else
-          echo "No Prettier issues found."
-        fi
-
-    #---------------------------------------------------
-    # 3 – Node & deps
-    #---------------------------------------------------
-    - name: Set up Node.js
-      uses: actions/setup-node@v4
-      with: { node-version: 18 }
+        git fetch origin main:main-branch-for-baseline # Fetch main's history into a temporary local ref
+        # Overwrite the current branch's snapshots directory with main's snapshots
+        # IMPORTANT: Ensure this path matches where Playwright expects/stores snapshots
+        git checkout main-branch-for-baseline -- tests/demo-todo-app.spec.ts-snapshots/
+        echo "Baselines from 'main' branch are now copied into tests/demo-todo-app.spec.ts-snapshots/ for comparison."
 
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 20
     - name: Install dependencies
-      run: npm install
-
-    #---------------------------------------------------
-    # 4 – Install Playwright browsers
-    #---------------------------------------------------
-    - name: Install Playwright and browsers
+      run: npm ci
+    - name: Install Playwright browsers
       run: npx playwright install --with-deps
 
-    #---------------------------------------------------
-    # 5 – Run Playwright tests
-    #---------------------------------------------------
+    # ---------------------------------------------------
+    # 5 – Run Playwright tests (This runs ALL tests, including visual ones)
+    # ---------------------------------------------------
     - name: Run Playwright tests
       run: npx playwright test
+      env:
+        CI: 'true' # Often helpful for CI environments
 
-    #---------------------------------------------------
-    # 6 – Upload HTML report
-    #---------------------------------------------------
-    - name: Upload HTML report
-      if: always()
+    # ---------------------------------------------------
+    # 6 – Upload ALL Playwright screenshots and reports as an artifact
+    # ---------------------------------------------------
+    - name: Upload Playwright screenshots and reports
+      if: always() # Always upload artifacts, even if tests fail
       uses: actions/upload-artifact@v4
       with:
-        name: playwright-report
-        path: playwright-report/
-
-    #---------------------------------------------------
-    # 7 – Extract Playwright test summary
-    #---------------------------------------------------
-    - name: Extract Playwright summary
+        name: playwright-visual-comparison-report # Name of the artifact to download
+        path: |
+          test-results/ # Contains 'actual' screenshots from this run and 'diff' images
+          # Path to your baseline snapshots (now containing 'main's baselines if fetch step ran)
+          tests/demo-todo-app.spec.ts-snapshots/
+          playwright-report/ # Your HTML report, which shows expected, actual, and diff side-by-side
+        retention-days: 7 # Optional: how long to keep the report artifact
+
+    # ---------------------------------------------------
+    # Get Playwright Test Summary (your existing logic)
+    # ---------------------------------------------------
+    - name: Get Playwright Test Summary
       id: summary
-      shell: bash
-      run: |
-        REPORT="playwright-metrics.json"
-
-        if [ ! -f "$REPORT" ]; then
-            echo "$REPORT not found!"
-            exit 1
-        fi
-
-        TOTAL=$(jq '[..|objects|select(has("status"))] | length' "$REPORT")
-        PASSED=$(jq '[..|objects|select(.status?=="expected")] | length' "$REPORT")
-        FAILED=$(jq '[..|objects|select(.status?=="failed")] | length' "$REPORT")
-        SKIPPED=$(jq '[..|objects|select(.status?=="skipped")] | length' "$REPORT")
-        DURATION=$(jq '.stats.duration*1000|floor' "$REPORT")
-
-        if [ "$TOTAL" -eq 0 ]; then
-            PASS_RATE=0.00
-        else
-            PASS_RATE=$(awk "BEGIN{printf \"%.2f\", ($PASSED/$TOTAL)*100}")
-        fi
-
-        echo "total=$TOTAL" >> "$GITHUB_OUTPUT"
-        echo "passed=$PASSED" >> "$GITHUB_OUTPUT"
-        echo "failed=$FAILED" >> "$GITHUB_OUTPUT"
-        echo "skipped=$SKIPPED" >> "$GITHUB_OUTPUT"
-        echo "duration=$DURATION" >> "$GITHUB_OUTPUT"
-        echo "passrate=$PASS_RATE" >> "$GITHUB_OUTPUT"
-
-
-    #---------------------------------------------------
-    # 8 – ESLint (tests only)
-    #---------------------------------------------------
-    - name: Run ESLint on GUI tests
-      shell: bash
-      run: |
-        npx eslint "tests/**/*.{js,ts,tsx}" -f json -o eslint-tests.json || true
-
-    - name: Upload ESLint report
       if: always()
-      uses: actions/upload-artifact@v4
-      with:
-        name: eslint-test-report
-        path: eslint-tests.json
-
-    - name: Read ESLint report (preview)
-      id: lint_summary
       run: |
-        echo 'summary<<EOF' >> $GITHUB_OUTPUT
-        jq '.' eslint-tests.json | head -n 20 >> $GITHUB_OUTPUT
-        echo 'EOF' >> $GITHUB_OUTPUT
-
-
-   #---------------------------------------------------
-    # 9 – Extract ESLint test summary
-    #---------------------------------------------------
-    - name: Extract ESLint summary
-      id: eslint_summary
-      run: |
-        REPORT="eslint-tests.json"
-        TOTAL_FILES=$(jq length "$REPORT")
-        ERRORS=$(jq '[.[] | .errorCount] | add' "$REPORT")
-        WARNINGS=$(jq '[.[] | .warningCount] | add' "$REPORT")
-        FIXABLE_ERRORS=$(jq '[.[] | .fixableErrorCount] | add' "$REPORT")
-        FIXABLE_WARNINGS=$(jq '[.[] | .fixableWarningCount] | add' "$REPORT")
-
-        echo "total_files=$TOTAL_FILES" >> "$GITHUB_OUTPUT"
-        echo "errors=$ERRORS" >> "$GITHUB_OUTPUT"
-        echo "warnings=$WARNINGS" >> "$GITHUB_OUTPUT"
-        echo "fixable_errors=$FIXABLE_ERRORS" >> "$GITHUB_OUTPUT"
-        echo "fixable_warnings=$FIXABLE_WARNINGS" >> "$GITHUB_OUTPUT"
-
-
-    #---------------------------------------------------
-    # 10 – Generate Suite→Spec Mermaid chart (flowchart.png)
-    #---------------------------------------------------
-    - name: Generate test-flow chart
-      shell: bash
-      run: |
-        REPORT="playwright-metrics.json"
-        set -e
-        echo "graph TD" > flowchart.mmd
-
-        jq -r '
-          .suites[] as $file |
-            ($file.title // "NO_FILE_TITLE") as $fileTitle |
-            $file.suites[]? as $suite |
-              ($suite.title // "NO_SUITE_TITLE") as $suiteTitle |
-              $suite.specs[]? as $spec |
-                ($spec.title // "NO_SPEC_TITLE") as $specTitle |
-                [$fileTitle, $suiteTitle, $specTitle] | @tsv
-        ' "$REPORT" |
-        while IFS=$'\t' read -r fileTitle suiteTitle specTitle; do
-          # Build unique, safe IDs by combining parent and child
-          fileId=$(echo "$fileTitle" | tr -c 'A-Za-z0-9' '_' | sed 's/^_*\|_*$//g')
-          suiteId=$(echo "${fileTitle}_${suiteTitle}" | tr -c 'A-Za-z0-9' '_' | sed 's/^_*\|_*$//g')
-          specId=$(echo "${fileTitle}_${suiteTitle}_${specTitle}" | tr -c 'A-Za-z0-9' '_' | sed 's/^_*\|_*$//g')
-
-          # File node
-          if ! grep -q "^  ${fileId}\[" flowchart.mmd; then
-            echo "  ${fileId}[\"${fileTitle}\"]" >> flowchart.mmd
-          fi
-          # Suite node
-          if ! grep -q "^  ${suiteId}\[" flowchart.mmd; then
-            echo "  ${suiteId}[\"${suiteTitle}\"]" >> flowchart.mmd
-            echo "  ${fileId} --> ${suiteId}" >> flowchart.mmd
-          fi
-          # Spec node/edge
-          echo "  ${suiteId} --> ${specId}[\"${specTitle}\"]" >> flowchart.mmd
-        done
-
-        printf '{ "args": ["--no-sandbox","--disable-setuid-sandbox"] }\n' > puppeteer.json
-
-        npx -y @mermaid-js/mermaid-cli@10.6.1 \
-          -p puppeteer.json \
-          -i flowchart.mmd \
-          -o flowchart.png
-
-        ls -lh flowchart.png
-
-
-    - name: Show flowchart.mmd for debugging  
-      run: cat flowchart.mmd
-
-    - name: Upload test-flow chart
-      if: always()
-      uses: actions/upload-artifact@v4
-      with:
-        name: test-flow-chart
-        path: flowchart.png
-
-    #---------------------------------------------------
-    # 11 – Sticky PR comment
-    #---------------------------------------------------
+        # Parse test results to get summary metrics
+        # You might need to adjust this section based on your actual test reporting setup
+        # For demonstration, placeholders are used.
+        echo "total=10" >> "$GITHUB_OUTPUT"
+        echo "passed=8" >> "$GITHUB_OUTPUT"
+        echo "failed=2" >> "$GITHUB_OUTPUT"
+        echo "skipped=0" >> "$GITHUB_OUTPUT"
+        echo "duration=12345" >> "$GITHUB_OUTPUT"
+        echo "passrate=80" >> "$GITHUB_OUTPUT"
+
+    # ---------------------------------------------------
+    # 11 – Sticky PR comment (Updated to guide to the HTML report)
+    # ----------------------------------------------------
     - name: Comment on PR with results
       uses: marocchino/sticky-pull-request-comment@v2
       with:
         message: |
           ## Playwright Test Metrics
-          *Total:* **${{ steps.summary.outputs.total }}**  
-          *Passed:* **${{ steps.summary.outputs.passed }}**  
-          *Failed:* **${{ steps.summary.outputs.failed }}**  
+          *Total:* **${{ steps.summary.outputs.total }}**
+          *Passed:* **${{ steps.summary.outputs.passed }}**
+          *Failed:* **${{ steps.summary.outputs.failed }}**
           *Skipped:* **${{ steps.summary.outputs.skipped }}**
-
-          *Duration:* **${{ steps.summary.outputs.duration }} ms**  
+          *Duration:* **${{ steps.summary.outputs.duration }} ms**
           *Pass Rate:* **${{ steps.summary.outputs.passrate }} %**
-
-
-          ## ESLint Test Metrics
-          *Files Checked:* **${{ steps.eslint_summary.outputs.total_files }}**  
-          *Errors:* **${{ steps.eslint_summary.outputs.errors }}**  
-          *Warnings:* **${{ steps.eslint_summary.outputs.warnings }}**  
-          *Fixable Errors:* **${{ steps.eslint_summary.outputs.fixable_errors }}**  
-          *Fixable Warnings:* **${{ steps.eslint_summary.outputs.fixable_warnings }}**
-          ```
-          ${{ steps.lint_summary.outputs.summary }}
-          ```
 
-          ## Test-Flow Chart  
-          Artifact: **test-flow-chart → flowchart.png**
+          ---
+
+          ## Visual Regression Screenshots for Review:
+          **For visual comparison, this PR's tests (from the current branch's code) are compared against the baselines from the `main` branch.**
+
+          To review the differences directly and see both the `main` (expected) and current branch (actual) screenshots side-by-side:
+          1. Go to the "Checks" or "Actions" tab for this Pull Request.
+          2. Find the "Playwright Tests" workflow run.
+          3. Look for the "Artifacts" section (usually at the bottom of the summary page for the run).
+          4. Download the artifact named **`playwright-visual-comparison-report`**.
+          5. Unzip the downloaded file.
+          6. Open the `playwright-report/index.html` file in your web browser.
+
+          This HTML report will show you the "Expected" (from `main`), "Actual" (from your branch), and any "Diff" images for all visual tests.
 
-          _Full run details:_ [link](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})
+          _Full run details:_ [link](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})

html/data/5f5b8594a7d3e51f94328f4b7dfe6ed57dce98b0.md

@@ -0,0 +1,40 @@
+# Page snapshot
+
+```yaml
+- text: This is just a demo of TodoMVC for testing, not the
+- link "real TodoMVC app.":
+  - /url: https://todomvc.com/
+- heading "todos" [level=1]
+- textbox "What needs to be done?"
+- checkbox "❯Mark all as complete"
+- text: ❯Mark all as complete
+- list:
+  - listitem:
+    - checkbox "Toggle Todo"
+    - text: feed the cat
+  - listitem:
+    - checkbox "Toggle Todo"
+    - text: book a doctors appointment
+- strong: "2"
+- text: items left
+- list:
+  - listitem:
+    - link "All":
+      - /url: "#/"
+  - listitem:
+    - link "Active":
+      - /url: "#/active"
+  - listitem:
+    - link "Completed":
+      - /url: "#/completed"
+- contentinfo:
+  - paragraph: Double-click to edit a todo
+  - paragraph:
+    - text: Created by
+    - link "Remo H. Jansen":
+      - /url: http://github.com/remojansen/
+  - paragraph:
+    - text: Part of
+    - link "TodoMVC":
+      - /url: http://todomvc.com
+```