‏زر جديد قد يغيّر التخطيط بأكمله: كيف تساعد طرق العرض الثابتة للمقارنة

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

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

‏دوّن ما ينبغي أن يتغير وما يجب أن يبقى

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

‏جهّز ثلاث حالات للمحتوى: عنوانًا قصيرًا، وعنوانًا طويلًا، وعنوانًا مع شرط إضافي. استخدم التفاصيل نفسها قبل التغيير وبعده. فالمقارنة التي تستخدم نصًا مؤقتًا مريحًا قد تُخفي بالضبط نقص المساحة الذي يظهر لاحقًا مع المحتوى الحقيقي.

‏اختر كذلك عرضًا واسعًا واحدًا وعرضًا ضيقًا واحدًا على الأقل. هذه العروض جزء من السؤال، وليست حكمًا شاملًا على جميع الأجهزة. وتختبر الحالة الضيقة ما إذا كانت العلاقة تصمد حين تكون المساحة قليلة.

‏المرجع يحتاج إلى بيئة مضبوطة

‏قد يؤثر المتصفح ونظام التشغيل والخطوط وظروف أخرى في الالتقاط. ولذلك فإن صورة «قبل» من بيئة مختلفة تُعدّ مرجعًا أضعف. حافظ على ثبات البيئة ذات الصلة، ووثّقها مع الاختبار.

‏قد يبدو مثال قصير خاص بنا باستخدام Playwright لصفحة اختبار مُعدّة على النحو التالي. وهو يفترض مشروعًا سبق إعداده مع baseURL مناسب، ولم يُشغَّل لأجل هذا المقال:

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

test('Offer card stays readable when narrow', async ({ page }) => {
  await page.setViewportSize({ width: 390, height: 844 });
  await page.goto('/angebot-demo');
  await expect(page).toHaveScreenshot('angebot-390.png');
});

‏أسماء الصفحة والملفات جزء من المثال التعليمي. وتقارن مقارنة لقطات الشاشة الموثّقة الالتقاطَ بالمرجع. أما العمل التحريري المهم فيبقى التفسير: هل الفرق مقصود، أم أنه يدفع عنصرًا ضروريًا من المحتوى إلى الخارج؟

‏الانحراف هو قبل كل شيء ملاحظة

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

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

‏وبالمثل، فإن المرجع الجديد قرار. قد تبدو الحالة الجديدة المقصودة مختلفة. ولا ينبغي أن تصبح أساس المقارنة إلا بعد تقييم محتواها. وإلا فسيُعلَن أثر جانبي لم يُلاحَظ ببساطة صورةً مستهدفة جديدة.

‏المظهر لا يزال يحتاج إلى مسار النقر الفعلي

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

‏إذا نفّذت التمرين على موقع WordPress خاص بك، فإن نسخة عمل في ‏KENJTEC WordPressBuilder ai ‏يمكنها أن تُبقي الحالة التي تغيّرها منفصلة عن الموقع المباشر. وتُجري مقارنة Playwright بأداتك الخاصة خارج KENJTEC. ثم يكون نقل التغييرات من نسخة العمل خطوة منفصلة، يجب اختيار النطاق المناسب لها.

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

‏المصادر والحالة

‏البحث والتوثيق حتى 25 أكتوبر 2026. ‏المقارنات المرئية‏.