الاختبار البصري: "ممارسة تحقّق آلية تتمثل في مقارنة لقطات شاشة لواجهة مستخدم بصور مرجعية، بهدف اكتشاف أي انحدار بصري غير مقصود."
إذا كنت هنا، فربما لأنك كتبت "playwright vs puppeteer" في محرك بحثك المفضل آملًا أن يحسم مقالٌ المسألة أخيرًا بشكل حاسم. خبر سار: هذا المقال يحمل آراء واضحة ومُدعّمة بالوقائع.
Puppeteer و Playwright مكتبتان لأتمتة المتصفح أنشأهما مهندسون عمل بعضهم حرفيًا على المشروعين كليهما في Google ثم Microsoft. أحدهما السلف التاريخي، والآخر الخلف الروحي الأكثر طموحاً. لكن حين نتحدث تحديدًا عن الاختبار البصري — القدرة على اكتشاف أن زرًا تحرّك 3 بكسلات أو أن وزن خطٍّ تغيّر — تصبح المواجهة أكثر إثارة بكثير.
تنبيه مُفسِر: لم تُصمَّم أيٌّ من الأداتين حقًا للاختبار البصري على نطاق واسع. لكن إحداهما تتفوق بشكل ملحوظ على الأخرى.
Puppeteer: الرائد المُتقدِّم في العمر
أطلق Google أداة Puppeteer عام 2017 في ذلك الوقت كانت ثورة صغيرة: واجهة برمجية نظيفة وسهلة الاستخدام لقيادة Chrome/Chromium برمجيًا. لا مزيد من حيل Selenium المعقدة، ولا مزيد من WebDriver المتذبذب. كان Puppeteer يتحدث مباشرة إلى المتصفح عبر Chrome DevTools Protocol (CDP) بفضل فريق هندسي متخصص في Google.
المشكلة؟ Puppeteer لا يتحدث إلا مع Chrome. في 2026، هذا أشبه بأن يكون لديك مترجم لا يتقن إلا الإنجليزية في مؤتمر دولي. Firefox؟ Safari؟ يتجاهلهما Puppeteer بأدب.
حاول Google قبل بضع سنوات إضافة دعم تجريبي لـ Firefox. كلمة "تجريبي" التصقت بهذه الميزة كملصق لا يجرؤ أحد على إزالته حتى اليوم. عمليًا، إذا اختبرت بـ Puppeteer، فأنت تختبر على Chrome حصرياً. نقطة نهائية.
لتوليد PDF أو الكشط أو الأتمتة السريعة، يبقى Puppeteer خيارًا صالحًا تمامًا. لكن للاختبار متعدد المتصفحات، تبدأ بإعاقة هيكلية.
Playwright: الوريث الطموح
وُلد Playwright في Microsoft عام 2020، أنشأه جزء من الفريق الذي... بنى Puppeteer في Google. إذا أردنا تلخيص الأمر بقياس: Puppeteer هو المسوّدة الخام، و Playwright هو الأطروحة المنقّحة.
منذ البداية، صُمِّم Playwright ليكون متعدد المتصفحات: Chromium و Firefox و WebKit (محرك Safari). هذا القرار المعماري يُغيِّر كل شيء. تكتب اختباراتك مرة واحدة، وتشغّلها على محركات العرض الثلاثة التي تهم.
مزايا أخرى ملحوظة لـ Playwright:
- انتظار تلقائي ذكي: ينتظر Playwright تلقائيًا حتى تصبح العناصر جاهزة قبل التفاعل معها. لا مزيد من نثر تأخيرات اعتباطية في كل مكان.
- سياقات معزولة: يمكنك محاكاة عدة مستخدمين في نفس الاختبار دون أن يدوس بعضهم على أصابع بعض.
- دعم محمول أصلي: محاكاة الأجهزة مدمجة، وليست مُلحقة لاحقًا.
- مُشغِّل اختبارات مدمج: Playwright Test إطار عمل متكامل بالموازاة والمُبلِّغين والتكوين لكل مشروع.
وتيرة التطوير مستمارة: تنشر Microsoft تحديثات كل بضعة أسابيع. في غضون ذلك، يتطور Puppeteer بإيقاع أكثر استرخاءً — لنقل إذا كان Playwright قطارًا فائق السرعة، فإن Puppeteer قطار محلي يتوقف عند كل محطة.
الاختبار البصري: حيث يهم كل شيء
لنركّز على ما يهمّك حقًا: الاختبار البصري، المسمى أيضًا اختبار الانحدار البصري. المبدأ بسيط نظريًا — مقارنة لقطة شاشة حالية بصورة مرجعية لاكتشاف أي فروقات غير مقصودة — لكن التنفيذ ليس بسيطًا على الإطلاق في الممارسة. لنهج أبسط لمقارنة عرض الصفحات بصريًا دون الحاجة إلى كتابة كود، يستحق مُقارن HTML البصري عبر الإنترنت الاستكشاف والتجربة.
Puppeteer والاختبار البصري: الصمت المدوّي
يستطيع Puppeteer التقاط لقطات الشاشة بسهولة. هذا تقريبًا كل ما يستطيع فعله على الجانب البصري — وكل ما وراء ذلك يعود إليك بالكامل. يمنحك صورة خام، وبعدها أنت متروك لشأنك في كل خطوة لاحقة.
للقيام باختبار بصري مع Puppeteer، تحتاج إلى:
- التقاط لقطة شاشة يدويًا
- تخزينها في مكان ما كمرجع
- إيجاد مكتبة مقارنة صور (pixelmatch أو resemblejs أو ما شابه)
- كتابة كل منطق المقارنة بنفسك
- إدارة عتبات التسامح
- التعامل مع الإيجابيات الكاذبة (الرسوم المتحركة، المحتوى الديناميكي، التواريخ...)
- بناء نظام لتحديث المراجع
الأمر قابل للتنفيذ تقنيًا بالطبع. وهو أيضًا أشبه ببناء سيارتك بنفسك من قطع متناثرة لأن الوكيل لا يبيع إلا المحركات. ممكن تقنيًا، مُرهق عمليًا وغير مستدام على المدى الطويل.
لا توجد طريقة أصلية في Puppeteer للاختبار البصري. صفر. لا شيء. إنه خيار متعمد من Google: Puppeteer أداة أتمتة، وليس إطار اختبار.
Playwright والاختبار البصري: أخيرًا شيء أصلي
أما Playwright، فقد دمج الاختبار البصري مباشرة في إطاره عبر toHaveScreenshot(). أصلي، مدعوم، ويعمل.
ما يديره Playwright أصليًا لك:
- التقاط ومقارنة تلقائيان: تأكيد واحد كافٍ للالتقاط والمقارنة والإبلاغ عن الفروقات
- إدارة المراجع: الصور المرجعية مُحدَّدة الإصدارات وتُحدَّث بأمر بسيط
- عتبات تسامح قابلة للتكوين: تقرر النسبة المقبولة من البكسلات المختلفة
- إخفاء العناصر: يمكنك تجاهل المناطق الديناميكية (الساعات، الإعلانات، المحتوى المخصص)
- مقارنة متعددة المتصفحات: بما أن Playwright يدعم ثلاثة محركات، يمكنك مقارنة العرض عبرها
هذه ميزة معتبرة. حيث يطلب منك Puppeteer أن تصبح مهندس معالجة صور، يقدم Playwright الأداة جاهزة للاستخدام.
Playwright يفوز بالاختبار البصري، وليس صدفة
لنلخّص دون لفّ ودوران:
يمتلك Playwright حلًا أصليًا للاختبار البصري، مدعومًا رسميًا، مدمجًا في مُشغِّل اختباراته، ومتوافقًا مع عدة متصفحات. لا يمتلك Puppeteer ما يُماثل ذلك ولا يبدو أن لديه خططًا لتقديمه.
للاختبار البصري تحديدًا، الاختيار بين Playwright و Puppeteer واضح كالبلور. إذا كان لزامًا عليك استخدام أحدهما، فاختر Playwright.
لكن — وهذه "لكن" كبيرة — حتى الحل الأصلي لـ Playwright له قيود مهمة على الاختبار البصري على نطاق واسع:
- يجب عليك كتابة شيفرة. كل صفحة، كل حالة، كل سيناريو يتطلب اختبارًا مكتوبًا يدويًا. إذا كان لتطبيقك 200 صفحة بـ 5 حالات لكل منها، حظًا موفقًا.
- الصيانة تتناسب مع حجم التطبيق. كل تغيير في الواجهة يمكن أن يكسر عشرات الاختبارات البصرية، مُولِّدًا انهيارًا من تحديثات المراجع.
- الإيجابيات الكاذبة تبقى مشكلة. عرض الخطوط، التنعيم، الرسوم المتحركة الدقيقة — كلها يمكن أن تخلق فروقات ببضعة بكسلات ليست انحدارات حقيقية.
- الأداة محجوزة للمطورين. مختبر QA غير تقني، مصمم، مالك منتج؟ لا يستطيعون كتابة هذه الاختبارات أو صيانتها.
القيود التي يتشاركها Playwright و Puppeteer
لنخطُ خطوة إلى الوراء. سواء اخترت Playwright أو Puppeteer لاختباراتك البصرية، تواجه نفس المشاكل الهيكلية:
الحاجز التقني مرتفع للغاية. كلتا الأداتين مكتبتان برمجيتان تتطلبان كتابة شيفرة برمجية. لا واجهة رسومية مرئية، لا نقر بسيط، لا سحب وإفلات. إذا لم تكتب شيفرة، فلن تتمكن من الاختبار — هذه حقيقة بلا استثناء.
التوسع كابوس حقيقي. لموقع من 50 صفحة، كتابة وصيانة الاختبارات البصرية يدويًا أمر قابل للإدارة نسبيًا. لكن لموقع من 500 صفحة بمتغيرات استجابية وثيمات داكنة وحالات مصادقة متعددة ولغات مختلفة، إنه عمل بدوام كامل يستهلك موارد الفريق بأكملها.
تكامل CI/CD يتطلب جهدًا ووقتًا. بالتأكيد، يتكامل Playwright جيدًا في خطوط الأنابيب. لكن تهيئة البيئات بدقة وإدارة الصور المرجعية في التحكم بالإصدارات ومعالجة النتائج وعرضها تبقى مسؤوليتك الكاملة كفريق.
التقارير فنية بحتة. التقارير المُولَّدة مصممة حصريًا للمطورين والمهندسين التقنيين. حاول أن تُري فرق بكسل ببكسل لصاحب مصلحة تجاري أو لعضو فريق إدارة المنتج — ستحصل على نظرة فارغة متبوعة بـ "إذًا، هل هي مكسورة أم لا؟" وستضيع وقتًا ثميناً في الشرح.
البديل: أداة اختبار بصري للجميع
ها هي قناعتنا، ونحن نتبناها: Playwright و Puppeteer أدوات أتمتة ممتازة، لكن الاختبار البصري يستحق أداة مخصصة.
هذا بالضبط هو سبب وجود Delta-QA. بدلًا من أن تطلب منك كتابة مئات الأسطر للتحقق من أن واجهتك لم تتغير، تتبنى Delta-QA نهجًا مختلفًا جذريًا:
- بدون كود: لا حاجة لمهارات برمجة. تشير، تنقر، تختبر. يمكن لمختبر QA مبتدئ أو مصمم أو مالك منتج استخدامها من اليوم الأول.
- مقارنة بصرية ذكية: تكتشف Delta-QA الانحدارات الحقيقية وتُصفّي الضوضاء (anti-aliasing، الإزاحات دون البكسل، المحتوى الديناميكي).
- تنفيذ محلي: بياناتك تبقى معك. لا سحابة طرف ثالث، لا اشتراك ينفجر مع حجم اللقطات.
- مجانية: لا طبقة مدفوعة مخفية، لا حدود التقاط اصطناعية.
حيث يقول لك Playwright "اكتب اختبارًا لكل صفحة"، تقول لك Delta-QA "أرنا صفحاتك، نحن نتولى الباقي". إنه الفرق بين بناء جهاز كشف دخان وشرائه — كلاهما يحمي منزلك، لكن أحدهما يترك لك الوقت لتعيش فيه.
ينبغي ألا يكون الاختبار البصري امتيازًا محجوزًا للفرق التي لديها مطورون متاحون. إنه حاجة عالمية في اللحظة التي يكون لديك فيها واجهة مستخدم في الإنتاج.
الأسئلة الشائعة
هل Playwright أفضل من Puppeteer للاختبار البصري؟
نعم، بلا لبس. يدمج Playwright أصليًا مقارنة لقطات الشاشة عبر toHaveScreenshot()، بينما لا يقدم Puppeteer أي وظيفة أصلية للاختبار البصري. إذا وجب الاختيار بين الاثنين لاختبار الانحدار البصري، فإن Playwright هو الخيار الواضح.
هل يمكن إجراء اختبار بصري مع Puppeteer؟
تقنيًا نعم، لكن يجب بناء كل شيء بنفسك. يتيح Puppeteer التقاط لقطات الشاشة، لكن المقارنة وإدارة المراجع واكتشاف الفروقات يجب تنفيذها بمكتبات طرف ثالث. ممكن لكنه مستهلك للوقت وهش.
هل يدعم Puppeteer متصفحات أخرى غير Chrome؟
يدعم Puppeteer بشكل أساسي Chromium و Chrome. يوجد دعم تجريبي لـ Firefox، لكنه يبقى محدودًا وغير موثوق للاستخدام في الإنتاج. Safari/WebKit غير مدعوم. هذا أحد الأسباب الرئيسية لتفضيل Playwright للاختبار متعدد المتصفحات.
هل يجب معرفة البرمجة لاستخدام Playwright أو Puppeteer؟
نعم، كلتا الأداتين تتطلبان مهارات برمجة (JavaScript أو TypeScript بشكل أساسي، بالإضافة إلى Python و C# لـ Playwright). إنهما مصممتان للمطورين ومهندسي QA التقنيين. للفرق بدون مهارات تطوير، أداة بدون كود مثل Delta-QA هي بديل أكثر سهولة في الوصول.
ما مستقبل Puppeteer مقابل Playwright؟
يبقى Puppeteer مدعومًا من Google ويستمر في التطور، خاصة بدعم بروتوكول WebDriver BiDi. ومع ذلك، فإن وتيرة ابتكار Playwright أسرع بشكل ملحوظ، والمجتمع يهاجر تدريجيًا. للمشاريع الجديدة في 2026، يوصي معظم الخبراء بـ Playwright.
هل يمكن لـ Delta-QA أن تحل محل Playwright للاختبار البصري؟
لا تحل Delta-QA محل Playwright للأتمتة الوظيفية (ملء النماذج، محاكاة رحلات المستخدم). ومع ذلك، للاختبار البصري البحت — اكتشاف انحدارات الواجهة — تقدم Delta-QA نهجًا بدون كود أسرع في الإعداد ومتاحًا للفريق بأكمله، وليس فقط للمطورين.
للمزيد من القراءة
- Playwright مقابل Selenium للاختبار البصري: أيهما تختار في 2026؟
- Delta-QA مقابل Playwright: مقارنة صادقة للاختبار البصري في 2026
- الاختبار البصري لـ React Native: التطبيقات المحمولة، الطفل المهمل للاختبار البصري
هل تريد اكتشاف الانحدارات البصرية دون كتابة سطر شيفرة واحد؟