मी अनेक वर्षांपासून एक ट्रेंड पाहण्यासाठी पुरेसा फ्रंट-एंड डेव्हलपमेंटमध्ये आहे: तरुण विकासक प्रोग्रामिंगचा ऐतिहासिक संदर्भ न समजता नवीन पॅराडाइमसह काम करत आहेत. अर्थातच, काहीतरी माहित नसणे हे पूर्णपणे समजण्यासारखे आहे. वेब हे विविध कौशल्ये आणि वैशिष्ट्यांसह एक खूप मोठे ठिकाण आहे आणि आम्हाला जे माहित नाही ते नेहमीच माहित नसते. या क्षेत्रात शिकणे हा एक अखंड प्रवास आहे जे एकदा घडते आणि संपते. मुद्दाम: माझ्या टीममधील कोणीतरी विचारले की वापरकर्ते UI मधील विशिष्ट टॅबमधून दूर नेव्हिगेट करतात की नाही हे सांगणे शक्य आहे का. मी JavaScript च्या अनलोड इव्हेंट आधी निदर्शनास आणले. परंतु ज्यांनी हे आधी हाताळले आहे त्यांना हे शक्य आहे हे माहित आहे कारण त्यांना इतर साइट्सवर जतन न केलेल्या डेटाबद्दल अलर्ट मिळाले आहेत, ज्यासाठी आधी अनलोड करणे ही एक सामान्य बाब आहे. मी चांगल्या उपायासाठी माझ्या सहकाऱ्याला पेजहाइड आणि दृश्यमानता बदला इव्हेंट देखील दाखवले. मला ते कसे कळले? कारण ते दुसऱ्या प्रोजेक्टमध्ये आले आहे, मी सुरुवातीला JavaScript शिकत असताना त्यावर अभ्यास केला म्हणून नाही. वस्तुस्थिती अशी आहे की आधुनिक फ्रंट-एंड फ्रेमवर्क त्यांच्या आधीच्या तंत्रज्ञान दिग्गजांच्या खांद्यावर उभे आहेत. ते अमूर्त विकास पद्धती, बहुतेकदा चांगल्या विकासकाच्या अनुभवासाठी जे कमी करतात किंवा काढून टाकतात, पारंपारिकपणे आवश्यक असलेल्या फ्रंट-एंड संकल्पना प्रत्येकाला माहित असणे आवश्यक आहे हे जाणून घेण्याची किंवा स्पर्श करण्याची आवश्यकता असते. CSS ऑब्जेक्ट मॉडेल (CSSOM) चा विचार करा. तुम्ही अपेक्षा करू शकता की CSS आणि JavaScript मध्ये काम करणाऱ्या कोणालाही CSSOM अनुभवाचा एक समूह आहे, परंतु नेहमीच असे होणार नाही. सध्या निवडलेल्या पेमेंट प्रदात्यासाठी आम्हाला स्टाइलशीट लोड करण्याची आवश्यकता असलेल्या ई-कॉमर्स साइटसाठी एक प्रतिक्रिया प्रकल्प होता ज्यावर मी काम केले. समस्या अशी होती की स्टाइलशीट प्रत्येक पृष्ठावर लोड होत होती जेव्हा ती केवळ विशिष्ट पृष्ठावर आवश्यक असते. हे घडवून आणण्याचे काम ज्या डेव्हलपरने केले आहे त्याने कधीही स्टाईलशीट डायनॅमिकली लोड केलेली नाही. पुन्हा, हे पूर्णपणे समजण्यासारखे आहे जेव्हा React तुम्ही ज्या पारंपारिक दृष्टीकोनापर्यंत पोहोचला असाल त्याचा गोषवारा काढून टाकतो. CSSOM ही कदाचित तुम्हाला तुमच्या दैनंदिन कामात आवश्यक असलेली गोष्ट नाही. परंतु कदाचित तुम्हाला एखाद्या वेळी त्याच्याशी संवाद साधण्याची आवश्यकता असेल, अगदी एका-एक प्रसंगातही. या अनुभवांनी मला हा लेख लिहिण्याची प्रेरणा दिली. जंगलात अनेक विद्यमान वेब वैशिष्ट्ये आणि तंत्रज्ञान आहेत ज्यांना तुम्ही तुमच्या दैनंदिन कामात थेट स्पर्श करू शकत नाही. कदाचित तुम्ही वेब डेव्हलपमेंटसाठी अगदी नवीन असाल आणि तुम्हाला त्याबद्दल माहिती नसेल कारण तुम्ही एका विशिष्ट फ्रेमवर्कच्या अमूर्ततेमध्ये अडकलेले आहात ज्यासाठी तुम्हाला ते खोलवर किंवा अगदी अजिबात जाणून घेण्याची आवश्यकता नाही. मी विशेषत: XML बद्दल बोलत आहे, जी आपल्यापैकी अनेकांना माहित आहे की एक प्राचीन भाषा आहे जी HTML पेक्षा पूर्णपणे भिन्न नाही. XSLT प्रोग्रामिंग म्हणून ओळखल्या जाणाऱ्या XML स्टॅकचा एक महत्त्वाचा भाग ब्राउझरमधून काढून टाकला जावा असे सुचवणाऱ्या अलीकडील WHATWG चर्चेमुळे मी हे समोर आणत आहे. हे अगदी जुन्या, विद्यमान तंत्रज्ञानाचा प्रकार आहे जे आमच्याकडे वर्षानुवर्षे आहे ज्याचा वापर CSSOM परिस्थितीप्रमाणेच व्यावहारिक गोष्टींसाठी केला जाऊ शकतो. तुम्ही यापूर्वी XSLT सह काम केले आहे का? आजच्या वास्तविक-जगातील समस्यांना तोंड देण्यासाठी आपण या जुन्या तंत्रज्ञानाकडे मोठ्या प्रमाणावर झुकतो आणि XML च्या संदर्भाबाहेर त्याच्या वैशिष्ट्यांचा फायदा घेतो का ते पाहू या. XPath: केंद्रीय API सर्वात महत्वाचे XML तंत्रज्ञान जे कदाचित सरळ XML परिप्रेक्ष्याबाहेर सर्वात उपयुक्त आहे XPath, एक क्वेरी भाषा जी तुम्हाला एका रूट घटकासह मार्कअप ट्रीमध्ये कोणतेही नोड किंवा विशेषता शोधू देते. मला XSLT बद्दल वैयक्तिक स्नेह आहे, परंतु ते XPath वर देखील अवलंबून आहे आणि वैयक्तिक स्नेह हे क्रमवारीतील महत्त्व बाजूला ठेवले पाहिजे. XSLT काढून टाकण्याच्या युक्तिवादात XPath चा कोणताही उल्लेख नाही, म्हणून मला वाटते की त्याला अद्याप परवानगी आहे. हे चांगले आहे कारण XPath हे तंत्रज्ञानाच्या या संचातील मध्यवर्ती आणि सर्वात महत्वाचे API आहे, विशेषत: सामान्य XML वापराच्या बाहेर वापरण्यासाठी काहीतरी शोधण्याचा प्रयत्न करताना. हे महत्त्वाचे आहे कारण, CSS निवडक तुमच्या पेजमधील बहुतांश घटक शोधण्यासाठी वापरले जाऊ शकतात, परंतु ते ते सर्व शोधू शकत नाहीत. शिवाय, DOM मधील त्याच्या वर्तमान स्थितीवर आधारित घटक शोधण्यासाठी CSS निवडकांचा वापर केला जाऊ शकत नाही. XPath करू शकता. आता, हे वाचत असलेल्या तुमच्यापैकी काहींना कदाचित XPath माहित असेल आणि काहींना नसेल. XPath हे तंत्रज्ञानाचे खूप मोठे क्षेत्र आहे, आणि मी खरोखरच सर्व मूलभूत गोष्टी शिकवू शकत नाही आणि यासारख्या एका लेखात तुम्हाला त्यासोबत करण्याच्या छान गोष्टी देखील दाखवू शकत नाही. मी खरोखर तो लेख लिहिण्याचा प्रयत्न केला, परंतु सरासरी Smashing Magazine प्रकाशन 5,000 शब्दांपेक्षा जास्त नाही. मी आधीच जास्त होते2,000 शब्द फक्त मूलभूत गोष्टींमधून अर्धवट असताना. म्हणून, मी XPath सोबत छान गोष्टी करायला सुरुवात करणार आहे आणि तुम्हाला काही लिंक्स देईन ज्या तुम्हाला मूलभूत गोष्टींसाठी वापरता येतील जर तुम्हाला ही सामग्री मनोरंजक वाटत असेल. XPath आणि CSS एकत्र करणे XPath अनेक गोष्टी करू शकते जे CSS निवडक घटकांची क्वेरी करताना करू शकत नाहीत. परंतु CSS निवडक काही गोष्टी देखील करू शकतात ज्या XPath करू शकत नाहीत, म्हणजे, वर्ग नावानुसार घटक क्वेरी.
CSS XPath .myClass /*[समाविष्ट आहे(@class, "myClass")]
या उदाहरणात, .myClass वर्गनाव असलेले घटक CSS क्वेरी करतात. दरम्यान, XPath उदाहरणामध्ये “myClass” या स्ट्रिंगसह विशेषता वर्ग असलेल्या घटकांची चौकशी केली जाते. दुस-या शब्दात, ते .myClass वर्गनाव — तसेच स्ट्रिंगमध्ये “myClass” असलेले घटक, जसे की .myClass2 सह, कोणत्याही विशेषतामध्ये myClass सह घटक निवडते. XPath त्या अर्थाने व्यापक आहे. तर, नाही. मी असे सुचवत नाही की आम्ही CSS बाहेर टाकले पाहिजे आणि XPath द्वारे सर्व घटक निवडणे सुरू केले पाहिजे. तो मुद्दा नाही. मुद्दा असा आहे की XPath अशा गोष्टी करू शकते जे CSS करू शकत नाही आणि तरीही ते खूप उपयुक्त असू शकते, जरी ते ब्राउझर स्टॅकमध्ये जुने तंत्रज्ञान आहे आणि पहिल्या दृष्टीक्षेपात स्पष्ट दिसत नाही. दोन तंत्रज्ञानाचा एकत्र वापर करू या फक्त कारण नाही तर आपण प्रक्रियेत XPath बद्दल काहीतरी शिकू, ते तुमच्या स्टॅकमध्ये दुसरे साधन बनवू - जे तुम्हाला कदाचित माहित नसेल की ते तिथे आहे! समस्या अशी आहे की JavaScript ची document.evaluate पद्धत आणि आम्ही JavaScript साठी CSS API सह वापरत असलेल्या विविध क्वेरी निवडक पद्धती विसंगत आहेत. आम्हाला प्रारंभ करण्यासाठी मी एक सुसंगत क्वेरीिंग API बनवले आहे, हे मान्य असले तरी, आम्ही येथे जे करत आहोत त्यापासून ते दूर झाल्यामुळे मी त्यात फारसा विचार केला नाही. येथे पुन्हा वापरता येण्याजोग्या क्वेरी कन्स्ट्रक्टरचे अगदी सोपे कार्य उदाहरण आहे: ब्रायन रासमुसेनची पेन क्वेरी एक्सपाथ [फोर्क केलेले] पहा. मी दस्तऐवज ऑब्जेक्टवर दोन पद्धती जोडल्या आहेत: queryCSSSelectors (जे मूलत: querySelectorAll आहे) आणि queryXPaths. हे दोन्ही queryResults ऑब्जेक्ट परत करतात:
{ क्वेरी प्रकार: नोड्स | स्ट्रिंग | संख्या | बुलियन परिणाम: कोणतेही[] // html घटक, xml घटक, तार, संख्या, बुलियन, queryCSSSelectors: (query: string, amend: boolean) => क्वेरी परिणाम, queryXpaths: (query: string, amend: boolean) => क्वेरी परिणाम }
queryCSSSelectors आणि queryXpaths फंक्शन्स रिझल्ट ॲरेमधील घटकांवर तुम्ही दिलेली क्वेरी चालवतात, जोपर्यंत रिझल्ट ॲरे अर्थातच नोड्स प्रकारातील असतात. अन्यथा, ते रिक्त ॲरे आणि नोड्सच्या प्रकारासह क्वेरी परिणाम देईल. दुरुस्ती गुणधर्म सत्य वर सेट केल्यास, फंक्शन्स त्यांचे स्वतःचे क्वेरी परिणाम बदलतील. कोणत्याही परिस्थितीत हे उत्पादन वातावरणात वापरले जाऊ नये. दोन क्वेरी API एकत्र वापरण्याचे विविध परिणाम दाखवण्यासाठी मी असे करत आहे. उदाहरण क्वेरी मला वेगवेगळ्या XPath प्रश्नांची काही उदाहरणे दाखवायची आहेत जी ते करू शकतील अशा काही शक्तिशाली गोष्टी आणि ते इतर दृष्टिकोनांच्या जागी कसे वापरले जाऊ शकतात हे दर्शवितात. पहिले उदाहरण आहे //li/text(). हे सर्व li घटकांची चौकशी करते आणि त्यांचे मजकूर नोड्स परत करते. तर, जर आम्हाला खालील HTML ची चौकशी करायची असेल:
- एक
- दोन
- तीन
…हे परत केले आहे:
{"queryType":"xpathEvaluate","results":["one","दोन","तीन"],"resultType":"string"}
दुसऱ्या शब्दांत, आम्हाला खालील ॲरे मिळतात: ["एक","दोन","तीन"]. साधारणपणे, तुम्ही ते मिळवण्यासाठी li घटकांसाठी क्वेरी कराल, त्या क्वेरीचा परिणाम ॲरेमध्ये बदला, ॲरेचा नकाशा तयार करा आणि प्रत्येक घटकाचा मजकूर नोड परत करा. परंतु आम्ही ते XPath सह अधिक संक्षिप्तपणे करू शकतो: document.queryXPaths("//li/text()").परिणाम.
लक्षात घ्या की मजकूर नोड मिळविण्याचा मार्ग म्हणजे मजकूर वापरणे, जे फंक्शन स्वाक्षरीसारखे दिसते - आणि ते आहे. ते घटकाचा मजकूर नोड परत करते. आमच्या उदाहरणात, मार्कअपमध्ये तीन li घटक आहेत, प्रत्येकामध्ये मजकूर आहे ("एक", "दोन" आणि "तीन").
टेक्स्ट() क्वेरीचे आणखी एक उदाहरण पाहू. हे आमचे मार्कअप आहे असे गृहीत धरा:
चला एक क्वेरी लिहू जी href विशेषता मूल्य देते: document.queryXPaths("//a[text() = 'साइन इन']/@href").परिणाम.
ही सध्याच्या दस्तऐवजावरील XPath क्वेरी आहे, अगदी शेवटच्या उदाहरणाप्रमाणेच, परंतु यावेळी आम्ही "साइन इन" मजकूर असलेल्या लिंकची href विशेषता (एक घटक) परत करतो. प्रत्यक्ष परतलेपरिणाम ["/login.html"] आहे. XPath फंक्शन्स विहंगावलोकन तेथे अनेक XPath फंक्शन्स आहेत आणि तुम्ही कदाचित त्यांच्याशी अपरिचित असाल. माझ्या मते, खालील गोष्टींसह अनेक गोष्टी जाणून घेण्यासारख्या आहेत:
starts-withएखादे मजकूर एखाद्या विशिष्ट इतर मजकूर उदाहरणाने सुरू होत असल्यास, starts-with(@href, 'http:') जर href विशेषता http: ने सुरू होत असेल तर ते खरे दर्शवते. समाविष्टीत असल्यास मजकुरामध्ये विशिष्ट इतर मजकूर उदाहरण असल्यास, समाविष्टीत(टेक्स्ट(), "स्मॅशिंग मॅगझिन") जर मजकूर नोडमध्ये कुठेही "स्मॅशिंग मॅगझिन" शब्द असतील तर ते खरे दर्शवते. count एका क्वेरीमध्ये किती जुळण्या आहेत याची गणना मिळवते. उदाहरणार्थ, Count(//*[starts-with(@href, 'http:']) संदर्भ नोडमधील किती लिंक्समध्ये href विशेषता असलेले घटक आहेत ज्यामध्ये http: ने सुरू होणारा मजकूर आहे याची गणना देते. सबस्ट्रिंग JavaScript सबस्ट्रिंग सारखे कार्य करते, तुम्ही स्ट्रिंगला आर्ग्युमेंट म्हणून पास केल्याशिवाय. उदाहरणार्थ, सबस्ट्रिंग ("माझा मजकूर", 2, 4) "y t" मिळवते. substring-before दुसऱ्या स्ट्रिंगच्या आधी स्ट्रिंगचा भाग परत करतो. उदाहरणार्थ, substing-before("माझा मजकूर", " ") "माय" परत करतो. त्याचप्रमाणे, substring-before("hi","bye") रिकामी स्ट्रिंग मिळवते. substring-after दुस-या स्ट्रिंगनंतर स्ट्रिंगचा भाग परत करतो. उदाहरणार्थ, substing-after("माझा मजकूर", " ") "मजकूर" मिळवते. त्याचप्रमाणे, substring-after("hi","bye") रिकामी स्ट्रिंग मिळवते. normalize-space रिटर्न व्हाईटस्पेससह वितर्क स्ट्रिंग सामान्यीकृत करून अग्रगण्य आणि अनुगामी व्हाइटस्पेस काढून टाकते आणि व्हाइटस्पेस वर्णांचे अनुक्रम एका स्पेसने बदलते. not आर्ग्युमेंट असत्य असल्यास बुलियन सत्य परत करते, अन्यथा असत्य. trueReturns boolean true. खोटे बुलियन फॉल्स परत करते. concat JavaScript concat सारखीच गोष्ट, तुम्ही स्ट्रिंगवर पद्धत म्हणून चालवल्याशिवाय. त्याऐवजी, तुम्ही जोडू इच्छित असलेल्या सर्व स्ट्रिंग्स टाकता. string-length ही JavaScript स्ट्रिंग-लांबी सारखी नाही, तर ती वितर्क म्हणून दिलेली स्ट्रिंगची लांबी मिळवते. translate हे एक स्ट्रिंग घेते आणि दुसरा वितर्क तिसऱ्या वितर्कमध्ये बदलते. उदाहरणार्थ, भाषांतर करा("abcdef", "abc", "XYZ") XYZdef आउटपुट करा.
या विशिष्ट XPath फंक्शन्स व्यतिरिक्त, इतर अनेक फंक्शन्स आहेत जी त्यांच्या JavaScript समकक्षांसारखीच कार्य करतात — किंवा मुळात कोणत्याही प्रोग्रामिंग भाषेतील समकक्ष — जी तुम्हाला कदाचित उपयुक्त वाटतील, जसे की मजला, कमाल मर्यादा, गोलाकार, बेरीज इत्यादी. खालील डेमो यापैकी प्रत्येक फंक्शन्स स्पष्ट करतो: ब्रायन रासमुसेनची पेन एक्सपाथ संख्यात्मक कार्ये [फोर्क केलेले] पहा. लक्षात घ्या की, बहुतेक स्ट्रिंग मॅनिपुलेशन फंक्शन्सप्रमाणे, अनेक संख्यात्मक एकल इनपुट घेतात. हे अर्थातच आहे, कारण शेवटच्या XPath उदाहरणाप्रमाणे ते क्वेरीसाठी वापरले जाणे अपेक्षित आहे: //li[floor(text()) > 250]/@val
तुम्ही त्यांचा वापर केल्यास, बहुतेक उदाहरणांप्रमाणे, तुम्ही ते पथाशी जुळणाऱ्या पहिल्या नोडवर चालवू शकाल. काही प्रकारचे रूपांतरण फंक्शन्स देखील आहेत ज्या तुम्ही टाळल्या पाहिजेत कारण JavaScript मध्ये आधीपासूनच स्वतःच्या प्रकारच्या रूपांतरण समस्या आहेत. परंतु असे काही वेळा असू शकतात जेव्हा तुम्ही स्ट्रिंगला नंबरमध्ये रूपांतरित करू इच्छित असाल की ते इतर नंबरच्या विरूद्ध तपासा. बुलियन, नंबर, स्ट्रिंग आणि नोड ही फंक्शन्स जी एखाद्या गोष्टीचा प्रकार सेट करतात. हे महत्त्वाचे XPath डेटाटाइप आहेत. आणि तुम्ही कल्पना करू शकता की, यापैकी बहुतेक फंक्शन्स DOM नोड नसलेल्या डेटाटाइपवर वापरली जाऊ शकतात. उदाहरणार्थ, substring-after एक स्ट्रिंग घेते जसे आम्ही आधीच कव्हर केले आहे, परंतु ती एखाद्या href विशेषता मधील स्ट्रिंग असू शकते. हे फक्त एक स्ट्रिंग देखील असू शकते:
const testSubstringAfter = document.queryXPaths("substring-after('hello world',' ')");
अर्थात, हे उदाहरण आम्हाला परिणाम ॲरे ["world"] म्हणून परत देईल. हे कृतीत दाखवण्यासाठी, मी DOM नोड नसलेल्या गोष्टींविरुद्ध फंक्शन्स वापरून डेमो पेज बनवले आहे: ब्रायन रासमुसेनची पेन क्वेरी एक्सपाथ [फोर्क केलेले] पहा. तुम्ही ट्रान्सलेट फंक्शनचा आश्चर्यकारक पैलू लक्षात घ्यावा, तो असा की जर तुमच्याकडे दुसऱ्या युक्तिवादात एखादे वर्ण असेल (म्हणजे, तुम्हाला भाषांतरित करायचे असलेल्या वर्णांची सूची) आणि भाषांतर करण्यासाठी कोणतेही जुळणारे वर्ण नसल्यास, ते वर्ण आउटपुटमधून काढून टाकले जाईल. अशा प्रकारे, हे:
भाषांतर ('हॅलो, माझे नाव इनिगो मोंटोया आहे, तुम्ही माझ्या वडिलांना मारले, मरण्याची तयारी केली','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
…स्पेससह स्ट्रिंगमधील परिणाम: [" * * ** "]
याचा अर्थ असा की "a" अक्षर तारांकित (*) मध्ये भाषांतरित केले जात आहे, परंतु लक्ष्य स्ट्रिंग दिलेले भाषांतर नसलेले प्रत्येक वर्ण पूर्णपणे काढून टाकले आहे. व्हाईटस्पेस फक्त आम्ही बाकी आहेअनुवादित “a” वर्णांमध्ये. मग पुन्हा, ही क्वेरी:
भाषांतर करा('हॅलो, माझे नाव इनिगो मोंटोया आहे, तुम्ही माझ्या वडिलांना मारले, मरण्याची तयारी करा','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','******************************************))
…समस्या नाही आणि असे दिसते असे परिणाम देते:
"**********************************************************"
XPath भाषांतर फंक्शन नेमके काय करते ते करण्यासाठी JavaScript मध्ये कोणताही सोपा मार्ग नाही हे कदाचित तुम्हाला ठणकावून सांगेल, जरी बर्याच वापराच्या प्रकरणांसाठी, नियमित अभिव्यक्तीसह बदला सर्व ते हाताळू शकते. मी दाखवून दिलेला समान दृष्टीकोन तुम्ही वापरू शकता, परंतु जर तुम्हाला फक्त स्ट्रिंग्सचे भाषांतर करायचे असेल तर ते सर्वोत्कृष्ट आहे. खालील डेमो JavaScript आवृत्ती प्रदान करण्यासाठी XPath चे भाषांतर कार्य गुंडाळते: ब्रायन रासमुसेनचे पेन भाषांतर कार्य [फोर्क केलेले] पहा. आपण असे काहीतरी कुठे वापरू शकता? तीन-स्थान ऑफसेटसह सीझर सायफर एन्क्रिप्शनचा विचार करा (उदा. 48 B.C. पासून टॉप-ऑफ-द-लाइन एन्क्रिप्शन):
भाषांतर करा("सीझर रुबिकॉन ओलांडण्याचा विचार करत आहे!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
इनपुट मजकूर "सीझर रुबिकॉन पार करण्याची योजना आखत आहे!" परिणाम "Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!" भिन्न शक्यतांचे आणखी एक द्रुत उदाहरण देण्यासाठी, मी एक मेटल फंक्शन बनवले आहे जे स्ट्रिंग इनपुट घेते आणि मजकूर परत करण्यासाठी ट्रान्सलेट फंक्शन वापरते, ज्यामध्ये umlauts घेतलेल्या सर्व वर्णांचा समावेश होतो. ब्रायन रासमुसेनचे पेन मेटल फंक्शन [फोर्क केलेले] पहा.
const metal = (str) => { परत अनुवाद (str, "AOUaou","ÄÖÜäöü"); }
आणि, "मोटली क्रू रुल्स, रॉक ऑन ड्यूड्स!" असा मजकूर दिल्यास, "मोटली क्रू rüles, रॉक ön düdes!" परत येतो. अर्थात, या फंक्शनचे सर्व प्रकारचे विडंबन उपयोग असू शकतात. जर ते तुम्ही असाल, तर हा TVTropes लेख तुम्हाला भरपूर प्रेरणा देईल. XPath सह CSS वापरणे XPath सोबत CSS सिलेक्टर्स वापरण्याचे आमचे मुख्य कारण लक्षात ठेवा: CSS ला क्लास काय आहे हे बऱ्याच प्रमाणात समजते, तर XPath सह तुम्ही सर्वोत्तम करू शकता ते म्हणजे क्लास विशेषताची स्ट्रिंग तुलना. हे बहुतेक प्रकरणांमध्ये कार्य करेल. परंतु जर तुम्ही अशा परिस्थितीला सामोरे जात असाल की, म्हणा, कोणीतरी .primaryLinks आणि .primaryLinks2 नावाचे वर्ग तयार केले आणि तुम्ही .primaryLinks क्लास मिळवण्यासाठी XPath वापरत असाल, तर तुम्हाला समस्यांना सामोरे जावे लागेल. जोपर्यंत यासारखे मूर्ख काहीही नाही तोपर्यंत, तुम्ही कदाचित XPath वापराल. पण मला कळवताना वाईट वाटते की मी अशा ठिकाणी काम केले आहे जिथे लोक अशा प्रकारच्या मूर्ख गोष्टी करतात. येथे CSS आणि XPath एकत्र वापरून आणखी एक डेमो आहे. दस्तऐवजाचा नोड नसलेल्या संदर्भ नोडवर XPath चालवण्यासाठी आम्ही कोड वापरतो तेव्हा काय होते ते ते दाखवते. ब्रायन रासमुसेनचे पेन css आणि xpath एकत्र पहा. CSS क्वेरी .relatedarticles a आहे, जी .relatedarticles वर्ग नियुक्त केलेल्या div मध्ये दोन घटक मिळवते. त्यानंतर तीन “खराब” क्वेरी आहेत, म्हणजेच या घटकांसोबत कॉन्टेक्स्ट नोड म्हणून चालवताना आम्हाला जे करायचे आहे ते करत नाहीत अशा क्वेरी. तुमच्या अपेक्षेपेक्षा ते वेगळे का वागत आहेत हे मी समजावून सांगू शकतो. प्रश्नातील तीन वाईट प्रश्न आहेत:
//text(): दस्तऐवजातील सर्व मजकूर परत करतो. //a/text(): दस्तऐवजातील लिंकमधील सर्व मजकूर परत करतो. ./a/text(): कोणतेही परिणाम मिळत नाहीत.
या परिणामांचे कारण असे आहे की तुमचा संदर्भ हा CSS क्वेरीमधून परत केलेला घटक आहे, // संपूर्ण दस्तऐवजाच्या विरुद्ध आहे. ही XPath ची ताकद आहे; CSS नोडमधून पूर्वजांपर्यंत आणि नंतर त्या पूर्वजाच्या भावंडाकडे जाऊ शकत नाही आणि त्या भावंडाच्या वंशजांपर्यंत जाऊ शकत नाही. पण XPath करू शकतो. दरम्यान, ./ सध्याच्या नोडच्या मुलांना क्वेरी करते, जिथे बिंदू (.) वर्तमान नोडचे प्रतिनिधित्व करतो आणि फॉरवर्ड स्लॅश (/) काही चाइल्ड नोडकडे जाण्याचे प्रतिनिधित्व करतो — मग ते गुणधर्म, घटक किंवा मजकूर पथाच्या पुढील भागाद्वारे निर्धारित केला जातो. परंतु CSS क्वेरीद्वारे निवडलेला कोणताही मूल घटक नाही, अशा प्रकारे ती क्वेरी देखील काहीही परत करत नाही. त्या शेवटच्या डेमोमध्ये तीन चांगल्या क्वेरी आहेत:
.//text(), ./text(), normalize-space(./text()).
नॉर्मलाइज-स्पेस क्वेरी XPath फंक्शन वापर दर्शवते, परंतु इतर क्वेरींमध्ये समाविष्ट असलेल्या समस्येचे निराकरण देखील करते. HTML ची रचना अशी आहे:
सेलेनियम वेबड्रायव्हरसह आपले वैशिष्ट्य चाचणी स्वयंचलित करणे
क्वेरी मजकूर नोडच्या सुरूवातीस आणि शेवटी एक लाइन फीड देते,आणि normalize-space हे काढून टाकते. इनपुट 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 फंक्शन्स JavaScript मधील फंक्शन्सप्रमाणेच नेस्ट करता येतात. त्यामुळे, जर आम्हाला Smashing Magazine URL ची रचना माहित असेल, तर आम्ही खालील गोष्टी करू शकतो (टेम्प्लेट लिटरल्स वापरण्याची शिफारस केली जाते): `अनुवाद( सबस्ट्रिंग( substring-after(./@href, ‘www.smashingmagazine.com/') ,9), '/', '')''
हे इतके गुंतागुंतीचे होत आहे की ते काय करते याचे वर्णन करणाऱ्या टिप्पण्या आवश्यक आहेत: www.smashingmagazine.com/ नंतर href विशेषता मधून सर्व URL घ्या, पहिले नऊ वर्ण काढून टाका, नंतर फॉरवर्ड स्लॅश (/) वर्णाचे काहीही न करता भाषांतर करा जेणेकरून शेवटच्या फॉरवर्ड स्लॅशपासून सुटका होईल. परिणामी ॲरे:
["वैशिष्ट्य-चाचणी-सेलेनियम-वेबड्रायव्हर","स्वयंचलित-चाचणी-परिणाम-सुधारणा-प्रवेशयोग्यता"]
अधिक XPath वापर प्रकरणे XPath चाचणीमध्ये खरोखर चमकू शकते. कारण पाहणे अवघड नाही, कारण XPath चा वापर DOM मधील प्रत्येक घटक DOM मधील कोणत्याही स्थानावरून मिळवण्यासाठी केला जाऊ शकतो, तर CSS करू शकत नाही. तुम्ही अनेक आधुनिक बिल्ड सिस्टीममध्ये सुसंगत राहिलेल्या CSS वर्गांवर विश्वास ठेवू शकत नाही, परंतु XPath सह, बदलत्या DOM संरचनेची पर्वा न करता, घटकाची मजकूर सामग्री काय आहे याबद्दल आम्ही अधिक मजबूत जुळणी करण्यास सक्षम आहोत. तुम्हाला लवचिक XPath चाचण्या करण्याची परवानगी देणाऱ्या तंत्रांवर संशोधन झाले आहे. सीएसएस सिलेक्टर यापुढे काम करत नाही कारण काहीतरी पुनर्नामित केले गेले आहे किंवा काढून टाकले गेले आहे म्हणून चाचण्या बाहेर पडणे आणि अयशस्वी होण्यापेक्षा काहीही वाईट नाही. एकाधिक लोकेटर काढण्यासाठी XPath देखील खरोखर उत्कृष्ट आहे. एखाद्या घटकाशी जुळण्यासाठी XPath क्वेरी वापरण्याचे एकापेक्षा जास्त मार्ग आहेत. सीएसएसच्या बाबतीतही असेच आहे. परंतु XPath क्वेरी अधिक लक्ष्यित मार्गाने गोष्टींमध्ये ड्रिल करू शकतात जे परत मिळण्यावर मर्यादा घालतात, तुम्हाला एक विशिष्ट जुळणी शोधण्याची परवानगी देते जिथे अनेक संभाव्य जुळण्या असू शकतात. उदाहरणार्थ, div मध्ये समाविष्ट असलेला विशिष्ट h2 घटक परत करण्यासाठी आम्ही XPath वापरू शकतो जे लगेच एका भावंड div चे अनुसरण करते ज्यामध्ये, डेटा-testID="leader" विशेषता असलेले चाइल्ड इमेज घटक समाविष्ट आहे:
ही मथळा मिळत नाही
ही हेडलाइन मिळवू नका
नेत्याच्या प्रतिमेसाठी शीर्षलेख
ही क्वेरी आहे: document.queryXPaths(` //div[ खालील-भाऊ::div[1] /img[@data-testID='leader'] ] /h2/ मजकूर() `);
हे सर्व कसे एकत्र येते ते पाहण्यासाठी डेमो टाकूया: ब्रायन रासमुसेनची पेन कॉम्प्लेक्स H2 क्वेरी [फोर्क केलेली] पहा. तर, होय. XPath वापरून चाचणीमध्ये कोणत्याही घटकासाठी बरेच संभाव्य मार्ग आहेत. XSLT 1.0 घसारा मी सुरुवातीला उल्लेख केला आहे की Chrome टीम ब्राउझरमधून XSLT 1.0 समर्थन काढून टाकण्याची योजना आखत आहे. ते महत्त्वाचे आहे कारण XSLT 1.0 दस्तऐवज परिवर्तनासाठी XML-केंद्रित प्रोग्रामिंग वापरते जे, XPath 1.0 वर अवलंबून असते, जे बहुतेक ब्राउझरमध्ये आढळते. असे झाल्यावर, आम्ही XPath चा मुख्य घटक गमावू. परंतु XPath चाचण्या लिहिण्यासाठी खरोखरच उत्तम आहे हे लक्षात घेता, मला असे वाटते की संपूर्णपणे XPath लवकरच कधीही अदृश्य होईल. ते म्हणाले, माझ्या लक्षात आले आहे की जेव्हा एखाद्या वैशिष्ट्याचे काढून टाकले जाते तेव्हा लोकांना त्यात रस असतो. आणि XSLT 1.0 नापसंत होण्याच्या बाबतीत हे नक्कीच खरे आहे. डेप्रिकेशनच्या विरोधात युक्तिवादांनी भरलेली हॅकर न्यूजवर संपूर्ण चर्चा होत आहे. पोस्ट स्वतः XSLT सह ब्लॉगिंग फ्रेमवर्क तयार करण्याचे एक उत्तम उदाहरण आहे. आपणचर्चा स्वत:साठी वाचू शकते, परंतु त्या प्रकारची प्रकरणे हाताळण्यासाठी XLST साठी JavaScript चा शिम म्हणून कसा वापर केला जाऊ शकतो. मी ब्राउझरने सॅक्सनजेएस वापरावे अशा सूचना देखील मी पाहिल्या आहेत, जे JavaScript च्या Saxon XSLT, XQUERY आणि XPath इंजिनसाठी एक पोर्ट आहे. ही एक मनोरंजक कल्पना आहे, विशेषत: सॅक्सन-जेएस या वैशिष्ट्यांची वर्तमान आवृत्ती लागू करत असताना, 1.0 च्या पुढे XPath किंवा XSLT ची कोणतीही आवृत्ती लागू करणारा आणि XQuery लागू करणारा कोणताही ब्राउझर नाही. मी Saxonica येथे Norm Tovey-Walsh, SaxonJS आणि सॅक्सन इंजिनच्या इतर आवृत्त्यांच्या मागे असलेल्या कंपनीशी संपर्क साधला. तो म्हणाला: "कोणत्याही ब्राउझर विक्रेत्याला ब्राउझरमध्ये आधुनिक XML तंत्रज्ञान समाकलित करण्यासाठी प्रारंभ बिंदू म्हणून SaxonJS घेण्यास स्वारस्य असल्यास, आम्हाला त्यांच्याशी चर्चा करण्यास आनंद होईल."- नॉर्म टोवे-वॉल्श
पण जोडले: "सॅक्सनजेएसला सध्याच्या फॉर्ममध्ये घेणे आणि ब्राउझर बिल्डमध्ये अपरिवर्तितपणे टाकणे हा आदर्श दृष्टीकोन असेल असे जर कोणाला वाटले तर मला खूप आश्चर्य वाटेल. एक ब्राउझर विक्रेता, ते ब्राउझर बनवतात या वस्तुस्थितीनुसार, आपण 'बाहेरून' जितक्या खोलवर एकीकरण करू शकतो त्यापेक्षा जास्त खोलवर संपर्क साधू शकतो."- नॉर्म टोवे-वॉल्श
हे लक्षात घेण्यासारखे आहे की टोवे-वॉल्शच्या टिप्पण्या XSLT अवमूल्यन घोषणेच्या सुमारे एक आठवडा आधी आल्या होत्या. निष्कर्ष मी पुढे जाऊ शकलो. पण मला आशा आहे की याने XPath ची ताकद दाखवून दिली आहे आणि तुम्हाला ते उत्तम गोष्टी साध्य करण्यासाठी कसे वापरायचे याचे प्रात्यक्षिक देणारी भरपूर उदाहरणे दिली आहेत. हे ब्राउझर स्टॅकमधील जुन्या तंत्रज्ञानाचे एक उत्तम उदाहरण आहे ज्यामध्ये आजही भरपूर उपयुक्तता आहे, जरी तुम्हाला ते अस्तित्वात आहे हे माहित नसेल किंवा त्यापर्यंत पोहोचण्याचा विचार केला नसला तरीही. पुढील वाचन
Maroon Ayli, Youssef Bakouny, Nader Jalloul, आणि Rima Kilany द्वारे "नैसर्गिक भाषेसह स्वयंचलित वेब चाचणीची लवचिकता वाढवणे" (ACM डिजिटल लायब्ररी) हा लेख लवचिक चाचण्या लिहिण्यासाठी अनेक XPath उदाहरणे प्रदान करतो. XPath (MDN) XPath कसे कार्य करते याचे तपशीलवार तांत्रिक स्पष्टीकरण हवे असल्यास प्रारंभ करण्यासाठी हे एक उत्कृष्ट ठिकाण आहे. XPath Tutorial (ZVON)मला हे ट्यूटोरियल माझ्या स्वतःच्या शिक्षणात सर्वात उपयुक्त वाटले आहे, अनेक उदाहरणे आणि स्पष्ट स्पष्टीकरणांमुळे धन्यवाद. XPather हे परस्परसंवादी साधन तुम्हाला थेट कोडसह कार्य करू देते.
