Cách tạo AI Agent chứng minh công việc bằng ảnh chụp màn hình (Không còn ảo giác)

TÓM TẮT

Dừng hiện tượng AI "ảo giác" với 4 bước: (1) Cài đặt Playwright và cấu hình các điểm ngắt (desktop, tablet, mobile), (2) Tạo bộ kiểm thử chụp màn hình để ghi lại toàn bộ trang, bố cục đáp ứng và các tương tác, (3) Chạy ./qa-playwright-capture.sh để thu thập bằng chứng, (4) Kích hoạt tác nhân Reality Checker để đối chiếu các tuyên bố với kết quả grep và ảnh chụp màn hình. Các tác nhân sẽ xuất ra ĐẠT hoặc CẦN CẢI THIỆN cùng với các vấn đề chặn cụ thể—không còn các phê duyệt "ảo" nữa.

Dùng thử Apidog ngay hôm nay

Giới thiệu

Đừng chấp nhận những lời "trông tuyệt vời" từ các tác nhân AI nữa. Xây dựng một quy trình QA dựa trên bằng chứng với ảnh chụp màn hình Playwright, yêu cầu bằng chứng trực quan trước khi có bất kỳ phê duyệt nào.

Bạn yêu cầu một tác nhân AI xem xét trang đích của mình. Nó trả lời:

Thiết kế trông cao cấp và tinh tế. Hiệu ứng glassmorphism được triển khai tốt. Trang hoàn toàn đáp ứng. Sẵn sàng sản xuất!

Bạn mở trang ra. "Glassmorphism" chỉ là một nền màu xám đặc. Bố cục "hoàn toàn đáp ứng" lại bị lỗi trên di động. Chẳng có gì cao cấp hay tinh tế cả.

Các tác nhân AI hay "ảo giác". Chúng nói những gì bạn muốn nghe. Chúng tránh xung đột. Chúng phê duyệt mọi thứ.

Tác nhân Reality Checker từ bộ sưu tập The Agency tiếp cận khác:

Trạng thái: CẦN CẢI THIỆN

Bằng chứng:
- grep cho "glassmorphism" trả về KHÔNG TÌM THẤY TÍNH NĂNG CAO CẤP
- responsive-mobile.png hiển thị bố cục bị hỏng ở chiều rộng 375px
- test-results.json hiển thị 3 lỗi console, thời gian tải 2.1s

Các vấn đề chặn: 4

Không cảm xúc. Không ý kiến. Chỉ có bằng chứng.

Trong hướng dẫn này, bạn sẽ xây dựng một quy trình QA dựa trên bằng chứng, bổ sung cho quy trình kiểm thử API của bạn. Dù bạn đang xác thực bố cục giao diện người dùng hay xác minh phản hồi API trong Apidog, nguyên tắc đều giống nhau: yêu cầu bằng chứng trước khi phê duyệt. Bạn sẽ thiết lập Playwright để tự động chụp ảnh màn hình, tạo các lệnh kiểm tra thực tế bắt buộc, đối chiếu các tuyên bố của tác nhân với mã thực tế và yêu cầu chứng nhận ĐẠT/KHÔNG ĐẠT trước khi xuất bản.

Tại sao Bằng chứng Lại Quan trọng

Các tác nhân AI là những kẻ thích làm hài lòng người khác. Chúng muốn giúp đỡ. Chúng muốn bạn thích chúng. Vì vậy, chúng nói những điều nghe có vẻ hay:

• "Mã trông rất ổn!" (chưa bao giờ được kiểm thử)
• "Hiệu suất chắc chắn sẽ tuyệt vời!" (chưa bao giờ được đo lường)
• "Hoàn toàn đáp ứng!" (chưa bao giờ được kiểm tra trên di động)

QA dựa trên bằng chứng thay đổi điều này. Thay vì ý kiến, bạn nhận được:

• Ảnh chụp màn hình tại các điểm ngắt máy tính để bàn, máy tính bảng, điện thoại di động
• Các chỉ số hiệu suất từ tải trang thực tế
• Kết quả Grep chứng minh các tính năng tồn tại (hoặc không)
• Số lượng lỗi console từ các kiểm thử trình duyệt không đầu

Không còn "tin tôi đi." Chỉ có bằng chứng.

Bước 1: Thiết lập Playwright

Cài đặt Playwright:

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

Tạo file 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',
});

Bước 2: Tạo bộ kiểm thử chụp màn hình

Tạo file 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('[e-mail]');
      }

      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: path.join(outputDir, `accordion-${i}-open.png`) });
    }
  });
});

Bước 3: Tạo tập lệnh kiểm tra thực tế

Tạo file 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"

Cấp quyền thực thi:

chmod +x qa-playwright-capture.sh

Bước 4: Chạy các lệnh kiểm tra thực tế

Trước khi bất kỳ tác nhân AI nào có thể phê duyệt công việc, hãy chạy các lệnh này:

# 1. Xác minh những gì đã thực sự được xây dựng
ls -la resources/views/ || ls -la *.html
ls -la src/components/ || ls -la components/

# 2. Đối chiếu các tính năng đã tuyên bố
grep -r "glassmorphism\|backdrop-filter\|blur" . --include="*.css" --include="*.html" || echo "KHÔNG TÌM THẤY GLASSMORPHISM"
grep -r "responsive\|media-query\|@media" . --include="*.css" || echo "KHÔNG TÌM THẤY CSS ĐÁP ỨNG"
grep -r "jwt\|authentication\|auth" . --include="*.ts" --include="*.js" || echo "KHÔNG TÌM THẤY AUTH"

# 3. Chạy chụp ảnh màn hình
./qa-playwright-capture.sh http://localhost:8000 public/qa-screenshots

# 4. Xem xét bằng chứng
ls -la public/qa-screenshots/
# Các tệp dự kiến:
# - responsive-desktop.png
# - responsive-tablet.png
# - responsive-mobile.png
# - nav-*-before.png, nav-*-after.png
# - form-*-initial.png, form-*-filled.png

# 5. Kiểm tra các chỉ số
cat public/qa-screenshots/test-results.json
cat public/qa-screenshots/performance-metrics.json

Bước 5: Kích hoạt tác nhân Reality Checker

Mở phiên Claude Code:

Kích hoạt chế độ Reality Checker.

Chạy quy trình kiểm tra thực tế bắt buộc của bạn:

1. Xác minh tệp tồn tại: ls -la src/components/
2. Đối chiếu các tính năng đã tuyên bố: grep cho "premium", "glassmorphism"
3. Xem xét bằng chứng ảnh chụp màn hình: public/qa-screenshots/
4. Kiểm tra test-results.json để xem các chỉ số

URL dự án: http://localhost:8000

Kết quả: ĐẠT hoặc CẦN CẢI THIỆN với các vấn đề chặn cụ thể.

Kết quả dự kiến:

## Kết quả kiểm tra thực tế

### Xác minh tệp: ĐẠT
- Tệp thành phần có mặt: tìm thấy 12 tệp
- Cấu trúc dự kiến khớp

### Xác minh tính năng: CẦN CẢI THIỆN
- Tuyên bố: "Thiết kế glassmorphism cao cấp"
- Kết quả grep: KHÔNG TÌM THẤY GLASSMORPHISM
- Trạng thái: TUYÊN BỐ KHÔNG ĐƯỢC HỖ TRỢ

### Bằng chứng ảnh chụp màn hình: CẦN CẢI THIỆN
- Máy tính để bàn (1920x1080): Bố cục chính xác
- Máy tính bảng (768x1024): Phát hiện chồng chéo điều hướng
- Điện thoại di động (375x667): Lưới sản phẩm bị hỏng (2 cột thay vì 1)

### Chỉ số hiệu suất: CẦN CẢI THIỆN
- Thời gian tải: 2.3s (mục tiêu: <1s)
- Lỗi console: 3 (mục tiêu: 0)
- Lỗi mạng: 1 (mục tiêu: 0)

## Trạng thái cuối cùng: CẦN CẢI THIỆN

### Các vấn đề chặn:
1. Glassmorphism được tuyên bố nhưng chưa triển khai
2. Bố cục di động bị hỏng ở 375px
3. Thời gian tải vượt quá mục tiêu 1s
4. 3 lỗi console cần sửa

### Không chặn:
- Chồng chéo điều hướng máy tính bảng
- Thêm trạng thái tải

Không phê duyệt cho đến khi các vấn đề chặn được giải quyết.

Bước 6: Đối chiếu tuyên bố với bằng chứng

Tạo danh sách kiểm tra các tuyên bố:

## Danh sách kiểm tra tuyên bố vs. bằng chứng

| Tuyên bố                   | Lệnh bằng chứng           | Kết quả                |
|--------------------------- |--------------------------|------------------------|
| "Glassmorphism cao cấp"    | grep "backdrop-filter"   | KHÔNG TÌM THẤY         |
| "Hoàn toàn đáp ứng"        | responsive-mobile.png    | KHÔNG ĐẠT (lưới bị hỏng) |
| "Không lỗi console"        | test-results.json        | tìm thấy 3 lỗi         |
| "Thời gian tải nhanh"      | performance-metrics.json | 2.3s (mục tiêu: <1s)   |
| "Xác thực JWT"             | grep "jsonwebtoken"      | ĐÃ TÌM THẤY            |
| "Giới hạn tốc độ"          | grep "rateLimit"         | KHÔNG TÌM THẤY         |

Cập nhật danh sách kiểm tra này cho mỗi dự án. Yêu cầu bằng chứng cho mọi tuyên bố.

---

Quy trình kiểm tra thực tế hoàn chỉnh

┌─────────────────────────────────────────────────────────────────┐
│  1. Nhà phát triển/AI hoàn thành công việc                      │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│  2. Chạy các lệnh kiểm tra thực tế                              │
│     - ls để xác minh tệp                                        │
│     - grep để xác minh tính năng                                │
│     - Playwright để chụp ảnh màn hình                           │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│  3. Kích hoạt tác nhân Reality Checker                          │
│     - Xem xét xác minh tệp                                      │
│     - Đối chiếu tuyên bố                                        │
│     - Phân tích ảnh chụp màn hình                               │
│     - Kiểm tra các chỉ số                                       │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│  4. Kết quả: ĐẠT hoặc CẦN CẢI THIỆN                              │
│     - ĐẠT: Phát hành tự tin                                     │
│     - CẦN CẢI THIỆN: Sửa các vấn đề chặn, chạy lại              │
└─────────────────────────────────────────────────────────────────┘

Tích hợp với CI/CD

Thêm kiểm tra thực tế vào quy trình CI của bạn:

# .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

Những gì bạn đã xây dựng

Thành phần	Mục đích
Playwright config	Tự động chụp ảnh màn hình tại 3 điểm ngắt
Bộ kiểm thử	Toàn trang, đáp ứng, tương tác
Tập lệnh kiểm tra thực tế	Thu thập bằng chứng bằng một lệnh
Danh sách kiểm tra tuyên bố	Đối chiếu các tuyên bố của AI với kết quả grep
Tích hợp CI/CD	Kiểm tra thực tế tự động trên PR

Các bước tiếp theo

Mở rộng quy trình làm việc:

• Thêm tích hợp Lighthouse để đánh giá hiệu suất
• Thêm kiểm tra khả năng tiếp cận (axe-core)
• Thêm kiểm thử hồi quy trực quan (so sánh pixel)

Xây dựng cơ sở dữ liệu tuyên bố:

• Ghi lại mọi tuyên bố của AI với trạng thái bằng chứng
• Theo dõi tác nhân nào "ảo giác" nhiều nhất
• Tạo điểm số chính xác theo thời gian

Chia sẻ với nhóm của bạn:

• Tài liệu hóa quy trình kiểm tra thực tế
• Yêu cầu bằng chứng trước khi phê duyệt bất kỳ PR nào
• Biến "cho tôi xem ảnh chụp màn hình" thành thói quen của nhóm

Khắc phục các sự cố thường gặp

Kiểm thử Playwright bị hết thời gian chờ:

• Tăng thời gian chờ trong cấu hình: timeout: 60000
• Kiểm tra xem máy chủ có đang chạy không: curl http://localhost:8000
• Thêm thời gian chờ lâu hơn cho mạng không hoạt động: await page.waitForLoadState('networkidle', { timeout: 30000 })
• Chạy ở chế độ có giao diện để gỡ lỗi: npx playwright test --headed

Ảnh chụp màn hình không ghi lại được:

• Xác minh thư mục đầu ra tồn tại và có thể ghi: mkdir -p public/qa-screenshots
• Kiểm tra quyền tệp: chmod 755 public/qa-screenshots
• Đảm bảo Chromium được cài đặt: npx playwright install chromium
• Chạy với đầu ra gỡ lỗi: DEBUG=pw:api npx playwright test

Lỗi console không được ghi lại:

• Thêm trình lắng nghe trước khi điều hướng: page.on('console', ...) trước page.goto()
• Kiểm tra lọc loại lỗi: msg.type() === 'error'
• Ghi lại tất cả các thông báo console để gỡ lỗi: page.on('console', msg => console.log(msg.text()))
• Xác minh trang thực sự tải nội dung (không có ảnh chụp màn hình trống)

Ảnh chụp màn hình di động hiển thị bố cục máy tính để bàn:

• Đảm bảo chế độ xem được đặt trước khi điều hướng
• Thêm user agent di động: await page.setUserAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)')
• Sử dụng mô phỏng thiết bị: use: { ...devices['iPhone 12'] }
• Kiểm tra thẻ meta đáp ứng trong HTML: <meta name="viewport" content="width=device-width">

Quy trình CI/CD bị lỗi trên Ubuntu:

• Cài đặt các phụ thuộc hệ thống: sudo apt-get install -y libnss3 libnspr4 libatk1.0-0
• Sử dụng ảnh chính thức của Playwright: mcr.microsoft.com/playwright:v1.40.0-jammy
• Chạy npx playwright install-deps trước khi cài đặt trình duyệt
• Thêm cờ --no-sandbox cho các môi trường vùng chứa

Các mẫu kiểm tra thực tế nâng cao

Mẫu 1: Kiểm thử hồi quy trực quan

So sánh ảnh chụp màn hình với các đường cơ sở để phát hiện những thay đổi không mong muốn:

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

test('visual regression check', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot('homepage-base.png', {
    maxDiffPixels: 100, // Cho phép sự khác biệt nhỏ
    fullPage: true,
  });
});

Mẫu 2: Kiểm tra khả năng tiếp cận

Tích hợp axe-core để có bằng chứng về khả năng tiếp cận:

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);
});

Mẫu 3: Thực thi ngân sách hiệu suất

Hủy các bản dựng vượt quá ngưỡng hiệu suất:

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); // Tối đa 2s
  expect(metrics.JSHeapUsedSize).toBeLessThan(5 * 1024 * 1024); // Tối đa 5MB
});

Các tác nhân AI của bạn không thể thoát khỏi việc nói "trông tuyệt vời" nữa. Chúng phải chứng minh công việc của mình bằng ảnh chụp màn hình, chỉ số và kết quả grep.

Không còn "ảo giác". Không còn phê duyệt "ảo". Chỉ có bằng chứng.

Đó là cách QA dựa trên bằng chứng hoạt động: chạy các lệnh, kiểm tra ảnh chụp màn hình, yêu cầu bằng chứng.

Đến lượt bạn: thêm các kiểm tra thực tế vào quy trình làm việc của mình. Phát hành một cách tự tin.

Câu hỏi thường gặp

Tại sao các tác nhân AI lại "ảo giác" khi xem xét mã?

Các tác nhân AI được huấn luyện để hữu ích và dễ chịu. Chúng phản hồi những gì nghe có vẻ tốt thay vì những gì đã được xác minh. Nếu không có yêu cầu bằng chứng, chúng sẽ nói "trông tuyệt vời" để tránh xung đột.

Làm cách nào để thiết lập Playwright cho kiểm thử chụp màn hình?

Cài đặt với npm install -D @playwright/test, chạy npx playwright install chromium, tạo tệp cấu hình với các điểm ngắt chế độ xem và viết các bộ kiểm thử chụp ảnh màn hình tại mỗi điểm ngắt.

Tôi nên chạy những lệnh kiểm tra thực tế nào trước khi phê duyệt?

Chạy ls để xác minh tệp tồn tại, grep để xác minh các tính năng được tuyên bố tồn tại trong mã, các kiểm thử Playwright để chụp ảnh màn hình và kiểm tra test-results.json để xem lỗi console và các chỉ số hiệu suất.

Tác nhân Reality Checker là gì?

Reality Checker là một tác nhân AI chuyên biệt từ The Agency dùng để xác thực công việc bằng bằng chứng. Nó chạy các lệnh xác minh, xem xét ảnh chụp màn hình, đối chiếu các tuyên bố và xuất ra ĐẠT hoặc CẦN CẢI THIỆN với các vấn đề chặn cụ thể.

Làm cách nào để tích hợp kiểm tra thực tế vào CI/CD?

Thêm một quy trình GitHub Actions cài đặt Playwright, khởi động máy chủ của bạn, chạy chụp ảnh màn hình, tải lên các tạo phẩm và thất bại bản dựng nếu lỗi console vượt quá 0 hoặc thời gian tải vượt quá ngưỡng của bạn.

Điều gì xảy ra nếu ảnh chụp màn hình hiển thị vấn đề nhưng tác nhân nói ĐẠT?

Tác nhân đã bị cấu hình sai. Reality Checker phải xem xét bằng chứng trước khi xuất ra trạng thái. Huấn luyện lại nó để yêu cầu: (1) kết quả grep chứng minh các tính năng, (2) xem xét ảnh chụp màn hình, (3) các chỉ số nằm trong ngưỡng.

Làm cách nào để nhóm của tôi áp dụng QA dựa trên bằng chứng?

Tài liệu hóa quy trình kiểm tra thực tế, thêm các cổng CI/CD yêu cầu vượt qua kiểm thử, bắt buộc xem xét ảnh chụp màn hình để phê duyệt PR và theo dõi tác nhân nào đưa ra đánh giá chính xác nhất.