CSS चयनकर्ता Selenium

सीएसएस चयनकर्ता क्या है?

CSS चयनकर्ता Selenium HTML टैग, आईडी, क्लास और विशेषताओं के संयोजन के आधार पर किसी तत्व की पहचान करने के लिए उपयोग किए जाने वाले स्ट्रिंग पैटर्न हैं। Selenium पिछली विधियों की तुलना में अधिक जटिल है, लेकिन यह उन्नत की सबसे आम पता लगाने की रणनीति है Selenium उपयोगकर्ताओं के लिए यह बहुत उपयोगी है, क्योंकि यह उन तत्वों तक भी पहुंच सकता है जिनका कोई आईडी या नाम नहीं है।

CSS चयनकर्ता Selenium कई प्रारूप हैं, लेकिन हम केवल सबसे आम प्रारूपों पर ध्यान केंद्रित करेंगे। CSS लोकेटर के विभिन्न प्रकार Selenium आईडीई

• टैग और आईडी
• टैग और वर्ग
• टैग और विशेषता
• टैग, वर्ग और विशेषता
• आंतरिक पाठ

इस रणनीति का उपयोग करते समय, हम हमेशा उपसर्ग लगाते हैं Target बॉक्स में “css =" भरें जैसा कि निम्नलिखित उदाहरणों में दिखाया जाएगा।

टैग और आईडी – सीएसएस चयनकर्ता

फिर से, हम इस उदाहरण में फेसबुक के ईमेल टेक्स्ट बॉक्स का उपयोग करेंगे। जैसा कि आप याद कर सकते हैं, इसकी एक आईडी "ईमेल" है, और हमने इसे पहले ही "आईडी द्वारा पता लगाना" अनुभाग में एक्सेस कर लिया है। इस बार, हम एक का उपयोग करेंगे Selenium उसी तत्व तक पहुँचने में आईडी के साथ सीएसएस चयनकर्ता।

वाक्य - विन्यास

css=tag#id

• टैग = एक्सेस किए जा रहे तत्व का HTML टैग
• # = हैश चिह्न। इसे हमेशा उपयोग करते समय मौजूद होना चाहिए Selenium आईडी के साथ CSS चयनकर्ता
• id = एक्सेस किए जा रहे तत्व की आईडी

ध्यान रखें कि आईडी के पहले हमेशा हैश चिह्न (#) लगा होता है।

चरण 1) पर जाए www.facebook.comफायरबग का उपयोग करके, "ईमेल या फ़ोन" टेक्स्ट बॉक्स की जाँच करें।

इस बिंदु पर, ध्यान दें कि HTML टैग “input” है और इसकी ID “email” है। इसलिए हमारा सिंटैक्स “css=input#email” होगा।

चरण 2) “css=input#email” दर्ज करें Target का डिब्बा Selenium IDE पर जाएं और खोजें बटन पर क्लिक करें। Selenium आईडीई को उस तत्व को हाइलाइट करने में सक्षम होना चाहिए।

टैग और क्लास – CSS चयनकर्ता

CSS चयनकर्ता Selenium HTML टैग और क्लास नाम का उपयोग करना टैग और ID का उपयोग करने के समान है, लेकिन इस मामले में, हैश चिह्न के बजाय डॉट (.) का उपयोग किया जाता है।

वाक्य - विन्यास

css=tag.class

• टैग = एक्सेस किए जा रहे तत्व का HTML टैग
• . = डॉट चिह्न। क्लास के साथ CSS चयनकर्ता का उपयोग करते समय यह हमेशा मौजूद होना चाहिए
• वर्ग = जिस तत्व तक पहुँचा जा रहा है उसका वर्ग

चरण 1) डेमो पेज पर जाएं https://demo.guru99.com/test/facebook.html और “ईमेल या फ़ोन” टेक्स्ट बॉक्स का निरीक्षण करने के लिए फ़ायरबग का उपयोग करें। ध्यान दें कि इसका HTML टैग “इनपुट” है और इसका क्लास “इनपुटटेक्स्ट” है।

चरण 2) In Selenium IDE में, “css=input.inputtext” दर्ज करें Target बॉक्स पर क्लिक करें और खोजें पर क्लिक करें. Selenium आईडीई को ईमेल या फोन टेक्स्ट बॉक्स को पहचानने में सक्षम होना चाहिए।

ध्यान रखें कि जब कई तत्वों का HTML टैग और नाम समान हो, तो स्रोत कोड में केवल पहला तत्व ही पहचाना जाएगाफायरबग का उपयोग करते हुए, फेसबुक में पासवर्ड टेक्स्ट बॉक्स का निरीक्षण करें और देखें कि इसका नाम ईमेल या फोन टेक्स्ट बॉक्स के समान है।

पिछले उदाहरण में केवल ईमेल या फोन टेक्स्ट बॉक्स को हाइलाइट करने का कारण यह है कि यह फेसबुक के पेज स्रोत में सबसे पहले आता है।

टैग और विशेषता – CSS चयनकर्ता

यह रणनीति HTML टैग और एक्सेस किए जाने वाले तत्व की विशिष्ट विशेषता का उपयोग करती है।

वाक्य - विन्यास

css=tag[attribute=value]

• टैग = एक्सेस किए जा रहे तत्व का HTML टैग
• [ और ] = वर्गाकार कोष्ठक जिसके भीतर एक विशिष्ट विशेषता और उसका संगत मान रखा जाएगा
• attribute = उपयोग की जाने वाली विशेषता। ऐसी विशेषता का उपयोग करना उचित है जो तत्व के लिए अद्वितीय हो जैसे नाम या आईडी।
• मूल्य = चुनी गई विशेषता का संगत मूल्य.

चरण 1) पर जाए Mercury पर्यटन पंजीकरण पृष्ठ https://demo.guru99.com/test/newtours/register.php और “अंतिम नाम” टेक्स्ट बॉक्स का निरीक्षण करें। इसके HTML टैग (इस मामले में “इनपुट”) और इसके नाम (“अंतिम नाम”) पर ध्यान दें।

चरण 2) In Selenium IDE में, “css=input[name=lastName]” दर्ज करें Target बॉक्स पर क्लिक करें और खोजें पर क्लिक करें. Selenium आईडीई को अंतिम नाम बॉक्स तक सफलतापूर्वक पहुंचने में सक्षम होना चाहिए।

जब कई तत्वों का HTML टैग और विशेषता समान हो, तो केवल पहला तत्व ही पहचाना जाएगायह व्यवहार समान टैग और वर्ग के साथ CSS चयनकर्ताओं का उपयोग करके तत्वों का पता लगाने के समान है।

टैग, क्लास और विशेषता – CSS चयनकर्ता

वाक्य - विन्यास

css=tag.class[attribute=value]

• टैग = एक्सेस किए जा रहे तत्व का HTML टैग
• . = डॉट चिह्न। क्लास के साथ CSS चयनकर्ता का उपयोग करते समय यह हमेशा मौजूद होना चाहिए
• वर्ग = जिस तत्व तक पहुँचा जा रहा है उसका वर्ग
• [ और ] = वर्गाकार कोष्ठक जिसके भीतर एक विशिष्ट विशेषता और उसका संगत मान रखा जाएगा
• attribute = उपयोग की जाने वाली विशेषता। ऐसी विशेषता का उपयोग करना उचित है जो तत्व के लिए अद्वितीय हो जैसे नाम या आईडी।
• मूल्य = चुनी गई विशेषता का संगत मूल्य.

चरण 1) डेमो पेज पर जाएं https://demo.guru99.com/test/facebook.html और 'ईमेल या फ़ोन' और 'पासवर्ड' इनपुट बॉक्स का निरीक्षण करने के लिए फ़ायरबग का उपयोग करें। उनके HTML टैग, क्लास और विशेषताओं पर ध्यान दें। इस उदाहरण के लिए, हम उनकी 'टैबइंडेक्स' विशेषताएँ चुनेंगे।

चरण 2) हम सबसे पहले 'ईमेल या फ़ोन' टेक्स्ट बॉक्स तक पहुँचेंगे। इस प्रकार, हम 1 के टैबइंडेक्स मान का उपयोग करेंगे। “css=input.inputtext[tabindex=1]” दर्ज करें Selenium आईडीई का Target बॉक्स पर क्लिक करें और Find पर क्लिक करें। 'ईमेल या फ़ोन' इनपुट बॉक्स हाइलाइट किया जाना चाहिए।

चरण 3) पासवर्ड इनपुट बॉक्स तक पहुँचने के लिए, बस tabindex विशेषता का मान बदलें। “css=input.inputtext[tabindex=2]” दर्ज करें Target बॉक्स पर जाएं और खोजें बटन पर क्लिक करें। Selenium IDE को पासवर्ड टेक्स्ट बॉक्स को सफलतापूर्वक पहचानने में सक्षम होना चाहिए।

आंतरिक पाठ – सीएसएस चयनकर्ता

जैसा कि आपने देखा होगा, HTML लेबल को शायद ही कभी आईडी, नाम या क्लास विशेषताएँ दी जाती हैं। तो, हम उन्हें कैसे एक्सेस करते हैं? इसका उत्तर उनके आंतरिक टेक्स्ट के उपयोग के माध्यम से है। आंतरिक पाठ वास्तविक स्ट्रिंग पैटर्न हैं जो HTML लेबल पृष्ठ पर दिखाता है।

वाक्य - विन्यास

css=tag:contains("inner text")

• टैग = एक्सेस किए जा रहे तत्व का HTML टैग
• आंतरिक पाठ = तत्व का आंतरिक पाठ

चरण 1) पर जाए Mercury टूर्स का मुखपृष्ठ https://demo.guru99.com/test/newtours/ और “पासवर्ड” लेबल की जांच करने के लिए फायरबग का उपयोग करें। इसके HTML टैग (जो इस मामले में “फ़ॉन्ट” है) पर ध्यान दें और ध्यान दें कि इसमें कोई क्लास, आईडी या नाम विशेषताएँ नहीं हैं।

चरण 2) प्रकार css=फ़ॉन्ट:contains(“पासवर्ड:”) में Selenium आईडीई का Target बॉक्स पर क्लिक करें और खोजें पर क्लिक करें. Selenium आईडीई को पासवर्ड लेबल तक पहुंचने में सक्षम होना चाहिए जैसा कि नीचे दी गई छवि में दिखाया गया है।

चरण 3) इस बार, आंतरिक पाठ को "बोस्टन" से बदलें ताकि आपका Target अब “css=font:contains(“Boston”)” बन जाएगा। ढूँढें पर क्लिक करें। आपको ध्यान देना चाहिए कि “बोस्टन से सैन फ्रांसिस्को” लेबल हाइलाइट हो गया है। यह आपको दिखाता है कि Selenium आईडीई एक लंबे लेबल तक पहुंच सकता है, भले ही आपने इसके आंतरिक पाठ का पहला शब्द ही इंगित किया हो।

सारांश

CSS चयनकर्ता उपयोग द्वारा स्थान निर्धारण हेतु सिंटैक्स

विधि	Target वाक्य - विन्यास	उदाहरण
टैग और आईडी	सीएसएस=टैग#आईडी	सीएसएस=इनपुट#ईमेल
टैग और वर्ग	सीएसएस=टैग.क्लास	सीएसएस=इनपुट.इनपुटटेक्स्ट
टैग और विशेषता	सीएसएस=टैग[विशेषता=मूल्य]	सीएसएस=इनपुट[नाम=अंतिमनाम]
टैग, वर्ग और विशेषता	सीएसएस=tag.class[विशेषता=मूल्य]	सीएसएस=इनपुट.इनपुटटेक्स्ट[tabindex=1]