Screenshot feature

.github/workflows/screenshot-on-pr.yml

@@ -0,0 +1,55 @@
+name: GUI Screenshots in PR
+
+on:
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+permissions:
+  pull-requests: write
+
+jobs:
+  capture-screenshots:
+    runs-on: ubuntu-latest
+    timeout-minutes: 3
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install Playwright
+        run: npm install playwright
+
+      - name: Capture and embed screenshots
+        id: screenshots
+        run: |
+          # Create output directory
+          mkdir -p screenshots
+
+          # Run screenshot script
+          node scripts/screenshot.js
+
+          # Get base64 images and set output
+          IMAGES_MARKDOWN=""
+          for file in screenshots/*.jpg; do
+            [ -e "$file" ] || continue
+            base64_data=$(base64 -w0 "$file")
+            IMAGES_MARKDOWN+="![${file##*/}](data:image/jpeg;base64,$base64_data)\n\n"
+          done
+
+          # Escape newlines for output
+          IMAGES_MARKDOWN="${IMAGES_MARKDOWN//$'\n'/'%0A'}"
+          echo "images=$IMAGES_MARKDOWN" >> $GITHUB_OUTPUT
+
+      - name: Post images to PR
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          header: gui-screenshots
+          message: |
+            ## 🖼️ Automated UI Preview
+            ${{ steps.screenshots.outputs.images }}

scripts/screenshot.js

@@ -0,0 +1,36 @@
+const { chromium } = require('playwright');
+
+(async () => {
+  const browser = await chromium.launch();
+  const page = await browser.newPage();
+
+  try {
+    // Reduce image size
+    await page.setViewportSize({ width: 800, height: 600 });
+
+    // Example 1: Homepage
+    await page.goto('https://example.com', { waitUntil: 'networkidle' });
+    await page.screenshot({ 
+      path: 'screenshots/home.jpg',
+      type: 'jpeg',
+      quality: 70,
+      fullPage: false
+    });
+
+    // Example 2: About page
+    await page.goto('https://example.com/about', { waitUntil: 'networkidle' });
+    await page.screenshot({ 
+      path: 'screenshots/about.jpg',
+      type: 'jpeg',
+      quality: 70,
+      fullPage: false
+    });
+
+    console.log('Screenshots captured successfully!');
+  } catch (error) {
+    console.error('❌ Screenshot failed:', error);
+    process.exit(1);
+  } finally {
+    await browser.close();
+  }
+})();