Screenshot feature

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

@@ -0,0 +1,142 @@
+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: Install dependencies
+        run: |
+          npm install --package-lock-only --ignore-scripts
+          npm install playwright
+
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+
+      # UPDATED SCREENSHOT CAPTURE WITH DEBUGGING
+      - name: Capture GUI screenshots
+        id: capture-screenshots
+        run: |
+          # Enable verbose Playwright debugging
+          export DEBUG=pw:api,pw:browser,pw:protocol
+
+          # Add detailed logging
+          echo "Starting screenshot capture with debug logging..."
+          echo "Target URL: $TARGET_URL"
+
+          node scripts/screenshot.js
+
+          # List captured files for verification
+          echo "Screenshot files:"
+          ls -l tests_artifacts || echo "No artifacts directory"
+        continue-on-error: true
+        timeout-minutes: 5
+        env:
+          TARGET_URL: "https://your-app.com/login"  # UPDATE TO YOUR ACTUAL URL
+
+      # DEBUGGING AND ERROR HANDLING
+      - name: Check for screenshots
+        if: always() && steps.capture-screenshots.outcome != 'success'
+        run: |
+          echo "Screenshot capture failed! Debugging information:"
+          ls -lR tests_artifacts || echo "No artifacts directory"
+          if [ -f tests_artifacts/error-state.png ]; then
+            echo "Error screenshot available in artifacts"
+          fi
+          if [ -f tests_artifacts/error-page.html ]; then
+            echo "Error page HTML available in artifacts"
+          fi
+          exit 1  # Fail the job explicitly
+
+      - name: Upload debug artifacts
+        if: always() && steps.capture-screenshots.outcome != 'success'
+        uses: actions/upload-artifact@v4
+        with:
+          name: screenshot-debug
+          path: tests_artifacts/
+          retention-days: 1
+
+      # MAIN FLOW CONTINUES IF SCREENSHOTS SUCCEEDED
+      - name: Upload screenshots to repo
+        if: steps.capture-screenshots.outcome == 'success'
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          branch: gh-pages
+          folder: tests_artifacts
+          clean: true
+          commit-message: "Upload GUI screenshots [skip ci]"
+
+      - name: Prepare image URLs
+        if: steps.capture-screenshots.outcome == 'success'
+        id: images
+        run: |
+          BASE_URL="https://raw.githubusercontent.com/${{ github.repository }}/gh-pages/"
+          IMAGES=$(find tests_artifacts -name '*.png' -not -name 'error-*')
+          MARKDOWN=""
+
+          for image in $IMAGES; do
+            FILENAME=$(basename "$image")
+            URL="$BASE_URL$FILENAME"
+            MARKDOWN+="![$FILENAME]($URL)\n\n"
+          done
+
+          echo "markdown_images<<EOF" >> $GITHUB_OUTPUT
+          echo -e "$MARKDOWN" >> $GITHUB_OUTPUT
+          echo "EOF" >> $GITHUB_OUTPUT
+
+      - name: Post PR comment with images
+        if: steps.capture-screenshots.outcome == 'success'
+        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 }}
+
+            [View full debug info](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})
+
+      # ERROR COMMENT
+      - name: Post error comment
+        if: failure() && steps.capture-screenshots.outcome != 'success'
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          header: gui-screenshots-error
+          message: |
+            ## ❌ GUI Screenshot Capture Failed
+            Screenshot capture failed during execution. Debugging information:
+
+            - [View debug artifacts](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})
+            - Check application availability and element selectors
+
+            Common fixes:
+            1. Verify application URL is accessible from GitHub's servers
+            2. Check element selectors in screenshot.js
+            3. Increase timeouts if application is slow to load

scripts/screenshot.js

@@ -0,0 +1,144 @@
+const { chromium } = require('playwright');
+const fs = require('fs');
+const path = require('path');
+
+// Configuration
+const OUTPUT_DIR = path.join(__dirname, '../tests_artifacts');
+const TIMEOUT = 120000; // 2 minutes timeout
+const TARGET_URL = process.env.TARGET_URL || 'https://your-app.com/login'; // From environment variable
+
+// Create output directory if needed
+if (!fs.existsSync(OUTPUT_DIR)) {
+  fs.mkdirSync(OUTPUT_DIR, { recursive: true });
+}
+
+(async () => {
+  let browser;
+  let page;
+
+  try {
+    console.log('Launching browser...');
+    browser = await chromium.launch({ headless: true });
+    const context = await browser.newContext();
+    page = await context.newPage();
+
+    // Set extended timeout for all actions
+    page.setDefaultTimeout(TIMEOUT);
+
+    // 1. Navigate to target URL
+    console.log(`Navigating to: ${TARGET_URL}`);
+    await page.goto(TARGET_URL, {
+      waitUntil: 'domcontentloaded',
+      timeout: TIMEOUT
+    });
+
+    // Capture initial page state
+    console.log('Page loaded. Capturing login page...');
+    await page.screenshot({ path: path.join(OUTPUT_DIR, '01-login-page.png') });
+    fs.writeFileSync(path.join(OUTPUT_DIR, 'login-page.html'), await page.content());
+
+    // 2. Attempt to find and fill username
+    console.log('Searching for username field...');
+    const usernameSelectors = [
+      '#username',
+      'input[name="username"]',
+      'input[type="text"]',
+      'input[type="email"]',
+      'input[id*="user"]',
+      'input[name*="user"]'
+    ];
+
+    const usernameField = await findVisibleElement(page, usernameSelectors);
+    if (!usernameField) throw new Error('Username field not found');
+    await usernameField.fill('testuser');
+    console.log('Username filled');
+
+    // 3. Attempt to find and fill password
+    console.log('Searching for password field...');
+    const passwordSelectors = [
+      '#password',
+      'input[name="password"]',
+      'input[type="password"]',
+      'input[id*="pass"]',
+      'input[name*="pass"]'
+    ];
+
+    const passwordField = await findVisibleElement(page, passwordSelectors);
+    if (!passwordField) throw new Error('Password field not found');
+    await passwordField.fill('testpass');
+    console.log('Password filled');
+
+    // 4. Attempt to find and click login button
+    console.log('Searching for login button...');
+    const loginButtonSelectors = [
+      '#login-btn',
+      'button[type="submit"]',
+      'button:has-text("Sign in")',
+      'button:has-text("Log in")',
+      'button:has-text("Login")',
+      'input[type="submit"]'
+    ];
+
+    const loginButton = await findVisibleElement(page, loginButtonSelectors);
+    if (!loginButton) throw new Error('Login button not found');
+    await loginButton.click();
+    console.log('Login button clicked');
+
+    // 5. Wait for navigation to complete
+    console.log('Waiting for post-login page...');
+    await page.waitForLoadState('networkidle', { timeout: TIMEOUT });
+
+    // Capture dashboard state
+    console.log('Page loaded. Capturing dashboard...');
+    await page.waitForSelector('.dashboard, .main-content, [class*="content"]', {
+      state: 'visible',
+      timeout: TIMEOUT
+    });
+
+    await page.screenshot({ 
+      path: path.join(OUTPUT_DIR, '02-dashboard.png'),
+      fullPage: true 
+    });
+
+    console.log('Screenshots captured successfully!');
+
+  } catch (error) {
+    console.error('Screenshot capture failed:', error);
+
+    // Capture error state if page exists
+    if (page) {
+      try {
+        await page.screenshot({ 
+          path: path.join(OUTPUT_DIR, '99-error-state.png'),
+          fullPage: true 
+        });
+        fs.writeFileSync(path.join(OUTPUT_DIR, 'error-page.html'), await page.content());
+      } catch (innerError) {
+        console.error('Failed to capture error state:', innerError);
+      }
+    }
+
+    // Rethrow error to fail the workflow
+    throw error;
+  } finally {
+    if (browser) {
+      await browser.close();
+    }
+  }
+})();
+
+// Helper function to find first visible element from a list of selectors
+async function findVisibleElement(page, selectors) {
+  for (const selector of selectors) {
+    try {
+      const element = await page.waitForSelector(selector, {
+        state: 'visible',
+        timeout: 15000 // 15s per selector
+      });
+      if (element) return element;
+    } catch (e) {
+      // Continue to next selector
+    }
+  }
+  return null;
+}