चयनकर्ताओं
वेबड्राइवर प्रोटोकॉल किसी तत्व को क्वेरी करने के लिए कई चयनकर्ता रणनीतियाँ प्रदान करता है। 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 चयनकर्ता पैटर्न का उपयोग करके तत्वों को क्वेरी करेगा, उदाहरण के लिए:
loading...
लिंक लेख
इसमें एक विशिष्ट पाठ के साथ एंकर तत्व प्राप्त करने के लिए, टेक्स्ट को बराबर (=
) चिह्न से प्रारंभ करें।
उदाहरण के लिए:
loading...
आप इस तत ्व को कॉल करके पूछ सकते हैं:
loading...
आंशिक लिंक लेख
एक एंकर तत्व खोजने के लिए जिसका दृश्य पाठ आंशिक रूप से आपके खोज मूल्य से मेल खाता है, क्वेरी स्ट्रिंग के सामने *=
का उपयोग करके क्वेरी करें (उदाहरण के लिए *=driver
)।
आप ऊपर दिए गए उदाहरण से तत्व को कॉल करके भी पूछ सकते हैं:
loading...
नोट: आप एक चयनकर्ता में एकाधिक चयनकर्ता रणनीतियों को मिश्रित नहीं कर सकते हैं। एक ही लक्ष्य तक पहुँचने के लिए कई श्रृंखलित तत्व प्रश्नों का उपयोग करें, उदाहरण के लिए:
const elem = await $('header h1*=Welcome') // doesn't work!!!
// use instead
const elem = await $('header').$('*=driver')
निश्चित लेख वाला तत्व
उसी तकनीक को तत्वों पर भी लागू किया जा सकता है ।
उदाहरण के लिए, यहाँ "मेरे पृष्ठ में आपका स्वागत है" पाठ के साथ स्तर 1 शीर्षक के लिए एक प्रश्न है:
loading...
आप इस तत्व को कॉल करके पूछ सकते हैं:
loading...
या क्वेरी आंशिक पाठ का उपयोग करना:
loading...
वही id
और class
नामों के लिए काम करता है:
loading...
आप इस तत्व को कॉल करके पूछ सकते हैं:
loading...
नोट: आप एक चयनकर्ता में एकाधिक चयनकर्ता रणनीतियों को मिश्रित नहीं कर सकते हैं। एक ही लक्ष्य तक पहुँचने के लिए कई श्रृंखलित तत्व प्रश्नों का उपयोग करें, उदाहरण के लिए:
const elem = await $('header h1*=Welcome') // doesn't work!!!
// use instead
const elem = await $('header').$('h1*=Welcome')