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 }}
 
     #---------------------------------------------------
     # 1 – reviewdog CLI
@@ -47,6 +48,7 @@ jobs:
                                          -level=warning
         else
           echo "No Prettier issues found."
+        Ends if
         fi
 
     #---------------------------------------------------
@@ -71,6 +73,71 @@ jobs:
     - name: Run Playwright tests
       run: npx playwright test
 
+    # --- START OF NEW STEPS FOR SCREENSHOT PUBLISHING ---
+
+    # Prepare the directory for PR-specific screenshots on GitHub Pages
+    - name: Prepare PR Screenshots for GitHub Pages
+      if: github.event_name == 'pull_request'
+      run: |
+        PR_DIR="docs/pr/${{ github.event.pull_request.number }}/screenshots"
+        mkdir -p "$PR_DIR"
+        cp published-screenshots/*.png "$PR_DIR/"
+        echo "Copied screenshots to $PR_DIR/"
+        ls -lh "$PR_DIR/" # For debugging, shows what was copied
+
+    # 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/'
+        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="docs/pr/${PR_NUMBER}/screenshots"
+
+        GITHUB_PAGES_BASE_URL="https://digitalproductinnovationanddevelopment.github.io/Code-Reviews-of-GUI-Tests/pr/${PR_NUMBER}/screenshots/"
+
+        IMAGE_MARKDOWN=""
+        # Check if the directory exists and contains PNG files
+        if [ -d "$PR_SCREENSHOTS_LOCAL_DIR" ]; then
+            # Get all PNG filenames into a bash array in the current shell context
+            # 'shopt -s nullglob' ensures the glob expands to nothing if no files match
+            shopt -s nullglob
+            declare -a IMG_FILES=("$PR_SCREENSHOTS_LOCAL_DIR"/*.png)
+            shopt -u nullglob # disable nullglob after use
+
+            if [ ${#IMG_FILES[@]} -gt 0 ]; then
+                echo "Found ${#IMG_FILES[@]} screenshot(s) for markdown generation:"
+                for img_path in "${IMG_FILES[@]}"; do
+                    img_name=$(basename "$img_path")
+                    img_url="${GITHUB_PAGES_BASE_URL}${img_name}"
+                    IMAGE_MARKDOWN+="![${img_name}](${img_url})\n\n"
+                    echo "- $img_name" # Debugging: show which file is being processed
+                done
+            else
+                echo "No PNG files found in $PR_SCREENSHOTS_LOCAL_DIR for markdown generation."
+            fi
+        else
+            echo "Warning: Directory '$PR_SCREENSHOTS_LOCAL_DIR' does not exist for Markdown generation."
+        fi
+
+        echo "pr_screenshots_markdown<<EOF" >> $GITHUB_OUTPUT
+        echo "$IMAGE_MARKDOWN" >> $GITHUB_OUTPUT
+        echo "EOF" >> $GITHUB_OUTPUT
+      shell: bash # Ensure bash is used for array and shopt features
+
+    # --- END OF NEW STEPS FOR SCREENSHOT PUBLISHING ---
+
     #---------------------------------------------------
     # 6 – Upload HTML report
     #---------------------------------------------------
@@ -90,7 +157,7 @@ jobs:
         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")
+        FAILED=$(jq '[..|objects|select(.status?=="failed")]    | length' "$REPORT")
         SKIPPED=$(jq '[..|objects|select(.status?=="skipped")] | length' "$REPORT")
         DURATION=$(jq '.stats.duration*1000|floor' "$REPORT")
         PASS_RATE=$(awk "BEGIN{printf \"%.2f\", ($TOTAL==0)?0:($PASSED/$TOTAL)*100}")
@@ -120,8 +187,6 @@ jobs:
         head -n 20 eslint-tests.txt >> $GITHUB_OUTPUT
         echo 'EOF' >> $GITHUB_OUTPUT
 
-
-
     #---------------------------------------------------
     # 9 – Generate Suite→Spec Mermaid chart (flowchart.png)
     #---------------------------------------------------
@@ -168,7 +233,7 @@ 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
@@ -186,20 +251,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/

published-screenshots/.gitkeep

@@ -0,0 +1 @@
+

tests/example.spec.js

@@ -1,16 +1,19 @@
+// tests/example.spec.js
 const { test, expect } = require('@playwright/test');
 
 test.describe('Playwright Basic Workflow Tests', () => {
   test('should load example.com and verify title', async ({ page }) => {
     await page.goto('https://example.com');
     await expect(page).toHaveTitle(/Example Domain/);
-    await page.screenshot({ path: 'playwright-report/example-domain.png' });
+    // **CHANGE THIS LINE:** Use process.env.PLAYWRIGHT_SCREENSHOT_DIR
+    await page.screenshot({ path: `${process.env.PLAYWRIGHT_SCREENSHOT_DIR || 'published-screenshots'}/example-domain.png` });
   });
-  
+
   test('should find and click the More information link', async ({ page }) => {
     await page.goto('https://example.com');
     await page.click('text=More information');
     await expect(page).toHaveURL(/iana.org/);
-    await page.screenshot({ path: 'playwright-report/navigation.png' });
+    // **CHANGE THIS LINE:** Use process.env.PLAYWRIGHT_SCREENSHOT_DIR
+    await page.screenshot({ path: `${process.env.PLAYWRIGHT_SCREENSHOT_DIR || 'published-screenshots'}/navigation.png` });
   });
-});
+});