HTML Academy · درس

اختبار لقطات HTML

اكتشاف تغييرات HTML غير المقصودة باستخدام اختبارات اللقطات

اختبار لقطات HTML درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

ما هو اختبار اللقطات

يسجل اختبار اللقطات الناتج المُصيَّر لمكوّن أو صفحة عند التشغيل الأول، ثم يقارن في عمليات التشغيل اللاحقة الناتج الجديد باللقطة المحفوظة. ويؤدي أي تغيير في ناتج HTML إلى فشل الاختبار إلى أن تُحدَّث اللقطة عن قصد.

اختبار اللقطات في Jest

يقوم المطابق toMatchSnapshot() في Jest بتحويل قيمة إلى صيغة متسلسلة (بما في ذلك JSX المُصيَّر إلى HTML)، ثم يقارنها بملف محفوظ. يحدّث npx jest -u اللقطات عند حدوث تغييرات مقصودة. وتعمل الاختبارات كشبكة حماية من تغييرات التصيير غير المقصودة.

import { render } from "@testing-library/react";
import Button from "./Button";

test("Button renders consistently", () => {
  const { container } = render(<Button>Save</Button>);
  expect(container.innerHTML).toMatchSnapshot();
});

Storybook Test Runner

يشغّل Storybook Test Runner كل قصة، ويسجل ناتجها كلقطة عبر axe (لإمكانية الوصول) وتسلسل DOM. وبالاقتران مع Chromatic، يضيف ذلك اختبار التراجع البصري؛ أي فروقًا على مستوى البكسل بالإضافة إلى فروق DOM.

التراجع البصري باستخدام Percy أو Chromatic

يسجل Percy وChromatic الصفحات المُصيَّرة كصور، ويعرضان الفروق البصرية. ويكشفان تراجعات CSS التي تفوّت عليها لقطات DOM، مثل استبدال الخط، أو تعديل الهامش، أو تغير اللون. اجمع لقطات DOM (رخيصة وسريعة) مع اللقطات البصرية (مكلفة وشاملة).

صيانة اللقطات

تصبح اللقطات التي تتغير "بسهولة مفرطة" مصدرًا للضوضاء. تجنب تسجيل القيم غير المستقرة كلقطات، مثل التواريخ والمعرّفات والمفاتيح العشوائية. استخدم مطابقة الخصائص في Jest، مثل expect.any(String)، للحقول التي تتغير بشكل مشروع بين عمليات التشغيل. اجعل اللقطات صغيرة ومركزة.

مراجعة الشفرة الخاصة باللقطات

تُعد فروق ملفات اللقطات في طلبات السحب مادة أساسية للمراجعة. يتحقق المراجعون من أن تغييرات DOM مقصودة ومرغوبة، فيكشفون الآثار المتسلسلة غير المقصودة الناتجة عن تغيير CSS "بسيط". تعامل مع فروق اللقطات كما تتعامل مع أي فرق آخر.

لا تلتقط لقطة مرجعية لكل شيء

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

تسلسل اللقطات المرجعية

اختر طريقة التسلسل: HTML كامل، أو DOM مبسّط، أو props فقط، أو شجرة إمكانية الوصول. يلتقط كل تنسيق أنواعًا مختلفة من حالات التراجع. بالنسبة إلى مكونات واجهة المستخدم، يُعد HTML الكامل الأكثر شمولًا؛ أما بالنسبة إلى المنطق المعتمد على props، فخيار props فقط أقل تكلفة ونادرًا ما ينتج إيجابيات كاذبة.

عندما تنكسر اللقطات المرجعية

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

لقطات مرجعية عبر المتصفحات

تعرض أدوات الانحدار البصري الصفحات في متصفحات متعددة، وتبلغ عن الفروقات الخاصة بكل متصفح. استخدمها لاكتشاف CSS الذي يُعرض بشكل مختلف في Safari مقارنةً بـ Chrome، وهو أمر شائع في ميزات التخطيط الجديدة خلال مرحلة التبنّي المبكر. من دون لقطات مرجعية عبر المتصفحات، لا تُكتشف حالات التراجع هذه إلا من خلال الاختبار اليدوي.

دمجها مع اختبارات أخرى

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

الأداء

اختبارات اللقطات المرجعية سريعة، إذ تقارن السلاسل النصية أو الملفات. أما اختبارات الانحدار البصري فأبطأ، لأنها تصيّر وحدات البكسل وتقارن الصور، وغالبًا ما تفعل ذلك عبر متصفحات متعددة. شغّل اختبارات اللقطات المرجعية في كل عملية CI، وشغّل الانحدار البصري مع كل PR، ولكن ربما ليس مع كل commit، حسب ميزانية CI.

اختبار الفهم

لماذا تُستكمل اختبارات لقطات DOM عادةً باختبارات الانحدار البصري مثل Percy أو Chromatic؟

الملخص

يلتقط اختبار اللقطات المرجعية HTML المُصيّر عند التشغيل الأول، ويشير إلى أي تغيير في عمليات التشغيل اللاحقة. استخدم Jest toMatchSnapshot مع DOM الخاص بالمكوّن، وStorybook Test Runner مع القصص، وPercy/Chromatic لاختبار الانحدار البصري على مستوى البكسل. التقط اللقطات المرجعية على مستوى المكوّن، لا على مستوى الصفحة، واستبعد القيم غير المستقرة، وراجع الفروقات بعناية في PRs. ادمج ذلك مع اختبارات الوحدات واختبارات end-to-end لتحقيق تغطية كاملة.

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

هل درس «اختبار لقطات HTML» مجاني؟

نعم — نص درس «اختبار لقطات HTML» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.

ماذا ستتعلم في «اختبار لقطات HTML»؟

اكتشاف تغييرات HTML غير المقصودة باستخدام اختبارات اللقطات تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟

لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «اختبار لقطات HTML»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟

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

جميع الدروس في هذه الدورة

← العودة إلى HTML Academy