الاختبار البصري مع Playwright: الدليل الكامل

يتضمن Playwright من Microsoft منذ الإصدار 1.22 ميزة مدمجة للاختبار البصري: طريقة toHaveScreenshot(). تسمح بالتقاط لقطات الشاشة ومقارنتها تلقائياً بصور مرجعية، بدون إضافات خارجية.

إنها واحدة من أقوى الخيارات لفرق التطوير التي تريد إضافة اختبارات بصرية إلى مكدسها الحالي. يغطي هذا الدليل التثبيت والتكوين وأفضل الممارسات وتكامل CI/CD.

التثبيت والاختبار الأول

الإعداد سريع إذا كان لديك مشروع Node.js:

npm install -D @playwright/test
npx playwright install

أنشئ اختبارك البصري الأول في tests/visual.spec.ts:

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

test('homepage visual test', async ({ page }) => {
  await page.goto('https://your-site.com');
  await expect(page).toHaveScreenshot('homepage.png');
});

التشغيل الأول يولّد الـ baseline (الصورة المرجعية). التشغيلات اللاحقة تقارن اللقطة الحالية بهذا الـ baseline وتشير إلى الاختلافات.

# المرة الأولى: توليد الـ baselines
npx playwright test --update-snapshots

# بعد ذلك: المقارنة
npx playwright test

تكوين التسامح

افتراضياً، يشير Playwright إلى أدنى فرق ببكسل واحد. عملياً، يجب تكوين عتبات تسامح لتجنب الإيجابيات الكاذبة.

في playwright.config.ts:

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

export default defineConfig({
  expect: {
    toHaveScreenshot: {
      maxDiffPixelRatio: 0.01,
      animations: 'disabled',
      scale: 'device',
    },
  },
});

إدارة المحتوى الديناميكي

المحتوى الديناميكي (التواريخ، الإعلانات، الصور الرمزية، العدادات) هو كابوس الاختبارات البصرية. يقترح Playwright ثلاثة حلول:

إخفاء المناطق الديناميكية:

await expect(page).toHaveScreenshot({
  mask: [
    page.locator('.ad-banner'),
    page.locator('.timestamp'),
    page.locator('.user-avatar')
  ]
});

استبدال المحتوى:

await page.evaluate(() => {
  document.querySelector('.date').textContent = '01/01/2026';
});
await expect(page).toHaveScreenshot();

الإخفاء عبر CSS:

await page.addStyleTag({
  content: '.dynamic-element { visibility: hidden !important; }'
});
await expect(page).toHaveScreenshot();

استقرار الاختبارات

test('stable visual test', async ({ page }) => {
  await page.goto('https://your-site.com');

  await page.waitForLoadState('networkidle');
  await page.evaluate(() => document.fonts.ready);
  await page.waitForSelector('.hero-image', { state: 'visible' });

  await expect(page).toHaveScreenshot();
});

اختبار دقات متعددة

projects: [
  {
    name: 'Desktop',
    use: { viewport: { width: 1920, height: 1080 } },
  },
  {
    name: 'Tablet',
    use: { viewport: { width: 768, height: 1024 } },
  },
  {
    name: 'Mobile',
    use: { ...devices['iPhone 13'] },
  },
]

تكامل CI/CD

name: Visual Tests
on: [push, pull_request]
jobs:
  visual-tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report
          path: playwright-report/

حدود نهج Playwright

كفاءات إلزامية: يجب إتقان TypeScript/JavaScript والمحددات وتكوين المشروع. غير متاح لـ QA غير المطورين.

بدون لوحة تحكم: لا توجد واجهة مراجعة مدمجة.

إيجابيات كاذبة: مقارنة البكسل أساسية. اختلافات anti-aliasing بين المتصفحات تولد ضوضاء.

الصيانة: كل تغيير مقصود في UI يتطلب إعادة توليد الـ baselines.

للفرق التي تريد اختباراً بصرياً بدون هذه القيود التقنية، الحلول بدون كود مثل Delta-QA تقدم بديلاً بصفر إيجابيات كاذبة بفضل خوارزمية مقارنة هيكلية في 5 مراحل.

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

هل Playwright مجاني للاختبارات البصرية؟

نعم، بالكامل. toHaveScreenshot() مدمج أصلاً في Playwright، وهو مفتوح المصدر ومدعوم من Microsoft.

Playwright أم Cypress للاختبارات البصرية؟

Playwright يدمج الاختبار البصري أصلاً بينما Cypress يحتاج إضافة خارجية. Playwright يدعم ثلاثة محركات متصفح (Chromium, Firefox, WebKit). للاختبار البصري تحديداً، Playwright هو الخيار الأفضل في المصدر المفتوح.

هل يمكن استخدام Playwright و Delta-QA معاً؟

نعم. النهج الموصى به هو استخدام Playwright للاختبارات البصرية المعقدة و Delta-QA للتحققات البصرية الروتينية التي يديرها فريق QA.

---

Playwright يقدم أساساً متيناً للاختبارات البصرية الآلية. لفرق التطوير التي تتقن TypeScript، هو على الأرجح أفضل خيار مفتوح المصدر متاح في 2026.

---

جرّب Delta-QA مجاناً →

---

المقال السابق: من الاختبار اليدوي إلى الاختبار الآلي: دليل لـ QA غير المطورين