النقاط الرئيسية

  • اختبر تسميات ومتطلبات وتنسيقات تبديل هذا البلد معًا
  • فصل المدخلات الأولية والقيم الطبيعية ونتائج الخادم
  • قم بتكوين رموز الإكمال التلقائي الدلالية والتسميات المرئية المترجمة
  • الحفاظ على المدخلات بعد الفشل ونقل التركيز إلى خطأ مفيد

التأليف والمراجعة

مبادئ التحرير
كتبه
فريق التحرير لمولد العناوين العشوائية
راجعه
النماذج وفريق مراجعة ضمان الجودة
آخر تحديث جوهري
تمت إضافة تبديل البلد، والحقول الديناميكية، ورموز الإكمال التلقائي، ومصفوفة اختبار متعددة الطبقات.

الطبقة الأولى: حالة تبديل البلد

قد يؤدي تحديد بلد إلى إعادة تسمية المدينة وتغيير الولاية إلى مقاطعة أو محافظة وإخفاء منطقة واستبدال تلميح الرمز البريدي. تأكد من أن واجهة المستخدم وAPI مشتقة من نفس تكوين البلد.

لا تقم أبدًا بمسح النص الذي تم إدخاله بصمت عند تغيير البلد. قم بالتأكيد أولاً أو احتفظ بالمسودات الخاصة بكل بلد، ثم قم بقفل هذا السلوك في اختبارات الانحدار.

البلدالتسميات المترجمةالسلوك الرئيسي
الولايات المتحدةالدولة / الرمز البريديحالة مكونة من حرفين ورمز ZIP مكون من خمسة أرقام
كنداالمحافظة / الرمز البريديA1A 1A1 بمساحة
المملكة المتحدةمدينة البريد / الرمز البريديالمقاطعة عادة اختيارية
اليابانالمحافظة / الرمز البريديرمز مكون من سبعة أرقام ومستويات متعددة
أسترالياالضاحية / الولاية / الرمز البريديالرمز البريدي المكون من أربعة أرقام

الطبقة الثانية: HTML الدلالي والملء التلقائي

الاسم والتسمية والإكمال التلقائي لها وظائف مميزة. تشرح التسميات المعنى المحلي؛ الاسم يتبع عقد API؛ يستخدم الإكمال التلقائي رموزًا موحدة مثل البلد، وaddress-line1، وaddress-level1، وaddress-level2، وpostal-code.

لا تقم بدمج عنوان الشارع مع address-line1 وaddress-line2 لتمثيل العنوان نفسه.

<input name="addressLine1" autocomplete="shipping address-line1" />
<input name="locality" autocomplete="shipping address-level2" />
<input name="region" autocomplete="shipping address-level1" />
<input name="postalCode" autocomplete="shipping postal-code" />

الطبقة الثالثة: التحقق من الصيغة والتطبيع والمطابقة

يسأل التحقق من الصحة ما إذا كان شكل الإدخال مقبولاً. التطبيع يوحد الحالة والفواصل. تتم مقارنة التحقق مع البيانات المرجعية. امنحهم حالات ورسائل منفصلة.

تجنب إعادة الكتابة عند كل ضغطة على المفتاح. قم بالتطبيع عند التمويه أو الإرسال وإظهار التغيير الناتج.

  • التمييز بين الأخطاء الفارغة والطويلة جدًا والأخطاء غير الصالحة
  • احتفظ بـ rawValue قبل التطبيع
  • لا تقم بمسح النموذج بعد انتهاء مهلة البحث
  • لا تقم أبدًا بتسمية مطابقة التعبير العادي على أنها قابلة للتسليم

الطبقة الرابعة: استرداد الأخطاء وإمكانية الوصول إليها

بعد الفشل، قم بتركيز ملخص الخطأ أو الحقل الأول غير الصالح. قم بتوصيل الرسائل باستخدام aria-describedby، ولا تعتمد أبدًا على اللون وحده، واحتفظ بقيم الحقول الأخرى.

تحديد بلد اختبار لوحة المفاتيح وقوائم الاقتراحات وروابط الأخطاء والتركيز بعد الإرسال. حدد موقع الاختبارات الآلية حسب التصنيفات أو الأدوار بدلاً من العناصر النائبة الخاصة بكل بلد.

الطبقة الخامسة: تأكيد حمولة API الحقيقية

التقط الطلب المقدم وقم بتأكيد countryCode وregionCode وpostalCode وrawAddress وnormalizedAddress. اقرأ السجل مرة أخرى لاكتشاف فشل الترميز والتحويل الفارغ.

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

مارس سلوك البحث من جهة خارجية مع استجابات بطيئة، وتقييد المعدل، وأخطاء الخادم، وعدم وجود اقتراحات، والعديد من الاقتراحات المعقولة. يجب عدم ذكر فشل الشبكة لأن عنوانك خاطئ. إن عدم توفر النظام والإدخال غير المقبول هما حالتان مختلفتان ولهما حلول مختلفة.

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

  • قم بالتقاط صورة للطلب النهائي JSON
  • تأكد من أن مسح حقل اختياري يؤدي إلى إزالة قيمته القديمة
  • محاكاة المهلة، 429، 500، لا نتيجة، ونتائج متعددة
  • نسخة منفصلة لخطأ النظام عن نسخة input-error

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

هل يجب على كل دولة إظهار حقل الولاية؟

لا، قم بإعادة تسميتها بالمقاطعة أو المحافظة أو المنطقة حيثما كان ذلك مناسبًا، وقم بإخفائها حيث لا تتطلب الدولة هذا المستوى.

هل يمكن للإكمال التلقائي أن يحل محل التصنيف المرئي؟

لا، الإكمال التلقائي يخدم المتصفح؛ الملصقات تخدم الأشخاص والتكنولوجيا المساعدة.

هل يمكن لعملية بحث فاشلة مسح النموذج؟

لا ينبغي. الحفاظ على المدخلات وتحديد الحقل والسماح للمستخدم بتصحيحه في مكانه.

المصادر والقراءات

  1. MDN: سمة الإكمال التلقائي HTML
  2. WHATWG: أسماء حقول الملء التلقائي للعناوين