الاختبار عبر المتصفحات والأجهزة
يتحقق الاختبار عبر المتصفحات (Cross-Browser Testing) من أن تطبيق الويب يعمل بشكل صحيح في المتصفحات التي يستخدمها مستخدموه فعلاً. ويمدّ الاختبار عبر الأجهزة (Cross-Device Testing) هذا التحقق إلى الأجهزة نفسها: هواتف وأجهزة لوحية وحواسيب تختلف في نظام التشغيل والشاشة وطريقة الإدخال والعتاد. فصفحة دفع تعمل في Chrome على حاسوب محمول بنظام Windows قد تعرض مع ذلك ملخص طلب مختلّاً في Safari على جهاز iPhone قديم، أو شرحاً للرسوم لا يستطيع أحد فتحه من هاتفه.
لا يستطيع أحد اختبار كل متصفح على كل جهاز، فالمهارة في الاختيار: تجميع المتصفحات حسب المحرك، وتحويل بيانات الاستخدام إلى مصفوفة دعم، وتحديد المكان الذي يُشغَّل فيه كل اختبار.
لماذا يهم
تطبّق المتصفحات معايير الويب نفسها بشيفرة مختلفة وبسرعات مختلفة وبإعدادات افتراضية مختلفة. فقاعدة CSS أو عنصر نموذج أو واجهة JavaScript تعمل في محرك ما قد تكون غائبة أو تتصرف بشكل مختلف في محرك آخر، ولا يصل الإخفاق إلا إلى مستخدمي ذلك المتصفح: مجموعة كاملة من العملاء لا يستطيعون إتمام مهمة، بينما لا يُظهر أي متصفح في المكتب أي خلل.
الاختبار القليل يترك المتصفح الأكثر استخداماً على الهواتف دون فحص، واختبار كل شيء في كل مكان يضاعف الجهد بفائدة قليلة. أما الاختيار الموثّق المبني على البيانات فيتيح للمختبِر أن يقول بدقة ما الذي اختُبر، وأين، وما الخطر المتبقي.
ما الذي يتغيّر بين المتصفحات والأجهزة
سأل درس اختبار التصميم المتجاوب (Responsive Testing) هل يتكيّف التخطيط مع حجم منفذ العرض (Viewport). أما السؤال هنا فمختلف: هل تتصرف الصفحة نفسها بشكل صحيح في محرك آخر، وعلى نظام تشغيل آخر، وبطريقة إدخال أخرى؟ تشغّل الرحلات الحرجة الموجودة، مثل تسجيل الدخول والبحث وإتمام الشراء، في كل بيئة وتراقب هذه الفروق:
- المحرك وإصداره: كيف تُعرض HTML وCSS، وما ميزات CSS وواجهات JavaScript المتاحة.
- نظام التشغيل: الخطوط المثبّتة (وهي مهمة للنص العربي والديفاناغري)، ومنتقيات التاريخ والقوائم المنسدلة الأصلية، ونوافذ الملفات والأذونات.
- طريقة الإدخال: اللمس أو الفأرة أو لوحة المفاتيح. فالقائمة التي لا تُفتح إلا بتمرير المؤشر فوقها (Hover) ليس لها مُشغِّل موثوق على شاشة اللمس.
- الجهاز والإعدادات: لوحة مفاتيح على الشاشة تغطي نصف الصفحة، وأشرطة أدوات تظهر وتختفي، وهاتف اقتصادي بطيء، والتكبير، والوضع الداكن، وحظر ملفات تعريف الارتباط من الأطراف الثالثة.
محركات المتصفحات: عُدّ المحركات لا أسماء المتصفحات
محرك المتصفح (Browser Engine) هو الجزء الذي يحوّل HTML وCSS وJavaScript إلى الصفحة التي تراها. وتنتمي المتصفحات التي يستخدمها معظم الناس إلى ثلاث عائلات من المحركات: Blink في Chrome وMicrosoft Edge وOpera وSamsung Internet وغيرها من المتصفحات المبنية على Chromium، وهو قاعدة الشيفرة مفتوحة المصدر التي يقوم عليها Chrome؛ وGecko في Firefox؛ وWebKit في Safari. ولكل عائلة أيضاً محرك JavaScript خاص بها: V8 وSpiderMonkey وJavaScriptCore.
وهذا يغيّر طريقة حسابك للتغطية. إذ يتشارك Chrome وEdge على Windows المحرك Blink، لذا يظهر عيب العرض فيهما معاً عادةً، ولا يضيف المتصفح الثاني إلا القليل من تغطية المحرك، وإن كان له ملء تلقائي (Autofill) وإعدادات خصوصية خاصة به. وعلى iPhone وiPad اشترطت Apple منذ زمن أن تستخدم المتصفحات WebKit، ولا تسمح بمحركات أخرى إلا في بعض المناطق، لذا يتصرف Chrome على iPhone عادةً مثل Safari، لا مثل Chrome على Android.
والإصدارات مهمة أيضاً: لا يُحدَّث Safari على iPhone إلا مع نظام iOS، فجهاز iPhone الذي لا يستطيع تثبيت أحدث إصدار من iOS يبقى على Safari أقدم. وقبل أن يعتمد الفريق على ميزة CSS أو JavaScript جديدة، راجع جدول توافق المتصفحات (Browser compatibility) في صفحة الميزة على MDN.
يمكن معرفة متصفح من أبلغ عن الخطأ من ترويسة الطلب User-Agent، لكن بحذر: إذ يعرّف Chrome على iOS مثلاً نفسه بالرمز CriOS، مع أنه يعرض الصفحة بمحرك WebKit.
مصفوفة الدعم: من بيانات الاستخدام إلى الطبقات
مصفوفة الدعم (Support Matrix) هي القائمة المتفق عليها لتركيبات المتصفح ونظام التشغيل والجهاز التي يدعمها المنتج، مع عمق الاختبار الذي تناله كل تركيبة. مكانها خطة الاختبار، وتتفق عليها فرق المنتج والتطوير وضمان الجودة معاً، لأنها وعد للمستخدمين أيضاً.
ابنِها من الأدلة لا من الأجهزة التي يصادف أن يملكها الفريق: بيانات تحليلات تحسب المهام المكتملة مثل الطلبات إلى جانب الجلسات، والمتصفحات المذكورة في العقد، والتركيبات التي تسببت في حوادث. ثم وزّع الصفوف على طبقات:
- الطبقة 1 (Tier 1): معظم الزيارات أو الإيرادات. تُشغَّل عليها الرحلات الحرجة وحزمة الانحدار مع كل إصدار، على أجهزة حقيقية.
- الطبقة 2 (Tier 2): أصغر لكنها مؤثرة. يُشغَّل عليها اختبار دخان (Smoke) للرحلات الحرجة مع كل إصدار.
- الطبقة 3 (Tier 3): بأفضل جهد. تُفحص قبل الإصدارات الكبرى أو عندما يبلّغ مستخدم عن مشكلة.
- قاعدة المحرك: كل محرك لدى مستخدميك ينال تركيبة واحدة على الأقل في الطبقة 2 أو أعلى مهما صغرت حصته، لأنه قد يكشف عيوباً لا يكشفها أي متصفح آخر في المصفوفة.
- القاعدة الزوجية: اللغة وحالة الحساب والتكبير والوضع الداكن تتفاعل مع المحرك أيضاً. ثبّت منصات الطبقة، واجمع بقية المعاملات بالاختيار الزوجي (Pairwise)، كما في درس الاختبار الزوجي.
- اتفق مع الفريق على ما يراه مستخدمو المتصفحات غير المدعومة، مثل رسالة واضحة بدلاً من صفحة معطلة، وراجع المصفوفة بانتظام، كل ربع سنة مثلاً.
أين تُشغَّل الاختبارات: متصفحات محلية ومحاكيات ومختبرات أجهزة سحابية
يمكن تثبيت متصفحات سطح المكتب محلياً، مع حدود: إذ لا يعمل Safari إلا على حواسيب Apple، ويحتاج محاكي iOS (iOS Simulator) إلى جهاز Mac عليه Xcode. وشريط أدوات الأجهزة (Device toolbar) في أدوات المطوّرين يغيّر منفذ العرض لا المحرك. أما محاكيات Android ومحاكي iOS فتشغّل متصفحات الجوال دون العتاد الحقيقي، لذا يحتاج اللمس ولوحة المفاتيح على الشاشة والكاميرا وسرعة الهاتف الاقتصادي إلى أجهزة حقيقية.
مختبرات الأجهزة السحابية (Cloud Device Labs)، وتُسمّى أيضاً مزارع الأجهزة (Device Farms)، تؤجّر هواتف وأجهزة لوحية ومتصفحات سطح مكتب حقيقية يستضيفها مزوّد الخدمة. تفتحها من متصفحك لجلسات يدوية أو تشغّل عليها حزماً آلية، مع تسجيل لقطات الشاشة والفيديو والسجلات. وهي تمنح اتساعاً في التغطية دون شراء أجهزة، لكن خطّط لحدودها:
- بيئة الاختبار غير المتاحة للعموم تحتاج إلى النفق الآمن (Tunnel) الذي يوفره المختبر، وهو اتصال يتيح لأجهزة المختبر الوصول إلى شبكتك الخاصة، أو إلى قائمة سماح (Allow-list) بعناوين المختبر، بالاتفاق مع الفريق المالك للبيئة.
- الأجهزة مشتركة وتُعاد تهيئتها بين الجلسات: استخدم حسابات اختبار وبيانات اصطناعية، ولا تستخدم أبداً بيانات عملاء حقيقية أو حسابات شخصية.
- الشبكة والموقع والسرعة هي شبكة المختبر وموقعه وسرعته لا ما لدى مستخدميك، فلا تحكم على الأداء من هناك.
- الخطط تحدّ من الدقائق والجلسات المتوازية: شغّل الحزم الكاملة على الطبقة 1 واختبارات الدخان على الطبقة 2.
مثال تطبيقي: مصفوفة دعم لمتجر إلكتروني
متجر إلكتروني يخدم عملاء في السعودية بالعربية والإنجليزية. يصدّر الفريق بيانات التحليلات لآخر 90 يوماً، ويضيف المحرك إلى كل صف، ويطبّق قاعدة الطبقات: 10% فأكثر من الجلسات أو الطلبات تعني الطبقة 1، ومن 2% إلى أقل من 10% الطبقة 2، وأقل من 2% الطبقة 3. والأرقام توضيحية.
تصبح في الطبقة 1 ثلاث تركيبات: Safari على iOS، وChrome على Android، وChrome على Windows. ويبقى Chrome على iOS في الطبقة 2 مع أنه يتشارك WebKit مع Safari، لأن شريط أدواته وملأه التلقائي مختلفان. أما Firefox فهو متصفح Gecko الوحيد، وحصته لا تتجاوز 1% في أي مكان، فترفع قاعدة المحرك أكبر تركيباته، Firefox على Windows، إلى الطبقة 2. وفي الطبقة 1 يجمع الاختيار الزوجي المنصات الثلاث مع اللغة (العربية، الإنجليزية) والحساب (زائر، مسجّل الدخول): كل زوج من القيم في 6 تشغيلات بدلاً من 12.
| المتصفح | نظام التشغيل | |||
|---|---|---|---|---|
| Windows | macOS | Android | iOSكل المتصفحات: WebKit | |
| ChromeBlink، وWebKit على iOS | الطبقة 1Blink · 12% · 14% | الطبقة 3Blink · <1% | الطبقة 1Blink · 27% · 22% | الطبقة 2WebKit · 4% · 4% |
| SafariWebKit | خارج المصفوفة: لا يوجد هذا المتصفح أو لا جلسات له | الطبقة 2WebKit · 3% · 4% | خارج المصفوفة: لا يوجد هذا المتصفح أو لا جلسات له | الطبقة 1WebKit · 38% · 41% |
| EdgeBlink، وWebKit على iOS | الطبقة 2Blink · 5% · 7% | الطبقة 3Blink · <1% | الطبقة 3Blink · <1% | الطبقة 3WebKit · <1% |
| Samsung InternetBlink | خارج المصفوفة: لا يوجد هذا المتصفح أو لا جلسات له | خارج المصفوفة: لا يوجد هذا المتصفح أو لا جلسات له | الطبقة 2Blink · 7% · 5% | خارج المصفوفة: لا يوجد هذا المتصفح أو لا جلسات له |
| FirefoxGecko، وWebKit على iOS | الطبقة 2Gecko · 1% · 1% | الطبقة 3Gecko · <1% | الطبقة 3Gecko · <1% | الطبقة 3WebKit · <1% |
- الطبقة 1: الرحلات الحرجة وحزمة الانحدار على أجهزة حقيقية مع كل إصدار
- الطبقة 2: اختبار دخان للرحلات الحرجة مع كل إصدار
- الطبقة 3: بأفضل جهد، قبل الإصدارات الكبرى أو عند بلاغات المستخدمين
- رفعتها قاعدة المحرك من الطبقة 3: أكبر تركيبة تستخدم Gecko
- WebKit · 38% · 41%المحرك · حصة الجلسات · حصة الطلبات
أرقام توضيحية من تحليلات متجر واحد لآخر 90 يوماً. ابنِ مصفوفتك من بياناتك أنت.
- في WebKit فقط: على أجهزة iPhone التي لا يمكن تحديثها إلى ما بعد إصدار iOS قديم، يفقد ملخص الطلب تخطيطه لأنه يستخدم ميزة CSS لا تدعمها إصدارات Safari الأقدم. ويفشل Chrome على الجهاز نفسه بالطريقة نفسها: عيب واحد في المحرك، لا عيبان في متصفحين.
- في Edge فقط: يضع الملء التلقائي اسم الحي في حقل الشارع لأن حقول العنوان تفتقد سمات
autocomplete. ويخمّن Chrome بشكل صحيح؛ فالسبب في النموذج، وقد كشفته ميزة متصفح واحد. - في كل أجهزة اللمس: شرح رسوم التوصيل لا يُفتح إلا بتمرير الفأرة فوقه، فلا يستطيع مستخدمو الهواتف فتحه. ولم يكن أي تشغيل على سطح المكتب ليكشفه.
النسخة النصية
Online shop — last 90 days (illustrative numbers)
Browser · OS Engine Sessions Orders Tier
Safari · iOS WebKit 38% 41% 1
Chrome · Android Blink 27% 22% 1
Chrome · Windows Blink 12% 14% 1
Samsung Internet · Android Blink 7% 5% 2
Edge · Windows Blink 5% 7% 2
Chrome · iOS WebKit 4% 4% 2
Safari · macOS WebKit 3% 4% 2
Firefox · Windows Gecko 1% 1% 2 (engine rule)
Other, each below 1% mixed 3% 2% 3
Chrome · macOS, Edge · macOS / Android / iOS,
Firefox · macOS / Android / iOS
Tier rule: 10% or more of sessions or orders → 1; 2% up to 10% → 2; under 2% → 3أخطاء شائعة
- عدّ أسماء المتصفحات بدلاً من المحركات: Chrome وEdge وOpera على Windows ثلاثة متصفحات لكنها محرك واحد، ولم يُختبر أي متصفح WebKit.
- وصف الصفحة بأنها «اختُبرت على iPhone» بعد فحصها في شريط أدوات الأجهزة أو في نافذة سطح مكتب ضيقة.
- بناء المصفوفة من أجهزة الفريق نفسه بدلاً من التحليلات، أو عدم مراجعتها أبداً.
- تشغيل حزمة الانحدار كاملة على كل تركيبة بدلاً من استخدام الطبقات والاختيار الزوجي.
- الإبلاغ بأن الصفحة «لا تعمل على الجوال» دون ذكر المتصفح وإصداره ونظام التشغيل والجهاز، ودون تجربة متصفح آخر بالمحرك نفسه.
- استخدام بيانات عملاء حقيقية أو حسابات شخصية على أجهزة مختبرات سحابية مشتركة.
من منظور ضمان الجودة
يُتفق على مصفوفة الدعم أثناء تخطيط الاختبار مع مالك المنتج والمطورين ومن يملك بيانات التحليلات. اسأل مبكراً: أي المتصفحات يعد بها العقد؟ وماذا يرى مستخدم المتصفح غير المدعوم؟ وهل تعتمد ميزة مخطط لها على CSS أو JavaScript جديدة تحتاج إلى فحص توافق؟
أثناء التنفيذ ابدأ كل ميزة على الطبقة 1، ثم انتقل إلى الطبقتين 2 و3. وعندما يفشل شيء، أعد إنتاجه في متصفح ثانٍ بالمحرك نفسه وفي متصفح بمحرك مختلف، ليقول التقرير «في WebKit فقط» أو «في كل أجهزة اللمس». وسجّل في تقرير الخطأ المتصفح وإصداره والمحرك ونظام التشغيل وطراز الجهاز واللغة والحساب، وسجّل إصدار المصفوفة في تقرير إتمام الاختبار (Test Completion Report).
تمرين عملي
خطّط تغطية المتصفحات لموقع حجز عيادة
موقع لحجز العيادات يتيح زيارات العيادة والاستشارات المرئية، بالعربية أو الإنجليزية، للزوار والمستخدمين المسجّلين. استخدم بيانات التحليلات أدناه وقاعدة الطبقات من المثال التطبيقي لبناء مصفوفة الدعم، ثم اجمع منصات الطبقة 1 مع بقية المعاملات بالاختيار الزوجي، وحدّد أين تُشغَّل كل طبقة.
Clinic booking site — last 90 days (illustrative numbers)
Browser · OS Sessions Bookings
Chrome · Android 41% 36%
Safari · iOS 30% 33%
Chrome · Windows 14% 17%
Edge · Windows 6% 7%
Samsung Internet · Android 5% 3%
Firefox · Windows 1% 1%
Other, each below 1% 3% 3%- أضف المحرك إلى كل صف.
- أعطِ كل صف طبقة، ثم طبّق قاعدة المحرك.
- ابنِ مجموعة زوجية: منصة الطبقة 1 × اللغة × الحساب × نوع الحجز.
- حدّد أين تُشغَّل كل طبقة، واكتب أسئلتك لمالك المنتج.
إظهار الإجابة النموذجية
المحركات: Blink لكلٍّ من Chrome على Android، وChrome على Windows، وEdge، وSamsung Internet؛ وWebKit لـSafari على iOS؛ وGecko لـFirefox. الطبقة 1: Chrome على Android، وSafari على iOS، وChrome على Windows. الطبقة 2: Edge على Windows، وSamsung Internet على Android، وFirefox على Windows الذي رفعته قاعدة المحرك لأن Firefox متصفح Gecko الوحيد. وتبقى البقية في الطبقة 3.
المجموعة الزوجية، 6 تشغيلات بدلاً من 24: (1) Chrome على Android، عربي، زائر، عيادة؛ (2) Chrome على Android، إنجليزي، مسجّل، مرئية؛ (3) Safari على iOS، عربي، مسجّل، مرئية؛ (4) Safari على iOS، إنجليزي، زائر، عيادة؛ (5) Chrome على Windows، عربي، زائر، مرئية؛ (6) Chrome على Windows، إنجليزي، مسجّل، عيادة. وقد تعطي أداة التوليد مجموعة مختلفة بحجم مقارب.
أين: الطبقة 1 على أجهزة حقيقية، لأن الاستشارات المرئية تحتاج إلى كاميرا وميكروفون حقيقيين وإلى نوافذ طلب الأذونات. الطبقة 2: Edge وFirefox على حاسوب Windows، وSamsung Internet على هاتف حقيقي أو في مختبر أجهزة سحابي بحسابات اختبار. الطبقة 3 قبل الإصدارات الكبرى.
الأسئلة: ما المتصفحات وأقدم إصدارات iOS وAndroid التي تعد العيادة بدعمها؟ وماذا يرى المريض على متصفح غير مدعوم؟ وهل يجب أن تعمل الاستشارات المرئية في كل متصفحات الطبقة 2؟
أسئلة شائعة
هل الاختبار عبر المتصفحات هو نفسه اختبار التوافق؟
كثير من الفرق تستخدم المصطلحين بالمعنى نفسه. لكن التوافق (Compatibility) في ISO/IEC 25010:2023 يعني التعايش وقابلية التشغيل البيني مع أنظمة أخرى، أما العمل بشكل صحيح في بيئات عتاد وبرمجيات مختلفة فيندرج تحت القابلية للتكيّف (Adaptability) ضمن خاصية المرونة (Flexibility)، التي كانت تُسمّى قابلية النقل (Portability) في إصدار 2011. وأياً كانت التسمية فالاختبار واحد: الرحلات نفسها، تُفحص في البيئات التي يستخدمها مستخدموك.
هل أحتاج إلى اختبار إصدارات المتصفحات القديمة؟
اختبر الإصدارات التي تدعمها مصفوفتك. يتحدّث Chrome وEdge وFirefox تلقائياً كل بضعة أسابيع، فيغطي الإصدار الحالي معظم مستخدميها؛ وراجع تحليلاتك بحثاً عن الاستثناءات مثل أجهزة الشركات المُدارة. أما على iPhone فإصدار Safari يتبع إصدار iOS، فأدرج أقدم إصدار iOS تدعمه. وتشغّل بعض الفرق أيضاً الإصدارات التجريبية (Beta) من المتصفحات لتكتشف المشكلات قبل المستخدمين.
كيف أعرف المتصفح الذي استخدمه من أبلغ عن الخطأ؟
اسأله أولاً، ثم اقرأ ترويسة User-Agent في طلبه بحذر: كل المتصفحات تقريباً تبدأها بالنص Mozilla/5.0، والمتصفحات المبنية على Chromium تذكر Safari أيضاً، وChrome على iOS يضيف CriOS، وكثيراً ما يكون إصدار نظام التشغيل مجمَّداً أو ملتبساً: فChrome على Android يعلن Android 10; K أياً كان الإصدار والطراز الحقيقيان، وما زال Windows 11 يظهر على أنه Windows NT 10.0 مثل Windows 10. وتقسّم أداة محلّل User-Agent السلسلة إلى المتصفح والمحرك ونظام التشغيل ونوع الجهاز.
هل تغني الأتمتة عن الفحص اليدوي عبر المتصفحات؟
جزئياً. تستطيع اختبارات واجهة المستخدم الآلية تشغيل الفحوص الوظيفية نفسها في Chromium وFirefox وWebKit مع كل بناء: يشغّل Playwright نسخه الخاصة من المحركات الثلاثة، ويقود Selenium WebDriver المتصفحات المثبّتة. لكن نسخة WebKit ليست Safari نفسه، والاختبار الآلي لا يفحص إلا ما يتحقق منه صراحةً؛ فلا يلاحظ تخطيطاً مختلّ المحاذاة أو هدف لمس يصعب الضغط عليه. لذا أبقِ جولات يدوية أو استكشافية قصيرة على الطبقتين 1 و2، وبعض التشغيلات على Safari الحقيقي.
المراجع
- ISO/IEC 25010:2023 — Systems and software Quality Requirements and Evaluation (SQuaRE) — Product quality modelنموذج جودة المنتج: الملاءمة الوظيفية وكفاءة الأداء والتوافق وقابلية التفاعل والموثوقية والأمان وقابلية الصيانة والمرونة.
- ISTQB Certified Tester Foundation Level (CTFL) v4.0المنهج التأسيسي لاختبار البرمجيات: مستويات الاختبار وأنواعه وتقنيات تصميم الاختبارات وإدارة الاختبار والأدوات.
- User-Agent header — MDNصيغة ترويسة User-Agent والسلاسل التي ترسلها المتصفحات والزواحف الرئيسية.
- Playwright Documentationالتوثيق الرسمي لـ Playwright، إطار الاختبار الشامل الذي يشغّل Chromium وWebKit وFirefox.
تدرّب بأدوات متقن
تحليل سلاسل User-Agent إلى المتصفح والإصدار والمحرك ونظام التشغيل ونوع الجهاز مع كشف الروبوتات.
افحص ترويسات الطلب التي يرسلها متصفحك أو عميلك، مع شرح لكل منها.
ولّد أصغر مجموعة اختبارات زوجية (all-pairs) من المعاملات وقيمها.
ولّد سيناريوهات اختبار عالية المستوى تغطي الجوانب الوظيفية والسلبية والأمنية وسهولة الاستخدام والتوافق لأي ميزة.
للتعمّق أكثر
تقدّمك في هذا الموضوع
سجّل الدخول لتتابع تقدّمك
علّم الموضوعات مكتملة، وتابع من حيث توقفت، وافتح امتحانات التخصص.