DEV Community

Cover image for كيف تجعل وكلاء الذكاء الاصطناعي يثبتون عملهم بالصور: وداعًا للهلوسة
Yusuf Khalidd
Yusuf Khalidd

Posted on • Originally published at apidog.com

كيف تجعل وكلاء الذكاء الاصطناعي يثبتون عملهم بالصور: وداعًا للهلوسة

باختصار

أوقف هلوسات الذكاء الاصطناعي في 4 خطوات عملية: (1) ثبّت Playwright وحدد نقاط التوقف (سطح المكتب، الجهاز اللوحي، الهاتف المحمول)، (2) أنشئ مجموعة اختبارات لقطات شاشة تغطي الصفحة كاملة والتصميم المتجاوب والتفاعلات، (3) شغّل ./qa-playwright-capture.sh لجمع الأدلة، (4) فعّل وكيل مدقق الواقع لمقارنة مطالبات الذكاء الاصطناعي بنتائج grep ولقطات الشاشة. سيحدد الوكيل النتيجة بوضوح: "ناجح" أو "يحتاج إلى عمل" مع تفاصيل المشكلات الحاجبة — لا مزيد من الموافقات المزيفة.

جرّب Apidog اليوم

مقدمة

توقف عن الاكتفاء بردود "يبدو رائعاً" من وكلاء الذكاء الاصطناعي. أنشئ سير عمل ضمان جودة (QA) قائم على الأدلة باستخدام Playwright، حيث يجب تقديم دليل مرئي قبل أي موافقة.

مثال لمطالبة وكيل ذكاء اصطناعي:

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

وعند الفحص الفعلي: لا يوجد "زجاج"، التصميم يتعطل على الهاتف المحمول، ولا شيء يبدو فاخراً أو مصقولاً.

وكيل مدقق الواقع (Reality Checker) من مجموعة 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
Enter fullscreen mode Exit fullscreen mode

لا عواطف. لا آراء. فقط أدلة.

في هذا الدليل، ستتعلم كيف تبني سير عمل QA قائم على الأدلة يدعم اختبارك لواجهات برمجة التطبيقات (API) ويطلب إثباتاً قبل أي موافقة أو إطلاق. ستضبط Playwright لالتقاط لقطات الشاشة تلقائياً، وتكتب أوامر إلزامية للتحقق من الواقع، وتقارن مطالبات الذكاء الاصطناعي بالنتائج الفعلية، وتطلب نتيجة "ناجح" أو "فشل" قبل الشحن.

لماذا الأدلة مهمة

وكلاء الذكاء الاصطناعي يميلون لإرضاء المستخدمين، فيقولون:

  • "الكود يبدو صلباً!" (بدون اختبار فعلي)
  • "الأداء ممتاز!" (بدون قياس)
  • "سريع الاستجابة بالكامل!" (بدون تحقق على الهاتف)

من خلال ضمان الجودة القائم على الأدلة ستحصل على:

  • لقطات شاشة عند نقاط توقف مختلفة (سطح المكتب/الجهاز اللوحي/الهاتف)
  • مقاييس أداء حقيقية من تحميلات الصفحات
  • نتائج grep تثبت وجود أو غياب الميزات
  • عدادات أخطاء المتصفح من اختبارات بدون واجهة رسومية

الهدف هو التخلص من "ثق بي" واستبداله بـ"هذا هو الدليل".

الخطوة 1: إعداد Playwright

ثبّت Playwright:

npm install -D @playwright/test
npx playwright install chromium
Enter fullscreen mode Exit fullscreen mode

أنشئ ملف 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',
});
Enter fullscreen mode Exit fullscreen mode

الخطوة 2: إنشاء مجموعة اختبار لقطة الشاشة

أنشئ qa-screenshots.spec.ts لتغطية لقطات الصفحة الكاملة، التصميم المتجاوب، والتفاعلات:

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

// تأكد من وجود دليل الإخراج
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[] = [];

    // التقاط أخطاء وحدة التحكم
    page.on('console', msg => {
      if (msg.type() === 'error') {
        consoleLogs.push(`[ERROR] ${msg.text()}`);
      }
    });

    // التقاط فشل الشبكة
    page.on('requestfailed', request => {
      errors.push(`[NETWORK] ${request.url()} failed`);
    });

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

    // مقاييس الأداء
    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),
    };

    // حفظ لقطة الشاشة
    const projectName = browserName || 'chromium';
    await page.screenshot({
      path: path.join(outputDir, `full-page-${projectName}.png`),
      fullPage: true,
    });

    // حفظ المقاييس
    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('/');
    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('/');
    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`) });
      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('/');
    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`) });
    }
  });
});
Enter fullscreen mode Exit fullscreen mode

الخطوة 3: إنشاء سكربت التحقق من الواقع

أنشئ ملف qa-playwright-capture.sh:

#!/usr/bin/env bash
#
# qa-playwright-capture.sh — تشغيل لقطات شاشة Playwright للتحقق من الواقع
#
# الاستخدام: ./qa-playwright-capture.sh [BASE_URL] [OUTPUT_DIR]
#

set -euo pipefail

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

echo "بدء التقاط لقطات شاشة للتحقق من الواقع..."
echo "  عنوان URL الأساسي: $BASE_URL"
echo "  المخرج: $OUTPUT_DIR"

mkdir -p "$OUTPUT_DIR"

export BASE_URL
npx playwright test --config=qa-playwright.config.ts --grep "@screenshot"

echo ""
echo "إنشاء ملخص..."

SCREENSHOT_COUNT=$(find "$OUTPUT_DIR" -name "*.png" | wc -l)
echo "  لقطات الشاشة الملتقطة: $SCREENSHOT_COUNT"

if [ -f "$OUTPUT_DIR/performance-metrics.json" ]; then
  ERROR_COUNT=$(cat "$OUTPUT_DIR/performance-metrics.json" | grep -c '"\[ERROR\]"' || echo "0")
  echo "  أخطاء وحدة التحكم: $ERROR_COUNT"
fi

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:-N/A}ms"
fi

echo ""
echo "التحقق من الواقع اكتمل. راجع لقطات الشاشة في: $OUTPUT_DIR"
echo ""
echo "الخطوة التالية: تشغيل وكيل مدقق الواقع للتحقق من الأدلة"
Enter fullscreen mode Exit fullscreen mode

اجعل السكربت قابلاً للتنفيذ:

chmod +x qa-playwright-capture.sh
Enter fullscreen mode Exit fullscreen mode

الخطوة 4: تشغيل أوامر التحقق من الواقع

قبل إرسال أي عمل لوكيل ذكاء اصطناعي لمراجعته، قم بتشغيل الأوامر التالية:

# 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
Enter fullscreen mode Exit fullscreen mode

الخطوة 5: تنشيط وكيل مدقق الواقع

افتح جلسة 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.
Enter fullscreen mode Exit fullscreen mode

الإخراج المتوقع:

## نتائج التحقق من الواقع

### التحقق من الملفات: ناجح (PASS)
- ملفات المكونات موجودة: تم العثور على 12 ملفاً
- الهيكل المتوقع يتطابق

### التحقق من الميزات: يحتاج إلى عمل (NEEDS WORK)
- المدعى به: "تصميم زجاجي فاخر"
- نتيجة grep: لم يتم العثور على زجاج (NO GLASSMORPHISM FOUND)
- الحالة: المطالبة غير مدعومة

### دليل لقطة الشاشة: يحتاج إلى عمل (NEEDS WORK)
- سطح المكتب (1920x1080): التخطيط صحيح
- الجهاز اللوحي (768x1024): تم اكتشاف تداخل في التنقل
- الهاتف المحمول (375x667): شبكة المنتج معطلة (عمودين بدلاً من عمود واحد)

### مقاييس الأداء: يحتاج إلى عمل (NEEDS WORK)
- وقت التحميل: 2.3 ثانية (الهدف: <1 ثانية)
- أخطاء وحدة التحكم: 3 (الهدف: 0)
- فشل الشبكة: 1 (الهدف: 0)

## الحالة النهائية: يحتاج إلى عمل (NEEDS WORK)

### مشكلات الحظر:
1. تم الادعاء بوجود الزجاج ولكن لم يتم تنفيذه
2. تخطيط الهاتف المحمول معطل عند 375 بكسل
3. وقت التحميل يتجاوز الهدف البالغ 1 ثانية
4. 3 أخطاء في وحدة التحكم يجب إصلاحها

### غير حاجبة:
- تداخل التنقل على الجهاز اللوحي
- إضافة حالات التحميل

لا توافق حتى يتم حل مشكلات الحظر.
Enter fullscreen mode Exit fullscreen mode

الخطوة 6: مقارنة المطالبات بالأدلة

أنشئ قائمة تحقق تربط كل مطالبة بالدليل الذي يثبتها:

## قائمة تحقق المطالبات مقابل الأدلة

| المطالبة | أمر الدليل | النتيجة |
|-------|------------------|--------|
| "زجاجي فاخر" | grep "backdrop-filter" | لم يتم العثور عليه (NOT FOUND) |
| "سريع الاستجابة بالكامل" | responsive-mobile.png | فشل (شبكة معطلة) |
| "لا توجد أخطاء في وحدة التحكم" | test-results.json | تم العثور على 3 أخطاء |
| "وقت تحميل سريع" | performance-metrics.json | 2.3 ثانية (الهدف: <1 ثانية) |
| "مصادقة JWT" | grep "jsonwebtoken" | تم العثور عليه (FOUND) |
| "تحديد المعدل" | grep "rateLimit" | لم يتم العثور عليه (NOT FOUND) |
Enter fullscreen mode Exit fullscreen mode

حدّث هذه القائمة لكل مشروع واطلب دليلاً لكل مطالبة.


سير عمل التحقق من الواقع الكامل

┌─────────────────────────────────────────────────────────────────┐
│  1. المطور/الذكاء الاصطناعي يكمل العمل                         │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│  2. تشغيل أوامر التحقق من الواقع                               │
│     - ls للتحقق من الملفات                                     │
│     - grep للتحقق من الميزات                                   │
│     - Playwright لالتقاط لقطات الشاشة                          │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│  3. تنشيط وكيل مدقق الواقع                                      │
│     - مراجعة التحقق من الملفات                                 │
│     - مقارنة المطالبات                                         │
│     - تحليل لقطات الشاشة                                        │
│     - التحقق من المقاييس                                        │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│  4. الإخراج: ناجح (PASS) أو يحتاج إلى عمل (NEEDS WORK)         │
│     - ناجح: شحن بثقة                                           │
│     - يحتاج إلى عمل: إصلاح مشكلات الحظر، إعادة التشغيل          │
└─────────────────────────────────────────────────────────────────┘
Enter fullscreen mode Exit fullscreen mode

التكامل مع CI/CD

أضف فحوصات الواقع إلى مسار CI لديك باستخدام GitHub Actions:

# .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
Enter fullscreen mode Exit fullscreen mode

ما قمت ببنائه

المكون الغرض
تكوين Playwright التقاط لقطات شاشة تلقائي عند 3 نقاط توقف
مجموعة الاختبار صفحة كاملة، متجاوبة، تفاعلات
سكربت التحقق من الواقع جمع الأدلة بأمر واحد
قائمة التحقق من المطالبات مقارنة مطالبات الذكاء الاصطناعي بنتائج grep
تكامل CI/CD تحقق تلقائي من الواقع عند طلبات السحب (PR)

الخطوات التالية

توسيع سير العمل:

  • أضف تكامل Lighthouse لمقاييس الأداء
  • أضف تدقيقات إمكانية الوصول (axe-core)
  • أضف اختبار الانحدار البصري (مقارنة البكسل)

بناء قاعدة بيانات للمطالبات:

  • سجل كل مطالبة ذكاء اصطناعي مع حالة الدليل
  • تتبع أي الوكلاء يهلوسون أكثر
  • أنشئ درجات دقة بمرور الوقت

شارك مع فريقك:

  • وثّق عملية التحقق من الواقع
  • اطلب دليلاً قبل أي موافقة على طلب سحب (PR)
  • اجعل "أرني لقطات الشاشة" عادة للفريق

استكشاف المشكلات الشائعة وإصلاحها

مهلة اختبارات Playwright:

  • زد المهلة في التكوين: timeout: 60000
  • تحقق من أن الخادم يعمل: curl http://localhost:8000
  • أضف انتظاراً أطول: await page.waitForLoadState('networkidle', { timeout: 30000 })
  • شغّل في وضع واجهة المستخدم: 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

أخطاء وحدة التحكم لا يتم التقاطها:

  • أضف المستمع قبل التنقل: page.on('console', ...) قبل page.goto()
  • تحقق من نوع الخطأ: msg.type() === 'error'
  • سجل جميع الرسائل: page.on('console', msg => console.log(msg.text()))
  • تحقق من تحميل الصفحة فعلياً (لا توجد لقطات شاشة فارغة)

لقطات شاشة الهاتف تظهر تخطيط سطح المكتب:

  • عيّن إطار العرض قبل التنقل
  • أضف وكيل مستخدم للهاتف: await page.setUserAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)')
  • استخدم محاكاة الجهاز: use: { ...devices['iPhone 12'] }
  • تحقق من وسم meta الخاص بالاستجابة: <meta name="viewport" content="width=device-width">

فشل CI/CD على Ubuntu:

  • ثبّت التبعيات: sudo apt-get install -y libnss3 libnspr4 libatk1.0-0
  • استخدم صورة Playwright الرسمية: mcr.microsoft.com/playwright:v1.40.0-jammy
  • شغّل npx playwright install-deps قبل تثبيت المتصفحات
  • أضف علامة --no-sandbox للبيئات المحاوية

أنماط متقدمة للتحقق من الواقع

النمط 1: اختبار الانحدار البصري

قارن لقطات الشاشة مع الأساس لكشف التغييرات غير المقصودة:

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

test('visual regression check', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot('homepage-base.png', {
    maxDiffPixels: 100, // السماح بفروق طفيفة
    fullPage: true,
  });
});
Enter fullscreen mode Exit fullscreen mode

النمط 2: تدقيق إمكانية الوصول

تكامل axe-core للحصول على أدلة إمكانية الوصول:

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

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

  // حفظ النتائج
  const fs = require('fs');
  fs.writeFileSync(
    'public/qa-screenshots/accessibility-results.json',
    JSON.stringify(accessibilityScanResults, null, 2)
  );

  // الفشل إذا كانت هناك انتهاكات خطيرة
  const criticalViolations = accessibilityScanResults.violations.filter(
    v => v.impact === 'critical' || v.impact === 'serious'
  );
  expect(criticalViolations).toHaveLength(0);
});
Enter fullscreen mode Exit fullscreen mode

النمط 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
  );

  // عتبات الميزانية
  expect(loadTime).toBeLessThan(2000); // 2 ثانية كحد أقصى
  expect(metrics.JSHeapUsedSize).toBeLessThan(5 * 1024 * 1024); // 5 ميغابايت كحد أقصى
});
Enter fullscreen mode Exit fullscreen mode

لم يعد بإمكان وكلاء الذكاء الاصطناعي الاكتفاء بقول "يبدو رائعاً". يجب إثبات العمل باللقطات والمقاييس ونتائج grep.

لا مزيد من الهلوسات. لا مزيد من الموافقات الوهمية. فقط أدلة.

هذا هو ضمان الجودة القائم على الأدلة: شغّل الأوامر، تحقق من لقطات الشاشة، واطلب دليلاً.

دورك الآن: أضف فحوصات الواقع لسير عملك. اشحن بثقة.

الأسئلة الشائعة

لماذا يهلوس وكلاء الذكاء الاصطناعي عند مراجعة الكود؟
لأنهم مدربون على أن يكونوا مساعدين وموافقين، فيعطون إجابات تبدو جيدة حتى لو لم يتم التحقق منها فعلياً. بدون طلب دليل، ستحصل دائماً على "يبدو رائعاً".

كيف أضبط Playwright لاختبار لقطات الشاشة؟
ثبّت Playwright عبر npm install -D @playwright/test وnpx playwright install chromium، أنشئ ملف تكوين بنقاط توقف لإطار العرض، واكتب مجموعة اختبارات تلتقط لقطات عند كل نقطة توقف.

ما هي أوامر التحقق من الواقع التي يجب تشغيلها قبل الموافقة؟
شغّل ls للتحقق من وجود الملفات، وgrep للتحقق من وجود الميزات المطالب بها في الكود، واختبارات Playwright للقطات الشاشة، ثم راجع test-results.json لأخطاء وحدة التحكم ومقاييس الأداء.

ما هو وكيل مدقق الواقع (Reality Checker)؟
هو وكيل ذكاء اصطناعي من وكالة يتأكد من العمل بالأدلة: يشغل أوامر التحقق، يراجع اللقطات، يقارن المطالبات، ويخرج حالة "ناجح" أو "يحتاج إلى عمل" مع مشكلات حجب واضحة.

كيف أدمج فحوصات الواقع في CI/CD؟
أضف سير عمل في GitHub Actions يقوم بتثبيت Playwright، تشغيل الخادم، التقاط لقطات الشاشة، رفع النتائج، وفشل البناء إذا وجدت أخطاء وحدة التحكم أو تجاوز وقت التحميل الحد المسموح.

ماذا لو أظهرت اللقطات مشاكل لكن الوكيل يقول "ناجح"؟
الوكيل غير مضبوط بالشكل الصحيح. يجب مطالبة مدقق الواقع بمراجعة نتائج grep، لقطات الشاشة، والمقاييس ضمن الحدود قبل إخراج الحالة.

كيف أقنع فريقي باعتماد ضمان الجودة القائم على الأدلة؟
وثّق خطوات التحقق من الواقع، أضف بوابات CI/CD إلزامية للاختبارات، واطلب مراجعة لقطات الشاشة للموافقة على PR. تتبع دقة تقييمات الوكلاء لتحسين الأداء.

Top comments (0)