Fix screenshot paths consistency and simplify CHECKLIST script syntax

Co-authored-by: stnguyen90 <1477010+stnguyen90@users.noreply.github.com>

.github/agents/CHECKLIST.md

@@ -53,19 +53,19 @@ npx playwright install chromium
 # 2. Create directory
 mkdir -p /tmp/pr-screenshots
 
-# 3. Use this template (save as /tmp/capture.js)
-cat > /tmp/capture.js << 'EOF'
-const { chromium } = require('playwright');
-(async () => {
-  const browser = await chromium.launch();
-  const page = await browser.newPage();
-  await page.setViewportSize({ width: 1920, height: 1080 });
-  await page.goto('http://localhost/console'); // Appwrite console URL (adjust path as needed)
-  await page.waitForLoadState('networkidle');
-  await page.screenshot({ path: '/tmp/pr-screenshots/screenshot.png', fullPage: true });
-  await browser.close();
-})();
-EOF
+# 3. Create a simple script (save as /tmp/capture.js):
+# Copy the example below, modify the URL, and save to /tmp/capture.js:
+#
+# const { chromium } = require('playwright');
+# (async () => {
+#   const browser = await chromium.launch();
+#   const page = await browser.newPage();
+#   await page.setViewportSize({ width: 1920, height: 1080 });
+#   await page.goto('http://localhost/console'); // Adjust URL as needed
+#   await page.waitForLoadState('networkidle');
+#   await page.screenshot({ path: '/tmp/pr-screenshots/screenshot.png', fullPage: true });
+#   await browser.close();
+# })();
 
 # 4. Run it
 node /tmp/capture.js

.github/agents/code-change-agent.md

@@ -52,7 +52,7 @@ Take screenshots in the following scenarios:
      
      // Take screenshot
      await page.screenshot({ 
-       path: 'screenshot-before.png',
+       path: '/tmp/pr-screenshots/screenshot-before.png',
        fullPage: true 
      });
      
@@ -76,7 +76,7 @@ Take screenshots in the following scenarios:
    test('capture UI changes', async ({ page }) => {
      // Appwrite console runs on http://localhost by default
      await page.goto('http://localhost/console');
-     await expect(page).toHaveScreenshot('ui-state.png');
+     await expect(page).toHaveScreenshot('/tmp/pr-screenshots/ui-state.png');
    });
    ```
 

.github/agents/screenshot-guide.md

@@ -142,7 +142,8 @@ Drag and drop images into a PR comment or paste from clipboard.
 
 ### Option 3: Use GitHub CLI
 ```bash
-gh pr comment PR_NUMBER --body "📸 Screenshots attached" -F /tmp/pr-screenshots/screenshot.png
+# Upload screenshots by dragging files into the PR comment box in the web UI
+# Or use the GitHub API to attach images
 ```
 
 ## Pro Tips