สร้าง AI Agents ทำงานโปร่งใสด้วยภาพหน้าจอ หลักฐานยืนยัน ไม่ต้องกลัวข้อมูลผิดพลาด

TL;DR

หยุดการหลอนของ AI ด้วย 4 ขั้นตอน: (1) ติดตั้ง Playwright และกำหนดค่าเบรกพอยต์ (เดสก์ท็อป, แท็บเล็ต, มือถือ), (2) สร้างชุดทดสอบการจับภาพหน้าจอที่เก็บภาพเต็มหน้าจอ, เลย์เอาต์ที่ตอบสนอง, และการโต้ตอบ, (3) รัน ./qa-playwright-capture.sh เพื่อรวบรวมหลักฐาน, (4) เปิดใช้งานเอเจนต์ Reality Checker เพื่อเปรียบเทียบข้อกล่าวอ้างกับผลลัพธ์ grep และภาพหน้าจอ เอเจนต์จะแสดงผลเป็น PASS หรือ NEEDS WORK พร้อมปัญหาที่ต้องแก้ไขเฉพาะจุด — ไม่มี "อนุมัติมโน" อีกต่อไป

บทนำ

หยุดรับคำว่า "ดูดีมาก" จากเอเจนต์ AI สร้างเวิร์กโฟลว์ QA ที่อิงหลักฐานด้วยภาพหน้าจอ Playwright ซึ่งต้องมีหลักฐานภาพก่อนการอนุมัติใดๆ

คุณขอให้เอเจนต์ AI ตรวจสอบหน้า Landing Page ของคุณ มันตอบว่า:

The design looks premium and polished. The glassmorphism effects are well-implemented. The page is fully responsive. Ready for production!

คุณเปิดหน้าเว็บ "glassmorphism" กลับเป็นพื้นหลังสีเทาทึบ เลย์เอาต์ "ตอบสนองเต็มรูปแบบ" พังบนมือถือ ไม่มีอะไรหรูหราหรือขัดเกลาเลย

เอเจนต์ AI หลอน พวกมันบอกคุณในสิ่งที่คุณอยากได้ยิน พวกมันหลีกเลี่ยงความขัดแย้ง พวกมันอนุมัติทุกอย่าง

เอเจนต์ Reality Checker จากชุด The Agency ใช้วิธีที่แตกต่างออกไป:

Status: NEEDS WORK

Evidence:
- grep for "glassmorphism" returned NO PREMIUM FEATURES FOUND
- responsive-mobile.png shows broken layout at 375px width
- test-results.json shows 3 console errors, 2.1s load time

Blocking issues: 4

ไม่มีอารมณ์ ไม่มีทัศนคติ มีแต่หลักฐาน

ในบทช่วยสอนนี้ คุณจะได้สร้างเวิร์กโฟลว์ QA ที่อิงหลักฐานซึ่งเสริม Pipeline การทดสอบ API ของคุณ ไม่ว่าคุณจะตรวจสอบเลย์เอาต์ส่วนหน้าหรือยืนยันการตอบกลับ API ใน Apidog หลักการก็เหมือนกัน: ต้องมีหลักฐานก่อนการอนุมัติ คุณจะตั้งค่า Playwright สำหรับการจับภาพหน้าจออัตโนมัติ สร้างคำสั่งตรวจสอบความเป็นจริงที่จำเป็น เปรียบเทียบข้อกล่าวอ้างของเอเจนต์กับโค้ดจริง และกำหนดให้มีการรับรอง PASS/FAIL ก่อนการส่งมอบ

ทำไมหลักฐานจึงสำคัญ

เอเจนต์ AI ชอบทำให้คนพอใจ พวกมันอยากช่วย พวกมันอยากให้คุณชอบพวกมัน ดังนั้นพวกมันจึงพูดในสิ่งที่ฟังดูดี:

"โค้ดดูแข็งแกร่ง!" (ไม่เคยทดสอบ)
"ประสิทธิภาพน่าจะยอดเยี่ยม!" (ไม่เคยวัดผล)
"ตอบสนองเต็มที่!" (ไม่เคยตรวจสอบบนมือถือ)

QA ที่อิงหลักฐานจะเปลี่ยนสิ่งนี้ แทนที่จะเป็นความคิดเห็น คุณจะได้:

ภาพหน้าจอที่เบรกพอยต์เดสก์ท็อป, แท็บเล็ต, มือถือ
เมตริกประสิทธิภาพจากการโหลดหน้าเว็บจริง
ผลลัพธ์ Grep ที่พิสูจน์ว่าฟีเจอร์มีอยู่จริง (หรือไม่)
จำนวนข้อผิดพลาดของคอนโซลจากการทดสอบด้วยเบราว์เซอร์ Headless

ไม่มี "เชื่อฉันสิ" อีกต่อไป มีแต่หลักฐาน

ขั้นตอนที่ 1: ตั้งค่า Playwright

ติดตั้ง Playwright:

npm install -D @playwright/test
npx playwright install chromium

สร้าง qa-playwright.config.ts:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testMatch: '**/qa-screenshots.spec.ts',
  timeout: 30000,
  use: {
    baseURL: process.env.BASE_URL || 'http://localhost:8000',
    screenshot: 'on',
    trace: 'on-first-retry',
    headless: true,
  },
  projects: [
    {
      name: 'desktop',
      use: { viewport: { width: 1920, height: 1080 } },
    },
    {
      name: 'tablet',
      use: { viewport: { width: 768, height: 1024 } },
    },
    {
      name: 'mobile',
      use: { viewport: { width: 375, height: 667 } },
    },
  ],
  reporter: [['json', { outputFile: 'public/qa-screenshots/test-results.json' }]],
  outputDir: 'public/qa-screenshots',
});

ขั้นตอนที่ 2: สร้างชุดทดสอบการจับภาพหน้าจอ

สร้าง qa-screenshots.spec.ts:

import { test, expect } from '@playwright/test';
import * as fs from 'fs';
import * as path from 'path';

// Ensure output directory exists
const outputDir = 'public/qa-screenshots';
if (!fs.existsSync(outputDir)) {
  fs.mkdirSync(outputDir, { recursive: true });
}

test.describe('Reality Check Screenshots', () => {
  test('capture full page at all breakpoints', async ({ page, browserName }) => {
    const errors: string[] = [];
    const consoleLogs: string[] = [];

    // Capture console errors
    page.on('console', msg => {
      if (msg.type() === 'error') {
        consoleLogs.push(`[ERROR] ${msg.text()}`);
      }
    });

    // Capture network failures
    page.on('requestfailed', request => {
      errors.push(`[NETWORK] ${request.url()} failed`);
    });

    // Navigate to page
    await page.goto('/');
    await page.waitForLoadState('networkidle');

    // Capture performance metrics
    const metrics = await page.metrics();
    const performance = {
      jsHeapSize: metrics.JSHeapUsedSize,
      loadTime: await page.evaluate(() => performance.timing.loadEventEnd - performance.timing.navigationStart),
      domContentLoaded: await page.evaluate(() => performance.timing.domContentLoadedEventEnd - performance.timing.navigationStart),
    };

    // Save screenshot
    const projectName = browserName || 'chromium';
    await page.screenshot({
      path: path.join(outputDir, `full-page-${projectName}.png`),
      fullPage: true,
    });

    // Save metrics
    fs.writeFileSync(
      path.join(outputDir, 'performance-metrics.json'),
      JSON.stringify({ performance, consoleErrors: consoleLogs, networkErrors: errors }, null, 2)
    );
  });

  test('capture responsive layouts', async ({ page }) => {
    const breakpoints = [
      { name: 'desktop', width: 1920, height: 1080 },
      { name: 'tablet', width: 768, height: 1024 },
      { name: 'mobile', width: 375, height: 667 },
    ];

    for (const breakpoint of breakpoints) {
      await page.setViewportSize({ width: breakpoint.width, height: breakpoint.height });
      await page.goto('/');
      await page.waitForLoadState('networkidle');
      await page.screenshot({
        path: path.join(outputDir, `responsive-${breakpoint.name}.png`),
        fullPage: true,
      });
    }
  });

  test('capture navigation interactions', async ({ page }) => {
    await page.goto('/');

    // Find and click navigation items
    const navItems = await page.$$('nav a, header a, .nav a');
    for (let i = 0; i < Math.min(navItems.length, 5); i++) {
      await page.screenshot({ path: path.join(outputDir, `nav-${i}-before.png`) });
      await navItems[i].click();
      await page.waitForLoadState('networkidle');
      await page.screenshot({ path: path.join(outputDir, `nav-${i}-after.png`) });
      await page.goBack();
      await page.waitForLoadState('networkidle');
    }
  });

  test('capture form interactions', async ({ page }) => {
    await page.goto('/');

    // Find forms
    const forms = await page.$$('form');
    for (let i = 0; i < forms.length; i++) {
      const form = forms[i];
      await form.screenshot({ path: path.join(outputDir, `form-${i}-initial.png`) });

      // Fill inputs
      const inputs = await form.$$('input[type="text"], input[type="email"], input[type="password"]');
      for (const input of inputs) {
        await input.fill('test@example.com');
      }

      await form.screenshot({ path: path.join(outputDir, `form-${i}-filled.png`) });
    }
  });

  test('capture accordion/dropdown interactions', async ({ page }) => {
    await page.goto('/');

    // Find accordions
    const accordions = await page.$$('[data-accordion], details, .accordion');
    for (let i = 0; i < accordions.length; i++) {
      await accordions[i].screenshot({ path: path.join(outputDir, `accordion-${i}-closed.png`) });
      await accordions[i].click();
      await page.waitForTimeout(300);
      await accordions[i].screenshot({ path.join(outputDir, `accordion-${i}-open.png`) });
    }
  });
});

ขั้นตอนที่ 3: สร้างสคริปต์ตรวจสอบความเป็นจริง

สร้าง qa-playwright-capture.sh:

#!/usr/bin/env bash
#
# qa-playwright-capture.sh — Run Playwright screenshot captures for reality checking
#
# Usage: ./qa-playwright-capture.sh [BASE_URL] [OUTPUT_DIR]
#

set -euo pipefail

BASE_URL="${1:-http://localhost:8000}"
OUTPUT_DIR="${2:-public/qa-screenshots}"

echo "Starting Reality Check screenshot capture..."
echo "  Base URL: $BASE_URL"
echo "  Output: $OUTPUT_DIR"

# Ensure output directory exists
mkdir -p "$OUTPUT_DIR"

# Run Playwright tests
export BASE_URL
npx playwright test --config=qa-playwright.config.ts --grep "@screenshot"

# Generate summary
echo ""
echo "Generating summary..."

# Count screenshots
SCREENSHOT_COUNT=$(find "$OUTPUT_DIR" -name "*.png" | wc -l)
echo "  Screenshots captured: $SCREENSHOT_COUNT"

# Check for console errors
if [ -f "$OUTPUT_DIR/performance-metrics.json" ]; then
  ERROR_COUNT=$(cat "$OUTPUT_DIR/performance-metrics.json" | grep -c '"\[ERROR\]"' || echo "0")
  echo "  Console errors: $ERROR_COUNT"
fi

# Check load time
if [ -f "$OUTPUT_DIR/performance-metrics.json" ]; then
  LOAD_TIME=$(cat "$OUTPUT_DIR/performance-metrics.json" | grep -o '"loadTime": [0-9.]*' | head -1 | awk '{print $2}')
  echo "  Load time: ${LOAD_TIME:-N/A}ms"
fi

echo ""
echo "Reality Check complete. Review screenshots in: $OUTPUT_DIR"
echo ""
echo "Next step: Run Reality Checker agent to validate evidence"

ทำให้รันได้:

chmod +x qa-playwright-capture.sh

ขั้นตอนที่ 4: รันคำสั่งตรวจสอบความเป็นจริง

ก่อนที่เอเจนต์ AI ใดๆ จะอนุมัติงาน ให้รันคำสั่งเหล่านี้:

# 1. ตรวจสอบว่ามีอะไรถูกสร้างขึ้นจริง
ls -la resources/views/ || ls -la *.html
ls -la src/components/ || ls -la components/

# 2. ตรวจสอบฟีเจอร์ที่กล่าวอ้าง
grep -r "glassmorphism\|backdrop-filter\|blur" . --include="*.css" --include="*.html" || echo "NO GLASSMORPHISM FOUND"
grep -r "responsive\|media-query\|@media" . --include="*.css" || echo "NO RESPONSIVE CSS FOUND"
grep -r "jwt\|authentication\|auth" . --include="*.ts" --include="*.js" || echo "NO AUTH FOUND"

# 3. รันการจับภาพหน้าจอ
./qa-playwright-capture.sh http://localhost:8000 public/qa-screenshots

# 4. ตรวจสอบหลักฐาน
ls -la public/qa-screenshots/
# ไฟล์ที่คาดหวัง:
# - responsive-desktop.png
# - responsive-tablet.png
# - responsive-mobile.png
# - nav-*-before.png, nav-*-after.png
# - form-*-initial.png, form-*-filled.png

# 5. ตรวจสอบเมตริก
cat public/qa-screenshots/test-results.json
cat public/qa-screenshots/performance-metrics.json

ขั้นตอนที่ 5: เปิดใช้งานเอเจนต์ Reality Checker

เปิดเซสชัน Claude Code:

Activate Reality Checker mode.

Run your mandatory reality check process:

1. Verify files exist: ls -la src/components/
2. Cross-reference claimed features: grep for "premium", "glassmorphism"
3. Review screenshot evidence: public/qa-screenshots/
4. Check test-results.json for metrics

Project URL: http://localhost:8000

Output: PASS or NEEDS WORK with specific blocking issues.

ผลลัพธ์ที่คาดหวัง:

## Reality Check Results

### File Verification: PASS
- Component files present: 12 files found
- Expected structure matches

### Feature Verification: NEEDS WORK
- Claimed: "Premium glassmorphism design"
- grep result: NO GLASSMORPHISM FOUND
- Status: CLAIM NOT SUPPORTED

### Screenshot Evidence: NEEDS WORK
- Desktop (1920x1080): Layout correct
- Tablet (768x1024): Navigation overlap detected
- Mobile (375x667): Product grid broken (2 columns instead of 1)

### Performance Metrics: NEEDS WORK
- Load time: 2.3s (target: <1s)
- Console errors: 3 (target: 0)
- Network failures: 1 (target: 0)

## Final Status: NEEDS WORK

### Blocking Issues:
1. Glassmorphism claimed but not implemented
2. Mobile layout broken at 375px
3. Load time exceeds 1s target
4. 3 console errors to fix

### Non-Blocking:
- Tablet navigation overlap
- Add loading states

Do not approve until blocking issues are resolved.

ขั้นตอนที่ 6: เปรียบเทียบข้อกล่าวอ้างกับหลักฐาน

สร้างรายการตรวจสอบข้อกล่าวอ้าง:

## Claims vs. Evidence Checklist

| ข้อกล่าวอ้าง | คำสั่งหลักฐาน | ผลลัพธ์ |
|-------|------------------|--------|
| "Glassmorphism ระดับพรีเมียม" | grep "backdrop-filter" | ไม่พบ |
| "ตอบสนองเต็มรูปแบบ" | responsive-mobile.png | ล้มเหลว (ตารางเสีย) |
| "ไม่มีข้อผิดพลาดของคอนโซล" | test-results.json | พบ 3 ข้อผิดพลาด |
| "เวลาโหลดเร็ว" | performance-metrics.json | 2.3 วินาที (เป้าหมาย: <1 วินาที) |
| "การยืนยันตัวตนด้วย JWT" | grep "jsonwebtoken" | พบ |
| "การจำกัดอัตรา (Rate limiting)" | grep "rateLimit" | ไม่พบ |

อัปเดตรายการตรวจสอบนี้สำหรับทุกโปรเจกต์ กำหนดให้มีหลักฐานสำหรับทุกข้อกล่าวอ้าง

เวิร์กโฟลว์การตรวจสอบความเป็นจริงที่สมบูรณ์

┌─────────────────────────────────────────────────────────────────┐
│  1. นักพัฒนา/AI ทำงานเสร็จสิ้น                                   │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│  2. รันคำสั่งตรวจสอบความเป็นจริง                                   │
│     - ls เพื่อตรวจสอบไฟล์                                        │
│     - grep เพื่อตรวจสอบฟีเจอร์                                    │
│     - Playwright สำหรับภาพหน้าจอ                                 │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│  3. เปิดใช้งานเอเจนต์ Reality Checker                             │
│     - ตรวจสอบการยืนยันไฟล์                                        │
│     - เปรียบเทียบข้อกล่าวอ้าง                                     │
│     - วิเคราะห์ภาพหน้าจอ                                        │
│     - ตรวจสอบเมตริก                                              │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│  4. ผลลัพธ์: PASS หรือ NEEDS WORK                                  │
│     - PASS: ส่งมอบด้วยความมั่นใจ                                   │
│     - NEEDS WORK: แก้ไขปัญหาที่ติดขัด, รันใหม่                    │
└─────────────────────────────────────────────────────────────────┘

การทำงานร่วมกับ CI/CD

เพิ่มการตรวจสอบความเป็นจริงใน CI pipeline ของคุณ:

# .github/workflows/qa-reality-check.yml
name: Reality Check

on: [pull_request]

jobs:
  reality-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install dependencies
        run: npm ci

      - name: Install Playwright
        run: npx playwright install chromium

      - name: Start server
        run: npm start &
        env:
          PORT: 8000

      - name: Wait for server
        run: sleep 5

      - name: Run reality check screenshots
        run: ./qa-playwright-capture.sh http://localhost:8000 public/qa-screenshots

      - name: Upload screenshots
        uses: actions/upload-artifact@v4
        if: always()
        with:
          name: reality-check-screenshots
          path: public/qa-screenshots/

      - name: Check for console errors
        run: |
          ERRORS=$(cat public/qa-screenshots/performance-metrics.json | grep -c '"\[ERROR\]"' || echo "0")
          if [ "$ERRORS" -gt "0" ]; then
            echo "Console errors found: $ERRORS"
            exit 1
          fi

      - name: Check load time
        run: |
          LOAD_TIME=$(cat public/qa-screenshots/performance-metrics.json | grep -o '"loadTime": [0-9.]*' | head -1 | awk '{print $2}')
          if (( $(echo "$LOAD_TIME > 1000" | bc -l) )); then
            echo "Load time too slow: ${LOAD_TIME}ms (target: <1000ms)"
            exit 1
          fi

สิ่งที่คุณสร้างขึ้น

ส่วนประกอบ	วัตถุประสงค์
การกำหนดค่า Playwright	การจับภาพหน้าจออัตโนมัติที่ 3 เบรกพอยต์
ชุดทดสอบ	ภาพเต็มหน้าจอ, ตอบสนอง, การโต้ตอบ
สคริปต์ตรวจสอบความเป็นจริง	การรวบรวมหลักฐานด้วยคำสั่งเดียว
รายการตรวจสอบข้อกล่าวอ้าง	เปรียบเทียบข้อกล่าวอ้างของ AI กับผลลัพธ์ grep
การรวมเข้ากับ CI/CD	การตรวจสอบความเป็นจริงอัตโนมัติบน PR

ขั้นตอนต่อไป

ขยายเวิร์กโฟลว์:

เพิ่มการรวม Lighthouse สำหรับคะแนนประสิทธิภาพ
เพิ่มการตรวจสอบการเข้าถึง (axe-core)
เพิ่มการทดสอบการถดถอยด้วยภาพ (การเปรียบเทียบพิกเซล)

สร้างฐานข้อมูลข้อกล่าวอ้าง:

บันทึกทุกข้อกล่าวอ้างของ AI พร้อมสถานะหลักฐาน
ติดตามว่าเอเจนต์ใดหลอนมากที่สุด
สร้างคะแนนความแม่นยำเมื่อเวลาผ่านไป

แบ่งปันกับทีมของคุณ:

จัดทำเอกสารกระบวนการตรวจสอบความเป็นจริง
กำหนดให้มีหลักฐานก่อนการอนุมัติ PR ใดๆ
ทำให้ "แสดงภาพหน้าจอให้ฉันดู" เป็นนิสัยของทีม

การแก้ไขปัญหาทั่วไป

การทดสอบ Playwright หมดเวลา:

เพิ่มเวลาหมดอายุในการกำหนดค่า: timeout: 60000
ตรวจสอบว่าเซิร์ฟเวอร์กำลังทำงานหรือไม่: curl http://localhost:8000
เพิ่มเวลารอให้เครือข่ายว่างนานขึ้น: await page.waitForLoadState('networkidle', { timeout: 30000 })
รันในโหมดมี UI เพื่อดีบัก: npx playwright test --headed

ไม่สามารถจับภาพหน้าจอได้:

ตรวจสอบว่าไดเรกทอรีเอาต์พุตมีอยู่และสามารถเขียนได้: mkdir -p public/qa-screenshots
ตรวจสอบสิทธิ์ไฟล์: chmod 755 public/qa-screenshots
ตรวจสอบให้แน่ใจว่าได้ติดตั้ง Chromium แล้ว: npx playwright install chromium
รันพร้อมเอาต์พุตดีบัก: DEBUG=pw:api npx playwright test

ไม่สามารถจับข้อผิดพลาดของคอนโซลได้:

เพิ่ม Listener ก่อนการนำทาง: page.on('console', ...) ก่อน page.goto()
ตรวจสอบการกรองประเภทข้อผิดพลาด: msg.type() === 'error'
บันทึกข้อความคอนโซลทั้งหมดเพื่อดีบัก: page.on('console', msg => console.log(msg.text()))
ตรวจสอบว่าหน้าเว็บโหลดเนื้อหาจริง (ไม่มีภาพหน้าจอว่างเปล่า)

ภาพหน้าจอมือถือแสดงเลย์เอาต์เดสก์ท็อป:

ตรวจสอบให้แน่ใจว่าได้ตั้งค่า viewport ก่อนการนำทาง
เพิ่ม User Agent ของมือถือ: await page.setUserAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)')
ใช้การจำลองอุปกรณ์: use: { ...devices['iPhone 12'] }
ตรวจสอบเมตาแท็กที่ตอบสนองใน HTML: <meta name="viewport" content="width=device-width">

Pipeline CI/CD ล้มเหลวบน Ubuntu:

ติดตั้ง Dependency ของระบบ: sudo apt-get install -y libnss3 libnspr4 libatk1.0-0
ใช้ Image อย่างเป็นทางการของ Playwright: mcr.microsoft.com/playwright:v1.40.0-jammy
รัน npx playwright install-deps ก่อนติดตั้งเบราว์เซอร์
เพิ่มแฟล็ก --no-sandbox สำหรับสภาพแวดล้อมที่เป็นคอนเทนเนอร์

รูปแบบการตรวจสอบความเป็นจริงขั้นสูง

รูปแบบที่ 1: การทดสอบ Visual Regression

เปรียบเทียบภาพหน้าจอเทียบกับภาพพื้นฐานเพื่อตรวจจับการเปลี่ยนแปลงที่ไม่คาดคิด:

import { expect } from '@playwright/test';

test('visual regression check', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot('homepage-base.png', {
    maxDiffPixels: 100, // Allow minor differences
    fullPage: true,
  });
});

รูปแบบที่ 2: การตรวจสอบการเข้าถึง

ผสานรวม axe-core สำหรับหลักฐานการเข้าถึง:

import AxeBuilder from '@axe-core/playwright';

test('accessibility audit', async ({ page }) => {
  await page.goto('/');
  const accessibilityScanResults = await new AxeBuilder({ page }).analyze();

  // Save results
  const fs = require('fs');
  fs.writeFileSync(
    'public/qa-screenshots/accessibility-results.json',
    JSON.stringify(accessibilityScanResults, null, 2)
  );

  // Fail if critical violations
  const criticalViolations = accessibilityScanResults.violations.filter(
    v => v.impact === 'critical' || v.impact === 'serious'
  );
  expect(criticalViolations).toHaveLength(0);
});

รูปแบบที่ 3: การบังคับใช้งบประมาณประสิทธิภาพ

ทำให้การบิลด์ล้มเหลวหากเกินเกณฑ์ประสิทธิภาพ:

test('performance budget', async ({ page }) => {
  await page.goto('/');

  const metrics = await page.metrics();
  const loadTime = await page.evaluate(() =>
    performance.timing.loadEventEnd - performance.timing.navigationStart
  );

  // Budget thresholds
  expect(loadTime).toBeLessThan(2000); // 2s max
  expect(metrics.JSHeapUsedSize).toBeLessThan(5 * 1024 * 1024); // 5MB max
});

เอเจนต์ AI ของคุณจะไม่สามารถใช้คำว่า "ดูดีมาก" ได้อีกต่อไป พวกมันต้องพิสูจน์งานของตนด้วยภาพหน้าจอ, เมตริก, และผลลัพธ์ grep

ไม่มีภาพหลอนอีกต่อไป ไม่มี "อนุมัติมโน" มีแต่หลักฐาน

นั่นคือลักษณะของ QA ที่อิงหลักฐาน: รันคำสั่ง, ตรวจสอบภาพหน้าจอ, กำหนดให้มีหลักฐาน

ถึงตาคุณแล้ว: เพิ่มการตรวจสอบความเป็นจริงในเวิร์กโฟลว์ของคุณ ส่งมอบด้วยความมั่นใจ

button

คำถามที่พบบ่อย

ทำไมเอเจนต์ AI ถึงหลอนเมื่อตรวจสอบโค้ด?เอเจนต์ AI ถูกฝึกมาให้ช่วยเหลือและเห็นด้วย พวกมันตอบในสิ่งที่ฟังดูดีมากกว่าสิ่งที่ได้รับการตรวจสอบแล้ว หากไม่มีข้อกำหนดด้านหลักฐาน พวกมันจะพูดว่า "ดูดีมาก" เพื่อหลีกเลี่ยงความขัดแย้ง

ฉันจะตั้งค่า Playwright สำหรับการทดสอบจับภาพหน้าจอได้อย่างไร?ติดตั้งด้วย npm install -D @playwright/test, รัน npx playwright install chromium, สร้างไฟล์กำหนดค่าด้วยเบรกพอยต์ของ viewport และเขียนชุดทดสอบที่จับภาพหน้าจอที่แต่ละเบรกพอยต์

ฉันควรรันคำสั่งตรวจสอบความเป็นจริงใดบ้างก่อนการอนุมัติ?รัน ls เพื่อตรวจสอบว่าไฟล์มีอยู่จริง, grep เพื่อตรวจสอบว่าฟีเจอร์ที่กล่าวอ้างมีอยู่ในโค้ด, การทดสอบ Playwright สำหรับภาพหน้าจอ, และตรวจสอบ test-results.json สำหรับข้อผิดพลาดของคอนโซลและเมตริกประสิทธิภาพ

เอเจนต์ Reality Checker คืออะไร?Reality Checker เป็นเอเจนต์ AI เฉพาะทางจาก The Agency ที่ตรวจสอบงานโดยใช้หลักฐาน มันรันคำสั่งยืนยัน ตรวจสอบภาพหน้าจอ เปรียบเทียบข้อกล่าวอ้าง และแสดงผลเป็น PASS หรือ NEEDS WORK พร้อมปัญหาที่ต้องแก้ไขเฉพาะจุด

ฉันจะผสานรวมการตรวจสอบความเป็นจริงเข้ากับ CI/CD ได้อย่างไร?เพิ่มเวิร์กโฟลว์ GitHub Actions ที่ติดตั้ง Playwright, เริ่มเซิร์ฟเวอร์ของคุณ, รันการจับภาพหน้าจอ, อัปโหลด Artifacts และทำให้การบิลด์ล้มเหลวหากข้อผิดพลาดของคอนโซลเกิน 0 หรือเวลาโหลดเกินเกณฑ์ของคุณ

จะเกิดอะไรขึ้นหากภาพหน้าจอแสดงปัญหาแต่เอเจนต์บอกว่า PASS?เอเจนต์มีการกำหนดค่าที่ไม่ถูกต้อง Reality Checker ต้องตรวจสอบหลักฐานก่อนที่จะแสดงสถานะ ฝึกใหม่ให้มันกำหนดให้มี: (1) ผลลัพธ์ grep ที่พิสูจอร์ฟีเจอร์, (2) การตรวจสอบภาพหน้าจอ, (3) เมตริกที่อยู่ในเกณฑ์

ฉันจะทำให้ทีมของฉันนำ QA ที่อิงหลักฐานมาใช้ได้อย่างไร?จัดทำเอกสารกระบวนการตรวจสอบความเป็นจริง, เพิ่ม CI/CD gate ที่กำหนดให้ผ่านการทดสอบ, กำหนดให้การตรวจสอบภาพหน้าจอเป็นสิ่งจำเป็นสำหรับการอนุมัติ PR และติดตามว่าเอเจนต์ใดให้การประเมินที่แม่นยำที่สุด