المحددات
يوفر بروتوكول WebDriver عدة استراتيجيات محددات للاستعلام عن عنصر. يبسط WebdriverIO هذه الاستراتيجيات للحفاظ على بساطة اختيار العناصر. يرجى ملاحظة أنه على الرغم من أن أمر الاستعلام عن العناصر يسمى $
و $$
، إلا أنه ليس له علاقة بـ jQuery أو محرك محدد Sizzle.
على الرغم من وجود العديد من المحددات المختلفة المتاحة، فإن عددًا قليلاً منها فقط يوفر طريقة مرنة للعثور على العنصر المناسب. على سبيل المثال، بالنظر إلى الزر التالي:
<button
id="main"
class="btn btn-large"
name="submission"
role="button"
data-testid="submit"
>
Submit
</button>
نحن نوصي و__لا نوصي__ بالمحددات التالية:
المحدد | توصية | ملاحظات |
---|---|---|
$('button') | 🚨 أبدًا | الأسوأ - عام جدًا، بدون سياق. |
$('.btn.btn-large') | 🚨 أبدًا | سيء. مرتبط بالتنسيق. عرضة للتغيير بشكل كبير. |
$('#main') | ⚠️ نادرًا | أفضل. لكنه لا يزال مرتبطًا بالتنسيق أو مستمعي أحداث JS. |
$(() => document.queryElement('button')) | ⚠️ نادرًا | استعلام فعال، معقد للكتابة. |
$('button[name="submission"]') | ⚠️ نادرًا | مرتبط بسمة name التي لها دلالات HTML. |
$('button[data-testid="submit"]') | ✅ جيد | يتطلب سمة إضافية، غير متصل بإمكانية الوصول. |
$('aria/Submit') أو $('button=Submit') | ✅ دائمًا | الأفضل. يشبه كيفية تفاعل المستخدم مع الصفحة. يوصى باستخدام ملفات الترجمة الخاصة بواجهتك الأمامية حتى لا تفشل اختباراتك أبدًا عند تحديث الترجمات |
محدد استعلام CSS
إذا لم يتم الإشارة إلى خلاف ذلك، سيستعلم WebdriverIO عن العناصر باستخدام نمط محدد CSS، على سبيل المثال:
loading...
نص الرابط
للحصول على عنصر رابط بنص محدد فيه، استعلم عن النص الذي يبدأ بعلامة يساوي (=
).
على سبيل المثال:
loading...
يمكنك الاستعلام عن هذا العنصر عن طريق الاتصال:
loading...
نص رابط جزئي
للعثور على عنصر رابط يتطابق نصه المرئي جزئيًا مع قيمة البحث الخاصة بك،
استعلم عنه باستخدام *=
في مقدمة سلسلة الاستعلام (مثل *=driver
).
يمكنك الاستعلام عن العنصر من المثال أعلاه أيضًا بالاتصال:
loading...
ملاحظة: لا يمكنك مزج استراتيجيات محدد متعددة في محدد واحد. استخدم استعلامات عناصر متسلسلة متعددة للوصول إلى نفس الهدف، على سبيل المثال:
const elem = await $('header h1*=Welcome') // لا يعمل!!!
// استخدم بدلاً من ذلك
const elem = await $('header').$('*=driver')
عنصر بنص معين
يمكن تطبيق نفس التقنية على العناصر أيضًا. بالإضافة إلى ذلك، من الممكن أيضًا إجراء مطابقة غير حساسة لحالة الأحرف باستخدام .=
أو .*=
داخل الاستعلام.
على سبيل المثال، إليك استعلام لعنوان من المستوى 1 مع النص "Welcome to my Page":
loading...
يمكنك الاستعلام عن هذا العنصر عن طريق الاتصال:
loading...
أو استخدام استعلام نص جزئي:
loading...