Men yillar davomida tendentsiyani ko'rish uchun etarlicha uzoq vaqt davomida front-end ishlab chiqishda bo'ldim: yosh ishlab chiquvchilar dasturlashning yangi paradigmasi bilan uning tarixiy kontekstini tushunmasdan ishlaydilar. Albatta, biror narsani bilmaslik juda tushunarli. Internet turli ko'nikmalar va mutaxassisliklar to'plamiga ega bo'lgan juda katta joy va biz bilmagan narsalarni har doim ham bilmaymiz. Bu sohada o'rganish bir marta sodir bo'ladigan va tugaydigan narsa emas, balki doimiy sayohatdir. Gap shundaki, mening jamoamdagi kimdir foydalanuvchilarning UIdagi ma'lum bir yorliqdan uzoqlashishini aniqlash mumkinmi, deb so'radi. Men JavaScript-ni yuklab olishdan oldin sodir bo'lgan voqeani ko'rsatdim. Ammo bu bilan avval shug'ullanganlar buni bilishadi, chunki ular boshqa saytlarda saqlanmagan ma'lumotlar haqida ogohlantirishlarga duch kelishgan, ular uchun yuklab olishdan oldin odatiy foydalanish holati. Yaxshi o'lchov uchun men hamkasbimga pageHide va visibilityChange hodisalarini ham ko'rsatdim. Men bu haqda qayerdan bildim? Chunki u JavaScript-ni dastlab o'rganganimda o'rganganim uchun emas, balki boshqa loyihada paydo bo'lgan. Gap shundaki, zamonaviy front-end ramkalar ulardan oldingi texnologik gigantlarning yelkasida turibdi. Ular ishlab chiqish amaliyotlarini mavhumlashtiradi, ko'pincha ishlab chiquvchilarning yaxshi tajribasi uchun an'anaviy ravishda hamma bilishi kerak bo'lgan asosiy tushunchalarni bilish yoki teginish zaruratini kamaytiradigan yoki hatto yo'q qiladi. CSS Ob'ekt Modelini (CSSOM) ko'rib chiqing. Siz CSS va JavaScript-da ishlaydigan har bir kishi CSSOM-da amaliy tajribaga ega bo'lishini kutishingiz mumkin, ammo bu har doim ham shunday bo'lmaydi. Hozirda tanlangan toʻlov provayderi uchun uslublar jadvalini yuklashimiz kerak boʻlgan men ishlagan elektron tijorat sayti uchun React loyihasi bor edi. Muammo shundaki, uslublar jadvali faqat ma'lum bir sahifada kerak bo'lganda har bir sahifaga yuklanardi. Buni amalga oshirish vazifasi yuklangan ishlab chiquvchi hech qachon uslublar jadvalini dinamik ravishda yuklamagan. Shunga qaramay, React siz erishgan an'anaviy yondashuvni abstrakt qilganda, bu mutlaqo tushunarli. CSSOM sizning kundalik ishingizda kerak bo'ladigan narsa emas. Ammo, ehtimol, siz u bilan bir nuqtada, hatto bir martalik holatda ham muloqot qilishingiz kerak bo'ladi. Ushbu tajribalar meni ushbu maqolani yozishga ilhomlantirdi. Yovvoyi tabiatda ko'plab mavjud veb-xususiyatlar va texnologiyalar mavjud bo'lib, ularga hech qachon kundalik ishingizda to'g'ridan-to'g'ri tegmasligingiz mumkin. Ehtimol, siz veb-ishlab chiqish uchun juda yangisiz va ular haqida shunchaki bexabarsiz, chunki siz uni chuqur yoki umuman bilishni talab qilmaydigan ma'lum bir ramkaning mavhumligi bilan shug'ullangansiz. Men XML haqida gapiryapman, bu ko'pchiligimiz HTML tilidan mutlaqo o'xshamaydigan qadimiy tildir. Men buni XSLT dasturlash deb nomlanuvchi XML stekining katta qismini brauzerlardan olib tashlash kerakligini ko'rsatuvchi so'nggi WHATWG muhokamalari tufayli keltirmoqdaman. Bu bizning jamoam bo'lgan CSSOM holati kabi amaliy narsa uchun ishlatilishi mumkin bo'lgan yillar davomida mavjud bo'lgan eski, mavjud texnologiya. Siz ilgari XSLT bilan ishlaganmisiz? Keling, ushbu eski texnologiyaga jiddiy tayanamizmi va bugungi kunda haqiqiy muammolarni hal qilish uchun XML kontekstidan tashqarida uning xususiyatlaridan foydalanamizmi yoki yo'qligini bilib olaylik. XPath: Markaziy API To'g'ridan-to'g'ri XML nuqtai nazaridan tashqarida eng foydali bo'lgan eng muhim XML texnologiyasi bu XPath, so'rovlar tili bo'lib, u bitta ildiz elementi bo'lgan belgilash daraxtida istalgan tugun yoki atributni topish imkonini beradi. Menda XSLT-ga shaxsiy mehrim bor, lekin bu ham XPath-ga tayanadi va shaxsiy mehrni reytingda bir chetga surib qo'yish kerak. XSLTni o'chirish uchun argument XPath haqida hech qanday eslatma qilmaydi, shuning uchun men bunga hali ruxsat berilgan deb o'ylayman. Bu yaxshi, chunki XPath ushbu texnologiyalar to'plamidagi markaziy va eng muhim API hisoblanadi, ayniqsa oddiy XML-dan tashqarida foydalanish uchun biror narsa topishga harakat qilganda. Bu juda muhim, chunki CSS selektorlari sizning sahifangizdagi ko'pgina elementlarni topish uchun ishlatilishi mumkin bo'lsa-da, ularning barchasini topa olmaydi. Bundan tashqari, CSS selektorlari DOMdagi joriy holatiga qarab elementni topish uchun ishlatilmaydi. XPath mumkin. Endi buni o'qiyotganingizdan ba'zilari XPathni bilishi mumkin, ba'zilari esa bilmasligi mumkin. XPath - bu texnologiyaning juda katta sohasi va men barcha asoslarni o'rgata olmayman va shunga o'xshash bitta maqolada u bilan qanday ajoyib narsalarni ko'rsata olmayman. Men ushbu maqolani yozishga harakat qildim, lekin o'rtacha Smashing Magazine nashri 5000 so'zdan oshmaydi. Men allaqachon ko'proq edi2000 ta soʻz, asosiy maʼlumotlarning yarmigacha. Shunday qilib, men XPath bilan ajoyib narsalarni qilishni boshlayman va agar sizga bu narsa qiziqarli bo'lsa, sizga asoslar uchun foydalanishingiz mumkin bo'lgan havolalarni beraman. XPath va CSS-ni birlashtirish XPath CSS selektorlari elementlarni so'rashda qila olmaydigan ko'p narsalarni qila oladi. Ammo CSS selektorlari XPath qila olmaydigan bir nechta narsalarni ham bajarishi mumkin, ya'ni elementlarni sinf nomi bo'yicha so'rash.
CSS XPath .myClass /*[tarkibida (@sinf, “mening sinfim”)]
Ushbu misolda CSS .myClass sinf nomini o'z ichiga olgan elementlarni so'raydi. Shu bilan birga, XPath misoli "myClass" qatori bilan atribut sinfini o'z ichiga olgan elementlarni so'raydi. Boshqacha qilib aytganda, u har qanday atributdagi myClassli elementlarni, jumladan .myClass sinf nomiga ega elementlarni, shuningdek, .myClass2 kabi qatordagi “myClass”li elementlarni tanlaydi. XPath bu ma'noda kengroqdir. Demak, yo'q. Men CSS-ni tashlab, XPath orqali barcha elementlarni tanlashni boshlashimiz kerakligini taklif qilmayman. Gap bu emas. Gap shundaki, XPath CSS-da qila olmaydigan va juda foydali bo'lishi mumkin bo'lgan narsalarni qila oladi, garchi u brauzer stekidagi eski texnologiya bo'lsa va birinchi qarashda aniq ko'rinmasa ham. Keling, ikkala texnologiyadan nafaqat imkonimiz borligi uchun, balki XPath haqida nimadir o'rganamiz va bu sizning stekingizdagi yana bir vositaga aylanganimiz uchun ham foydalanaylik - bu siz bilmagan bo'lishi mumkin! Muammo shundaki, JavaScript-ning document.evaluate usuli va biz JavaScript uchun CSS API-lar bilan ishlatadigan turli so‘rovlarni tanlash usullari mos kelmaydi. Bizni boshlash uchun men mos keluvchi so'rovlar API-ni yaratdim, lekin tan olishim kerakki, men bu haqda ko'p o'ylamaganman, chunki bu biz bu erda qilayotgan ishimizdan uzoqlashdi. Qayta foydalanish mumkin bo'lgan so'rovlar konstruktorining juda oddiy ish misoli: Bryan Rasmussenning Pen queryXPath [forked] ga qarang. Hujjat ob'ektiga ikkita usul qo'shdim: queryCSSSelectors (asosan querySelectorAll) va queryXPaths. Ularning ikkalasi queryResults obyektini qaytaradi:
{ so'rov turi: tugunlar | string | raqam | mantiqiy, natijalar: any[] // html elementlari, xml elementlari, satrlar, raqamlar, mantiqiy qiymatlar, queryCSSSelectors: (so'rov: string, tuzatish: boolean) => queryResults, queryXpaths: (so'rov: string, tuzatish: boolean) => queryResults }
QueryCSSSelectors va queryXpaths funktsiyalari siz ularga bergan so'rovni natijalar massividagi elementlar bo'yicha boshqaradi, agar natijalar massivi, albatta, tugun tipidagi bo'lsa. Aks holda, u bo'sh massiv va tugunlar turi bilan queryResult ni qaytaradi. Agar o'zgartirish xususiyati rost qiymatiga o'rnatilgan bo'lsa, funktsiyalar o'zlarining queryResults natijalarini o'zgartiradilar. Hech qanday holatda bu ishlab chiqarish muhitida ishlatilmasligi kerak. Men buni faqat ikkita so'rov API-larini birgalikda ishlatishning turli effektlarini namoyish qilish uchun qilyapman. Misol so'rovlar Men turli xil XPath so'rovlarining bir nechta misollarini ko'rsatmoqchiman, ular ba'zi kuchli narsalarni ko'rsatadilar va ular boshqa yondashuvlar o'rniga qanday ishlatilishi mumkin. Birinchi misol //li/text(). Bu barcha li elementlarini so'raydi va ularning matn tugunlarini qaytaradi. Shunday qilib, agar biz quyidagi HTMLni so'rasak:
- bitta
- ikki
- uch
... bu qaytarilgan narsa:
{"queryType":"xpathEvaluate","results":["bir","ikki","uch"],"resultType":"string"}
Boshqacha qilib aytganda, biz quyidagi massivni olamiz: ["bir", "ikki", "uch"]. Odatda, buni olish uchun siz li elementlarini so'rashingiz, so'rov natijasini massivga aylantirishingiz, massivni xaritalash va har bir elementning matn tugunini qaytarishingiz kerak. Ammo biz buni XPath bilan aniqroq qilishimiz mumkin: document.queryXPaths("//li/text()").natijalar.
E'tibor bering, matn tugunini olish usuli funktsiya imzosi kabi ko'rinadigan text() dan foydalanish - va shunday. U elementning matn tugunini qaytaradi. Bizning misolimizda belgilashda uchta li element mavjud bo'lib, ularning har birida matn ("bir", "ikki" va "uch") mavjud.
Keling, text() so'rovining yana bir misolini ko'rib chiqaylik. Bu bizning belgilashimiz deb taxmin qiling:
Href atribut qiymatini qaytaruvchi so'rov yozamiz: document.queryXPaths("//a[text() = 'Kirish']/@href").natijalar.
Bu joriy hujjatdagi XPath so‘rovi, xuddi oxirgi misol kabi, lekin bu safar biz “Kirish” matnini o‘z ichiga olgan havolaning (element) href atributini qaytaramiz. Haqiqiy qaytib keldinatija ["/login.html"]. XPath funktsiyalari haqida umumiy ma'lumot Bir qator XPath funktsiyalari mavjud va siz ular bilan tanish emassiz. Menimcha, bilishga arziydigan bir nechta narsalar bor, jumladan quyidagilar:
starts-withAgar matn boshqa matn misoli bilan boshlansa, href atributi http: bilan boshlansa, starts-with(@href, 'http:') rost qiymatini qaytaradi. Agar matn boshqa matn misolini o'z ichiga olgan bo'lsa, agar matn tugunining istalgan joyida "Smashing Magazine" so'zlari bo'lsa, contain(text(), "Smashing Magazine") haqiqatni qaytaradi. count So'rovga qancha moslik borligi sonini qaytaradi. Masalan, count(//*[starts-with(@href, 'http:']) kontekst tugunidagi http: bilan boshlangan matnni o'z ichiga olgan href atributiga ega bo'lgan nechta havolalar sonini qaytaradi. substring JavaScript substring kabi ishlaydi, faqat siz satrni argument sifatida o'tkazasiz. Masalan, substring("mening matnim", 2, 4) "y t" ni qaytaradi. substring-before Satrning boshqa qatordan oldingi qismini qaytaradi. Masalan, substing-befor("mening matnim", " ") "mening" ni qaytaradi. Xuddi shunday, substring-before("salom", "bye") bo'sh qatorni qaytaradi. substring-afterMatrning boshqa qatordan keyingi qismini qaytaradi. Masalan, substing-after("mening matnim", " ") "matn"ni qaytaradi. Xuddi shunday, substring-after("salom", "bye") bo'sh qatorni qaytaradi. normalize-space Bosh va keyingi bo'shliqlarni olib tashlash va bo'sh joy belgilari ketma-ketligini bitta bo'shliqqa almashtirish orqali normallashtirilgan bo'shliqli argumentlar qatorini qaytaradi. notArgument noto'g'ri bo'lsa, mantiqiy rostni qaytaradi, aks holda noto'g'ri. trueMantiqiy haqiqatni qaytaradi. false Mantiqiy yolg'onni qaytaradi. concatJavaScript concat bilan bir xil narsa, faqat siz uni satrda usul sifatida ishlatmaysiz. Buning o'rniga, siz birlashtirmoqchi bo'lgan barcha satrlarni kiritasiz. string-lengthBu JavaScript string-length bilan bir xil emas, balki argument sifatida berilgan satr uzunligini qaytaradi. translateThis satr oladi va ikkinchi argumentni uchinchi argumentga o'zgartiradi. Masalan, translate("abcdef", "abc", "XYZ") XYZdefni chiqaradi.
Ushbu o'ziga xos XPath funktsiyalaridan tashqari, JavaScript-dagi hamkasblari yoki asosan har qanday dasturlash tilidagi hamkasblari bilan bir xil ishlaydigan bir qator boshqa funktsiyalar mavjud, ular siz uchun foydali bo'lishi mumkin, masalan, pol, shift, dumaloq, yig'indi va hokazo. Quyidagi demo ushbu funksiyalarning har birini tasvirlaydi: Bryan Rasmussen tomonidan yozilgan Pen XPath raqamli funktsiyalariga qarang. E'tibor bering, ko'pgina string manipulyatsiyasi funktsiyalari kabi, ko'p sonli funksiyalar bitta kirishni oladi. Bu, albatta, chunki ular oxirgi XPath misolida bo'lgani kabi so'rovlar uchun ishlatilishi kerak: //li[floor(matn()) > 250]/@val
Agar siz ulardan foydalansangiz, ko'pgina misollar kabi, siz uni yo'lga mos keladigan birinchi tugunda ishga tushirasiz. Bundan tashqari, ba'zi turdagi konvertatsiya qilish funksiyalaridan qochishingiz kerak, chunki JavaScript-da allaqachon o'z turini o'zgartirish bilan bog'liq muammolar mavjud. Ammo ba'zida qatorni boshqa raqamga solishtirish uchun uni raqamga aylantirmoqchi bo'lgan paytlar bo'lishi mumkin. Biror narsaning turini belgilovchi funksiyalar mantiqiy, raqam, satr va tugundir. Bu muhim XPath ma'lumotlar turlari. Va siz tasavvur qilganingizdek, ushbu funktsiyalarning aksariyati DOM tugunlari bo'lmagan ma'lumotlar turlarida ishlatilishi mumkin. Misol uchun, substring-after biz allaqachon ko'rib chiqqanimizdek satrni oladi, lekin bu href atributidagi satr bo'lishi mumkin. Bu shunchaki satr bo'lishi mumkin:
const testSubstringAfter = document.queryXPaths("substring-after('salom dunyo',' ')");
Shubhasiz, bu misol bizga natijalar qatorini ["dunyo"] sifatida qaytaradi. Buni amalda ko'rsatish uchun men DOM tugunlari bo'lmagan narsalarga qarshi funktsiyalardan foydalangan holda demo sahifa yaratdim: Bryan Rasmussenning Pen queryXPath [forked] ga qarang. Tarjima funktsiyasining hayratlanarli tomoniga e'tibor qaratishingiz kerak, ya'ni agar sizda ikkinchi argumentda belgi bo'lsa (ya'ni, siz tarjima qilmoqchi bo'lgan belgilar ro'yxati) va tarjima qilish uchun mos keladigan belgi bo'lmasa, bu belgi chiqishdan o'chiriladi. Shunday qilib, bu:
translate('Salom, mening ismim Inigo Montoya, siz otamni o'ldirgansiz, o'lishga tayyorlaning','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
... qatordagi natijalar, shu jumladan bo'shliqlar: [" * * ** "]
Bu shuni anglatadiki, "a" harfi yulduzcha (*) ga tarjima qilinmoqda, ammo maqsadli qatorda tarjimasi bo'lmagan har qanday boshqa belgilar butunlay olib tashlanadi. Bizda qolgan hamma narsa bo'sh joytarjima qilingan "a" belgilar orasida. Keyin yana bu so'rov:
translate('Salom, mening ismim Inigo Montoya, siz otamni o'ldirgansiz, o'lishga tayyorlaning','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','************************************************************")")
…muammo yo‘q va quyidagi natijani chiqaradi:
"***** ** **** ** ***** ******* *** ****** ** ****** ******* ** ***"
JavaScript-da XPath translate funksiyasi bajaradigan ishni bajarishning oson yo'li yo'qligi sizni hayratda qoldirishi mumkin, garchi ko'p foydalanish holatlarida, replaceAll oddiy iboralar bilan buni hal qila oladi. Siz men ko'rsatgan yondashuvdan foydalanishingiz mumkin, lekin agar siz faqat satrlarni tarjima qilishni xohlasangiz, bu suboptimaldir. Quyidagi demo JavaScript versiyasini taqdim etish uchun XPath-ning tarjima funksiyasini o'rab oladi: Bryan Rasmussen tomonidan tarjima qilingan qalamni tarjima qilish funksiyasiga qarang. Bu kabi narsalarni qayerda ishlatishingiz mumkin? Uch o'rinli ofset bilan Caesar Cipher shifrlashni ko'rib chiqing (masalan, miloddan avvalgi 48-yildan boshlab eng yaxshi shifrlash):
translate("Sezar Rubikonni kesib o'tishni rejalashtirmoqda!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
Kirish matni "Sezar Rubikonni kesib o'tishni rejalashtirmoqda!" natijada "Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!" Turli xil imkoniyatlarning yana bir tezkor misolini keltirish uchun men string kiritishni oladigan va matnni, shu jumladan umlautlarni oladigan barcha belgilarni qaytarish uchun tarjima funksiyasidan foydalanadigan metall funksiyani yaratdim. Bryan Rasmussen tomonidan qalam metall funktsiyasi [forked] qarang.
const metal = (str) => { tarjimani qaytarish(str, "AOUaou", "ÄÖÜäöü"); }
Agar “Motley Crue qoidalari, rock on dudes!” matni berilsa, “Mötley Crue rüles, röck ön dudes!” deb qaytariladi. Shubhasiz, bu funktsiyadan har xil parodiyali foydalanish mumkin. Agar bu siz bo'lsangiz, bu TVTropes maqolasi sizga ko'p ilhom berishi kerak. XPath bilan CSS-dan foydalanish XPath bilan birgalikda CSS selektorlaridan foydalanishning asosiy sababini eslang: CSS sinf nima ekanligini juda yaxshi tushunadi, XPath bilan qila oladigan eng yaxshi narsa bu sinf atributini qator taqqoslashdir. Bu ko'p hollarda ishlaydi. Ammo, masalan, kimdir .primaryLinks va .primaryLinks2 nomli sinflarni yaratgan va siz .primaryLinks sinfini olish uchun XPath dan foydalanayotgan vaziyatga duch kelsangiz, muammoga duch kelishingiz mumkin. Bunday ahmoqona narsa bo'lmasa, ehtimol XPath dan foydalanasiz. Ammo odamlar bunday ahmoqona ishlarni qiladigan joylarda ishlaganimdan afsusdaman. Mana CSS va XPath-dan birgalikda foydalanadigan yana bir demo. Hujjat tuguni bo'lmagan kontekst tugunida XPathni ishga tushirish uchun koddan foydalanganimizda nima sodir bo'lishini ko'rsatadi. Bryan Rasmussen tomonidan [forked] Pen CSS va xpath-ni birga ko'ring. CSS so'rovi .relatedarticles a bo'lib, u .relatedarticles sinfiga tayinlangan divdagi ikkita a elementini oladi. Shundan so'ng uchta "yomon" so'rovlar, ya'ni kontekst tugunlari sifatida ushbu elementlar bilan ishlashda biz xohlagan narsani qilmaydigan so'rovlar. Men nima uchun ular siz kutganingizdan boshqacha yo'l tutishayotganini tushuntira olaman. Ko'rib chiqilayotgan uchta yomon so'rovlar:
//text(): Hujjatdagi barcha matnni qaytaradi. //a/text(): Hujjatdagi havolalar ichidagi barcha matnni qaytaradi. ./a/text(): Hech qanday natija bermaydi.
Ushbu natijalarning sababi shundaki, sizning kontekstingiz CSS so'rovidan qaytarilgan elementlar bo'lsa-da, // butun hujjatga zid keladi. Bu XPathning kuchi; CSS tugundan ajdodga, keyin esa o'sha ajdodning aka-ukasiga o'tib, o'sha birodarning avlodiga o'ta olmaydi. Ammo XPath mumkin. Shu bilan birga, ./ joriy tugunning bolalarini so'raydi, bu erda nuqta (.) joriy tugunni va to'g'ridan-to'g'ri chiziq (/) ba'zi bir bola tuguniga borishni anglatadi - bu atribut, element yoki matn bo'ladimi, yo'lning keyingi qismi aniqlanadi. Ammo CSS so'rovi bilan tanlangan element mavjud emas, shuning uchun bu so'rov ham hech narsani qaytarmaydi. Oxirgi demoda uchta yaxshi so'rov mavjud:
.//matn(), ./text(), normallashtirish-bo'sh joy (./text()).
Normalize-space so'rovi XPath funksiyasidan foydalanishni ko'rsatadi, lekin boshqa so'rovlarga kiritilgan muammoni ham tuzatadi. HTML quyidagicha tuzilgan:
Selenium WebDriver yordamida xususiyatingizni sinovdan o'tkazishni avtomatlashtirish
So'rov matn tugunining boshida va oxirida qator tasmasi qaytaradi,va normalizatsiya-bo'sh joy buni o'chiradi. XPath kiritish bilan mantiqiy qiymatdan boshqa narsani qaytaradigan har qanday XPath funksiyasidan foydalanish boshqa funksiyalarga ham tegishli. Quyidagi demo bir nechta misollarni ko'rsatadi: Bryan Rasmussen tomonidan [forked] Pen xpath funksiyalariga qarang. Birinchi misol siz diqqat qilishingiz kerak bo'lgan muammoni ko'rsatadi. Xususan, quyidagi kod:
document.queryXPaths("substring-after(//a/@href,'https://')");
…bitta qatorni qaytaradi:
"www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/"
Bu mantiqiy, to'g'rimi? Bu funksiyalar massivlarni emas, balki bitta satrlarni yoki bitta raqamlarni qaytaradi. Funktsiyani istalgan joyda bir nechta natijalar bilan ishga tushirish faqat birinchi natijani qaytaradi. Ikkinchi natija biz nimani xohlayotganimizni ko'rsatadi:
document.queryCSSSelectors("a").queryXPaths("substring-after(./@href,'https://')");
Ikki qatordan iborat massivni qaytaradi:
["www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/","www.smashingmagazine.com/2022/11/automated-test-results-improve-accessibility/"]
XPath funktsiyalari xuddi JavaScript-dagi funktsiyalar kabi joylashtirilishi mumkin. Shunday qilib, agar biz Smashing Magazine URL tuzilmasini bilsak, biz quyidagilarni qilishimiz mumkin (shablon harflaridan foydalanish tavsiya etiladi): `tarjima( pastki qator ( substring-after(./@href, ‘www.smashingmagazine.com/') ,9), '/','')`
Bu biroz murakkablashib bormoqda, chunki u nima qilishini tavsiflovchi izohlarga muhtoj: www.smashingmagazine.com/ dan keyin href atributidan barcha URLni oling, dastlabki to'qqizta belgini olib tashlang, so'ng oxirigacha bo'lgan qiyshiq chiziqdan xalos bo'lish uchun oldinga chiziq (/) belgisini hech narsaga tarjima qiling. Olingan massiv:
["feature-testing-selenium-webdriver","avtomatlashtirilgan-test-natijalarini-yaxshilash-kirish"]
Ko'proq XPath foydalanish holatlari XPath, albatta, sinovda porlashi mumkin. Buning sababini ko'rish qiyin emas, chunki XPath DOMdagi har bir elementni DOMning istalgan pozitsiyasidan olish uchun ishlatilishi mumkin, CSS esa mumkin emas. Ko'pgina zamonaviy tuzilma tizimlarida mos keladigan CSS sinflariga ishona olmaysiz, ammo XPath yordamida biz DOM strukturasi o'zgarishidan qat'i nazar, elementning matn tarkibi nima ekanligini aniqroq aniqlashimiz mumkin. Bardoshli XPath testlarini o'tkazishga imkon beruvchi texnikalar bo'yicha tadqiqotlar o'tkazildi. Biror narsa nomi o'zgartirilgan yoki o'chirilganligi sababli CSS selektori endi ishlamay qolgani uchun testlar ishdan chiqishi va muvaffaqiyatsiz bo'lishidan yomonroq narsa yo'q. XPath, shuningdek, bir nechta lokatorni ajratib olishda juda yaxshi. Elementga mos kelish uchun XPath so'rovlaridan foydalanishning bir nechta usullari mavjud. CSS bilan ham xuddi shunday. Ammo XPath so'rovlari narsalarni aniqroq maqsadli tarzda o'rganishi mumkin, bu esa qaytariladigan narsalarni cheklaydi, bu sizga bir nechta mos kelishi mumkin bo'lgan aniq moslikni topishga imkon beradi. Misol uchun, biz XPath-dan div ichida joylashgan, o'z navbatida, data-testID="leader" atributiga ega bo'lgan kichik tasvir elementini o'z ichiga olgan birodar div-dan keyin darhol keladigan div ichidagi ma'lum h2 elementini qaytarish uchun foydalanishimiz mumkin:
bu sarlavhani olmang
Ushbu sarlavhani ham olmang
Lider tasviri sarlavhasi
Bu so'rov: document.queryXPaths(` //div[ quyidagi aka-uka ::div[1] /img[@data-testID='leader'] ] /h2/ matn() `);
Bularning barchasi qanday birlashishini ko'rish uchun demoga tushamiz: Bryan Rasmussen tomonidan yozilgan H2 qalam kompleksi so'roviga qarang. Demak, ha. XPath yordamida testdagi har qanday elementga ko'plab mumkin bo'lgan yo'llar mavjud. XSLT 1.0 eskirish Men Chrome jamoasi brauzerdan XSLT 1.0 qo'llab-quvvatlashini olib tashlashni rejalashtirayotganini boshida aytib o'tdim. Bu juda muhim, chunki XSLT 1.0 hujjatni o'zgartirish uchun XMLga yo'naltirilgan dasturlashdan foydalanadi, bu esa o'z navbatida XPath 1.0 ga tayanadi, bu ko'pchilik brauzerlarda mavjud. Bu sodir bo'lganda, biz XPathning asosiy komponentini yo'qotamiz. Ammo XPath testlarni yozish uchun juda zo'r ekanligini hisobga olsak, XPath tez orada butunlay yo'q bo'lib ketishi dargumon. Ya'ni, men odamlarning biror xususiyat olib tashlanganida unga qiziqish bildirishini payqadim. Va bu, albatta, XSLT 1.0 eskirgan taqdirda ham to'g'ri. Hacker News-da eskirishga qarshi dalillar bilan to'la munozaralar bo'lib o'tmoqda. Xabarning o'zi XSLT bilan blog yuritish tizimini yaratishning ajoyib namunasidir. SizMunozarani o'zingiz o'qishingiz mumkin, ammo u JavaScript-ni XLST uchun bunday holatlarni hal qilish uchun shim sifatida qanday ishlatish mumkinligi haqida gapiradi. Shuningdek, brauzerlar JavaScript-ning Saxon XSLT, XQUERY va XPath dvigatellari uchun port bo'lgan SaxonJS-dan foydalanishlari kerakligi haqidagi takliflarni ko'rdim. Bu qiziqarli g'oya, ayniqsa Saxon-JS ushbu spetsifikatsiyalarning joriy versiyasini amalga oshiradi, holbuki XPath yoki XSLT ning 1.0 dan keyingi har qanday versiyasini amalga oshiradigan brauzer yo'q va XQuery-ni amalga oshiradigan hech kim yo'q. Men SaxonJS va Sakson dvigatelining boshqa versiyalari ortidagi kompaniya bo'lgan Saksonikadagi Norm Tovey-Walsh bilan bog'landim. U aytdi: "Agar biron-bir brauzer sotuvchisi SaxonJS-ni brauzerga zamonaviy XML texnologiyalarini integratsiyalash uchun boshlang'ich nuqta sifatida olishdan manfaatdor bo'lsa, biz ular bilan buni muhokama qilishdan xursand bo'lardik." - Norm Tovey-Walsh
Ammo yana qo'shildi: "Agar kimdir SaxonJS-ni hozirgi ko'rinishida olib, uni brauzer tuzilmasida o'zgarishsiz qoldirish ideal yondashuv bo'ladi deb o'ylasa, men juda hayron bo'laman. Brauzer sotuvchisi, o'z xususiyatiga ko'ra, brauzerni yaratish xususiyatiga ko'ra, integratsiyaga biz "tashqaridan" qaraganda ancha chuqurroq yondashishi mumkin. "- Norm Tovey-Valsh.
Ta'kidlash joizki, Tovey-Uolshning sharhlari XSLTni bekor qilish e'lon qilinishidan taxminan bir hafta oldin kelgan. Xulosa Men davom etishim mumkin edi. Ammo umid qilamanki, bu XPath kuchini ko'rsatdi va sizga katta yutuqlarga erishish uchun undan qanday foydalanishni ko'rsatadigan ko'plab misollar berdi. Bu brauzerlar stekidagi eski texnologiyalarning mukammal namunasidir, hatto siz uning mavjudligini bilmagan bo'lsangiz ham yoki unga erishishni hech qachon o'ylamagan bo'lsangiz ham, bugungi kunda ham ko'plab foydali dasturlar mavjud. Qo'shimcha o'qish
Maroun Ayli, Youssef Bakouni, Nader Jalloul va Rima Kilany tomonidan "Tabiiy til yordamida avtomatlashtirilgan veb-testlarning chidamliligini oshirish" (ACM Digital Library) Ushbu maqolada chidamlilik testlarini yozish uchun XPath misollari keltirilgan. XPath (MDN) Agar XPath qanday ishlashi haqida texnik tushuntirishni istasangiz, bu boshlash uchun ajoyib joy. XPath qo'llanmasi (ZVON) Ko'p misollar va aniq tushuntirishlar tufayli men ushbu o'quv qo'llanmani o'zim o'rganishimda eng foydali deb topdim. XPatherUshbu interaktiv vosita to'g'ridan-to'g'ri kod bilan ishlash imkonini beradi.
