मैं लंबे समय से फ्रंट-एंड डेवलपमेंट में हूं और पिछले कुछ वर्षों में एक प्रवृत्ति देखी है: युवा डेवलपर्स प्रोग्रामिंग के एक नए प्रतिमान के साथ इसके ऐतिहासिक संदर्भ को समझे बिना काम कर रहे हैं। निःसंदेह, किसी चीज़ को न जानना बिल्कुल समझ में आता है। वेब विविध प्रकार के कौशल और विशिष्टताओं के साथ एक बहुत बड़ी जगह है, और हम हमेशा वह नहीं जानते जो हम नहीं जानते हैं। इस क्षेत्र में सीखना एक निरंतर चलने वाली यात्रा है, न कि ऐसी चीज़ जो एक बार होती है और ख़त्म हो जाती है। इस मामले में: मेरी टीम में किसी ने पूछा कि क्या यह बताना संभव है कि उपयोगकर्ता यूआई में किसी विशेष टैब से दूर जाते हैं या नहीं। मैंने जावास्क्रिप्ट के beforeunload ईवेंट की ओर इशारा किया। लेकिन जिन लोगों ने पहले ही इससे निपट लिया है, वे जानते हैं कि यह संभव है क्योंकि उन्हें अन्य साइटों पर सहेजे न गए डेटा के बारे में अलर्ट का सामना करना पड़ा है, जिसके लिए प्रीअनलोड एक सामान्य उपयोग का मामला है। मैंने अच्छे उपाय के लिए अपने सहकर्मी को पेजहाइड और विज़िबिलिटीचेंज इवेंट के बारे में भी बताया। मुझे इसके बारे में कैसे पता चला? क्योंकि यह किसी अन्य प्रोजेक्ट में आया था, इसलिए नहीं कि मैंने शुरुआत में जावास्क्रिप्ट सीखते समय इस पर अध्ययन किया था। तथ्य यह है कि आधुनिक फ्रंट-एंड फ्रेमवर्क अपने पूर्ववर्ती प्रौद्योगिकी दिग्गजों के कंधों पर खड़े हैं। वे विकास प्रथाओं को अमूर्त करते हैं, अक्सर एक बेहतर डेवलपर अनुभव के लिए जो परंपरागत रूप से आवश्यक फ्रंट-एंड अवधारणाओं को जानने या छूने की आवश्यकता को कम कर देता है, या यहां तक कि समाप्त भी कर देता है, जिसे शायद हर किसी को जानना चाहिए। सीएसएस ऑब्जेक्ट मॉडल (सीएसएसओएम) पर विचार करें। आप उम्मीद कर सकते हैं कि सीएसएस और जावास्क्रिप्ट में काम करने वाले किसी भी व्यक्ति के पास व्यावहारिक सीएसएसओएम अनुभव होगा, लेकिन हमेशा ऐसा नहीं होगा। एक ई-कॉमर्स साइट के लिए एक रिएक्ट प्रोजेक्ट था जिस पर मैंने काम किया था जहां हमें वर्तमान में चयनित भुगतान प्रदाता के लिए एक स्टाइलशीट लोड करने की आवश्यकता थी। समस्या यह थी कि स्टाइलशीट प्रत्येक पृष्ठ पर लोड हो रही थी जबकि वास्तव में इसकी केवल एक विशिष्ट पृष्ठ पर आवश्यकता थी। जिस डेवलपर को ऐसा करने का काम सौंपा गया था, उसने कभी भी स्टाइलशीट को गतिशील रूप से लोड नहीं किया था। फिर, यह पूरी तरह से समझ में आता है जब रिएक्ट उस पारंपरिक दृष्टिकोण को हटा देता है जिसके लिए आप पहुंच सकते हैं। सीएसएसओएम संभवतः कोई ऐसी चीज़ नहीं है जिसकी आपको अपने रोजमर्रा के काम में आवश्यकता होती है। लेकिन यह संभव है कि आपको किसी बिंदु पर, यहां तक कि एक बार के उदाहरण में, इसके साथ बातचीत करने की आवश्यकता होगी। इन्हीं अनुभवों ने मुझे यह लेख लिखने के लिए प्रेरित किया। दुनिया में कई मौजूदा वेब सुविधाएँ और प्रौद्योगिकियाँ हैं जिन्हें आप अपने दैनिक कार्य में कभी भी सीधे नहीं छू सकते हैं। शायद आप वेब विकास के लिए बिल्कुल नए हैं और बस उनसे अनजान हैं क्योंकि आप एक विशिष्ट ढांचे के अमूर्तन में डूबे हुए हैं जिसके लिए आपको इसे गहराई से जानने की आवश्यकता नहीं है, या बिल्कुल भी नहीं। मैं विशेष रूप से एक्सएमएल के बारे में बात कर रहा हूं, जिसके बारे में हम में से बहुत से लोग जानते हैं कि यह एक प्राचीन भाषा है जो HTML से पूरी तरह भिन्न नहीं है। मैं इसे हाल की WHATWG चर्चाओं के कारण सामने ला रहा हूं जिसमें सुझाव दिया गया है कि XSLT प्रोग्रामिंग के रूप में ज्ञात XML स्टैक का एक महत्वपूर्ण हिस्सा ब्राउज़र से हटा दिया जाना चाहिए। यह बिल्कुल उसी तरह की पुरानी, मौजूदा तकनीक है जो हमारे पास वर्षों से है जिसका उपयोग सीएसएसओएम स्थिति जैसी व्यावहारिक चीज़ के लिए किया जा सकता है जिसमें मेरी टीम थी। क्या आपने पहले एक्सएसएलटी के साथ काम किया है? आइए देखें कि क्या हम आज की वास्तविक दुनिया की समस्याओं से निपटने के लिए इस पुरानी तकनीक पर जोर देते हैं और XML के संदर्भ से बाहर इसकी विशेषताओं का लाभ उठाते हैं। XPath: सेंट्रल एपीआई सबसे महत्वपूर्ण XML तकनीक जो शायद सीधे XML परिप्रेक्ष्य के बाहर सबसे उपयोगी है, XPath है, एक क्वेरी भाषा जो आपको एक मूल तत्व के साथ मार्कअप ट्री में कोई भी नोड या विशेषता ढूंढने की अनुमति देती है। मुझे XSLT से व्यक्तिगत लगाव है, लेकिन वह भी XPath पर निर्भर है, और रैंकिंग महत्व में व्यक्तिगत स्नेह को अलग रखा जाना चाहिए। XSLT को हटाने के तर्क में XPath का कोई उल्लेख नहीं है, इसलिए मुझे लगता है कि इसकी अभी भी अनुमति है। यह अच्छा है क्योंकि XPath प्रौद्योगिकियों के इस सूट में केंद्रीय और सबसे महत्वपूर्ण एपीआई है, खासकर जब सामान्य XML उपयोग के बाहर उपयोग करने के लिए कुछ खोजने की कोशिश की जा रही हो। यह महत्वपूर्ण है, क्योंकि सीएसएस चयनकर्ताओं का उपयोग आपके पृष्ठ के अधिकांश तत्वों को ढूंढने के लिए किया जा सकता है, लेकिन वे उन सभी को नहीं ढूंढ सकते हैं। इसके अलावा, CSS चयनकर्ताओं का उपयोग DOM में उसकी वर्तमान स्थिति के आधार पर किसी तत्व को खोजने के लिए नहीं किया जा सकता है। XPath कर सकते हैं. अब, इसे पढ़ने वाले आपमें से कुछ लोग XPath को जानते होंगे, और कुछ नहीं भी। XPath प्रौद्योगिकी का एक बहुत बड़ा क्षेत्र है, और मैं वास्तव में इस तरह के एक लेख में सभी मूल बातें नहीं सिखा सकता हूं और न ही आपको इसके साथ करने के लिए अच्छी चीजें दिखा सकता हूं। मैंने वास्तव में वह लेख लिखने की कोशिश की, लेकिन स्मैशिंग मैगज़ीन का औसत प्रकाशन 5,000 शब्दों से अधिक नहीं है। मैं पहले से ही इससे अधिक पर था2,000 शब्द जबकि मूल बातें आधी ही हैं। इसलिए, मैं XPath के साथ बढ़िया चीजें करना शुरू करने जा रहा हूं और आपको कुछ लिंक दूंगा जिनका उपयोग आप बुनियादी बातों के लिए कर सकते हैं यदि आपको यह चीजें दिलचस्प लगती हैं। XPath और CSS का संयोजन XPath बहुत सी चीज़ें कर सकता है जो CSS चयनकर्ता तत्वों की क्वेरी करते समय नहीं कर सकते। लेकिन CSS चयनकर्ता कुछ चीजें भी कर सकते हैं जो XPath नहीं कर सकता, अर्थात्, क्लास नाम से तत्वों को क्वेरी करना।
सीएसएस एक्सपाथ .मेरी कक्षा /*[शामिल है (@class, "myClass")]
इस उदाहरण में, CSS उन तत्वों से पूछताछ करता है जिनमें .myClass क्लासनाम होता है। इस बीच, XPath उदाहरण उन तत्वों से पूछताछ करता है जिनमें स्ट्रिंग "myClass" के साथ एक विशेषता वर्ग होता है। दूसरे शब्दों में, यह किसी भी विशेषता में myClass वाले तत्वों का चयन करता है, जिसमें .myClass क्लासनाम वाले तत्व शामिल हैं - साथ ही स्ट्रिंग में "myClass" वाले तत्व, जैसे .myClass2 भी शामिल हैं। उस अर्थ में XPath व्यापक है. तो, नहीं. मैं यह सुझाव नहीं दे रहा हूं कि हमें सीएसएस को हटा देना चाहिए और XPath के माध्यम से सभी तत्वों का चयन करना शुरू कर देना चाहिए। वह बात नहीं है। मुद्दा यह है कि XPath वो काम कर सकता है जो CSS नहीं कर सकता और फिर भी बहुत उपयोगी हो सकता है, भले ही यह ब्राउज़र स्टैक में एक पुरानी तकनीक है और पहली नज़र में स्पष्ट नहीं लगती है। आइए दोनों तकनीकों का एक साथ उपयोग करें, न केवल इसलिए कि हम कर सकते हैं, बल्कि इसलिए कि हम इस प्रक्रिया में XPath के बारे में कुछ सीखेंगे, जिससे यह आपके स्टैक में एक और टूल बन जाएगा - जिसे आप नहीं जानते होंगे कि वह हमेशा से मौजूद है! समस्या यह है कि जावास्क्रिप्ट की document.evaluate विधि और जावास्क्रिप्ट के लिए CSS API के साथ हमारे द्वारा उपयोग की जाने वाली विभिन्न क्वेरी चयनकर्ता विधियाँ असंगत हैं। हमने शुरुआत करने के लिए एक संगत क्वेरी एपीआई बनाई है, हालांकि माना जाता है कि मैंने इस पर बहुत अधिक विचार नहीं किया है क्योंकि यह हम यहां जो कर रहे हैं उससे अलग है। यहां पुन: प्रयोज्य क्वेरी कंस्ट्रक्टर का एक काफी सरल कार्यशील उदाहरण दिया गया है: ब्रायन रासमुसेन द्वारा लिखित पेन क्वेरीXPath [फोर्क्ड] देखें। मैंने दस्तावेज़ ऑब्जेक्ट पर दो विधियाँ जोड़ी हैं: queryCSSSelectors (जो अनिवार्य रूप से querySelectorAll है) और queryXPaths। ये दोनों एक queryResults ऑब्जेक्ट लौटाते हैं:
{ क्वेरी प्रकार: नोड्स | स्ट्रिंग | संख्या | बूलियन, परिणाम: कोई भी[] // एचटीएमएल तत्व, एक्सएमएल तत्व, स्ट्रिंग्स, संख्याएं, बूलियन, queryCSSSelectors: (क्वेरी: स्ट्रिंग, संशोधन: बूलियन) => क्वेरीपरिणाम, queryXpaths: (क्वेरी: स्ट्रिंग, संशोधन: बूलियन) => queryResults }
queryCSSSelectors और queryXpaths फ़ंक्शंस आपके द्वारा दी गई क्वेरी को परिणाम सरणी में तत्वों पर चलाते हैं, जब तक कि परिणाम सरणी निश्चित रूप से प्रकार नोड्स की होती है। अन्यथा, यह एक खाली सरणी और एक प्रकार के नोड्स के साथ एक queryResult लौटाएगा। यदि संशोधन गुण सत्य पर सेट है, तो फ़ंक्शन अपने स्वयं के क्वेरी परिणाम बदल देंगे। किसी भी परिस्थिति में इसका उपयोग उत्पादन परिवेश में नहीं किया जाना चाहिए। मैं इसे पूरी तरह से दो क्वेरी एपीआई का एक साथ उपयोग करने के विभिन्न प्रभावों को प्रदर्शित करने के लिए इस तरह से कर रहा हूं। उदाहरण प्रश्न मैं विभिन्न XPath प्रश्नों के कुछ उदाहरण दिखाना चाहता हूं जो कुछ शक्तिशाली चीजों को प्रदर्शित करते हैं जो वे कर सकते हैं और अन्य तरीकों के स्थान पर उनका उपयोग कैसे किया जा सकता है। पहला उदाहरण //li/text() है। यह सभी ली तत्वों से पूछताछ करता है और उनके टेक्स्ट नोड्स लौटाता है। इसलिए, यदि हम निम्नलिखित HTML से प्रश्न पूछें:
- एक
- दो
- तीन
...यह वही है जो लौटाया गया है:
{"queryType":"xpathEvaluate","results":["one","two"," three"],"resultType":"string"}
दूसरे शब्दों में, हमें निम्नलिखित सरणी मिलती है: ["एक", "दो", "तीन"]। आम तौर पर, आप ली तत्वों को प्राप्त करने के लिए क्वेरी करेंगे, उस क्वेरी के परिणाम को एक सरणी में बदल देंगे, सरणी को मैप करेंगे, और प्रत्येक तत्व के टेक्स्ट नोड को वापस कर देंगे। लेकिन हम इसे XPath के साथ अधिक संक्षेप में कर सकते हैं: document.queryXPaths('//li/text()').परिणाम।
ध्यान दें कि टेक्स्ट नोड प्राप्त करने का तरीका टेक्स्ट() का उपयोग करना है, जो एक फ़ंक्शन हस्ताक्षर जैसा दिखता है - और यह है। यह किसी तत्व का टेक्स्ट नोड लौटाता है। हमारे उदाहरण में, मार्कअप में तीन ली तत्व हैं, प्रत्येक में टेक्स्ट ("एक", "दो", और "तीन") शामिल हैं।
आइए टेक्स्ट() क्वेरी का एक और उदाहरण देखें। मान लें कि यह हमारा मार्कअप है:
आइए एक क्वेरी लिखें जो href विशेषता मान लौटाती है: document.queryXPaths("//a[text() = 'साइन इन']/@href").परिणाम।
यह वर्तमान दस्तावेज़ पर एक XPath क्वेरी है, पिछले उदाहरण की तरह, लेकिन इस बार हम एक लिंक (एक तत्व) की href विशेषता लौटाते हैं जिसमें "साइन इन" टेक्स्ट शामिल है। वास्तविक वापस आ गयापरिणाम ["/login.html"] है। XPath फ़ंक्शंस अवलोकन कई XPath फ़ंक्शंस हैं, और आप शायद उनसे अपरिचित हैं। मुझे लगता है कि ऐसी कई बातें हैं जिनके बारे में जानना ज़रूरी है, जिनमें निम्नलिखित शामिल हैं:
यदि कोई पाठ किसी विशेष अन्य पाठ उदाहरण के साथ प्रारंभ होता है, तो प्रारंभ-के साथ (@href, 'http:') सत्य लौटाता है यदि href विशेषता http: से प्रारंभ होती है। यदि किसी पाठ में कोई विशेष अन्य पाठ उदाहरण शामिल है, तो include(text(), "Smashing Magazine") सत्य लौटाता है यदि पाठ नोड में कहीं भी "स्मैशिंग मैगज़ीन" शब्द शामिल है। काउंट एक क्वेरी से कितने मिलान हैं इसकी गिनती लौटाता है। उदाहरण के लिए, count(//*[starts-with(@href, 'http:']) यह गणना देता है कि संदर्भ नोड में कितने लिंक में href विशेषता वाले तत्व हैं जिनमें http: से शुरू होने वाला पाठ शामिल है। सबस्ट्रिंग जावास्क्रिप्ट सबस्ट्रिंग की तरह काम करता है, सिवाय इसके कि आप स्ट्रिंग को एक तर्क के रूप में पास करते हैं। उदाहरण के लिए, सबस्ट्रिंग ("मेरा टेक्स्ट", 2, 4) "y t" लौटाता है। सबस्ट्रिंग-पहले एक स्ट्रिंग के भाग को दूसरी स्ट्रिंग से पहले लौटाता है। उदाहरण के लिए, सब्स्टिंग-बिफोर("my text", " ") "my" लौटाता है। इसी तरह, सबस्ट्रिंग-बिफोर('हाय','बाय') एक खाली स्ट्रिंग लौटाता है। सबस्ट्रिंग-आफ्टर एक स्ट्रिंग के भाग को दूसरी स्ट्रिंग के बाद लौटाता है। उदाहरण के लिए, सबस्टिंग-आफ्टर ("मेरा टेक्स्ट", " ") "टेक्स्ट" लौटाता है। इसी तरह, सबस्ट्रिंग-आफ्टर('हाय','बाय') एक खाली स्ट्रिंग लौटाता है। नॉर्मलाइज़-स्पेस, अग्रणी और अनुगामी व्हाइटस्पेस को अलग करके और व्हाइटस्पेस वर्णों के अनुक्रमों को एक ही स्थान से प्रतिस्थापित करके व्हाइटस्पेस के साथ तर्क स्ट्रिंग को सामान्यीकृत करता है। यदि तर्क गलत है तो बूलियन सत्य नहीं लौटाता है, अन्यथा गलत लौटाता है। ट्रूरिटर्न्स बूलियन ट्रू। falseReturns बूलियन ग़लत। concatयह जावास्क्रिप्ट concat के समान ही है, सिवाय इसके कि आप इसे एक स्ट्रिंग पर एक विधि के रूप में नहीं चलाते हैं। इसके बजाय, आप वे सभी तार डालें जिन्हें आप संयोजित करना चाहते हैं। स्ट्रिंग-लंबाई यह जावास्क्रिप्ट स्ट्रिंग-लंबाई के समान नहीं है, बल्कि यह एक तर्क के रूप में दी गई स्ट्रिंग की लंबाई लौटाता है। Translateयह एक स्ट्रिंग लेता है और दूसरे तर्क को तीसरे तर्क में बदल देता है। उदाहरण के लिए, Translate('abcdef', 'abc', 'XYZ') XYZdef आउटपुट करता है।
इन विशेष XPath फ़ंक्शंस के अलावा, ऐसे कई अन्य फ़ंक्शंस हैं जो उनके जावास्क्रिप्ट समकक्षों के समान ही काम करते हैं - या मूल रूप से किसी भी प्रोग्रामिंग भाषा में समकक्ष - जो आपको संभवतः उपयोगी भी लगेंगे, जैसे कि फर्श, छत, गोल, योग, इत्यादि। निम्नलिखित डेमो इनमें से प्रत्येक फ़ंक्शन को दिखाता है: ब्रायन रासमुसेन द्वारा पेन XPath न्यूमेरिकल फ़ंक्शंस [फोर्क्ड] देखें। ध्यान दें कि, अधिकांश स्ट्रिंग मैनिपुलेशन फ़ंक्शंस की तरह, कई संख्यात्मक फ़ंक्शंस एक ही इनपुट लेते हैं। यह निश्चित रूप से है, क्योंकि उनका उपयोग पूछताछ के लिए किया जाना चाहिए, जैसा कि पिछले XPath उदाहरण में है: //li[मंजिल(पाठ()) > 250]/@val
यदि आप उनका उपयोग करते हैं, जैसा कि अधिकांश उदाहरण करते हैं, तो आप इसे पथ से मेल खाने वाले पहले नोड पर चलाएंगे। कुछ प्रकार के रूपांतरण फ़ंक्शन भी हैं जिनसे आपको संभवतः बचना चाहिए क्योंकि जावास्क्रिप्ट में पहले से ही अपनी प्रकार की रूपांतरण समस्याएं हैं। लेकिन कई बार ऐसा भी हो सकता है जब आप किसी स्ट्रिंग को किसी अन्य संख्या से जांचने के लिए उसे किसी संख्या में बदलना चाहें। किसी चीज़ का प्रकार निर्धारित करने वाले फ़ंक्शन बूलियन, संख्या, स्ट्रिंग और नोड हैं। ये महत्वपूर्ण XPath डेटाटाइप हैं। और जैसा कि आप कल्पना कर सकते हैं, इनमें से अधिकांश फ़ंक्शन का उपयोग डेटाटाइप पर किया जा सकता है जो DOM नोड नहीं हैं। उदाहरण के लिए, सबस्ट्रिंग-आफ्टर एक स्ट्रिंग लेता है जैसा कि हम पहले ही कवर कर चुके हैं, लेकिन यह href विशेषता से स्ट्रिंग हो सकती है। यह सिर्फ एक स्ट्रिंग भी हो सकता है:
const testSubstringAfter = document.queryXPaths("substring-after('हैलो वर्ल्ड',' ')");
जाहिर है, यह उदाहरण हमें परिणाम सारणी को ["विश्व"] के रूप में वापस देगा। इसे क्रियान्वित रूप से दिखाने के लिए, मैंने उन चीजों के विरुद्ध फ़ंक्शंस का उपयोग करके एक डेमो पेज बनाया है जो DOM नोड नहीं हैं: ब्रायन रासमुसेन द्वारा लिखित पेन क्वेरीXPath [फोर्क्ड] देखें। आपको अनुवाद फ़ंक्शन के आश्चर्यजनक पहलू पर ध्यान देना चाहिए, जो यह है कि यदि आपके पास दूसरे तर्क में एक चरित्र है (यानी, उन वर्णों की सूची जिन्हें आप अनुवादित करना चाहते हैं) और अनुवाद करने के लिए कोई मिलान वर्ण नहीं है, तो वह वर्ण आउटपुट से हटा दिया जाता है। इस प्रकार, यह:
अनुवाद करें ('हैलो, मेरा नाम इनिगो मोंटोया है, तुमने मेरे पिता को मार डाला, मरने के लिए तैयार हो जाओ', 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
…रिक्त स्थान सहित स्ट्रिंग में परिणाम: ["* * ** "]
इसका मतलब यह है कि अक्षर "ए" का अनुवाद तारांकन चिह्न (*) में किया जा रहा है, लेकिन लक्ष्य स्ट्रिंग में अनुवाद नहीं करने वाले प्रत्येक अन्य वर्ण को पूरी तरह से हटा दिया गया है। रिक्त स्थान ही वह सब कुछ है जो हमारे पास बचा हैअनुवादित "ए" वर्णों के बीच। तो फिर, यह प्रश्न:
अनुवाद करें ('हैलो, मेरा नाम इनिगो मोंटोया है, तुमने मेरे पिता को मार डाला, मरने के लिए तैयार हो जाओ', 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','******************************************************')")
...समस्या नहीं है और परिणाम इस तरह दिखता है:
"***** ** **** ** ***** ******* *** ****** ** ****** ******* ** ***"
यह आपको चौंका सकता है कि XPath अनुवाद फ़ंक्शन जो करता है उसे करने के लिए जावास्क्रिप्ट में कोई आसान तरीका नहीं है, हालांकि कई उपयोग मामलों के लिए, रेगुलर एक्सप्रेशन के साथ रिप्लेसऑल इसे संभाल सकता है। आप उसी दृष्टिकोण का उपयोग कर सकते हैं जो मैंने प्रदर्शित किया है, लेकिन यदि आप केवल स्ट्रिंग्स का अनुवाद करना चाहते हैं तो यह उप-इष्टतम है। निम्नलिखित डेमो जावास्क्रिप्ट संस्करण प्रदान करने के लिए XPath के अनुवाद फ़ंक्शन को लपेटता है: ब्रायन रासमुसेन द्वारा पेन ट्रांसलेशन फ़ंक्शन [फोर्क्ड] देखें। आप इस तरह का कुछ कहां उपयोग कर सकते हैं? तीन-स्थान ऑफसेट के साथ सीज़र सिफर एन्क्रिप्शन पर विचार करें (उदाहरण के लिए, 48 ईसा पूर्व से शीर्ष-ऑफ़-द-लाइन एन्क्रिप्शन):
अनुवाद करें ("सीज़र रूबिकॉन को पार करने की योजना बना रहा है!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
इनपुट टेक्स्ट "सीज़र रूबिकॉन को पार करने की योजना बना रहा है!" परिणाम "Zxbpxo fp Mixkkfkd ql zolpp qeb Oryfzlk!" विभिन्न संभावनाओं का एक और त्वरित उदाहरण देने के लिए, मैंने एक मेटल फ़ंक्शन बनाया जो एक स्ट्रिंग इनपुट लेता है और टेक्स्ट को वापस करने के लिए एक अनुवाद फ़ंक्शन का उपयोग करता है, जिसमें umlauts लेने वाले सभी वर्ण शामिल हैं। ब्रायन रासमुसेन द्वारा पेन मेटल फ़ंक्शन [फोर्क्ड] देखें।
स्थिरांक धातु = (str) => { वापसी अनुवाद(str, "AOUaou","ÄÖÜäöü"); }
और, अगर पाठ दिया जाता है "मोटली क्रू रूल्स, रॉक ऑन ड्यूड्स!", तो "मोटली क्रू रूल्स, रॉक ऑन ड्यूड्स!" वापस आ जाता है। जाहिर है, किसी के पास इस फ़ंक्शन के सभी प्रकार के पैरोडी उपयोग हो सकते हैं। यदि वह आप हैं, तो यह टीवीट्रॉप्स लेख आपको बहुत प्रेरणा देगा। XPath के साथ CSS का उपयोग करना XPath के साथ CSS चयनकर्ताओं का उपयोग करने का हमारा मुख्य कारण याद रखें: CSS काफी हद तक समझता है कि क्लास क्या है, जबकि XPath के साथ आप जो सबसे अच्छा काम कर सकते हैं वह क्लास विशेषता की स्ट्रिंग तुलना है। अधिकांश मामलों में यह काम करेगा. लेकिन यदि आप कभी ऐसी स्थिति में आते हैं, मान लीजिए, किसी ने .primaryLinks और .primaryLinks2 नामक कक्षाएं बनाई हैं और आप .PrimaryLinks कक्षा प्राप्त करने के लिए XPath का उपयोग कर रहे हैं, तो आपको संभवतः समस्याओं का सामना करना पड़ेगा। जब तक ऐसा कुछ भी मूर्खतापूर्ण नहीं है, आप संभवतः XPath का उपयोग करेंगे। लेकिन मुझे यह बताते हुए दुख हो रहा है कि मैंने ऐसी जगहों पर काम किया है जहां लोग इस तरह की मूर्खतापूर्ण चीजें करते हैं। यहां CSS और XPath का एक साथ उपयोग करते हुए एक और डेमो दिया गया है। यह दिखाता है कि क्या होता है जब हम एक XPath को एक संदर्भ नोड पर चलाने के लिए कोड का उपयोग करते हैं जो दस्तावेज़ का नोड नहीं है। ब्रायन रासमुसेन द्वारा पेन सीएसएस और एक्सपाथ को एक साथ देखें [फोर्क्ड]। सीएसएस क्वेरी .संबंधित लेख ए है, जो दो तत्वों को एक .संबंधित लेख वर्ग में असाइन किए गए div में लाती है। उसके बाद तीन "खराब" प्रश्न हैं, यानी, संदर्भ नोड के रूप में इन तत्वों के साथ चलने पर प्रश्न वह नहीं करते जो हम चाहते हैं। मैं समझा सकता हूं कि वे आपकी अपेक्षा से भिन्न व्यवहार क्यों कर रहे हैं। विचाराधीन तीन ख़राब प्रश्न हैं:
//पाठ(): दस्तावेज़ में सभी पाठ लौटाता है। //a/text(): दस्तावेज़ में लिंक के अंदर का सारा टेक्स्ट लौटाता है। ./a/text(): कोई परिणाम नहीं देता।
इन परिणामों का कारण यह है कि जबकि आपका संदर्भ सीएसएस क्वेरी से लौटाया गया तत्व है, // पूरे दस्तावेज़ के विरुद्ध जाता है। यह XPath की ताकत है; सीएसएस एक नोड से पूर्वज तक और फिर उस पूर्वज के भाई-बहन तक नहीं जा सकता है, और उस भाई-बहन के वंशज तक नहीं जा सकता है। लेकिन XPath कर सकता है. इस बीच, ./ वर्तमान नोड के बच्चों से पूछताछ करता है, जहां डॉट (.) वर्तमान नोड का प्रतिनिधित्व करता है, और फॉरवर्ड स्लैश (/) कुछ चाइल्ड नोड पर जाने का प्रतिनिधित्व करता है - चाहे वह एक विशेषता, तत्व या पाठ हो, पथ के अगले भाग द्वारा निर्धारित किया जाता है। लेकिन सीएसएस क्वेरी द्वारा चयनित कोई तत्व नहीं है, इस प्रकार वह क्वेरी भी कुछ नहीं लौटाती है। उस अंतिम डेमो में तीन अच्छे प्रश्न हैं:
.//पाठ(), ./पाठ(), सामान्यीकरण-स्थान(./पाठ())।
नॉर्मलाइज़-स्पेस क्वेरी XPath फ़ंक्शन उपयोग को प्रदर्शित करती है, लेकिन अन्य क्वेरी में शामिल समस्या को भी ठीक करती है। HTML इस प्रकार संरचित है:
सेलेनियम वेबड्राइवर के साथ अपने फ़ीचर परीक्षण को स्वचालित करना
क्वेरी टेक्स्ट नोड के आरंभ और अंत में एक पंक्ति फ़ीड लौटाती है,और नॉर्मलाइज़-स्पेस इसे हटा देता है। किसी भी XPath फ़ंक्शन का उपयोग करना जो इनपुट XPath के साथ बूलियन के अलावा कुछ और लौटाता है, अन्य फ़ंक्शन पर लागू होता है। निम्नलिखित डेमो कई उदाहरण दिखाता है: ब्रायन रासमुसेन द्वारा पेन एक्सपैथ फ़ंक्शन उदाहरण [फोर्क्ड] देखें। पहला उदाहरण एक समस्या दिखाता है जिस पर आपको ध्यान देना चाहिए। विशेष रूप से, निम्नलिखित कोड:
document.queryXPaths('substring-after(//a/@href,'https://')");
...एक स्ट्रिंग लौटाता है:
"www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/"
यह समझ में आता है, है ना? ये फ़ंक्शन सरणियाँ नहीं बल्कि एकल स्ट्रिंग या एकल संख्याएँ लौटाते हैं। एकाधिक परिणामों के साथ कहीं भी फ़ंक्शन चलाने से केवल पहला परिणाम मिलता है। दूसरा परिणाम दिखाता है कि हम वास्तव में क्या चाहते हैं:
document.queryCSSSelectors("a").queryXPaths("substring-after(./@href,'https://')");
जो दो स्ट्रिंग्स की एक सरणी लौटाता है:
["www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/","www.smashingmagazine.com/2022/11/automated-test-results-improve-accessibility/"]
XPath फ़ंक्शंस को जावास्क्रिप्ट में फ़ंक्शंस की तरह ही नेस्ट किया जा सकता है। इसलिए, यदि हम स्मैशिंग मैगज़ीन यूआरएल संरचना को जानते हैं, तो हम निम्नलिखित कार्य कर सकते हैं (टेम्पलेट शाब्दिक का उपयोग करने की अनुशंसा की जाती है): `अनुवाद( सबस्ट्रिंग( सबस्ट्रिंग-आफ्टर(./@href, 'www.smashingmagazine.com/') ,9), '/','')`
यह इस हद तक थोड़ा अधिक जटिल होता जा रहा है कि इसमें यह बताने वाली टिप्पणियों की आवश्यकता है कि यह क्या करता है: www.smashingmagazine.com/ के बाद href विशेषता से सभी URL लें, पहले नौ वर्ण हटा दें, फिर फ़ॉरवर्ड स्लैश (/) वर्ण का अनुवाद करें ताकि अंतिम फ़ॉरवर्ड स्लैश से छुटकारा मिल सके। परिणामी सरणी:
["फ़ीचर-परीक्षण-सेलेनियम-वेबड्राइवर", "स्वचालित-परीक्षण-परिणाम-सुधार-पहुंच-योग्यता"]
अधिक XPath उपयोग के मामले XPath वास्तव में परीक्षण में चमक सकता है। कारण देखना मुश्किल नहीं है, क्योंकि XPath का उपयोग DOM में किसी भी स्थिति से DOM में प्रत्येक तत्व को प्राप्त करने के लिए किया जा सकता है, जबकि CSS नहीं कर सकता। आप कई आधुनिक बिल्ड सिस्टमों में सीएसएस कक्षाओं के सुसंगत बने रहने पर भरोसा नहीं कर सकते हैं, लेकिन XPath के साथ, हम बदलती DOM संरचना की परवाह किए बिना, किसी तत्व की पाठ्य सामग्री के बारे में अधिक मजबूत मिलान करने में सक्षम हैं। ऐसी तकनीकों पर शोध किया गया है जो आपको लचीले XPath परीक्षण करने की अनुमति देती हैं। परीक्षणों के विफल होने और असफल होने से बुरा कुछ भी नहीं है क्योंकि सीएसएस चयनकर्ता अब काम नहीं करता है क्योंकि कुछ का नाम बदल दिया गया है या हटा दिया गया है। XPath एकाधिक लोकेटर निष्कर्षण में भी वास्तव में बहुत अच्छा है। किसी तत्व से मिलान करने के लिए XPath क्वेरीज़ का उपयोग करने के एक से अधिक तरीके हैं। सीएसएस के साथ भी यही सच है. लेकिन XPath क्वेरीज़ अधिक लक्षित तरीके से चीजों में गहराई तक जा सकती हैं जो वापस आने वाली चीज़ों को सीमित कर देती है, जिससे आपको एक विशिष्ट मिलान ढूंढने की अनुमति मिलती है जहां कई संभावित मिलान हो सकते हैं। उदाहरण के लिए, हम एक div के अंदर मौजूद एक विशिष्ट h2 तत्व को वापस करने के लिए XPath का उपयोग कर सकते हैं जो तुरंत एक सहोदर div का अनुसरण करता है, जिसके बदले में, उस पर data-testID = "लीडर" विशेषता के साथ एक चाइल्ड छवि तत्व शामिल होता है:
यह शीर्षक न समझें
यह शीर्षक भी न समझें
नेता छवि के लिए हेडर
यह प्रश्न है: document.queryXPaths(` //div[ निम्नलिखित-भाई-बहन::div[1] /img[@data-testID='leader'] ] /h2/ पाठ() `);
आइए एक डेमो देखें और देखें कि यह सब एक साथ कैसे आता है: ब्रायन रासमुसेन द्वारा पेन कॉम्प्लेक्स एच2 क्वेरी [फोर्क्ड] देखें। इसलिए हां। XPath का उपयोग करके परीक्षण में किसी भी तत्व के लिए कई संभावित पथ हैं। एक्सएसएलटी 1.0 अवनति मैंने पहले ही उल्लेख किया था कि Chrome टीम ब्राउज़र से XSLT 1.0 समर्थन हटाने की योजना बना रही है। यह महत्वपूर्ण है क्योंकि XSLT 1.0 दस्तावेज़ परिवर्तन के लिए XML-केंद्रित प्रोग्रामिंग का उपयोग करता है, जो बदले में, XPath 1.0 पर निर्भर करता है, जो कि अधिकांश ब्राउज़रों में पाया जाता है। जब ऐसा होगा, तो हम XPath का एक प्रमुख घटक खो देंगे। लेकिन इस तथ्य को देखते हुए कि XPath वास्तव में परीक्षण लिखने के लिए बहुत अच्छा है, मुझे यह संभावना नहीं लगती कि XPath समग्र रूप से जल्द ही गायब हो जाएगा। जैसा कि कहा गया है, मैंने देखा है कि जब किसी सुविधा को हटा दिया जाता है तो लोग उसमें दिलचस्पी लेने लगते हैं। और XSLT 1.0 के अप्रचलित होने के मामले में यह निश्चित रूप से सच है। हैकर न्यूज़ पर पूरी चर्चा चल रही है जो निंदा के ख़िलाफ़ तर्कों से भरी हुई है। यह पोस्ट अपने आप में XSLT के साथ ब्लॉगिंग फ्रेमवर्क बनाने का एक बेहतरीन उदाहरण है। आपआप स्वयं चर्चा पढ़ सकते हैं, लेकिन यह इस बात पर प्रकाश डालता है कि इस प्रकार के मामलों को संभालने के लिए एक्सएलएसटी के लिए जावास्क्रिप्ट का उपयोग कैसे किया जा सकता है। मैंने ऐसे सुझाव भी देखे हैं कि ब्राउज़रों को SaxonJS का उपयोग करना चाहिए, जो जावास्क्रिप्ट के सैक्सन XSLT, XQUERY और XPath इंजन के लिए एक पोर्ट है। यह एक दिलचस्प विचार है, विशेष रूप से सैक्सन-जेएस इन विशिष्टताओं के वर्तमान संस्करण को लागू करता है, जबकि ऐसा कोई ब्राउज़र नहीं है जो 1.0 से परे XPath या XSLT के किसी भी संस्करण को लागू करता है, और कोई भी ऐसा नहीं है जो XQuery को लागू करता हो। मैं सैक्सनिका में नॉर्म टोवी-वॉल्श तक पहुंचा, जो सैक्सनजेएस और सैक्सन इंजन के अन्य संस्करणों के पीछे की कंपनी है। उन्होंने कहा: "यदि कोई ब्राउज़र विक्रेता ब्राउज़र में आधुनिक XML प्रौद्योगिकियों को एकीकृत करने के लिए सैक्सनजेएस को शुरुआती बिंदु के रूप में लेने में रुचि रखता है, तो हम उनके साथ इस पर चर्चा करने में रोमांचित होंगे।" - नॉर्म टोवी-वॉल्श
लेकिन यह भी जोड़ा: "मुझे बहुत आश्चर्य होगा अगर किसी ने सोचा कि सैक्सनजेएस को उसके वर्तमान स्वरूप में लेना और उसे ब्राउज़र बिल्ड में अपरिवर्तित छोड़ना आदर्श दृष्टिकोण होगा। एक ब्राउज़र विक्रेता, इस तथ्य की प्रकृति से कि वे ब्राउज़र का निर्माण करते हैं, हम 'बाहर से' की तुलना में कहीं अधिक गहरे स्तर पर एकीकरण कर सकते हैं।" - नॉर्म टोवी-वॉल्श
यह ध्यान देने योग्य है कि टोवी-वॉल्श की टिप्पणियाँ XSLT पदावनत घोषणा से लगभग एक सप्ताह पहले आई थीं। निष्कर्ष मैं लगातार आगे बढ़ सकता था। लेकिन मुझे आशा है कि इसने XPath की शक्ति का प्रदर्शन किया है और आपको महान चीजों को प्राप्त करने के लिए इसका उपयोग करने के कई उदाहरण दिए हैं। यह ब्राउज़र स्टैक में पुरानी तकनीक का एक आदर्श उदाहरण है जिसकी आज भी बहुत उपयोगिता है, भले ही आपको इसके अस्तित्व के बारे में कभी नहीं पता था या आपने कभी इस तक पहुंचने के बारे में नहीं सोचा था। आगे पढ़ना
"प्राकृतिक भाषा के साथ स्वचालित वेब परीक्षणों के लचीलेपन को बढ़ाना" (एसीएम डिजिटल लाइब्रेरी) मारून अयली, यूसुफ बकौनी, नादेर जलौल और रीमा किलानी द्वारा। यह लेख लचीला परीक्षण लिखने के लिए कई XPath उदाहरण प्रदान करता है। XPath (MDN) यदि आप XPath कैसे काम करता है इसका विवरण देने वाली तकनीकी व्याख्या चाहते हैं तो यह शुरुआत करने के लिए एक उत्कृष्ट जगह है। XPath ट्यूटोरियल (ZVON) मैंने पाया है कि यह ट्यूटोरियल मेरे सीखने में सबसे अधिक मददगार है, ढेर सारे उदाहरणों और स्पष्ट स्पष्टीकरणों के लिए धन्यवाद। XPatherयह इंटरैक्टिव टूल आपको सीधे कोड के साथ काम करने देता है।
