اختبار مظهر الموقع المرئي باستخدام أداتي Chromatic و Playwright

يبذل مطورو الويب عند إنشاء مواقع إلكترونية جهدًا كبيرًا في بناء واجهات أنيقة ويحرصون على تصميم تجربة مستخدم UI سلسة، لكن حتى أجمل المواقع تصميمًا قد يشوبها خلل في التناسق أو أخطاء مرئية، لذا لا يقل اختبار مظهر الموقع visual test أهمية عن اختبار وظائفه وآلية عمله.

سنشرح في هذا المقال كيفية استخدام أداتي كروماتيك Chromatic وبلاي رايت Playwright في اختبار المواقع المرئي لضمان تناسق واجهات الموقع وخلوها من الأخطاء.

بالطبع لن تفيدنا أدوات الاختبارات الوظيفية مثل الاختبارات الشاملة end-to-end tests أو اختبارات الوحدات unit tests، فهي ممتازة في اختبار منطق صفحات الموقع وسلوكها، لكنه لا تستطيع اكتشاف الأخطاء في مظهر واجهة المستخدم UI، وذلك لأن الاختبارات الوظيفية عاجزة عن رؤية البكسلات pixels التي تخرجها واجهات المستخدم في مواقعنا.

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

لذا سنتعرف في هذا المقال على طريقة لمعالجة النتائج الإيجابية الزائفة وكشف أخطاء العرض rendering قبل مرحلة التشغيل باستخدام سير عمل يدعى الاختبار المرئي visual testing، وسنتعلم آلية عمله وتطبيقه عمليًا.

آلية عمل الاختبار المرئي

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

إن مهمة أدوات الاختبار المرئي مثل كروماتيك Chromatic هي أتمتة هذه العمليات التي تشمل أخذ اللقطات، وإجراء التحقق من الاختلافات في جميع واجهات المستخدم في الموقع.

يتمثل سير العمل في أداة كروماتيك Chromatic بأربع خطوات :

العرض السحابي Cloud Rendering: أداة كروماتيك واجهة المستخدم لديك في متصفح سحابي
أخذ لقطات: تأخذ كروماتيك لقطة عند كل اختبار، وتجري جميع الاختبارات بآن واحد لتوفير الوقت
المقارنة المؤتمتة: تولّد كروماتيك لقطات جديدة كلما حدّثنا الشيفرة البرمجية وتقارنها باللقطات المرجعية
المراجعة والتحقق: عندما ترصد كروماتيك تغييرات معنية تطلب مراجعتها للتأكد من أنها تغييرات متعمدة، وفي حال وجدت تغييرات غير متوقعة فإنها تفعّل إشعارات تنبهك حتى تسرع في معالجتها

دعنا نقدم مثالًا عمليًا عن هذه التقنية، سنختبر واجهة المستخدم لصفحة الويب التي شُرحت في مقال Dynamic Tooltip Reveal Animations. والتي تتوفر شيفرتها البرمجية على غيت هب. فهي مصمَّمة بتخطيط شبكي وتتضمن عناصر متنوعة، وعندما نمرر المؤشر فوق الروابط في المحتوى الرئيسي تظهر أدوات تلميح tooltips متحركة.

لفهم المشروع أكثر يمكن الحصول على الشيفرة البرمجية لهذه الصفحة وتشغيلها من خلال التعليمات التالية:

$ npx degit winkerVSbecks/PixelGooeyTooltip#starting-point PixelGooeyTooltip
$ cd PixelGooeyTooltip
$ npm install

كيف ندمج أداتي Chromatic و Playwright

يمكننا دمج أداة كروماتيك Chromatic بسلاسة مع أدوات الاختبار الرائجة مثل Storybook وPlaywright وCypress. سنستفيد من الدمج بين أداتي كروماتيك Chromatic وبلاي رايت Playwright لإجراء اختبارات مرئية على الصفحات الثابتة المكتوبة بلغة HTML مما يضمن استقرار التصميم عبر مختلف التغييرات، أما أداة ستوري بوك Storybook فهي الأداة المثلى لاختبار المواقع المبينة بالاعتماد على المكونات component- based حيث توفر بيئة متكاملة لاختبار وتوثيق واجهات المستخدم.

أما Playwright، فهي أداة مفتوحة المصدر تؤتمت الاختبارات الشاملة من خلال محاكاة تفاعلات المستخدم، مثل النقرات وتحريك المؤشر وإدخال النصوص مباشرة في المتصفح، مما يضمن دقة الأداء عبر مختلف البيئات والمنصات.

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

سير العمل

سنجزئ سير العمل إلى قسمين، سنبدأ في الجزء الأول بإعداد أداة بلاي رايت وكتابة اختبارات شاملة لتفعيل أداة التلميح tooltip، ثم سنستخدم أداة كروماتيك في الجزء الثاني لتحويل تلك الاختبارات الشاملة إلى اختبارات مرئية.

إعداد أداة بلاي رايت

لننفّذ الأمر التالي لإعداد أداة بلاي رايت:

$ npm init playwright@latest

سيضيف هذا الأمر أداة بلاي رايت إلى ملف package.json ويولّد ملف playwright.config.js وهو ملف الإعدادات الذي يتيح لنا تخصيص طريقة تشغيل الاختبارات، مثل المتصفحات المستهدفة، وطرق التعامل مع المهام المتزامنة، وخيارات أخرى. وينشئ مجلد باسم tests متضمنًا مثالًا بسيطًا للاختبار، كما سيضيف مجلد tests-examples لمزيد من الأمثلة.

كتابة اختبار شامل

سنعيد تسمية الملف tests/example.spec.js ليصبح tests/segmented-tooltip.spec.js ونعدّل محتوياته وفق الخطوات التالية كي يختبر عنوان الصفحة:

// tests/segmented-tooltip.spec.js

const { test, expect } = require('@playwright/test');

test('has title', async ({ page }) => {
  await page.goto('http://127.0.0.1:8080');
  await expect(page).toHaveTitle(/Segmented Tooltip Animation/);
});

ننفّذ الأمر . npx http-server لتشغيل الموقع على خادم تطوير محلي، ثم نشغل اختبارات بلاي رايت باستخدام الأمر:

$ npx playwright test

تظهر نتائج الاختبارات عادة على الطرفية، وسنلاحظ وجود نتائج 3 اختبارات في الخرج، ويرجع ذلك إلى أن أداة بلاي رايت تجري افتراضيًا كل اختبار في 3 متصفحات هي Chromium و WebKit و Firefox.

اختبار أدوات التلميح التي تنبثق عند تمرير المؤشر

أنجزنا في الفقرة السابقة اختبار للتحقق من عنوان الموقع، وسنضيف الآن اختبار آخر بأداة Playwright آخر كي يتحقق من مكان ظهور أحد أدوات التلميح tooltip التي تنبثق عند تمرير المؤشر فوق عنصر محدد.

// tests/segmented-tooltip.spec.js

const { test, expect } = require('@playwright/test');

test('has title', async ({ page }) => {
  await page.goto('http://127.0.0.1:8080');
  await expect(page).toHaveTitle(/Segmented Tooltip Animation/);
});

test('displays tooltip', async ({ page }) => {
  await page.goto('http://127.0.0.1:8080');
  await page.locator('css=.trigger').first().hover({ force: true });
  await expect(
    page.locator('css=#tooltip-1 .tooltip__content-desc.glitch')
  ).toHaveCSS('opacity', '1');
});

سنشغل الاختبارات هذه المرة في وضع واجهة المستخدم لنشاهد فعليًا كيف تعمل في المتصفح.

$ npx playwright test --ui

أصبحت اختباراتنا الشاملة تعمل، دعنا نرى الآن كيف سنستخدمها للاختبار المرئي.

إنشاء مشروع جديد

نحتاج للاشتراك بحساب كروماتيك مجاني باستخدام حسابنا في GitHub أو GitLab أو Bitbucket أو باستخدام البريد الإلكتروني، يمنحنا هذا الحساب 5000 لقطة مجانية في الشهر. نضغط بعدها على إضافة مشروع أو Add project ثم نتبع التعليمات لإنشاء مشروع جديد، وفي النهاية ننسخ المفتاح token الخاص بمشروعنا، وفق التالي:

إضافة كروماتيك إلى اختبارات بلايرايت

نحتاج بعدها لتثبيت الحزم الخاصة بأداة كروماتيك

$ npm install -D chromatic @chromatic-com/playwright

ثم نبدل أدوات الاختبار الخاصة ببلاي رايت بالأدوات الخاصة بكروماتيك وذلك بإضافة @chromatic-com/playwrightضمن الشيفرة وفق ما يلي:

// tests/segmented-tooltip.spec.js

// ➖ Remove this line
// import { test, expect } from '@playwright/test';
// ➕ Add this line
import { test, expect } from "@chromatic-com/playwright";

test('has title', async ({ page }) => {
  await page.goto('http://127.0.0.1:8080');
  await expect(page).toHaveTitle(/Segmented Tooltip Animation/);
});

test('displays tooltip', async ({ page }) => {
  await page.goto('http://127.0.0.1:8080');
  await page.locator('css=.trigger').first().hover({ force: true });
  await expect(
    page.locator('css=#tooltip-1 .tooltip__content-desc.glitch')
  ).toHaveCSS('opacity', '1');
});

وهذا كل ما علينا فعله، فبتغيير سطر واحد من الشيفرة البرمجية نستطيع تحويل هذه الاختبارات الشاملة إلى اختبارات مرئية.

إجراء اختبارات مرئية

نشغل اختبارات بلاي رايت كما نفعل عادة، وأثناء عملها تلتقط كروماتيك أرشيفًا لصفحة الموقع عند كل اختبار.

$ npx playwright test

ثم نستخدم مفتاح المشروع token وننفذ الأمر التالي في مجلده، عندها سترفع كروماتيك الملف المضغوط الخاص بالمشروع إلى بنيتها التحتية السحابية وتنفذ الاختبارات المرئية.

$ npx chromatic --playwright -t=<TOKEN>

سنستلم رسالة تأكيد بنجاح إجراء الاختبارات عندما ينتهي تنفيذ الأمر السابق، وبما أن هذه أول مرة نجري فيها الاختبارات ستنشئ كروماتيك اللقطات المرجعية لهذه الاختبارات.

✔ Started build 1
  → Continue setup at https://www.chromatic.com/setup?appId=...
✔ Build 1 auto-accepted
  → Tested 2 stories across 2 components; captured 2 snapshots in 17 seconds

ملاحظة التغيرات المرئية

الآن بعد أن أنشأنا اللقطات المرجعية ستلاحظ كروماتيك أية تغيرات تطرأ على واجهة المستخدم هذه. لنفترض أننا عدلنا ألوان خلفية أداة التلميح tooltip ونصها في ملف tooltip.css كما يلي:

/* css/tooltip.css */

.tooltip {
    --tt-width: 200px;
    --tt-height: 250px;
    --tt-columns: 3;
    --tt-rows: 4;
    --tt-bg-color: #FF6B6C; /* 👈 this one */
    --tt-text-color: #000; /* 👈 and this one */

  /* ... */

الآن لنشغل الاختبار مرة أخرى:

# First Playwright
$ npx playwright test
# Then Chromatic
$ npx chromatic --playwright -t=<TOKEN>

إذا كان هناك تغيير بصري، ستزودنا كروماتيك بموجز للتغيرات التي جرت، نضغط الرابط لمعاينتها.

✖ Found 1 visual change: Review the changes at https://www.chromatic.com/build?appId=...&number=3

يمكننا مراجعة التغيير عبر الرابط المقدم من Chromatic.

الغاية من ذلك مراجعة هذه التغييرات للتحقق ما إذا كانت متعمَّدة أو خاطئة. عندما نقبل جميع التغييرات سيشار إلى النسخة الحالية بأنها مقبولة passed🟢. عندها ستُحدَّث اللقطات المرجعية لهذه الاختبارات، وهذا سيضمن بأننا نقارن اللقطات التي ستُأخذ في الاختبارات المستقبلية بأحدث نسخة مقبولة من اللقطات المرجعية.

الاختبار المرئي للتصميم المتجاوب Responsive Design

تحدثنا عن أساس سير عمل الاختبار المرئي، ولم يتبقَ لنا سوى أن نتحدث عن جانب آخر وهو التصميم المتجاوب، إذ لا تظهر بعض عناصر واجهة المستخدم عند عرضها في إطار عرض viewport بأحجام صغيرة، لذا يجب أن ننتبه إلى هذه النقطة عندما نجري اختباراتنا.

يمكننا الاستفادة من خاصية أداة بلاي رايت التي تحاكي الإطار المعروض والتي تمكننا من من محاكاة مختلف أحجام الشاشات وتلتقط لقطات لجميع الإطارات المعروضة.

// tests/segmented-tooltip.spec.js

// ...

test.use({
  viewport: { width: 800, height: 900 },
});

test('meta is hidden on smaller screens', async ({ page }) => {
  await page.goto('http://127.0.0.1:8080');
  for (const meta of await page.locator('css=.meta').all())
    await await expect(meta).toBeHidden;
});

بإجراء اختباراتنا ستلتقط كروماتيك لقطات للموقع بحجم إطار معروض أصغر، حتى نتحقق من تنسيق الموقع في الشاشات الصغيرة.

تطوير الاختبارات المرئية

تحدثنا في هذا المقال عن أساسيات الاختبار المرئي باستخدام أداتي كروماتيك وبلاي رايت، لكن هذا غيض من فيض، فحتى تطور مستوى اختباراتك يُنصح بدمج أداة كروماتيك في خطوط أنابيب التكامل المستمر CI pipeline لوصول إشعار بأية تغييرات مرئية يستحدثها طلب سحب pull request، وضمان الحفاظ على الشكل المثالي لواجهة المستخدم.

ترجمة -وبتصرّف- للمقال How to Visual Test Websites with Chromatic and Playwright.