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

مساء الجمعة، تدمج إعادة تصميم للهيدر. صباح الاثنين، يخبرك زميل أن زر تسجيل الدخول قد انزاح ببضعة بكسلات على صفحة الأسعار — وهي صفحة لم تلمسها أصلاً. لم يدقّ أي اختبار ناقوس الخطر، لأن أي اختبار لم يكن ينظر إلى المظهر. هذه بالضبط هي الفجوة التي يسدّها الاختبار البصري.

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

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

هل لا تزال toHaveScreenshot() تُجبرك على كتابة الكود وصيانته؟ Delta-QA يلتقط صفحاتك ويقارنها دون كتابة سطر برمجي واحد، بدون تسجيل ومع بقاء بياناتك محلياً. جرّب Delta-QA مجاناً ←

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

الإعداد سريع إذا كان لديك مشروع 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();

toHaveScreenshot رائعة، لكنها تتطلب كوداً وإعداد CI. Delta-QA يمنحك اختباراً بصرياً بنفس القوة بلا سطر برمجي واحد، محلياً على جهازك وبنسخة سطح مكتب مجانية بدون تسجيل. جرّب Delta-QA ←

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

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 تقدم بديلاً بصفر إيجابيات كاذبة بفضل محرك مقارنة بصرية حتمي. لمقارنة Playwright مع أدوات أخرى، راجع دليل المقارنة الشامل.

ترغب في الاختبار دون سطر TypeScript واحد ولا baseline واحد لإعادة توليده؟ قارن صفحاتك مع Delta-QA الآن، مجاناً وبدون تسجيل. جرّب Delta-QA مجاناً ←

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

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

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

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

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

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

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

---

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