CSS चयनकर्ता Selenium
Krishna रूंगटा
⚡ स्मार्ट सारांश
CSS चयनकर्ता Selenium यह एक शक्तिशाली लोकेटर रणनीति है जो HTML टैग, ID, क्लास, एट्रिब्यूट और आंतरिक टेक्स्ट पैटर्न का उपयोग करके तत्वों की पहचान करती है। यह संसाधन CSS सिलेक्टर के प्रत्येक प्रकार को चरण-दर-चरण उदाहरणों के साथ समझाता है। Selenium आईडीई।
सीएसएस सेलेक्टर क्या है? Selenium?
A CSS चयनकर्ता Selenium CSS सिलेक्टर्स एक स्ट्रिंग पैटर्न है जो HTML टैग, आईडी, क्लास और एट्रिब्यूट्स के संयोजन के माध्यम से एक वेब एलिमेंट की पहचान करता है। CSS सिलेक्टर्स आईडी या नाम द्वारा खोजने की तुलना में थोड़े अधिक उन्नत हैं, लेकिन अनुभवी उपयोगकर्ताओं के बीच यह सबसे लोकप्रिय रणनीति है। Selenium उपयोगकर्ता उन तत्वों तक पहुंच सकते हैं जिनमें कोई आईडी या नाम विशेषता नहीं होती है।
CSS चयनकर्ता Selenium ये कई रूपों में आते हैं, लेकिन यह गाइड पाँच सबसे आम पैटर्न पर केंद्रित है जिनका उपयोग किया जाता है Selenium आईडीई:
- टैग और आईडी
- टैग और वर्ग
- टैग और विशेषता
- टैग, वर्ग और विशेषता
- आंतरिक पाठ
इस रणनीति का उपयोग करते समय Selenium IDE, हमेशा उपसर्ग लगाएं Target बॉक्स के साथ “सीएसएस=जैसा कि नीचे दिए गए प्रत्येक उदाहरण में दिखाया गया है।
CSS सिलेक्टर्स का उपयोग क्यों करें? Selenium?
कई क्षेत्रों में CSS सिलेक्टर्स पसंदीदा लोकेटर रणनीति हैं। Selenium स्वचालन इंजीनियर इसलिए बेहतर होते हैं क्योंकि वे गति, लचीलापन और पठनीयता के बीच संतुलन बनाए रखते हैं। आधुनिक वेब एप्लिकेशन अक्सर गतिशील रूप से उत्पन्न आईडी का उपयोग करते हैं या नाम एट्रिब्यूट को पूरी तरह से हटा देते हैं, जिससे पृष्ठ पर किसी विशिष्ट तत्व को लक्षित करने का एकमात्र विश्वसनीय तरीका सीएसएस सिलेक्टर ही रह जाता है।
सीएसएस सिलेक्टर्स का उपयोग करने के मुख्य लाभों में निम्नलिखित शामिल हैं:
- प्रदर्शन: CSS सिलेक्टर्स को ब्राउज़र के नेटिव इंजन द्वारा प्रोसेस किया जाता है, इसलिए वे समकक्ष XPath एक्सप्रेशंस की तुलना में तेज़ी से एग्जीक्यूट होते हैं, खासकर इंटरनेट एक्सप्लोरर जैसे पुराने ब्राउज़रों में।
- लचीलापन: वे टैग, क्लास, एट्रीब्यूट और पार्शियल-मैच लॉजिक को मिलाकर टेस्टर्स को उन एलिमेंट्स को टारगेट करने की सुविधा देते हैं जिनमें स्टेबल आईडी नहीं होती है।
- पठनीयता: इसका सिंटैक्स उसी तरह का है जैसे डेवलपर पहले से ही CSS नियम लिखते हैं, जिससे QA इंजीनियरों और फ्रंट-एंड टीमों दोनों के लिए सीखने की प्रक्रिया आसान हो जाती है।
- क्रॉस-ब्राउज़र स्थिरता: CSS सिलेक्टर क्रोम में लगातार एक समान व्यवहार करते हैं। FirefoxEdge और Safari में, अस्थिर परीक्षण विफलताओं को कम किया जा सकता है।
टैग और आईडी – सीएसएस चयनकर्ता
इस उदाहरण में फेसबुक लॉगिन पेज पर ईमेल टेक्स्ट बॉक्स का उपयोग किया गया है। इस एलिमेंट की आईडी “ है।ईमेलऔर इसे पहले ही "आईडी द्वारा स्थान निर्धारण" अनुभाग में एक्सेस किया जा चुका था। अब उसी तत्व को एक का उपयोग करके लक्षित किया जाता है। Selenium आईडी विशेषता वाला सीएसएस चयनकर्ता।
वाक्य - विन्यास
css=tag#id
- टैग = एक्सेस किए जा रहे तत्व का HTML टैग
- # = हैश चिह्न, जो किसी भी स्थिति में हमेशा मौजूद होना चाहिए। Selenium आईडी के साथ CSS चयनकर्ता
- id = एक्सेस किए जा रहे तत्व की आईडी
ध्यान रखें कि आईडी के पहले हमेशा हैश चिह्न (#) लगा होता है।
चरण 1) पर जाए www.facebook.comअपने ब्राउज़र के डेवलपर टूल्स (या फायरबग जैसे किसी पुराने टूल) का उपयोग करके, "ईमेल या फ़ोन" टेक्स्ट बॉक्स की जांच करें।
ध्यान दें कि एचटीएमएल टैग “ हैनिवेशऔर इसकी आईडी है “ईमेलइसलिए संपूर्ण सीएसएस चयनकर्ता इस प्रकार हो जाता है:सीएसएस=इनपुट#ईमेल".
चरण 2) दर्ज "सीएसएस=इनपुट#ईमेल" में Target का डिब्बा Selenium IDE पर जाएं और खोजें बटन पर क्लिक करें। Selenium IDE पृष्ठ पर संबंधित तत्व को हाइलाइट करता है।
टैग और क्लास – सीएसएस चयनकर्ता
एक सीएसएस चयनकर्ता Selenium जो एचटीएमएल टैग और क्लास नाम का उपयोग करता है, वह टैग और आईडी के समान ही विचार का अनुसरण करता है, लेकिन हैश चिह्न के स्थान पर एक बिंदु (.) का उपयोग किया जाता है।
वाक्य - विन्यास
css=tag.class
- टैग = एक्सेस किए जा रहे तत्व का HTML टैग
- . = बिंदु चिह्न, जो क्लास वाले CSS सिलेक्टर का उपयोग करते समय हमेशा मौजूद होना चाहिए।
- वर्ग = जिस तत्व तक पहुँचा जा रहा है उसका वर्ग
चरण 1) डेमो पेज खोलें https://demo.guru99.com/test/facebook.html और “ईमेल या फ़ोन” टेक्स्ट बॉक्स की जाँच करें। ध्यान दें कि HTML टैग “ हैनिवेशऔर इसका वर्ग है “इनपुट टेक्स्ट".
चरण 2) In Selenium IDE, दर्ज करें “सीएसएस=इनपुट.इनपुटटेक्स्ट" में Target बॉक्स पर क्लिक करें और खोजें पर क्लिक करें. Selenium IDE ईमेल या फ़ोन टेक्स्ट बॉक्स को पहचानता है।
ध्यान दें कि जब कई तत्व एक ही HTML टैग और क्लास साझा करते हैं, तो स्रोत कोड में केवल पहला मेल खाने वाला तत्व ही पहचाना जाता है। उसी पृष्ठ पर पासवर्ड टेक्स्ट बॉक्स का निरीक्षण करें और ध्यान दें कि यह ईमेल या फ़ोन टेक्स्ट बॉक्स के समान क्लास साझा करता है।
पिछले उदाहरण में केवल ईमेल या फ़ोन टेक्स्ट बॉक्स को ही हाइलाइट किया गया था क्योंकि यह पेज सोर्स में सबसे पहले दिखाई देता है।
टैग और एट्रीब्यूट – सीएसएस सेलेक्टर
इस रणनीति में एक एचटीएमएल टैग को उस एलिमेंट से संबंधित एक विशिष्ट एट्रीब्यूट के साथ जोड़ा जाता है जिसे आप एक्सेस करना चाहते हैं।
वाक्य - विन्यास
css=tag[attribute=value]
- टैग = एक्सेस किए जा रहे तत्व का HTML टैग
- [ और ] = वर्ग कोष्ठक जो विशेषता और उसके संबंधित मान को घेरते हैं
- विशेषता = उपयोग की जाने वाली विशेषता। ऐसी विशेषता चुनें जो तत्व के लिए अद्वितीय हो, जैसे नाम या आईडी।
- मूल्य = चुनी गई विशेषता का संगत मूल्य.
चरण 1) पर नेविगेट करें Mercury टूर पंजीकरण पृष्ठ https://demo.guru99.com/test/newtours/register.php और "अंतिम नाम" टेक्स्ट बॉक्स की जांच करें। इसके HTML टैग ("input") और इसके नाम एट्रिब्यूट ("lastName") पर ध्यान दें।
चरण 2) In Selenium IDE, दर्ज करें “सीएसएस=इनपुट[नाम=अंतिमनाम]" में Target बॉक्स पर क्लिक करें और खोजें पर क्लिक करें. Selenium IDE ने अंतिम नाम फ़ील्ड को सफलतापूर्वक ढूंढ लिया है।
जब कई तत्व एक ही HTML टैग और विशेषता साझा करते हैं, तो केवल पहले वाले को ही पहचाना जाता है। यह व्यवहार समान टैग और क्लास वाले तत्वों का पता लगाने के समान है।
टैग, क्लास और एट्रीब्यूट – सीएसएस सेलेक्टर
वाक्य - विन्यास
css=tag.class[attribute=value]
- टैग = एक्सेस किए जा रहे तत्व का HTML टैग
- . = बिंदु चिह्न, जो क्लास वाले CSS सिलेक्टर का उपयोग करते समय हमेशा मौजूद होना चाहिए।
- वर्ग = जिस तत्व तक पहुँचा जा रहा है उसका वर्ग
- [ और ] = वर्गाकार कोष्ठक जो किसी विशिष्ट विशेषता और उसके संबंधित मान को घेरते हैं
- विशेषता = उपयोग की जाने वाली विशेषता। ऐसी विशेषता चुनें जो तत्व के लिए अद्वितीय हो, जैसे नाम या आईडी।
- मूल्य = चुनी गई विशेषता का संगत मूल्य.
चरण 1) डेमो पेज खोलें https://demo.guru99.com/test/facebook.html और “ईमेल या फ़ोन” और “पासवर्ड” इनपुट बॉक्स की जाँच करें। उनके HTML टैग, क्लास और एट्रिब्यूट पर ध्यान दें। इस उदाहरण में “ का उपयोग किया गया है।टैबइंडेक्स" गुण।
चरण 2) सबसे पहले tabindex मान 1 का उपयोग करके “ईमेल या फ़ोन” टेक्स्ट बॉक्स में प्रवेश करें। “ दर्ज करेंसीएसएस=इनपुट.इनपुटटेक्स्ट[tabindex=1]में है Selenium आईडीई का Target बॉक्स में जाकर फाइंड पर क्लिक करें। ईमेल या फ़ोन फ़ील्ड हाइलाइट हो जाएगा।
चरण 3) पासवर्ड इनपुट बॉक्स को लक्षित करने के लिए, बस tabindex मान को बदलें। “ दर्ज करेंसीएसएस=इनपुट.इनपुटटेक्स्ट[tabindex=2]" में Target बॉक्स पर क्लिक करें और खोजें पर क्लिक करें. Selenium IDE ने पासवर्ड टेक्स्ट बॉक्स को सफलतापूर्वक ढूंढ लिया है।
आंतरिक पाठ – सीएसएस चयनकर्ता
HTML लेबल में शायद ही कभी id, name या class एट्रिब्यूट दिए जाते हैं। तो आप उन्हें कैसे एक्सेस करेंगे? Seleniumइसका उत्तर उनके आंतरिक पाठ में निहित है। आंतरिक टेक्स्ट वे वास्तविक स्ट्रिंग पैटर्न होते हैं जिन्हें HTML लेबल पेज पर प्रदर्शित करता है।
वाक्य - विन्यास
css=tag:contains("inner text")
- टैग = एक्सेस किए जा रहे तत्व का HTML टैग
- आंतरिक पाठ = तत्व की दृश्यमान पाठ सामग्री
चरण 1) पर नेविगेट करें Mercury टूर्स होमपेज https://demo.guru99.com/test/newtours/ और "पासवर्ड" लेबल की जांच करें। इसके HTML टैग (इस मामले में "फ़ॉन्ट") पर ध्यान दें और देखें कि इस एलिमेंट में कोई क्लास, आईडी या नाम विशेषताएँ नहीं हैं।
चरण 2) प्रकार css=फ़ॉन्ट:contains(“पासवर्ड:”) में Selenium आईडीई का Target बॉक्स पर क्लिक करें और खोजें पर क्लिक करें. Selenium IDE नीचे दिखाए अनुसार पासवर्ड लेबल का पता लगाता है।
चरण 3) इस बार, आंतरिक पाठ को "बोस्टन" से बदलें ताकि Target बन जाता है “css=font:contains(“बोस्टन”)“फाइंड पर क्लिक करें। “बोस्टन से सैन फ्रांसिस्को” लेबल हाइलाइट हो जाएगा, जिससे पता चलेगा कि Selenium IDE किसी लंबे लेबल का पता तब भी लगा सकता है जब उसके आंतरिक पाठ का केवल पहला शब्द ही दिया गया हो।
CSS सिलेक्टर बनाम XPath Selenium
वेब तत्वों की पहचान करने के लिए CSS सिलेक्टर्स और XPath दोनों का उपयोग किया जाता है। Seleniumफिर भी, उनकी खूबियाँ अलग-अलग हैं। नीचे दी गई तालिका प्रमुख आयामों पर दोनों लोकेटर रणनीतियों की तुलना करती है:
| मापदंड | सीएसएस चयनकर्ता | एक्सपाथ |
|---|---|---|
| गति | तेज़, ब्राउज़र के नेटिव इंजन पर चलता है | विशेष रूप से पुराने ब्राउज़रों में धीमा। |
| नेतृत्व | केवल आगे भेजें (माता-पिता से बच्चे को) | आगे और पीछे (बच्चे से माता-पिता तक) |
| वाक्य - विन्यास | संक्षिप्त और CSS नियमों के समान | लंबे, पदानुक्रमित पथ अभिव्यक्तियाँ |
| पाठ मिलान | :contains() छद्म-वर्ग तक सीमित | मजबूत text() और contains() फ़ंक्शन |
| के लिए सबसे अच्छा | स्थैतिक लेआउट और आधुनिक वेब ऐप्स | जटिल DOM ट्रैवर्सल और टेक्स्ट-आधारित लोकेटर |
सीएसएस सिलेक्टर्स लिखने के लिए सर्वोत्तम अभ्यास Selenium
विश्वसनीय CSS सिलेक्टर्स लिखना केवल सिंटैक्स जानने से कहीं अधिक है। निम्नलिखित अभ्यास परीक्षकों को स्थिर और रखरखाव योग्य CSS सिलेक्टर्स बनाने में मदद करते हैं। Selenium वे स्क्रिप्ट जो यूजर इंटरफेस में बदलाव के बाद भी बनी रहती हैं:
- अद्वितीय विशेषताओं को प्राथमिकता दें: ऑटोमेशन के लिए स्पष्ट रूप से जोड़े गए id, data-test-id या name एट्रिब्यूट को ही चुनें। विज़ुअल लेआउट बदलने पर भी ये स्थिर रहते हैं।
- अत्यधिक नेस्टेड सेलेक्टर से बचें: लंबी श्रृंखलाएँ जैसे
div > div > ul > li > aडेवलपर्स द्वारा मार्कअप को रिफैक्टर करते समय इसमें आसानी से त्रुटियां आ सकती हैं। इसलिए सिलेक्टर्स को यथासंभव छोटा रखें। - आंशिक मिलान का बुद्धिमानी से उपयोग करें: पैटर्न जैसे
[class*="btn-primary"]क्लास के नाम में छोटे-मोटे बदलावों को सहन किया जा सकता है, लेकिन वे अनपेक्षित तत्वों से भी मेल खा सकते हैं। - इंडेक्स-आधारित लोकेटरों से बचें: जैसे चयनकर्ता
nth-child(3)ये नाजुक होते हैं क्योंकि एक सहोदर तत्व जोड़ने से हर स्थिति बदल जाती है। - DevTools में चयनकर्ताओं को मान्य करें: दौड़ने से पहले Selenium स्क्रिप्ट का उपयोग करके, सेलेक्टर को क्रोम डेवलपर टूल्स कंसोल में पेस्ट करें।
document.querySelector()यह पुष्टि करने के लिए कि यह ठीक एक ही तत्व लौटाता है। - विशिष्टता के लिए विशेषताओं को संयोजित करें: जब एक क्लास कई तत्वों द्वारा साझा की जाती है, तो एक एट्रिब्यूट फ़िल्टर जोड़ें जैसे कि
input.form-control[name="email"]लक्ष्य को स्पष्ट करने के लिए। - दस्तावेज़ तैयार करें और पुनः उपयोग करें: पेज ऑब्जेक्ट क्लास के अंदर सिलेक्टर्स को केंद्रीकृत करें ताकि एक ही अपडेट उन सभी टेस्ट को ठीक कर दे जो एक ही एलिमेंट को संदर्भित करते हैं।
इन दिशानिर्देशों का पालन करने से अस्थिरता कम होती है, परीक्षण निष्पादन की गति में सुधार होता है और Selenium समय के साथ सुइट्स का रखरखाव करना आसान हो जाता है।
सारांश: सीएसएस सिलेक्टर सिंटैक्स का त्वरित संदर्भ
नीचे दी गई तालिका में सभी का संकलन किया गया है। Selenium इस गाइड में CSS सिलेक्टर पैटर्न को शामिल किया गया है:
| विधि | Target वाक्य - विन्यास | उदाहरण |
|---|---|---|
| टैग और आईडी | सीएसएस=टैग#आईडी | सीएसएस=इनपुट#ईमेल |
| टैग और वर्ग | सीएसएस=टैग.क्लास | सीएसएस=इनपुट.इनपुटटेक्स्ट |
| टैग और विशेषता | सीएसएस=टैग[विशेषता=मूल्य] | सीएसएस=इनपुट[नाम=अंतिमनाम] |
| टैग, वर्ग और विशेषता | सीएसएस=tag.class[विशेषता=मूल्य] | सीएसएस=इनपुट.इनपुटटेक्स्ट[tabindex=1] |
| आंतरिक पाठ | css=tag:contains(“text”) | css=फ़ॉन्ट:contains(“पासवर्ड:”) |
