सेलेक्टर्स

WebDriver Protocol कई सेलेक्टर रणनीतियाँ प्रदान करता है तत्व की क्वेरी के लिए। 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')	⚠️ कम ही	बेहतर। लेकिन फिर भी स्टाइलिंग या JS इवेंट लिस्टनर से जुड़ा हुआ।
$(() => document.queryElement('button'))	⚠️ कम ही	प्रभावी क्वेरी, लिखने में जटिल।
$('button[name="submission"]')	⚠️ कम ही	name एट्रिब्यूट से जुड़ा हुआ जिसका HTML सिमेंटिक्स है।
$('button[data-testid="submit"]')	✅ अच्छा	अतिरिक्त एट्रिब्यूट की आवश्यकता है, a11y से जुड़ा नहीं है।
$('aria/Submit')	✅ अच्छा	अच्छा। दर्शाता है कि उपयोगकर्ता पेज के साथ कैसे इंटरैक्ट करता है। यह अनुवाद फ़ाइलों का उपयोग करने की सिफारिश की जाती है ताकि जब अनुवाद अपडेट किए जाएँ तो आपके परीक्षण न टूटें। नोट: यह सेलेक्टर बड़े पेजों पर अन्य की तुलना में धीमा हो सकता है।
$('button=Submit')	✅ हमेशा	सर्वोत्तम। दर्शाता है कि उपयोगकर्ता पेज के साथ कैसे इंटरैक्ट करता है और तेज़ है। यह अनुवाद फ़ाइलों का उपयोग करने की सिफारिश की जाती है ताकि जब अनुवाद अपडेट किए जाएँ तो आपके परीक्षण न टूटें।

CSS क्वेरी सेलेक्टर

जब तक अन्यथा इंगित न किया जाए, WebdriverIO CSS सेलेक्टर पैटर्न का उपयोग करके तत्वों को क्वेरी करेगा, उदाहरण के लिए:

selectors/example.js

loading...

View on GitHub

लिंक टेक्स्ट

एक विशिष्ट टेक्स्ट वाले एंकर तत्व को प्राप्त करने के लिए, बराबर (=) चिह्न से शुरू होने वाले टेक्स्ट को क्वेरी करें।

उदाहरण के लिए:

selectors/example.html

loading...

View on GitHub

आप इस तत्व को निम्न कॉल करके क्वेरी कर सकते हैं:

selectors/example.js

loading...

View on GitHub

आंशिक लिंक टेक्स्ट

ऐसे एंकर तत्व को खोजने के लिए जिसका दृश्यमान टेक्स्ट आंशिक रूप से आपके खोज मूल्य से मेल खाता है, इसे क्वेरी स्ट्रिंग के सामने *= का उपयोग करके क्वेरी करें (उदाहरण के लिए *=driver)।

आप ऊपर के उदाहरण से तत्व को यह भी कॉल करके क्वेरी कर सकते हैं:

selectors/example.js

loading...

View on GitHub

नोट: आप एक सेलेक्टर में कई सेलेक्टर रणनीतियों को मिक्स नहीं कर सकते। एक ही लक्ष्य तक पहुंचने के लिए कई श्रृंखलाबद्ध तत्व क्वेरी का उपयोग करें, जैसे:

const elem = await $('header h1*=Welcome') // काम नहीं करेगा!!!
// इसके बजाय उपयोग करें
const elem = await $('header').$('*=driver')

विशेष टेक्स्ट वाला तत्व

वही तकनीक तत्वों पर भी लागू की जा सकती है। इसके अतिरिक्त, क्वेरी के भीतर .= या .*= का उपयोग करके केस-इनसेंसिटिव मैचिंग करना भी संभव है।

उदाहरण के लिए, यहां "Welcome to my Page" टेक्स्ट के साथ लेवल 1 हेडिंग के लिए एक क्वेरी है:

selectors/example.html

loading...

View on GitHub

आप इस तत्व को निम्न कॉल करके क्वेरी कर सकते हैं:

selectors/example.js

loading...

View on GitHub

या आंशिक टेक्स्ट का उपयोग करके क्वेरी:

selectors/example.js

loading...

View on GitHub

यही id और class नामों के लिए भी काम करता है:

selectors/example.html

loading...

View on GitHub

आप इस तत्व को निम्न कॉल करके क्वेरी कर सकते हैं:

selectors/example.js

loading...

View on GitHub

नोट: आप एक सेलेक्टर में कई सेलेक्टर रणनीतियों को मिक्स नहीं कर सकते। एक ही लक्ष्य तक पहुंचने के लिए कई श्रृंखलाबद्ध तत्व क्वेरी का उपयोग करें, जैसे:

const elem = await $('header h1*=Welcome') // काम नहीं करेगा!!!
// इसके बजाय उपयोग करें
const elem = await $('header').$('h1*=Welcome')

टैग नाम

विशिष्ट टैग नाम वाले तत्व को क्वेरी करने के लिए, <tag> या <tag /> का उपयोग करें।

selectors/example.html

loading...

View on GitHub

आप इस तत्व को निम्न कॉल करके क्वेरी कर सकते हैं:

selectors/example.js

loading...

View on GitHub

नाम एट्रिब्यूट

विशिष्ट नाम एट्रिब्यूट वाले तत्वों को क्वेरी करने के लिए आप या तो एक सामान्य CSS3 सेलेक्टर का उपयोग कर सकते हैं या JSONWireProtocol से प्रदान की गई नाम रणनीति का उपयोग कर सकते हैं जैसे कि [name="some-name"] को सेलेक्टर पैरामीटर के रूप में पास करना:

selectors/example.html

loading...

View on GitHub

selectors/example.js

loading...

View on GitHub

नोट: यह सेलेक्टर रणनीति अप्रचलित है और केवल पुराने ब्राउज़र में काम करती है जो JSONWireProtocol प्रोटोकॉल द्वारा चलाए जाते हैं या Appium का उपयोग करके चलाए जाते हैं।

xPath

विशिष्ट xPath के माध्यम से तत्वों को क्वेरी करना भी संभव है।

एक xPath सेलेक्टर का प्रारूप //body/div[6]/div[1]/span[1] जैसा होता है।

selectors/xpath.html

loading...

View on GitHub

आप दूसरे पैराग्राफ को निम्न कॉल करके क्वेरी कर सकते हैं:

selectors/example.js

loading...

View on GitHub

आप DOM ट्री में ऊपर और नीचे जाने के लिए xPath का उपयोग कर सकते हैं:

selectors/example.js

loading...

View on GitHub

एक्सेसिबिलिटी नाम सेलेक्टर

उनके सुलभ नाम से तत्वों की क्वेरी करें। सुलभ नाम वह है जो स्क्रीन रीडर द्वारा घोषित किया जाता है जब उस तत्व को फोकस मिलता है। सुलभ नाम का मूल्य दोनों दृश्य सामग्री या छिपे हुए टेक्स्ट विकल्प हो सकता है।

जानकारी

आप इस सेलेक्टर के बारे में हमारे रिलीज़ ब्लॉग पोस्ट में अधिक पढ़ सकते हैं

aria-label द्वारा फेच करें

selectors/aria.html

loading...

View on GitHub

selectors/example.js

loading...

View on GitHub

aria-labelledby द्वारा फेच करें

selectors/aria.html

loading...

View on GitHub

selectors/example.js

loading...

View on GitHub

सामग्री से फेच करें

selectors/aria.html

loading...

View on GitHub

selectors/example.js

loading...

View on GitHub

शीर्षक से फेच करें

selectors/aria.html

loading...

View on GitHub

selectors/example.js

loading...

View on GitHub

alt प्रॉपर्टी से फेच करें

selectors/aria.html

loading...

View on GitHub

selectors/example.js

loading...

View on GitHub

ARIA - रोल एट्रिब्यूट

ARIA भूमिकाओं के आधार पर तत्वों की क्वेरी करने के लिए, आप सेलेक्टर पैरामीटर के रूप में [role=button] जैसे तत्व की भूमिका को सीधे निर्दिष्ट कर सकते हैं:

selectors/aria.html

loading...

View on GitHub

selectors/example.js

loading...

View on GitHub

ID एट्रिब्यूट

लोकेटर रणनीति "id" WebDriver प्रोटोकॉल में समर्थित नहीं है, किसी को ID का उपयोग करके तत्वों को खोजने के लिए CSS या xPath सेलेक्टर रणनीतियों का उपयोग करना चाहिए।

हालांकि, कुछ ड्राइवर (जैसे Appium You.i Engine Driver) अभी भी इस सेलेक्टर का समर्थन कर सकते हैं।

ID के लिए वर्तमान समर्थित सेलेक्टर सिंटैक्स हैं:

//css लोकेटर
const button = await $('#someid')
//xpath लोकेटर
const button = await $('//*[@id="someid"]')
//id रणनीति
// नोट: केवल Appium या ऐसे फ्रेमवर्क में काम करता है जो लोकेटर रणनीति "ID" का समर्थन करते हैं
const button = await $('id=resource-id/iosname')

JS फंक्शन

आप वेब नेटिव API का उपयोग करके तत्वों को फेच करने के लिए JavaScript फंक्शन का भी उपयोग कर सकते हैं। बेशक, आप इसे केवल वेब कॉन्टेक्स्ट (जैसे, browser, या मोबाइल में वेब कॉन्टेक्स्ट) के अंदर ही कर सकते हैं।

निम्नलिखित HTML संरचना दी गई है:

selectors/js.html

loading...

View on GitHub

आप #elem के सिबलिंग तत्व को निम्नानुसार क्वेरी कर सकते हैं:

selectors/example.js

loading...

View on GitHub

डीप सेलेक्टर्स

चेतावनी

WebdriverIO के v9 से शुरू होकर, इस विशेष सेलेक्टर की आवश्यकता नहीं है क्योंकि WebdriverIO आपके लिए स्वचालित रूप से Shadow DOM को पार करता है। यह अनुशंसित है कि इसके सामने से >>> को हटाकर इस सेलेक्टर से माइग्रेट करें।

कई फ्रंटएंड एप्लिकेशन shadow DOM वाले तत्वों पर भारी निर्भर करते हैं। वर्कअराउंड के बिना शैडो DOM के भीतर तत्वों को क्वेरी करना तकनीकी रूप से असंभव है। shadow$ और shadow$$ ऐसे वर्कअराउंड रहे हैं जिनकी अपनी सीमाएँ थीं। डीप सेलेक्टर के साथ आप अब सामान्य क्वेरी कमांड का उपयोग करके किसी भी शैडो DOM के भीतर सभी तत्वों को क्वेरी कर सकते हैं।

मान लें कि हमारे पास निम्न संरचना वाला एक एप्लिकेशन है:

इस सेलेक्टर के साथ आप <button /> तत्व को क्वेरी कर सकते हैं जो किसी अन्य शैडो DOM के भीतर नेस्टेड है, उदाहरण के लिए:

selectors/example.js

loading...

View on GitHub

मोबाइल सेलेक्टर्स

हाइब्रिड मोबाइल टेस्टिंग के लिए, यह महत्वपूर्ण है कि कमांड निष्पादित करने से पहले ऑटोमेशन सर्वर सही कॉन्टेक्स्ट में हो। जेस्चर को ऑटोमेट करने के लिए, ड्राइवर को आदर्श रूप से नेटिव कॉन्टेक्स्ट पर सेट किया जाना चाहिए। लेकिन DOM से तत्वों का चयन करने के लिए, ड्राइवर को प्लेटफॉर्म के वेबव्यू कॉन्टेक्स्ट पर सेट करने की आवश्यकता होगी। केवल तभी ऊपर उल्लिखित विधियों का उपयोग किया जा सकता है।

नेटिव मोबाइल टेस्टिंग के लिए, कॉन्टेक्स्ट के बीच स्विचिंग नहीं है, क्योंकि आपको मोबाइल रणनीतियों का उपयोग करना होगा और अंतर्निहित डिवाइस ऑटोमेशन टेक्नोलॉजी का सीधे उपयोग करना होगा। यह विशेष रूप से उपयोगी है जब किसी टेस्ट को तत्वों को खोजने के लिए कुछ फाइन-ग्रेन्ड नियंत्रण की आवश्यकता होती है।

Android UiAutomator

Android का UI Automator फ्रेमवर्क तत्वों को खोजने के लिए कई तरीके प्रदान करता है। आप UI Automator API, विशेष रूप से UiSelector क्लास का उपयोग तत्वों को लोकेट करने के लिए कर सकते हैं। Appium में आप Java कोड को एक स्ट्रिंग के रूप में सर्वर को भेजते हैं, जो इसे एप्लिकेशन के वातावरण में निष्पादित करता है, तत्व या तत्वों को वापस करता है।

const selector = 'new UiSelector().text("Cancel").className("android.widget.Button")'
const button = await $(`android=${selector}`)
await button.click()

Android DataMatcher और ViewMatcher (केवल Espresso)

Android का DataMatcher रणनीति Data Matcher द्वारा तत्वों को खोजने का एक तरीका प्रदान करती है

const menuItem = await $({
  "name": "hasEntry",
  "args": ["title", "ViewTitle"]
})
await menuItem.click()

और इसी तरह View Matcher

const menuItem = await $({
  "name": "hasEntry",
  "args": ["title", "ViewTitle"],
  "class": "androidx.test.espresso.matcher.ViewMatchers"
})
await menuItem.click()

Android View Tag (केवल Espresso)

व्यू टैग रणनीति उनके टैग द्वारा तत्वों को खोजने का एक सुविधाजनक तरीका प्रदान करती है।

const elem = await $('-android viewtag:tag_identifier')
await elem.click()

iOS UIAutomation

जब iOS एप्लिकेशन को ऑटोमेट कर रहे हों, तो Apple के UI Automation framework का उपयोग तत्वों को खोजने के लिए किया जा सकता है।

यह JavaScript API में व्यू और इस पर सभी कुछ तक पहुंचने के लिए विधियां हैं।

const selector = 'UIATarget.localTarget().frontMostApp().mainWindow().buttons()[0]'
const button = await $(`ios=${selector}`)
await button.click()

आप Appium में iOS UI Automation के भीतर प्रेडिकेट सर्चिंग का भी उपयोग कर सकते हैं ताकि तत्व चयन को और भी परिष्कृत किया जा सके। विवरण के लिए यहां देखें।

iOS XCUITest प्रेडिकेट स्ट्रिंग्स और क्लास चेन

iOS 10 और उससे ऊपर (XCUITest ड्राइवर का उपयोग करके), आप प्रेडिकेट स्ट्रिंग्स का उपयोग कर सकते हैं:

const selector = `type == 'XCUIElementTypeSwitch' && name CONTAINS 'Allow'`
const switch = await $(`-ios predicate string:${selector}`)
await switch.click()

और क्लास चेन:

const selector = '**/XCUIElementTypeCell[`name BEGINSWITH "D"`]/**/XCUIElementTypeButton'
const button = await $(`-ios class chain:${selector}`)
await button.click()

एक्सेसिबिलिटी ID

accessibility id लोकेटर रणनीति UI तत्व के लिए एक अद्वितीय पहचानकर्ता पढ़ने के लिए डिज़ाइन की गई है। इसका लाभ यह है कि यह स्थानीयकरण या किसी अन्य प्रक्रिया के दौरान नहीं बदलता है जो टेक्स्ट बदल सकता है। इसके अतिरिक्त, यह क्रॉस-प्लेटफॉर्म परीक्षण बनाने में मदद कर सकता है, यदि तत्व जो कार्यात्मक रूप से समान हैं, उनके पास समान एक्सेसिबिलिटी आईडी है।

• iOS के लिए यह accessibility identifier है जिसे Apple ने यहां बताया है।
• Android के लिए accessibility id तत्व के लिए content-description से मैप करता है, जैसा कि यहां वर्णित है।

दोनों प्लेटफार्मों के लिए, उनके accessibility id से तत्व (या कई तत्व) प्राप्त करना आमतौर पर सबसे अच्छी विधि है। यह डिप्रिकेटेड name रणनीति पर पसंदीदा तरीका भी है।

const elem = await $('~my_accessibility_identifier')
await elem.click()

क्लास नाम

class name रणनीति एक string है जो वर्तमान व्यू पर UI तत्व का प्रतिनिधित्व करता है।

• iOS के लिए यह UIAutomation क्लास का पूरा नाम है, और UIA- से शुरू होगा, जैसे टेक्स्ट फील्ड के लिए UIATextField। संपूर्ण संदर्भ यहां पाया जा सकता है।
• Android के लिए यह UI Automator क्लास का पूरी तरह से योग्य नाम है, जैसे टेक्स्ट फील्ड के लिए android.widget.EditText। संपूर्ण संदर्भ यहां पाया जा सकता है।
• Youi.tv के लिए यह Youi.tv क्लास का पूरा नाम है, और CYI- से शुरू होगा, जैसे पुश बटन तत्व के लिए CYIPushButtonView। संपूर्ण संदर्भ You.i Engine Driver's GitHub पेज पर पाया जा सकता है

// iOS उदाहरण
await $('UIATextField').click()
// Android उदाहरण
await $('android.widget.DatePicker').click()
// Youi.tv उदाहरण
await $('CYIPushButtonView').click()

चेन सेलेक्टर्स

अगर आप अपनी क्वेरी में अधिक विशिष्ट होना चाहते हैं, तो आप सही तत्व पाने तक सेलेक्टरों को चेन कर सकते हैं। अगर आप अपने वास्तविक कमांड से पहले element कॉल करते हैं, तो WebdriverIO उस तत्व से क्वेरी शुरू करता है।

उदाहरण के लिए, अगर आपके पास इस तरह की DOM संरचना है:

<div class="row">
  <div class="entry">
    <label>Product A</label>
    <button>Add to cart</button>
    <button>More Information</button>
  </div>
  <div class="entry">
    <label>Product B</label>
    <button>Add to cart</button>
    <button>More Information</button>
  </div>
  <div class="entry">
    <label>Product C</label>
    <button>Add to cart</button>
    <button>More Information</button>
  </div>
</div>

और आप प्रोडक्ट B को कार्ट में जोड़ना चाहते हैं, तो केवल CSS सेलेक्टर का उपयोग करके ऐसा करना मुश्किल होगा।

सेलेक्टर चेनिंग के साथ, यह बहुत आसान है। बस चरण दर चरण वांछित तत्व को संकुचित करें:

await $('.row .entry:nth-child(2)').$('button*=Add').click()

Appium इमेज सेलेक्टर

-image लोकेटर रणनीति का उपयोग करके, Appium को एक इमेज फाइल भेजना संभव है जो उस तत्व का प्रतिनिधित्व करती है जिसे आप एक्सेस करना चाहते हैं।

समर्थित फाइल फॉर्मेट jpg,png,gif,bmp,svg

संपूर्ण संदर्भ यहां पाया जा सकता है

const elem = await $('./file/path/of/image/test.jpg')
await elem.click()

नोट: Appium इस सेलेक्टर के साथ जिस तरह से काम करता है वह यह है कि यह आंतरिक रूप से एक (ऐप)स्क्रीनशॉट लेगा और प्रदान की गई इमेज सेलेक्टर का उपयोग करेगा यह सत्यापित करने के लिए कि क्या तत्व उस (ऐप)स्क्रीनशॉट में पाया जा सकता है।

इस तथ्य के प्रति सचेत रहें कि Appium ली गई (ऐप)स्क्रीनशॉट को आकार में बदल सकता है ताकि वह आपकी (ऐप)स्क्रीन के CSS-आकार से मेल खा सके (यह iPhones पर होगा लेकिन Mac मशीनों पर भी रेटिना डिस्प्ले के साथ क्योंकि DPR 1 से बड़ा है)। इसके परिणामस्वरूप मिलान नहीं मिलेगा क्योंकि प्रदान की गई इमेज सेलेक्टर मूल स्क्रीनशॉट से ली गई हो सकती है। आप Appium सर्वर सेटिंग्स को अपडेट करके इसे ठीक कर सकते हैं, सेटिंग्स के लिए Appium दस्तावेज़ देखें और विस्तृत स्पष्टीकरण के लिए यह टिप्पणी देखें।

React सेलेक्टर्स

WebdriverIO कंपोनेंट नाम के आधार पर React कंपोनेंट्स को चुनने का एक तरीका प्रदान करता है। इसके लिए, आपके पास दो कमांड का विकल्प है: react$ और react$$।

ये कमांड आपको React VirtualDOM से कंपोनेंट्स को चुनने की अनुमति देते हैं और या तो एक WebdriverIO एलिमेंट या एलिमेंट्स की एक सरणी (किस फंक्शन का उपयोग किया जाता है इसके आधार पर) वापस करते हैं।

नोट: कमांड react$ और react$$ कार्यक्षमता में समान हैं, सिवाय इसके कि react$$ सभी मिलान होने वाले इंस्टेंस WebdriverIO एलिमेंट्स की सरणी के रूप में वापस करेगा, और react$ पहला मिला हुआ इंस्टेंस वापस करेगा।

मूल उदाहरण

// index.jsx
import React from 'react'
import ReactDOM from 'react-dom'

function MyComponent() {
    return (
        <div>
            MyComponent
        </div>
    )
}

function App() {
    return (<MyComponent />)
}

ReactDOM.render(<App />, document.querySelector('#root'))

उपरोक्त कोड में ऐप्लिकेशन के अंदर एक सरल MyComponent इंस्टेंस है, जिसे React id="root" वाले HTML तत्व के अंदर रेंडर कर रहा है।

browser.react$ कमांड के साथ, आप MyComponent के इंस्टेंस को चुन सकते हैं:

const myCmp = await browser.react$('MyComponent')

अब जब आपके पास WebdriverIO एलिमेंट myCmp वैरिएबल में संग्रहित है, तो आप इसके खिलाफ एलिमेंट कमांड निष्पादित कर सकते हैं।

कंपोनेंट्स को फिल्टर करना

WebdriverIO आंतरिक रूप से जिस लाइब्रेरी का उपयोग करता है वह आपको कंपोनेंट के प्रॉप्स और/या स्टेट द्वारा अपने चयन को फिल्टर करने की अनुमति देती है। ऐसा करने के लिए, आपको प्रॉप्स के लिए दूसरा आर्गुमेंट और/या स्टेट के लिए तीसरा आर्गुमेंट ब्राउज़र कमांड में पास करना होगा।

// index.jsx
import React from 'react'
import ReactDOM from 'react-dom'

function MyComponent(props) {
    return (
        <div>
            Hello { props.name || 'World' }!
        </div>
    )
}

function App() {
    return (
        <div>
            <MyComponent name="WebdriverIO" />
            <MyComponent />
        </div>
    )
}

ReactDOM.render(<App />, document.querySelector('#root'))

अगर आप MyComponent के उस इंस्टेंस को चुनना चाहते हैं जिसमें name प्रॉप WebdriverIO के रूप में है, तो आप इस प्रकार कमांड निष्पादित कर सकते हैं:

const myCmp = await browser.react$('MyComponent', {
    props: { name: 'WebdriverIO' }
})

अगर आप स्टेट द्वारा अपने चयन को फिल्टर करना चाहते हैं, तो browser कमांड कुछ इस तरह दिखेगा:

const myCmp = await browser.react$('MyComponent', {
    state: { myState: 'some value' }
})

React.Fragment से निपटना

जब React फ्रैगमेंट्स का चयन करने के लिए react$ कमांड का उपयोग करते हैं, WebdriverIO कंपोनेंट के नोड के रूप में उस कंपोनेंट के पहले चाइल्ड को वापस करेगा। अगर आप react$$ का उपयोग करते हैं, तो आपको सेलेक्टर से मेल खाने वाले फ्रैगमेंट्स के अंदर सभी HTML नोड्स वाली एक सरणी मिलेगी।

// index.jsx
import React from 'react'
import ReactDOM from 'react-dom'

function MyComponent() {
    return (
        <React.Fragment>
            <div>
                MyComponent
            </div>
            <div>
                MyComponent
            </div>
        </React.Fragment>
    )
}

function App() {
    return (<MyComponent />)
}

ReactDOM.render(<App />, document.querySelector('#root'))

उपरोक्त उदाहरण के दिए गए, कमांड इस प्रकार काम करेंगे:

await browser.react$('MyComponent') // पहले <div /> के लिए WebdriverIO एलिमेंट वापस करता है
await browser.react$$('MyComponent') // सरणी [<div />, <div />] के लिए WebdriverIO एलिमेंट्स वापस करता है

नोट: अगर आपके पास MyComponent के कई इंस्टेंस हैं और आप इन फ्रैगमेंट कंपोनेंट्स का चयन करने के लिए react$$ का उपयोग करते हैं, तो आपको सभी नोड्स की एक-आयामी सरणी वापस कर दी जाएगी। दूसरे शब्दों में, अगर आपके पास 3 <MyComponent /> इंस्टेंस हैं, तो आपको छह WebdriverIO एलिमेंट्स वाली एक सरणी वापस कर दी जाएगी।

कस्टम सेलेक्टर रणनीतियाँ

अगर आपके ऐप को तत्वों को फेच करने का एक विशिष्ट तरीका चाहिए, तो आप खुद एक कस्टम सेलेक्टर रणनीति परिभाषित कर सकते हैं जिसे आप custom$ और custom$$ के साथ उपयोग कर सकते हैं। इसके लिए परीक्षण की शुरुआत में एक बार अपनी रणनीति को रजिस्टर करें, जैसे before हुक में:

queryElements/customStrategy.js

loading...

View on GitHub

निम्नलिखित HTML स्निपेट दिए गए:

queryElements/example.html

loading...

View on GitHub

फिर इसे निम्न कॉल करके उपयोग करें:

queryElements/customStrategy.js

loading...

View on GitHub

नोट: यह केवल वेब वातावरण में काम करता है जिसमें execute कमांड चलाया जा सकता है।