DEV Community

Cover image for AI Agent'ların Ekran Görüntüsüyle Çalışmalarını Kanıtlama Yöntemleri (Halüsinasyonları Önleme)
Tobias Hoffmann
Tobias Hoffmann

Posted on • Originally published at apidog.com

AI Agent'ların Ekran Görüntüsüyle Çalışmalarını Kanıtlama Yöntemleri (Halüsinasyonları Önleme)

TL;DR

Yapay zeka halüsinasyonlarını 4 adımda durdurun: (1) Playwright'ı kurun ve kesme noktalarını yapılandırın (masaüstü, tablet, mobil), (2) Tam sayfa, duyarlı düzenleri ve etkileşimleri yakalayan ekran görüntüsü test paketi oluşturun, (3) Kanıt toplamak için ./qa-playwright-capture.sh komutunu çalıştırın, (4) İddiaları grep sonuçları ve ekran görüntüleriyle çapraz referanslamak için Gerçeklik Denetleyicisi aracısını etkinleştirin. Aracılar, belirli engelleyici sorunlarla BAŞARILI (PASS) veya ÇALIŞMA GEREKLİ (NEEDS WORK) çıktısı verir—artık fantezi onayları yok.

Giriş

Apidog'u bugün deneyin

Yapay zeka aracılarından gelen “harika görünüyor” yorumunu kabul etmeyi bırakın. Herhangi bir onaydan önce görsel kanıt gerektiren Playwright ekran görüntüleri ile kanıta dayalı bir Kalite Güvence (QA) iş akışı oluşturun.

Bir yapay zeka aracısından açılış sayfanızı incelemesini istersiniz. Şöyle yanıt verir:

Tasarım premium ve özenli görünüyor. Glassmorphism efektleri iyi uygulanmış. Sayfa tamamen duyarlı. Üretime hazır!
Enter fullscreen mode Exit fullscreen mode

Sayfayı açarsınız. “Glassmorphism” düz gri bir arka plan. “Tamamen duyarlı” düzen mobilde bozuluyor. Hiçbir şey premium veya özenli değil.

Yapay zeka aracıları halüsinasyon görür. Size duymak istediklerinizi söylerler. Çatışmadan kaçınırlar. Her şeyi onaylarlar.

Agency koleksiyonundaki Gerçeklik Denetleyicisi (Reality Checker) aracısı farklı bir yaklaşım sergiliyor:

Durum: ÇALIŞMA GEREKLİ

Kanıt:
- "glassmorphism" için grep, HİÇBİR PREMIUM ÖZELLİK BULUNAMADI döndürdü
- responsive-mobile.png 375 piksel genişlikte bozuk düzeni gösteriyor
- test-results.json 3 konsol hatası, 2.1 saniye yükleme süresi gösteriyor

Engelleyici sorunlar: 4
Enter fullscreen mode Exit fullscreen mode

Duygu yok. Fikir yok. Sadece kanıt.

Bu rehberde, API test hattınızı tamamlayan kanıta dayalı bir Kalite Güvence (QA) iş akışı kuracaksınız. Ön yüz düzenlerini veya Apidog'da API yanıtlarını doğrularken, ilke aynıdır: onaydan önce kanıt isteyin. Playwright ile otomatik ekran görüntüsü yakalama, gerçeklik kontrol komutları, aracı iddialarını kodla çapraz referanslama ve gönderimden önce BAŞARILI/BAŞARISIZ sertifikası sağlama adımlarını uygulayın.

Kanıt Neden Önemli?

Yapay zeka aracıları insanları memnun etmeyi sever. Yardım etmek isterler. Onları sevmenizi isterler. Bu yüzden kulağa hoş gelen şeyler söylerler:

  • “Kod sağlam görünüyor!” (hiç test edilmedi)
  • “Performans harika olmalı!” (hiç ölçülmedi)
  • “Tamamen duyarlı!” (mobilde hiç kontrol edilmedi)

Kanıta dayalı QA ile fikirler yerine şunları elde edersiniz:

  • Masaüstü, tablet, mobil kesme noktalarında ekran görüntüleri
  • Gerçek sayfa yüklemelerinden performans metrikleri
  • Özelliklerin var olup olmadığını kanıtlayan grep sonuçları
  • Başsız tarayıcı testlerinden konsol hata sayıları

Artık “bana güvenin” yok. Sadece kanıt.

Adım 1: Playwright'ı Kurun

Aşağıdaki komutlarla Playwright'ı ve Chromium'u kurun:

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

qa-playwright.config.ts dosyasını oluşturun:

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

Adım 2: Ekran Görüntüsü Test Paketini Oluşturun

qa-screenshots.spec.ts dosyasını aşağıdaki gibi oluşturun:

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

// Çıktı dizininin mevcut olduğundan emin olun
const outputDir = 'public/qa-screenshots';
if (!fs.existsSync(outputDir)) {
  fs.mkdirSync(outputDir, { recursive: true });
}

test.describe('Gerçeklik Kontrolü Ekran Görüntüleri', () => {
  test('tüm kesme noktalarında tam sayfayı yakala', async ({ page, browserName }) => {
    const errors: string[] = [];
    const consoleLogs: string[] = [];

    // Konsol hatalarını yakala
    page.on('console', msg => {
      if (msg.type() === 'error') {
        consoleLogs.push(`[HATA] ${msg.text()}`);
      }
    });

    // Ağ hatalarını yakala
    page.on('requestfailed', request => {
      errors.push(`[AĞ] ${request.url()} başarısız oldu`);
    });

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

    // Performans metriklerini yakala
    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),
    };

    // Ekran görüntüsünü kaydet
    const projectName = browserName || 'chromium';
    await page.screenshot({
      path: path.join(outputDir, `tam-sayfa-${projectName}.png`),
      fullPage: true,
    });

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

  test('duyarlı düzenleri yakala', async ({ page }) => {
    const breakpoints = [
      { name: 'masaüstü', width: 1920, height: 1080 },
      { name: 'tablet', width: 768, height: 1024 },
      { name: 'mobil', 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, `duyarli-${breakpoint.name}.png`),
        fullPage: true,
      });
    }
  });

  test('gezinme etkileşimlerini yakala', async ({ page }) => {
    await page.goto('/');

    // Gezinme öğelerini bul ve tıkla
    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}-oncesi.png`) });
      await navItems[i].click();
      await page.waitForLoadState('networkidle');
      await page.screenshot({ path: path.join(outputDir, `nav-${i}-sonrasi.png`) });
      await page.goBack();
      await page.waitForLoadState('networkidle');
    }
  });

  test('form etkileşimlerini yakala', async ({ page }) => {
    await page.goto('/');

    // Formları bul
    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}-baslangic.png`) });

      // Girişleri doldur
      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}-doldurulmus.png`) });
    }
  });

  test('akordeon/açılır menü etkileşimlerini yakala', async ({ page }) => {
    await page.goto('/');

    // Akordeonları bul
    const accordions = await page.$$('[data-accordion], details, .accordion');
    for (let i = 0; i < accordions.length; i++) {
      await accordions[i].screenshot({ path: path.join(outputDir, `akordeon-${i}-kapali.png`) });
      await accordions[i].click();
      await page.waitForTimeout(300);
      await accordions[i].screenshot({ path: path.join(outputDir, `akordeon-${i}-acik.png`) });
    }
  });
});
Enter fullscreen mode Exit fullscreen mode

Adım 3: Gerçeklik Kontrolü Betiği Oluşturun

qa-playwright-capture.sh dosyasını oluşturun:

#!/usr/bin/env bash
#
# qa-playwright-capture.sh — Gerçeklik kontrolü için Playwright ekran görüntüsü yakalamalarını çalıştırın
#
# Kullanım: ./qa-playwright-capture.sh [TEMEL_URL] [ÇIKTI_DİZİNİ]
#

set -euo pipefail

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

echo "Gerçeklik Kontrolü ekran görüntüsü yakalama başlatılıyor..."
echo "  Temel URL: $BASE_URL"
echo "  Çıktı: $OUTPUT_DIR"

# Çıktı dizininin mevcut olduğundan emin olun
mkdir -p "$OUTPUT_DIR"

# Playwright testlerini çalıştırın
export BASE_URL
npx playwright test --config=qa-playwright.config.ts --grep "@screenshot"

# Özet oluşturuluyor
echo ""
echo "Özet oluşturuluyor..."

# Ekran görüntülerini say
SCREENSHOT_COUNT=$(find "$OUTPUT_DIR" -name "*.png" | wc -l)
echo "  Yakalanan ekran görüntüleri: $SCREENSHOT_COUNT"

# Konsol hatalarını kontrol edin
if [ -f "$OUTPUT_DIR/performance-metrics.json" ]; then
  ERROR_COUNT=$(cat "$OUTPUT_DIR/performance-metrics.json" | grep -c '"\[HATA\]"' || echo "0")
  echo "  Konsol hataları: $ERROR_COUNT"
fi

# Yükleme süresini kontrol edin
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 "  Yükleme süresi: ${LOAD_TIME:-N/A}ms"
fi

echo ""
echo "Gerçeklik Kontrolü tamamlandı. Ekran görüntülerini şurada inceleyin: $OUTPUT_DIR"
echo ""
echo "Sonraki adım: Kanıtı doğrulamak için Gerçeklik Denetleyicisi aracısını çalıştırın"
Enter fullscreen mode Exit fullscreen mode

Çalıştırılabilir hale getirin:

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

Adım 4: Gerçeklik Kontrolü Komutlarını Çalıştırın

Herhangi bir yapay zeka aracısı işi onaylamadan önce şu komutları çalıştırın:

# 1. Gerçekte neyin inşa edildiğini doğrulayın
ls -la resources/views/ || ls -la *.html
ls -la src/components/ || ls -la components/

# 2. İddia edilen özellikleri çapraz kontrol edin
grep -r "glassmorphism\|backdrop-filter\|blur" . --include="*.css" --include="*.html" || echo "GLASSMORPHISM BULUNAMADI"
grep -r "responsive\|media-query\|@media" . --include="*.css" || echo "DUYARLI CSS BULUNAMADI"
grep -r "jwt\|authentication\|auth" . --include="*.ts" --include="*.js" || echo "DOĞRULAMA BULUNAMADI"

# 3. Ekran görüntüsü yakalamayı çalıştırın
./qa-playwright-capture.sh http://localhost:8000 public/qa-screenshots

# 4. Kanıtı inceleyin
ls -la public/qa-screenshots/
# Beklenen dosyalar:
# - duyarli-masaustu.png
# - duyarli-tablet.png
# - duyarli-mobil.png
# - nav-*-oncesi.png, nav-*-sonrasi.png
# - form-*-baslangic.png, form-*-doldurulmus.png

# 5. Metrikleri kontrol edin
cat public/qa-screenshots/test-results.json
cat public/qa-screenshots/performance-metrics.json
Enter fullscreen mode Exit fullscreen mode

Adım 5: Gerçeklik Denetleyicisi Aracısını Etkinleştirin

Bir Claude Kod oturumu açın ve aşağıdaki akışı takip edin:

Gerçeklik Denetleyicisi modunu etkinleştirin.

Zorunlu gerçeklik kontrolü sürecinizi çalıştırın:

1. Dosyaların mevcut olduğunu doğrulayın: ls -la src/components/
2. İddia edilen özellikleri çapraz referanslayın: "premium", "glassmorphism" için grep
3. Ekran görüntüsü kanıtlarını inceleyin: public/qa-screenshots/
4. Metrikler için test-results.json dosyasını kontrol edin

Proje URL'si: http://localhost:8000

Çıktı: BAŞARILI (PASS) veya belirli engelleyici sorunlarla ÇALIŞMA GEREKLİ (NEEDS WORK).
Enter fullscreen mode Exit fullscreen mode

Beklenen çıktı:

## Gerçeklik Kontrolü Sonuçları

### Dosya Doğrulama: BAŞARILI
- Bileşen dosyaları mevcut: 12 dosya bulundu
- Beklenen yapı eşleşiyor

### Özellik Doğrulama: ÇALIŞMA GEREKLİ
- İddia Edilen: "Premium glassmorphism tasarımı"
- grep sonucu: GLASSMORPHISM BULUNAMADI
- Durum: İDDİA DESTEKLENMİYOR

### Ekran Görüntüsü Kanıtı: ÇALIŞMA GEREKLİ
- Masaüstü (1920x1080): Düzen doğru
- Tablet (768x1024): Gezinme çakışması tespit edildi
- Mobil (375x667): Ürün ızgarası bozuk (1 yerine 2 sütun)

### Performans Metrikleri: ÇALIŞMA GEREKLİ
- Yükleme süresi: 2.3s (hedef: <1s)
- Konsol hataları: 3 (hedef: 0)
- Ağ hataları: 1 (hedef: 0)

## Son Durum: ÇALIŞMA GEREKLİ

### Engelleyici Sorunlar:
1. Glassmorphism iddia edildi ama uygulanmadı
2. Mobil düzen 375 pikselde bozuk
3. Yükleme süresi 1 saniye hedefini aşıyor
4. Düzeltilmesi gereken 3 konsol hatası

### Engelleyici Olmayan:
- Tablet gezinme çakışması
- Yükleme durumları ekle

Engelleyici sorunlar çözülene kadar onaylamayın.
Enter fullscreen mode Exit fullscreen mode

Adım 6: İddiaları Kanıtlarla Çapraz Referanslayın

Bir iddia kontrol tablosu oluşturun ve her bir iddia için uygun kanıt komutunu, çıkan sonucu ve durumu not edin:

## İddialar ve Kanıtlar Kontrol Listesi

| İddia                  | Kanıt Komutu               | Sonuç                 |
|------------------------|----------------------------|-----------------------|
| "Premium glassmorphism"| grep "backdrop-filter"     | BULUNAMADI            |
| "Tamamen duyarlı"      | duyarli-mobil.png          | BAŞARISIZ (bozuk ızgara)|
| "Konsol hatası yok"    | test-results.json          | 3 hata bulundu        |
| "Hızlı yükleme süresi" | performance-metrics.json   | 2.3s (hedef: <1s)     |
| "JWT kimlik doğrulaması"| grep "jsonwebtoken"        | BULUNDU               |
| "Hız sınırlama"        | grep "rateLimit"           | BULUNAMADI            |
Enter fullscreen mode Exit fullscreen mode

Bu kontrol listesini her proje için güncelleyin ve her iddia için kanıt isteyin.


Tam Gerçeklik Kontrolü İş Akışı

┌─────────────────────────────────────────────────────────────────┐
│  1. Geliştirici/Yapay Zeka işi tamamlar                         │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│  2. Gerçeklik kontrol komutlarını çalıştırın                     │
│     - Dosyaları doğrulamak için ls                              │
│     - Özellikleri doğrulamak için grep                          │
│     - Ekran görüntüleri için Playwright                         │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│  3. Gerçeklik Denetleyicisi aracısını etkinleştirin             │
│     - Dosya doğrulamasını inceleyin                             │
│     - İddiaları çapraz referanslayın                             │
│     - Ekran görüntülerini analiz edin                           │
│     - Metrikleri kontrol edin                                   │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│  4. Çıktı: BAŞARILI (PASS) veya ÇALIŞMA GEREKLİ (NEEDS WORK)    │
│     - BAŞARILI: Güvenle gönderin                                │
│     - ÇALIŞMA GEREKLİ: Engelleyici sorunları düzeltin, yeniden çalıştırın│
└─────────────────────────────────────────────────────────────────┘
Enter fullscreen mode Exit fullscreen mode

CI/CD ile Entegrasyon

Gerçeklik kontrollerini CI hattınıza eklemek için örnek GitHub Actions iş akışı:

# .github/workflows/qa-reality-check.yml
name: Gerçeklik Kontrolü

on: [pull_request]

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

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

      - name: Bağımlılıkları Kur
        run: npm ci

      - name: Playwright Kur
        run: npx playwright install chromium

      - name: Sunucuyu Başlat
        run: npm start &
        env:
          PORT: 8000

      - name: Sunucuyu Bekle
        run: sleep 5

      - name: Gerçeklik kontrolü ekran görüntülerini çalıştır
        run: ./qa-playwright-capture.sh http://localhost:8000 public/qa-screenshots

      - name: Ekran Görüntülerini Yükle
        uses: actions/upload-artifact@v4
        if: always()
        with:
          name: gerçeklik-kontrolü-ekran-görüntüleri
          path: public/qa-screenshots/

      - name: Konsol Hatalarını Kontrol Et
        run: |
          ERRORS=$(cat public/qa-screenshots/performance-metrics.json | grep -c '"\[HATA\]"' || echo "0")
          if [ "$ERRORS" -gt "0" ]; then
            echo "Konsol hataları bulundu: $ERRORS"
            exit 1
          fi

      - name: Yükleme Süresini Kontrol Et
        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 "Yükleme süresi çok yavaş: ${LOAD_TIME}ms (hedef: <1000ms)"
            exit 1
          fi
Enter fullscreen mode Exit fullscreen mode

Ne Oluşturdunuz?

Bileşen Amaç
Playwright yapılandırması 3 kesme noktasında otomatik ekran görüntüsü yakalama
Test paketi Tam sayfa, duyarlı, etkileşimler
Gerçeklik kontrol betiği Tek komutla kanıt toplama
İddialar kontrol listesi Yapay zeka iddialarını grep sonuçlarıyla çapraz referansla
CI/CD entegrasyonu Çekme isteğinde otomatik gerçeklik kontrolleri

Sonraki Adımlar

İş akışını genişletin:

  • Performans puanları için Lighthouse entegrasyonu ekleyin
  • Erişilebilirlik denetimleri ekleyin (axe-core)
  • Görsel regresyon testi ekleyin (piksel karşılaştırması)

Bir iddialar veritabanı oluşturun:

  • Her yapay zeka iddiasını kanıt durumuyla birlikte kaydedin
  • Hangi ajanların en çok halüsinasyon gördüğünü takip edin
  • Zamanla doğruluk puanları oluşturun

Ekibinizle paylaşın:

  • Gerçeklik kontrol sürecini belgeleyin
  • Herhangi bir çekme isteği onayından önce kanıt isteyin
  • "Ekran görüntülerini gösterin"i bir ekip alışkanlığı haline getirin

Sık Karşılaşılan Sorun Giderme

Playwright testleri zaman aşımına uğruyor:

  • Yapılandırmada zaman aşımını artırın: timeout: 60000
  • Sunucunun çalışıp çalışmadığını kontrol edin: curl http://localhost:8000
  • Ağ boşta kalma süresi için daha uzun bekleme ekleyin: await page.waitForLoadState('networkidle', { timeout: 30000 })
  • Hata ayıklamak için başlık modunda çalıştırın: npx playwright test --headed

Ekran görüntüleri yakalanamıyor:

  • Çıktı dizininin mevcut ve yazılabilir olduğunu doğrulayın: mkdir -p public/qa-screenshots
  • Dosya izinlerini kontrol edin: chmod 755 public/qa-screenshots
  • Chromium'un yüklü olduğundan emin olun: npx playwright install chromium
  • Hata ayıklama çıktısıyla çalıştırın: DEBUG=pw:api npx playwright test

Konsol hataları yakalanamıyor:

  • Gezinmeden önce dinleyiciyi ekleyin: page.goto() öncesinde page.on('console', ...)
  • Hata tipi filtrelemesini kontrol edin: msg.type() === 'error'
  • Hata ayıklamak için tüm konsol mesajlarını günlüğe kaydedin: page.on('console', msg => console.log(msg.text()))
  • Sayfanın gerçekten içerik yüklediğini doğrulayın (boş ekran görüntüleri yok)

Mobil ekran görüntüleri masaüstü düzenini gösteriyor:

  • Gezinmeden önce görüntü alanının ayarlandığından emin olun
  • Mobil kullanıcı aracısı ekleyin: await page.setUserAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)')
  • Cihaz emülasyonu kullanın: use: { ...devices['iPhone 12'] }
  • HTML'de duyarlı meta etiketini kontrol edin: <meta name="viewport" content="width=device-width">

CI/CD işlem hattı Ubuntu'da başarısız oluyor:

  • Sistem bağımlılıklarını kurun: sudo apt-get install -y libnss3 libnspr4 libatk1.0-0
  • Playwright'ın resmi görüntüsünü kullanın: mcr.microsoft.com/playwright:v1.40.0-jammy
  • Tarayıcıları kurmadan önce npx playwright install-deps komutunu çalıştırın
  • Kapsayıcılı ortamlar için --no-sandbox bayrağını ekleyin

Gelişmiş Gerçeklik Kontrolü Desenleri

Desen 1: Görsel Regresyon Testi

Ekran görüntülerini temel görüntülerle karşılaştırmak için:

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

test('görsel regresyon kontrolü', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot('anasayfa-temel.png', {
    maxDiffPixels: 100, // Küçük farklılıklara izin ver
    fullPage: true,
  });
});
Enter fullscreen mode Exit fullscreen mode

Desen 2: Erişilebilirlik Denetimi

Erişilebilirlik için axe-core entegrasyonu:

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

test('erişilebilirlik denetimi', async ({ page }) => {
  await page.goto('/');
  const accessibilityScanResults = await new AxeBuilder({ page }).analyze();

  // Sonuçları kaydet
  const fs = require('fs');
  fs.writeFileSync(
    'public/qa-screenshots/erişilebilirlik-sonuçları.json',
    JSON.stringify(accessibilityScanResults, null, 2)
  );

  // Kritik ihlaller varsa başarısız ol
  const criticalViolations = accessibilityScanResults.violations.filter(
    v => v.impact === 'critical' || v.impact === 'serious'
  );
  expect(criticalViolations).toHaveLength(0);
});
Enter fullscreen mode Exit fullscreen mode

Desen 3: Performans Bütçesi Uygulaması

Performans eşiklerini aşan derlemeleri başarısız saymak için:

test('performans bütçesi', async ({ page }) => {
  await page.goto('/');

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

  // Bütçe eşikleri
  expect(loadTime).toBeLessThan(2000); // maksimum 2s
  expect(metrics.JSHeapUsedSize).toBeLessThan(5 * 1024 * 1024); // maksimum 5MB
});
Enter fullscreen mode Exit fullscreen mode

Yapay zeka ajanlarınız artık “harika görünüyor” demekle kurtulamaz. İşlerini ekran görüntüleri, metrikler ve grep sonuçlarıyla kanıtlamalılar.

Artık halüsinasyon yok. Artık fantezi onayları yok. Sadece kanıt.

Kanıta dayalı QA böyle görünür: komutları çalıştırın, ekran görüntülerini kontrol edin, kanıt isteyin.

Sıra sizde: iş akışınıza gerçeklik kontrolleri ekleyin. Güvenle gönderin.

SSS

Yapay zeka aracıları kod incelerken neden halüsinasyon görür?

Yapay zeka aracıları yardımsever ve uyumlu olmak üzere eğitilmiştir. Doğrulanmış olan yerine kulağa hoş gelen şeylerle yanıt verirler. Kanıt gereksinimleri olmadan, çatışmadan kaçınmak için “harika görünüyor” derler.

Ekran görüntüsü testi için Playwright'ı nasıl kurarım?

npm install -D @playwright/test ile kurun, npx playwright install chromium komutunu çalıştırın, görüntü alanı kesme noktaları içeren bir yapılandırma dosyası oluşturun ve her kesme noktasında ekran görüntüleri yakalayan test paketleri yazın.

Onaylamadan önce hangi gerçeklik kontrol komutlarını çalıştırmalıyım?

Dosyaların mevcut olduğunu doğrulamak için ls çalıştırın, iddia edilen özelliklerin kodda mevcut olduğunu doğrulamak için grep, ekran görüntüleri için Playwright testleri ve konsol hataları ve performans metrikleri için test-results.json dosyasını kontrol edin.

Gerçeklik Denetleyicisi aracısı nedir?

Gerçeklik Denetleyicisi, Agency'den gelen, kanıt kullanarak işi doğrulayan özel bir yapay zeka aracıdır. Doğrulama komutlarını çalıştırır, ekran görüntülerini inceler, iddiaları çapraz referanslar ve belirli engelleyici sorunlarla BAŞARILI (PASS) veya ÇALIŞMA GEREKLİ (NEEDS WORK) çıktısı verir.

Gerçeklik kontrollerini CI/CD'ye nasıl entegre ederim?

Playwright'ı kuran, sunucunuzu başlatan, ekran görüntüsü yakalamalarını çalıştıran, yapıtları yükleyen ve konsol hataları 0'ı aşarsa veya yükleme süresi eşiğinizi aşarsa derlemeyi başarısız yapan bir GitHub Actions iş akışı ekleyin.

Ekran görüntüleri sorunları gösteriyorsa ancak aracı BAŞARILI diyorsa ne olur?

Aracı yanlış yapılandırılmış. Gerçeklik Denetleyicisi, durumu çıkarmadan önce kanıtı incelemelidir. Onu şu gereksinimlerle yeniden eğitin: (1) özellikleri kanıtlayan grep sonuçları, (2) ekran görüntüsü incelemesi, (3) eşikler dahilindeki metrikler.

Ekibimi kanıta dayalı QA'yı benimsemeye nasıl ikna ederim?

Gerçeklik kontrol sürecini belgeleyin, testlerin geçmesini gerektiren CI/CD kapıları ekleyin, çekme isteği onayı için ekran görüntüsü incelemesini zorunlu hale getirin ve en doğru değerlendirmeleri hangi ajanların ürettiğini takip edin.

Top comments (0)