how use css selector
हमारे में पिछला सेलेनियम ट्यूटोरियल , हमने विभिन्न प्रकार के लोकेटर सीखे। हमने वेब पेज पर वेब तत्वों की पहचान के लिए आईडी, क्लासनेम, नाम, लिंक टेक्स्ट और एक्सपीथ लोकेटर का उपयोग करना भी सीखा।
उसी के साथ निरंतरता में, आज हम सीखेंगे कैसे एक लोकेटर के रूप में सीएसएस चयनकर्ता का उपयोग करने के लिए । यह हमारा 6 वां ट्यूटोरियल है मुफ्त सेलेनियम प्रशिक्षण श्रृंखला ।
लोकेटर के रूप में CSS चयनकर्ता का उपयोग करना:
CSS चयनकर्ता एक तत्व चयनकर्ता और एक चयनकर्ता मूल्य का संयोजन है जो वेब पेज के भीतर वेब तत्व की पहचान करता है। एक तत्व चयनकर्ता और चयनकर्ता मूल्य के समग्र को चयनकर्ता पैटर्न के रूप में जाना जाता है।
चयनकर्ता पैटर्न का निर्माण HTML टैग, विशेषताओं और उनके मूल्यों का उपयोग करके किया जाता है। CSS चयनकर्ता और Xpath बनाने की प्रक्रिया के पीछे केंद्रीय विषय उनके निर्माण प्रोटोकॉल में एकमात्र अंतर अंतर्निहित बहुत समान हैं।
Xpath की तरह, CSS चयनकर्ता उन वेब तत्वों का भी पता लगा सकता है जिनमें कोई ID, वर्ग या नाम नहीं है।
c ++ सम्मिलन सॉर्ट एल्गोरिथ्म
तो अब आगे बढ़ते हुए, आइए सीएसएस चयनकर्ताओं के प्राथमिक प्रकारों पर चर्चा करें:
आप क्या सीखेंगे:
- CSS चयनकर्ता: ID
- CSS चयनकर्ता: कक्षा
- CSS चयनकर्ता: विशेषता
- सीएसएस चयनकर्ता: आईडी / वर्ग और विशेषता
- CSS चयनकर्ता: उप-स्ट्रिंग
- CSS चयनकर्ता: आंतरिक पाठ
- अनुशंसित पाठ
CSS चयनकर्ता: ID
इस नमूने में, हम Gmail.com पर लॉगिन फॉर्म में मौजूद 'ईमेल' टेक्स्ट बॉक्स तक पहुंचेंगे।
ईमेल टेक्स्टबॉक्स में एक आईडी विशेषता होती है जिसका मूल्य 'ईमेल' के रूप में परिभाषित किया जाता है। इस प्रकार आईडी विशेषता और उसके मूल्य का उपयोग ईमेल टेक्स्टबॉक्स तक पहुंचने के लिए सीएसएस चयनकर्ता बनाने के लिए किया जा सकता है।
वेब तत्व के लिए सीएसएस चयनकर्ता बनाना
चरण 1 : वेब तत्व का पता लगाएँ (हमारे मामले में 'ईमेल' टेक्स्टबॉक्स) का निरीक्षण करें और ध्यान दें कि HTML टैग 'इनपुट' है और आईडी विशेषता का मूल्य 'ईमेल' है और दोनों सामूहिक रूप से 'ईमेल टेक्स्टबॉक्स' का संदर्भ देते हैं। इसलिए उपरोक्त डेटा का उपयोग CSS चयनकर्ता बनाने के लिए किया जाएगा।
लोकेटर मान सत्यापित करें
चरण 1 : सेलेनियम आईडीई में लक्ष्य बॉक्स में 'सीएसएस = इनपुट # ईमेल' अर्थात् लोकेटर मान टाइप करें और फाइंड बटन पर क्लिक करें। ध्यान दें कि ईमेल टेक्स्ट बॉक्स हाइलाइट किया जाएगा।
वाक्य - विन्यास
css =
- HTML टैग - यह वह टैग है जिसका उपयोग उस वेब तत्व को दर्शाने के लिए किया जाता है जिसे हम एक्सेस करना चाहते हैं।
- # - ID विशेषता का प्रतीक करने के लिए हैश साइन का उपयोग किया जाता है। यदि सीएसएस चयनकर्ता बनाने के लिए आईडी विशेषता का उपयोग किया जा रहा है, तो हैश साइन का उपयोग करना अनिवार्य है।
- आईडी विशेषता का मूल्य - यह एक आईडी विशेषता का मूल्य है जिसे एक्सेस किया जा रहा है।
- आईडी का मान हमेशा हैश चिन्ह से पहले होता है।
ध्यान दें: अन्य प्रकार के CSS चयनकर्ताओं के लिए भी लागू होता है
- सेलेनियम आईडीई के लक्ष्य पाठ बॉक्स में CSS चयनकर्ता को निर्दिष्ट करते समय, हमेशा इसे 'css =' के साथ उपसर्ग करना याद रखें।
- उपरोक्त कलाकृतियों का क्रम अटल है।
- यदि दो या अधिक वेब तत्वों में एक ही HTML टैग और विशेषता मान है, तो पृष्ठ स्रोत में चिह्नित पहले तत्व की पहचान की जाएगी।
CSS चयनकर्ता: कक्षा
इस नमूने में, हम gmail.com पर लॉगिन फॉर्म के नीचे मौजूद “साइन इन रहें” चेकबॉक्स तक पहुंचेंगे।
'साइन इन रहें' चेकबॉक्स में एक क्लास विशेषता है जिसका मान 'याद रखें' के रूप में परिभाषित किया गया है। इस प्रकार कक्षा की विशेषता और उसके मूल्य का उपयोग निर्दिष्ट वेब तत्व तक पहुँचने के लिए CSS चयनकर्ता बनाने के लिए किया जा सकता है।
सीएसएस चयनकर्ता के रूप में क्लास का उपयोग करने वाले तत्व का पता लगाना आईडी का उपयोग करने के लिए बहुत समान है, अकेला अंतर उनके सिंटैक्स गठन में निहित है।
वेब तत्व के लिए CSS चयनकर्ता बनाना
चरण 1 : वेब तत्व का पता लगाएँ / उसका निरीक्षण करें ('हमारे मामले में' चेकबॉक्स में साइन इन रहें) और ध्यान दें कि HTML टैग 'लेबल' है और आईडी विशेषता का मूल्य 'याद रखें' है और दोनों सामूहिक रूप से 'रहने पर हस्ताक्षर किए' का संदर्भ देते हैं। चेकबॉक्स में ”।
लोकेटर मान सत्यापित करें
चरण 1 : टाइप करें “css = label.remember” यानी सेलेनियम आईडीई में लक्ष्य बॉक्स में लोकेटर मान और खोज बटन पर क्लिक करें। ध्यान दें कि 'साइन इन रहें' चेकबॉक्स पर प्रकाश डाला जाएगा।
वाक्य - विन्यास
css =
- । - डॉट साइन का उपयोग क्लास की विशेषता के प्रतीक के लिए किया जाता है। यदि सीएसएस चयनकर्ता बनाने के लिए क्लास विशेषता का उपयोग किया जा रहा है तो डॉट साइन का उपयोग करना अनिवार्य है।
- क्लास का मान हमेशा बिंदी चिन्ह से पहले होता है।
CSS चयनकर्ता: विशेषता
इस नमूने में, हम gmail.com पर लॉगिन फॉर्म के नीचे मौजूद 'साइन इन' बटन को एक्सेस करेंगे।
'साइन इन' बटन में एक प्रकार की विशेषता होती है जिसका मूल्य 'सबमिट' के रूप में परिभाषित किया जाता है। इस प्रकार प्रकार विशेषता और इसके मूल्य का उपयोग निर्दिष्ट वेब तत्व तक पहुंचने के लिए CSS चयनकर्ता बनाने के लिए किया जा सकता है।
वेब तत्व के लिए CSS चयनकर्ता बनाना
चरण 1 : वेब तत्व का पता लगाएँ / निरीक्षण करें ('साइन इन करें' बटन हमारे मामले में) और ध्यान दें कि HTML टैग 'इनपुट' है, विशेषता प्रकार है और टाइप विशेषता का मान 'सबमिट' है और ये सभी मिलकर एक संदर्भ बनाते हैं। 'साइन इन' बटन।
लोकेटर मान सत्यापित करें
चरण 1 : 'सीएसएस = इनपुट (टाइप करें = 'सबमिट करें)' अर्थात् सेलेनियम आईडीई में लक्ष्य बॉक्स में लोकेटर मान और खोज बटन पर क्लिक करें। ध्यान दें कि 'साइन इन' बटन पर प्रकाश डाला जाएगा।
वाक्य - विन्यास
css =
- गुण - यह वह विशेषता है जिसे हम CSS चयनकर्ता बनाने के लिए उपयोग करना चाहते हैं। यह मूल्य, प्रकार, नाम आदि को चुन सकता है। यह एक विशेषता चुनने की सिफारिश की जाती है, जिसका मूल्य विशिष्ट रूप से वेब तत्व की पहचान करता है।
- विशेषता का मूल्य - यह एक विशेषता का मूल्य है जिसे एक्सेस किया जा रहा है।
सीएसएस चयनकर्ता: आईडी / वर्ग और विशेषता
इस नमूने में, हम gmail.com पर लॉगिन फॉर्म में मौजूद 'पासवर्ड' टेक्स्ट बॉक्स तक पहुंचेंगे।
'पासवर्ड' टेक्स्ट बॉक्स में एक आईडी विशेषता होती है जिसका मान 'पासवार्ड' के रूप में परिभाषित किया जाता है, वह विशेषता टाइप करें जिसका मान 'पासवर्ड' के रूप में परिभाषित किया गया है। इस प्रकार, आईडी विशेषता, प्रकार विशेषता और उनके मूल्यों का उपयोग नामित वेब तत्व तक पहुंचने के लिए CSS चयनकर्ता बनाने के लिए किया जा सकता है।
सबसे अच्छा वेबसाइटों यूट्यूब वीडियो डाउनलोड करने के लिए
वेब तत्व के लिए CSS चयनकर्ता बनाना
चरण 1 : वेब तत्व का पता लगाएँ (हमारे मामले में 'पासवर्ड' बॉक्स) का निरीक्षण करें और ध्यान दें कि HTML टैग 'इनपुट' है, विशेषताएँ आईडी और प्रकार हैं और उनके संबंधित मान 'पासवार्ड' और 'पासवर्ड' और उनमें से सभी एक साथ हैं। 'पासवर्ड' टेक्स्टबॉक्स का संदर्भ लें।
लोकेटर मान सत्यापित करें
चरण 1 : टाइप करें 'css = input # Passwd (name = 'Passwd')' यानि सेलेनियम आईडीई में लक्ष्य बॉक्स में लोकेटर मान और खोज बटन पर क्लिक करें। ध्यान दें कि 'पासवर्ड' टेक्स्ट बॉक्स हाइलाइट किया जाएगा।
वाक्य - विन्यास
css =
वाक्य रचना में दो या दो से अधिक विशेषताओं को भी प्रस्तुत किया जा सकता है।उदाहरण के लिए, 'Css = input # Passwd (type = 'password') (name = 'Passwd')'।
CSS चयनकर्ता: उप-स्ट्रिंग
सेलेनियम में सीएसएस एक आंशिक स्ट्रिंग के मिलान की अनुमति देता है और इस प्रकार सब्सट्रेट का उपयोग करके सीएसएस चयनकर्ताओं को बनाने के लिए एक बहुत ही दिलचस्प सुविधा प्राप्त करता है। तीन तरीके हैं जिनमें सीएसएस चयनकर्ताओं को विकल्प से मेल खाने के लिए उपयोग किए जाने वाले तंत्र के आधार पर बनाया जा सकता है।
तंत्र के प्रकार
सभी नीचे के तंत्र का प्रतीकात्मक महत्व है।
- एक उपसर्ग से मिलान करें
- एक प्रत्यय का मिलान करें
- एक सबरंग का मिलान करें
आइए हम उनके बारे में विस्तार से चर्चा करें।
एक उपसर्ग से मिलान करें
इसका उपयोग एक मेल उपसर्ग की मदद से स्ट्रिंग के अनुरूप करने के लिए किया जाता है।
वाक्य - विन्यास
css =
- ^ - उपसर्ग का उपयोग करके एक स्ट्रिंग से मेल करने के लिए प्रतीकात्मक संकेतन।
- उपसर्ग - यह वह स्ट्रिंग है जिसके आधार पर मैच ऑपरेशन किया जाता है। संभावित स्ट्रिंग निर्दिष्ट स्ट्रिंग के साथ शुरू होने की उम्मीद है।
उदाहरण के लिएआइए हम 'पासवर्ड टेक्स्टबॉक्स' पर विचार करें, ताकि संबंधित सीएसएस चयनकर्ता हो:
css = input # Passwd (नाम ^ = 'पास')
एक प्रत्यय का मिलान करें
इसका उपयोग मिलान प्रत्यय की सहायता से स्ट्रिंग के अनुरूप करने के लिए किया जाता है।
वाक्य - विन्यास
css =
- # - प्रत्यय का उपयोग करते हुए एक स्ट्रिंग से मेल करने के लिए प्रतीकात्मक संकेतन।
- प्रत्यय - यह वह स्ट्रिंग है जिसके आधार पर मैच ऑपरेशन किया जाता है। संभावित स्ट्रिंग निर्दिष्ट स्ट्रिंग के साथ समाप्त होने की उम्मीद है।
उदाहरण के लिए,फिर से 'पासवर्ड टेक्स्टबॉक्स' पर विचार करें, इसलिए संबंधित सीएसएस चयनकर्ता होगा:
css = input # Passwd (नाम $ = 'wd')
एक सबरंग का मिलान करें
इसका उपयोग स्ट्रिंग से मेल खाते हुए सबस्ट्रिंग की सहायता से करने के लिए किया जाता है।
वाक्य - विन्यास
css =
- * - उप स्ट्रिंग का उपयोग करके एक स्ट्रिंग से मेल करने के लिए प्रतीकात्मक संकेतन।
- उप स्ट्रिंग - यह वह स्ट्रिंग है जिसके आधार पर मैच ऑपरेशन किया जाता है। संभावित स्ट्रिंग में निर्दिष्ट स्ट्रिंग पैटर्न होने की उम्मीद है।
उदाहरण के लिए,फिर से 'पासवर्ड टेक्स्टबॉक्स' पर विचार करने की अनुमति देता है, इसलिए संबंधित सीएसएस चयनकर्ता होगा:
css = input # Passwd (नाम $ = 'wd')
CSS चयनकर्ता: आंतरिक पाठ
आंतरिक पाठ हमें स्ट्रिंग पैटर्न का उपयोग करके CSS चयनकर्ता को पहचानने और बनाने में मदद करता है जो HTML टैग वेब पेज पर दिखाई देता है।
विचार करें, 'मदद चाहिए?' हाइपरलिंक gmail.com पर लॉगिन फॉर्म के नीचे मौजूद है।
हाइपरलिंक का प्रतिनिधित्व करने वाले एंकर टैग के भीतर एक पाठ संलग्न है। इस प्रकार इस पाठ का उपयोग निर्दिष्ट वेब तत्व तक पहुँचने के लिए CSS चयनकर्ता बनाने के लिए किया जा सकता है।
वाक्य - विन्यास:
css =
- : - बिंदी चिन्ह का उपयोग विधि को दर्शाने के लिए किया जाता है
- इसमें शामिल है - यह एक क्लास विशेषता का मूल्य है जिसे एक्सेस किया जा रहा है।
- पाठ - वह पाठ जो वेब पेज पर कहीं भी प्रदर्शित होता है, चाहे उसका स्थान कुछ भी हो।
यह अपने सरलीकृत वाक्यविन्यास के कारण वेब तत्व का पता लगाने के लिए सबसे अधिक बार उपयोग की जाने वाली रणनीतियों में से एक है।
इस तथ्य के कारण कि CSS चयनकर्ता और Xpath बनाने के लिए बहुत प्रयासों और अभ्यास की आवश्यकता होती है, इस प्रकार इस प्रक्रिया का उपयोग केवल अधिक परिष्कृत और प्रशिक्षित उपयोगकर्ताओं द्वारा किया जाता है।
अगला ट्यूटोरियल # 7 : अपने अगले ट्यूटोरियल के साथ आगे बढ़ते हुए, हम आपको अवसर प्रदान करने वाली रणनीतियों के विस्तार के साथ पेश करने का अवसर लेंगे। इस प्रकार, अगले ट्यूटोरियल में, हम अध्ययन करेंगे Google Chrome और Internet Explorer पर वेब तत्वों का पता लगाने का तंत्र।
सॉफ्टवेयर परीक्षण में क्यूए और क्यूसी के बीच अंतर
हम अधिक विवरण में सेलेनियम लोकेटर को कवर कर रहे हैं क्योंकि यह सेलेनियम स्क्रिप्ट निर्माण का एक महत्वपूर्ण हिस्सा है।
हमें अपने प्रश्नों / टिप्पणियों को नीचे बताएं।
अनुशंसित पाठ
- सेलेनियम लिपियों के निर्माण के लिए क्रोम और IE ब्राउज़रों में तत्वों का पता कैसे लगाएं - सेलेनियम ट्यूटोरियल # 7
- विभिन्न प्रकार के वेबड्राइवर कमांड्स - सेलेनियम ट्यूटोरियल # 14 का उपयोग करके वेब तत्वों की दृश्यता की जांच करें
- सेलेनियम वेबड्राइवर का परिचय - सेलेनियम ट्यूटोरियल # 8
- कुशल सेलेनियम स्क्रिप्टिंग और समस्या निवारण परिदृश्य - सेलेनियम ट्यूटोरियल # 27
- लॉग (लॉग 4 जे ट्यूटोरियल) के साथ सेलेनियम लिपियों को डीबग करना - सेलेनियम ट्यूटोरियल # 26
- 30+ सर्वश्रेष्ठ सेलेनियम ट्यूटोरियल: वास्तविक उदाहरणों के साथ सेलेनियम जानें
- ककड़ी सेलेनियम ट्यूटोरियल: ककड़ी जावा सेलेनियम वेबड्राइवर एकीकरण
- वेब पेज पर ड्रॉपडाउन तत्वों को संभालने के लिए सेलेनियम सिलेक्ट क्लास का उपयोग - सेलेनियम ट्यूटोरियल # 13