اختبار الروابط والتنقل

لماذا يهم

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

والروابط تتعطل أيضاً دون أن يعدّل أحد الصفحة: يُحذف منتج، أو تُعاد تسمية قسم. لذلك فالتنقل خطر انحدار (Regression) في كل إصدار، وعيوبه سهلة الإبلاغ: صفحة واحدة، ورابط واحد، ووجهة خاطئة واحدة.

ما الذي تفحصه في كل رابط

يعمل الرابط، أي العنصر <a href> من درس HTML للمختبِرين، حين تكون وجهته موجودة، ومطابقة لنصه، ويُفتح كما قرر الفريق:

• الوجهة: رابط «سياسة الإرجاع» الذي يفتح مركز المساعدة العام عيب، مع أنه لا يظهر أي خطأ.
• نص الرابط: عشرة روابط «اقرأ المزيد» لا يمكن التمييز بينها في قائمة الروابط لدى قارئ الشاشة. ويشترط معيار النجاح ⁦2.4.4⁩ «غرض الرابط (ضمن السياق)» (Link Purpose (In Context)) في WCAG 2.2 أن يتضح الغرض من النص وسياقه.
• طريقة الفتح (Target): السمة target="_blank" تفتح علامة تبويب جديدة لا يعمل فيها زر الرجوع. افحص قاعدة الفريق (غالباً: المواقع الخارجية والمستندات فقط)، وتأكد أن هذه الروابط تذكر ذلك.
• الروابط داخل الصفحة (Anchors): الرابط #delivery ينقل إلى id="delivery". والمطابقة حرفية (فالرابط #Delivery لا يجد شيئاً)، والوجهة المفقودة تفشل بصمت، بلا خطأ ولا تمرير. ويجب ألا تغطي الترويسة الثابتة (Sticky header) عنوان القسم.
• المخططات (Schemes): mailto: وtel: يفتحان تطبيق البريد أو الهاتف بالعنوان أو الرقم الصحيح.
• البيئات والترميز: لا يشير أي رابط إلى localhost أو إلى بيئة أخرى، والمسار العربي المرمَّز بترميز النسبة المئوية (Percent-encoding)، حيث %D8%B9 هو «ع»، يعمل عند النقر عليه وعند لصقه.

جرّبها: محلّل عناوين URL جرّبها: مفكّك ترميز URL

الروابط المعطّلة ورموز الحالة ونظرة أولى على إعادة التوجيه

رمز حالة HTTP الذي يعيده عنوان الرابط، كما يظهر في لوحة Network ضمن أدوات المطور (DevTools) أو في أداة لفحص الروابط، يُظهر إن كان معطّلاً. 200 OK: وُجدت الصفحة. 404 Not Found: لم توجد. 410 Gone: أُزيلت عمداً (RFC 9110). أما رمز 5xx أو انتهاء المهلة فإخفاق في الخادم أو الشبكة لا رابط خاطئ: أعد المحاولة، ثم أبلغ عنه مع الوقت وعنوان URL.

ورمز الحالة وحده لا يكفي: فصفحة «غير موجودة» تعيد 200، وتُسمّى Soft 404، تمرّ من أداة فحص الروابط البسيطة مع أن محركات البحث تعاملها كخطأ. والجزء #fragment لا يصل إلى الخادم أبداً، فالمتصفح وحده يُظهر إن كان الرابط داخل الصفحة يعمل.

وإعادة التوجيه (Redirect) استجابة من الفئة 3xx تحمل ترويسة Location فيها عنوان آخر يطلبه المتصفح بعد ذلك. ويعرّف RFC 9110 الرمزين 301 Moved Permanently و308 Permanent Redirect للانتقال الدائم، و302 Found و307 Temporary Redirect للانتقال المؤقت، ويُظهر خيار Preserve log في لوحة Network كل قفزة. ويتعمق درس إعادة التوجيه في HTTP أكثر؛ أما هنا فتأكد مما يلي:

• العناوين القديمة من الإشارات المرجعية ونتائج البحث تصل إلى الصفحة الجديدة المطابقة، لا إلى الصفحة الرئيسية.
• قفزة واحدة، بلا سلسلة ولا حلقة (فالحلقة تنتهي بخطأ «too many redirects»).
• سلسلة الاستعلام (Query string) مثل ?page=2&sort=price تبقى.
• روابط صفحاتك تشير مباشرةً إلى العنوان النهائي؛ فالتتبع أدناه يعمل لكنه يهدر قفزتين.

GET http://shop.example.com/help/returns
    301 Moved Permanently   Location: https://shop.example.com/help/returns
GET https://shop.example.com/help/returns
    301 Moved Permanently   Location: https://shop.example.com/help/returns/
GET https://shop.example.com/help/returns/
    200 OK                  page title: "Returns and refunds"

جرّبها: فاحص إعادة التوجيه جرّبها: مرجع رموز حالة HTTP

القوائم ومسار التنقل وزر الرجوع والروابط العميقة وصفحة ⁦404⁩

اختبر التنقل بالطريقة التي يصل بها الناس فعلاً، لا بالنقر إلى الأمام من الصفحة الرئيسية فقط:

• القوائم: كل بند يفتح الصفحة الصحيحة في كل لغة، والقسم الحالي مميَّز، والقوائم المنسدلة وقائمة الجوال تعمل بالفأرة واللمس ولوحة المفاتيح. ويتوقع معيار النجاح ⁦3.2.3⁩ «التنقل المتسق» (Consistent Navigation) في WCAG 2.2 أن تأتي القوائم المتكررة بالترتيب النسبي نفسه في كل صفحة.
• مسار التنقل (Breadcrumb): يُظهر موقع الصفحة في هيكل الموقع، لا الطريق الذي نقر عليه المستخدم. فالعناصر السابقة تربط بمستوياتها، والأخير هو الصفحة الحالية، ويُميَّز مثلاً بالسمة aria-current="page". وفي العربية يسير المسار من اليمين إلى اليسار.
• الرجوع: يستعيد زر الرجوع العرض السابق بموضع التمرير وعوامل التصفية وصفحة النتائج. وتطبيقات الصفحة الواحدة (SPA) تغيّر عنوان URL عبر History API (history.pushState)، فتأكد أن الرجوع يغيّر المحتوى دون الخروج من التطبيق. وبعد تسجيل الخروج قد تعود نسخة محفوظة من صفحة محمية، لكن أي إعادة تحميل أو إجراء منها يجب أن يطلب تسجيل الدخول.
• الروابط العميقة (Deep links): عنوان URL لعرض محدد، مثل بحث مُصفّى، يفتح ذلك العرض في نافذة خاصة جديدة، بعد تسجيل الدخول إن لزم، لا الصفحة الرئيسية. وفي تطبيق الصفحة الواحدة أعد تحميل مسار عميق أيضاً: فالخادم غير المهيأ لمسارات التطبيق يجيب بالرمز 404.
• صفحة ⁦404⁩: يجب أن يعيد /no-such-page أو /products/999999 رمز الحالة 404، وأن تشرح الصفحة المشكلة بلغتها، وتُبقي الترويسة والقائمة، وتعرض طريقاً للمتابعة (الرئيسية، البحث)، ولا تُظهر تتبّع مكدس (Stack trace).

جرّبها: محلّل سلاسل الاستعلام

مثال تطبيقي: فئة أُعيدت تسميتها في إصدار

ملاحظة الإصدار: «تصبح فئة الهواتف (Phones) فئة الجوالات (Mobiles). تنتقل العناوين من /phones/... إلى /mobiles/...، ويُعاد توجيه العناوين القديمة توجيهاً دائماً». وهذه فحوص المختبِر؛ وقد فشلت الحالة NAV-03 على Staging كما يسجّل تقرير الخطأ.

• NAV-01: بند القائمة «الجوالات» يفتح /mobiles ويكون مميَّزاً فيها.
• NAV-02: /phones ← 301 ← /mobiles ← 200، في قفزة واحدة.
• NAV-03: /phones/nova-12 ← 301 ← /mobiles/nova-12، أي المنتج نفسه لا الفئة.
• NAV-04: /phones?page=2 ← الصفحة ⁦2⁩ من الجوالات.
• NAV-05: مسار التنقل في صفحة Nova 12 هو «الرئيسية › الجوالات › Nova 12»، وروابطه تعمل.
• NAV-06: صفِّ بحثاً، وانتقل إلى الصفحة ⁦2⁩، وافتح منتجاً، ثم اضغط زر الرجوع ← الصفحة ⁦2⁩ مع بقاء عامل التصفية.
• NAV-07: العنوان /mobiles/nova-12 في نافذة خاصة يفتح المنتج، و/mobiles/no-such-phone يعيد 404.

Title:    عناوين المنتجات القديمة يُعاد توجيهها إلى فئة الجوالات بدلاً من المنتج
URL:      https://staging.shop.example.com/phones/nova-12
Build:    web 3.8.0 on staging
Actual:   301 -> /mobiles -> 200 (صفحة الفئة)
Expected: 301 -> /mobiles/nova-12 -> 200 (صفحة المنتج Nova 12)
Impact:   الإشارات المرجعية والروابط المشارَكة ونتائج البحث لكل منتج

أسئلة شائعة

المراجع

• RFC 9110: HTTP SemanticsIETF · 2022معاني أساليب HTTP وحقول الترويسات ورموز الحالة والتفاوض على المحتوى، بغضّ النظر عن إصدار البروتوكول.
• HTML Living StandardWHATWGلغة HTML، بما فيها مراجع المحارف المسماة (الكيانات) وقواعد التحليل التي تتبعها المتصفحات.
• Web Content Accessibility Guidelines (WCAG) 2.2W3C · 2024توصية W3C التي تحدد معايير النجاح القابلة للاختبار لإتاحة محتوى الويب، مرتّبةً تحت أربعة مبادئ وثلاثة مستويات مطابقة (A وAA وAAA).
• Accessible Rich Internet Applications (WAI-ARIA) 1.2W3C · 2023توصية W3C التي تعرّف أدوار ARIA وحالاتها وخصائصها — أي كيف تُعلن عناصر الواجهة المخصّصة معناها للتقنيات المساعدة.