चयनकर्ताओं
वेबड्राइवर प्रोटोकॉल किसी तत्व को क्वेरी करने के लिए कई चयनकर्ता रणनीतियाँ प्रदान करता है। WebdriverIO तत्वों का चयन सरल रखने के लिए उन्हें सर ल बनाता है। कृपया ध्यान दें कि भले ही तत्वों को क्वेरी करने के आदेश को $
और $$
कहा जाता है, उनका jQuery या Sizzle Selector Engineसे कोई लेना-देना नहीं है।
जबकि बहुत सारे अलग-अलग चयनकर्ता उपलब्ध हैं, उनमें से कुछ ही सही तत्व खोजने के लिए एक लचीला तरीका प्रदान करते हैं। उदाहरण के लिए, निम्न बटन दिया गया है:
<button
id="main"
class="btn btn-large"
name="submission"
role="button"
data-testid="submit"
>
Submit
</button>
हम करते हैं और नहीं निम्नलिखित चयनकर्ताओं की अनुशंसा करते हैं:
चयनकर्ताओं | अनुशंसित | नोट्स |
---|---|---|
$('button') | 🚨 कभी नहीं | सबसे खराब - बहुत सामान्य, कोई संदर्भ नहीं। |
$('.btn.btn-large') | 🚨 कभी नहीं | खराब। स्टाइल के साथ युग्मित। अत्यधिक परिवर्तन के अधीन। |
$('#main') | ⚠️ संयम से | बेहतर। लेकिन अभी भी स्टाइलिंग या जेएस इवेंट श्रोताओं के साथ जुड़ा हुआ है। |
$(() => document.queryElement('button')) | ⚠️ संयम से | प्रभावी पूछताछ, लिखने के लिए जटिल। |
$('button[name="submission"]') | ⚠️ संयम से | name विशेषता के साथ जोड़ा गया जिसमें HTML शब्दार्थ है। |
$('button[data-testid="submit"]') | ✅ अच्छा | अतिरिक्त विशेषता की आवश्यकता है, a11y से कनेक्ट नहीं है। |
$('aria/Submit') or $('button=Submit') | ✅ हमेशा | श्रेष्ठ। यह दिखता है कि उपयोगकर्ता पेज के साथ कैसे इंटरैक्ट करता है। |
सीएसएस क्वेरी चयनकर्ता
यदि अन्यथा इंगित नहीं किया गया है, तो WebdriverIO CSS चयनकर्ता पैटर्न का उपयोग करके तत्वों को क्वेरी करेगा, उदाहरण के लिए:
selectors/example.js
loading...