Feature/pr screenshots

.github/workflows/playwright.yml

@@ -9,9 +9,8 @@ on:
 jobs:
   test:
     runs-on: ubuntu-latest
-
     permissions:
-      contents: read
+      contents: write
       pull-requests: write
 
     steps:
@@ -20,7 +19,9 @@ jobs:
     #---------------------------------------------------
     - name: Checkout code
       uses: actions/checkout@v3
-      with: { fetch-depth: 0 }
+      with:
+        fetch-depth: 0
+        ref: ${{ github.event.pull_request.head.ref }} # Crucial for pushing back to PR branch
 
     #---------------------------------------------------
     # 1 – reviewdog CLI
@@ -59,17 +60,169 @@ jobs:
     - name: Install dependencies
       run: npm install
 
-    #---------------------------------------------------
-    # 4 – Install Playwright browsers
-    #---------------------------------------------------
+    # --- IMPORTANT FIX: Install Playwright browsers early ---
     - name: Install Playwright and browsers
       run: npx playwright install --with-deps
 
+    ## NEW STEP: Create a directory for "before" screenshots (this will be the Playwright output dir)
+    - name: Create "before" screenshots directory
+      run: mkdir -p published-screenshots-before
+
+    ## NEW STEP: Save current PR's test files (before checking out main)
+    - name: Save PR test files
+      run: |
+        mkdir -p tests_pr_backup/
+        cp -r tests/* tests_pr_backup/ # Copy contents, not the directory itself
+        ls -la tests_pr_backup/ # Debugging: verify backup content
+
+    ## NEW STEP: Checkout Main branch for "before" tests
+    - name: Checkout Main branch for "before" screenshots
+      run: |
+        git config user.name "github-actions[bot]"
+        git config user.email "github-actions[bot]@users.noreply.github.com"
+        git fetch origin main # Ensure main branch is fetched
+        git reset --hard origin/main # Reset to main, discard local changes (tests_pr_backup is safe outside)
+
+    ## NEW STEP: Run Playwright tests on Main (for "before" screenshots)
+    - name: Run Playwright "before" tests
+      run: |
+        # Playwright will output its results (including screenshots) directly into PLAYWRIGHT_SCREENSHOT_DIR.
+        # Ensure your playwright.config.js uses process.env.PLAYWRIGHT_SCREENSHOT_DIR for 'output' in 'use'.
+        PLAYWRIGHT_SCREENSHOT_DIR="published-screenshots-before" npx playwright test
+
+    ## NEW STEP: Restore PR test files
+    - name: Restore PR test files
+      run: |
+        git reset --hard ${{ github.event.pull_request.head.ref }} # Reset to PR branch's state
+        # Now, replace the 'tests/' directory with the backup
+        rm -rf tests/ # Remove current tests/ directory
+        mv tests_pr_backup/ tests/ # Move the backup directory to become the new tests/
+        ls -la tests/ # Debugging: verify restored content
+
     #---------------------------------------------------
-    # 5 – Run Playwright tests
+    # 5 – Run Playwright tests (This now runs on the PR branch's tests, generates to 'published-screenshots/')
     #---------------------------------------------------
     - name: Run Playwright tests
-      run: npx playwright test
+      run: npx playwright test --output=playwright-report-pr/ --reporter=html,json # This will create results.json
+      # Playwright will output screenshots into the default location defined in playwright.config.js (e.g., test-results/)
+      # We will then move them to 'published-screenshots/' in the next step.
+
+    # --- Debugging: Verify Playwright Report Existence AFTER tests ---
+    - name: Verify Playwright Report Existence
+      run: |
+        echo "Listing contents of the workspace:"
+        ls -la
+        echo "Listing contents of playwright-report-pr/:"
+        ls -la playwright-report-pr/
+        # Check if the results.json exists
+        if [ -f "playwright-report-pr/results.json" ]; then # FIXED: Check for results.json
+          echo "playwright-report-pr/results.json exists."
+        else
+          echo "ERROR: playwright-report-pr/results.json DOES NOT EXIST."
+          exit 1
+        fi
+    # --- End Debugging ---
+
+    # --- START OF SCREENSHOT PUBLISHING FOR BOTH BEFORE AND AFTER ---
+
+    # Prepare directories for PR-specific screenshots on GitHub Pages
+    - name: Prepare PR Screenshots for GitHub Pages (After)
+      if: github.event_name == 'pull_request'
+      run: |
+        PR_DIR="docs/pr/${{ github.event.pull_request.number }}/screenshots"
+        mkdir -p "$PR_DIR"
+        # Find all .png files within the default Playwright output directory (e.g., test-results/)
+        # and copy them to the target PR_DIR.
+        # This assumes your playwright.config.js sets `output` to 'test-results' for the main run.
+        find test-results/ -name "*.png" -exec cp {} "$PR_DIR/" \; || true # The '|| true' prevents failure if no files are found
+        echo "Copied 'after' screenshots to $PR_DIR/"
+        ls -lh "$PR_DIR/" # For debugging
+
+    - name: Prepare PR Screenshots for GitHub Pages (Before)
+      if: github.event_name == 'pull_request'
+      run: |
+        PR_BEFORE_DIR="docs/pr/${{ github.event.pull_request.number }}/before-screenshots"
+        mkdir -p "$PR_BEFORE_DIR"
+        # Find all .png files within the 'published-screenshots-before/' directory (Playwright's output for before tests)
+        # and copy them to the target PR_BEFORE_DIR.
+        find published-screenshots-before/ -name "*.png" -exec cp {} "$PR_BEFORE_DIR/" \; || true
+        echo "Copied 'before' screenshots to $PR_BEFORE_DIR/"
+        ls -lh "$PR_BEFORE_DIR/" # For debugging
+
+    # Commit and Push PR Screenshots to GitHub Pages
+    - name: Commit and Push PR Screenshots to GitHub Pages
+      if: github.event_name == 'pull_request'
+      uses: EndBug/add-and-commit@v9
+      with:
+        add: 'docs/pr/${{ github.event.pull_request.number }}/screenshots/ docs/pr/${{ github.event.pull_request.number }}/before-screenshots/'
+        message: 'Docs: Publish Playwright screenshots for PR #${{ github.event.pull_request.number }} [skip ci]'
+        default_author: github_actions
+        push: true
+
+    # Generate Markdown for screenshots with their public URLs
+    - name: Generate Screenshot Markdown for PR Comment
+      id: generate_screenshot_markdown
+      if: github.event_name == 'pull_request'
+      run: |
+        REPO_OWNER=$(echo "${{ github.repository }}" | cut -d'/' -f1)
+        REPO_NAME=$(echo "${{ github.repository }}" | cut -d'/' -f2)
+        PR_NUMBER="${{ github.event.pull_request.number }}"
+        PR_SCREENSHOTS_LOCAL_DIR_AFTER="docs/pr/${PR_NUMBER}/screenshots"
+        PR_SCREENSHOTS_LOCAL_DIR_BEFORE="docs/pr/${PR_NUMBER}/before-screenshots"
+
+        GITHUB_PAGES_BASE_URL_AFTER="https://digitalproductinnovationanddevelopment.github.io/Code-Reviews-of-GUI-Tests/pr/${PR_NUMBER}/screenshots/"
+        GITHUB_PAGES_BASE_URL_BEFORE="https://digitalproductinnovationanddevelopment.github.io/Code-Reviews-of-GUI-Tests/pr/${PR_NUMBER}/before-screenshots/"
+
+        IMAGE_MARKDOWN=""
+
+        # Add "Before" screenshots section
+        IMAGE_MARKDOWN+="### Before (Main Branch)\n\n"
+        if [ -d "$PR_SCREENSHOTS_LOCAL_DIR_BEFORE" ]; then
+            shopt -s nullglob
+            # Look for .png files directly in the directory
+            declare -a IMG_FILES_BEFORE=("$PR_SCREENSHOTS_LOCAL_DIR_BEFORE"/*.png)
+            shopt -u nullglob
+
+            if [ ${#IMG_FILES_BEFORE[@]} -gt 0 ]; then
+                for img_path in "${IMG_FILES_BEFORE[@]}"; do
+                    img_name=$(basename "$img_path")
+                    img_url="${GITHUB_PAGES_BASE_URL_BEFORE}${img_name}"
+                    IMAGE_MARKDOWN+="![Before - ${img_name}](${img_url})\n\n"
+                done
+            else
+                IMAGE_MARKDOWN+="*No 'before' screenshots found.*\n\n"
+            fi
+        else
+            IMAGE_MARKDOWN+="*'Before' screenshots directory not found.*\n\n"
+        fi
+
+        # Add "After" screenshots section
+        IMAGE_MARKDOWN+="### After (PR Branch)\n\n"
+        if [ -d "$PR_SCREENSHOTS_LOCAL_DIR_AFTER" ]; then
+            shopt -s nullglob
+            # Look for .png files directly in the directory
+            declare -a IMG_FILES_AFTER=("$PR_SCREENSHOTS_LOCAL_DIR_AFTER"/*.png)
+            shopt -u nullglob
+
+            if [ ${#IMG_FILES_AFTER[@]} -gt 0 ]; then
+                for img_path in "${IMG_FILES_AFTER[@]}"; do
+                    img_name=$(basename "$img_path")
+                    img_url="${GITHUB_PAGES_BASE_URL_AFTER}${img_name}"
+                    IMAGE_MARKDOWN+="![After - ${img_name}](${img_url})\n\n"
+                done
+            else
+                IMAGE_MARKDOWN+="*No 'after' screenshots found.*\n\n"
+            fi
+        else
+            IMAGE_MARKDOWN+="*'After' screenshots directory not found.*\n\n"
+        fi
+
+        echo "pr_screenshots_markdown<<EOF" >> $GITHUB_OUTPUT
+        echo "$IMAGE_MARKDOWN" >> $GITHUB_OUTPUT
+        echo "EOF" >> $GITHUB_OUTPUT
+      shell: bash
+
+    # --- END OF SCREENSHOT PUBLISHING FOR BOTH BEFORE AND AFTER ---
 
     #---------------------------------------------------
     # 6 – Upload HTML report
@@ -79,31 +232,42 @@ jobs:
       uses: actions/upload-artifact@v4
       with:
         name: playwright-report
-        path: playwright-report/
+        path: playwright-report-pr/
 
     #---------------------------------------------------
     # 7 – Extract test summary
     #---------------------------------------------------
     - name: Extract test summary
       id: summary
       run: |
-        REPORT=metrics.json
-        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")
+        # Playwright's JSON report contains the summary statistics
+        REPORT_FILE=playwright-report-pr/results.json # FIXED: Path to results.json
+        if [ ! -f "$REPORT_FILE" ]; then
+          echo "Error: Playwright report file not found at $REPORT_FILE"
+          exit 1
+        fi
+
+        TOTAL=$(jq '.stats.total' "$REPORT_FILE")
+        PASSED=$(jq '.stats.expected' "$REPORT_FILE")
+        FAILED=$(jq '.stats.failures' "$REPORT_FILE")
+        SKIPPED=$(jq '.stats.skipped' "$REPORT_FILE")
+        DURATION=$(jq '.stats.duration' "$REPORT_FILE") # Playwright duration is already in ms
         PASS_RATE=$(awk "BEGIN{printf \"%.2f\", ($TOTAL==0)?0:($PASSED/$TOTAL)*100}")
-        for k in total passed failed skipped duration passrate; do
-          eval "echo \"$k=\${${k^^}}\" >> \$GITHUB_OUTPUT"
-        done
+
+        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: |
+        # Run ESLint and redirect output to a file. The `|| true` prevents the step from failing if lint issues are found.
         npx eslint "tests/**/*.{js,ts,tsx}" -f stylish > eslint-tests.txt || true
 
     - name: Upload ESLint report
@@ -116,11 +280,16 @@ jobs:
     - name: Read ESLint report (preview)
       id: lint_summary
       run: |
-        echo 'summary<<EOF' >> $GITHUB_OUTPUT
-        head -n 20 eslint-tests.txt >> $GITHUB_OUTPUT
-        echo 'EOF' >> $GITHUB_OUTPUT
-
-
+        # Only read if the file exists, to prevent errors
+        if [ -f "eslint-tests.txt" ]; then
+          echo 'summary<<EOF' >> $GITHUB_OUTPUT
+          head -n 20 eslint-tests.txt >> $GITHUB_OUTPUT
+          echo 'EOF' >> $GITHUB_OUTPUT
+        else
+          echo 'summary<<EOF' >> $GITHUB_OUTPUT
+          echo 'ESLint report not generated or found.' >> $GITHUB_OUTPUT
+          echo 'EOF' >> $GITHUB_OUTPUT
+        fi
 
     #---------------------------------------------------
     # 9 – Generate Suite→Spec Mermaid chart (flowchart.png)
@@ -129,22 +298,28 @@ jobs:
       shell: bash
       run: |
         set -e
+        REPORT_FILE=playwright-report-pr/results.json # FIXED: Path to results.json
+        if [ ! -f "$REPORT_FILE" ]; then
+          echo "Error: Playwright report file not found at $REPORT_FILE for flowchart generation. Skipping chart."
+          exit 0 # Exit successfully if report not found, but log message
+        fi
+
         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
-        ' metrics.json |
+          ($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_FILE" |
         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')
+          specId=$(echo "${fileTitle}_${suiteTitle}_${specTitle}" | tr -c 'A-Za-Z0-9' '_' | sed 's/^_*\|_*$//g')
 
           # File node
           if ! grep -q "^  ${fileId}\[" flowchart.mmd; then
@@ -168,11 +343,11 @@ jobs:
 
         ls -lh flowchart.png
 
-    - name: Show flowchart.mmd for debugging  
+    - name: Show flowchart.mmd for debugging
       run: cat flowchart.mmd
 
     - name: Upload test-flow chart
-      if: always()
+      if: always() # Removed fileExists: This ensures the step runs and actions/upload-artifact will warn if file is missing.
       uses: actions/upload-artifact@v4
       with:
         name: test-flow-chart
@@ -186,20 +361,26 @@ jobs:
       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 (GUI tests)
           ```
           ${{ steps.lint_summary.outputs.summary }}
           ```
 
-          ## Test-Flow Chart  
+          ## Test-Flow Chart
+          # Note: The flowchart.png is uploaded as an artifact. To embed it directly like screenshots,
+          # you would also need to copy it into the 'published-screenshots' directory in step 9,
+          # and then reference it using the PR-specific GitHub Pages URL.
           Artifact: **test-flow-chart → flowchart.png**
 
+          ## Playwright Screenshots for this PR
+          ${{ steps.generate_screenshot_markdown.outputs.pr_screenshots_markdown }}
+
           _Full run details:_ [link](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})

.gitignore

@@ -0,0 +1,8 @@
+# Ignore generated screenshots
+published-screenshots/
+
+# You might also want to ignore Node.js dependencies
+node_modules/
+
+# And Playwright test results/reports
+playwright-report/