محدد العنصر عقد، وليس إحداثيات

page.locator('.panel > div:nth-child(3) > button.primary') يعمل اليوم. يعمل غدا. يستمر في العمل حتى يقوم المصمم بتحريك الزر فتحة واحدة إلى اليسار، ثم يفشل مجموعتك في ميزة لم يكسرها أحد. أنت لم تكتب الاختبار. لقد كتبت صورة للDOM.

ما يوصي به الكاتب المسرحي بالفعل

وثائق الكاتب المسرحي مباشرة بشكل غير عادي حول هذا الموضوع. يوصي دليل محدد العنصر بإعطاء الأولوية للسمات التي يواجهها المستخدم والعقود الصريحة: getByRole، getByLabel، getByText، getByPlaceholder، getByTestId. تعكس محددات الأدوار كيفية إدراك المستخدمين والتكنولوجيا المساعدة للصفحة. تنشئ معرفات الاختبار عقدًا صريحًا منفصلاً، على حساب كونها غير مرئية للمستخدمين. تظل مستقرة فقط إذا احتفظ المطورون بهذا العقد. يتم توثيق محددات CSS وXPath على أنها هشة لأنها مرتبطة ببنية DOM، وبنية DOM هي ما يتغير.

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

لماذا يلجأ المولدون إلى العادة السيئة أولاً؟

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

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

تدقيق مدته خمس عشرة دقيقة لأي جناح

قم بإعداد اختباراتك لـ page.locator باستخدام سلاسل CSS أو XPath، ولـ getByText المستخدم في العناصر التفاعلية. لكل نتيجة، اطرح سؤالاً واحدًا: هل يحدد هذا المحدد اسم العنصر أو مكانه؟ استبدال الإحداثيات بالعقود:

• الأزرار والروابط: getByRole مع الاسم الذي يمكن الوصول إليه.
• حقول النموذج: getByLabel، أو getByPlaceholder كبديل.
• المحتوى المتكرر أو الديناميكي: تم الاتفاق على data-testid مع المطورين.
• getByText: مفيد لمحتوى النص؛ تفضيل الدور والاسم الذي يمكن الوصول إليه عند النقر فوق عنصر التحكم.

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

فخ الصرامة، ومتى () الأول هو اعتراف

محددات مواقع الكاتب المسرحي صارمة: أي إجراء على محدد يطابق عنصرين يؤدي إلى حدوث انتهاك بدلاً من التخمين. تعامل مع كل خطأ في الوضع الصارم باعتباره سؤال تصميم. إذا كنت بحاجة إلى .first() لتمرير المجموعة، فسيكون أحد أمرين صحيحًا: تعرض الصفحة عناصر تحكم مكررة يجب أن يكون لها أسماء مميزة يمكن الوصول إليها، أو أن المحدد الخاص بك واسع جدًا. كلاهما نتائج، وليس إزعاجات. الحل هو التضييق من خلال عقد مسمى، أو التصفية حسب أحد الوالدين المستقرين، أو طلب معرف اختبار. إن الوصول إلى .nth(1) لأن المباراة الثانية تصادف أنها المباراة الصحيحة هذا الأسبوع هو كيف تتعلم الأجنحة النقر على مربع الحوار الخطأ بعد الإصدار التالي.

هناك فتحة هروب مشروعة واحدة. locator.or() موجود للحالات التي تعرض فيها الصفحة بصراحة إحدى الحالتين، مثل نموذج تسجيل الدخول أو شعار تم تسجيل الدخول إليه بالفعل. استخدمه بشكل متعمد، مع تسمية كلا البديلين، ويُقرأ كفرع. استخدمه لتدوين الغموض ويُقرأ على أنه هزة.

المكان المناسب للوكلاء

اسمح للوكيل بالاستكشاف والصياغة؛ محددات المواقع هي المكان الذي تعيش فيه المراجعة الخاصة بك. يخبرك الاختبار الذي تم إنشاؤه باستخدام getByRole('button', { name: 'Save' }) بما تعتقد أن الصفحة تفعله. لا يخبرك الاختبار الذي تم إنشاؤه باستخدام div:nth-child(3) بأي شيء سوى أن DOM بدا هكذا ذات مرة. احتفظ بالنوع الأول. أعد كتابة الثانية قبل أن تصل إلى CI، لأن كل محدد موقع هش تقبله هو إنذار كاذب مستقبلي دفعت ثمنه بالفعل.