चयनकर्ताओं
वेबड्राइवर प्रोटोकॉल किसी तत्व को क्वेरी करने के लिए कई चयनकर्ता रणनीतियाँ प्रदान करता है। 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')
टैग का नाम
किसी विशिष्ट टैग नाम वाले तत्व को क्वेरी करने के लिए, <tag>
या <tag />
का उपयोग करें।
loading...
आप इस तत्व को कॉल करके पूछ सकते हैं:
loading...
नाम गुण
किसी विशिष्ट नाम विशेषता वाले तत्वों को क्वेरी करने के लिए आप या तो एक सामान्य CSS3 चयनकर्ता या JSONWireProtocol से प्रदान की गई नाम रणनीति का उपयोग कर सकते हैं जैसे [नाम = "कुछ-नाम"] चयनकर्ता पैरामीटर के रूप में:
loading...
loading...
नोट: यह चयनकर्ता रणनीति इसे पदावनत करती है और केवल पुराने ब्राउज़र में काम करती है जो JSONWireProtocol प्रोटोकॉल द्वारा या Appium का उपयोग करके चलाए जाते हैं।
xपाथ
विशिष्ट xPathके माध्यम से तत्वों को क्वेरी करना भी संभव है।
एक xPath चयनकर्ता के पास //body/div[6]/div[1]/span[1]
जैसा प्रारूप होता है।
loading...
आप दूसरे पैराग्राफ को कॉल करके क्वेरी कर सकते हैं:
loading...
आप DOM ट्री को ऊपर और नीचे करने के लिए भी xPath का उपयोग कर सकते हैं:
loading...
अभिगम्यता नाम चयनकर्ता
क्वेरी तत्वों को उनके सुलभ नाम से। एक्सेस करने योग्य नाम वह है जिसकी घोषणा स्क्रीन रीडर द्वारा की जाती है जब वह तत्व फोकस प्राप्त करता है। पहुँच योग्य नाम का मान दृश्य सामग्री या छिपे हुए पाठ विकल्प दोनों हो सकते हैं।
आप इस चयनकर्ता के बारे में हमारे रिलीज़ ब्लॉग पोस्टमें अधिक पढ़ सकते हैं
aria-label
द्वारा प्राप्त करें
loading...
loading...
aria-labelledby
फेच करें
loading...
loading...