Мен көптеген жылдар бойы трендті көру үшін ұзақ уақыт бойы алдыңғы қатарлы дамуда болдым: жас әзірлеушілер оның тарихи контекстін түсінбестен бағдарламалаудың жаңа парадигмасымен жұмыс істейді. Бір нәрсені білмеу, әрине, түсінікті. Веб - әртүрлі дағдылар мен мамандықтар жиынтығы бар өте үлкен орын және біз әрқашан не білмейтінімізді біле бермейміз. Бұл салада білім алу бір рет болып, аяқталатын нәрсе емес, тұрақты саяхат. Нақты жағдай: Менің командамдағы біреу пайдаланушылардың UI-дегі белгілі бір қойындыдан басқа жаққа шарлауын анықтау мүмкін бе деп сұрады. Мен JavaScript-тің жүктеуден бұрын оқиғасын көрсеттім. Бірақ мұны бұрын шешкендер мұның мүмкін екенін біледі, өйткені олар басқа сайттарда сақталмаған деректер туралы ескертулерге ұшырады, олар үшін жүктеп алудан бұрын әдеттегі пайдалану жағдайы болып табылады. Мен сондай-ақ жақсы өлшем үшін әріптесіме pageHide және visibilityChange оқиғаларын көрсеттім. Мен бұл туралы қайдан білдім? Себебі ол JavaScript-ті алғаш үйренген кезде оны зерттегендіктен емес, басқа жобада пайда болды. Өйткені, қазіргі заманғы фронтальды жақтаулар олардан бұрынғы технологиялық алпауыттардың иығында тұр. Олар әзірлеу тәжірибесін абстракциялайды, көбінесе әзірлеушілердің жақсы тәжірибесі үшін, әдетте, әркім білуі керек негізгі алдыңғы қатарлы тұжырымдамаларды білу немесе ұстау қажеттілігін азайтатын немесе тіпті жояды. CSS нысан үлгісін (CSSOM) қарастырыңыз. Сіз CSS және JavaScript-те жұмыс істейтін кез келген адам CSSOM тәжірибесін қолданады деп күтуіңіз мүмкін, бірақ бұл әрдайым бола бермейді. Мен жұмыс істеген электрондық коммерция сайтына арналған React жобасы бар еді, онда қазір таңдалған төлем провайдері үшін стильдер кестесін жүктеу керек болды. Мәселе мынада: стильдер кестесі тек нақты бетте қажет болған кезде әр бетке жүктелетін. Мұны істеу міндеті жүктелген әзірлеуші ешқашан стиль кестесін динамикалық түрде жүктеген емес. Қайтадан, React сіз қол жеткізуге болатын дәстүрлі тәсілді алып тастағанда, бұл мүлдем түсінікті. CSSOM сіздің күнделікті жұмысыңызға қажет нәрсе емес. Бірақ сіз онымен бір сәтте, тіпті бір реттік жағдайда да араласуыңыз керек болуы мүмкін. Осы тәжірибелер мені осы мақаланы жазуға шабыттандырды. Табиғатта көптеген веб-мүмкіндіктер мен технологиялар бар, оларды күнделікті жұмыста ешқашан тікелей ұстай алмайсыз. Мүмкін сіз веб-әзірлеуге жаңадан келген шығарсыз және олардан бейхабар шығарсыз, өйткені сіз оны терең, тіпті мүлде білуді талап етпейтін белгілі бір құрылымның абстракциясына қанықсыз. Мен XML туралы арнайы айтып отырмын, ол HTML тілінен мүлдем ұқсамайтын көне тіл болып табылады. Мен мұны XSLT бағдарламалау деп аталатын XML стекінің маңызды бөлігін браузерлерден алып тастау керек деген соңғы WHATWG талқылауларына байланысты айтып отырмын. Бұл менің командам болған CSSOM жағдайындағыдай практикалық нәрсе үшін қолдануға болатын көптеген жылдар бойы бізде болған ескі, бар технологияның түрі. Сіз XSLT-пен бұрын жұмыс істедіңіз бе? Осы ескі технологияға қатты сүйенетінімізді және бүгінгі күннің нақты мәселелерін шешу үшін оның мүмкіндіктерін XML контекстінен тыс пайдалана алатынымызды көрейік. XPath: Орталық API Тікелей XML перспективасынан тыс ең пайдалы болып табылатын ең маңызды XML технологиясы – XPath, бір түбір элементі бар түзету ағашында кез келген түйінді немесе төлсипатты табуға мүмкіндік беретін сұрау тілі. Менің XSLT-ге деген жеке сүйіспеншілігім бар, бірақ ол XPath-қа да сүйенеді және рейтингтік маңыздылықта жеке сүйіспеншілікті бір жаққа қою керек. XSLT жоюға арналған аргумент XPath туралы ештеңе айтпайды, сондықтан оған әлі де рұқсат етілген деп ойлаймын. Бұл жақсы, өйткені XPath осы технологиялар жиынтығындағы орталық және ең маңызды API болып табылады, әсіресе қалыпты XML қолдануынан тыс пайдалану үшін бірдеңе табуға тырысқанда. Бұл маңызды, себебі CSS селекторлары сіздің бетіңіздегі элементтердің көпшілігін табу үшін пайдаланылуы мүмкін, бірақ олардың барлығын таба алмайды. Сонымен қатар, CSS селекторларын DOM ішіндегі ағымдағы орнына негізделген элементті табу үшін пайдалану мүмкін емес. XPath мүмкін. Енді осыны оқып жатқандарыңыз XPath-ті білуі мүмкін, ал кейбіреулеріңіз білмеуі мүмкін. XPath - бұл технологияның өте үлкен саласы, мен шын мәнінде барлық негіздерді үйрете алмаймын, сондай-ақ осындай бір мақалада онымен айналысуға болатын керемет нәрселерді көрсете алмаймын. Мен бұл мақаланы жазуға тырыстым, бірақ Smashing Magazine басылымының орташа саны 5000 сөзден аспайды. Мен одан да көп болдым2000 сөз, ал негіздердің жартысы ғана. Сонымен, мен XPath-пен керемет нәрселер жасауды бастаймын және сізге бұл материалды қызықты деп тапсаңыз, негіздерге пайдалануға болатын бірнеше сілтемелер беремін. XPath және CSS біріктіру XPath элементтерді сұрау кезінде CSS селекторлары жасай алмайтын көптеген нәрселерді жасай алады. Бірақ CSS селекторлары XPath жасай алмайтын бірнеше нәрсені де жасай алады, атап айтқанда элементтерді сынып атауы бойынша сұрау.
CSS XPath .myClass /*[құрамында(@сынып, «менің сыныбым»)]
Бұл мысалда CSS .myClass сынып атауын қамтитын элементтерді сұрайды. Сонымен қатар, XPath мысалы «myClass» жолы бар атрибут сыныбын қамтитын элементтерді сұрайды. Басқаша айтқанда, ол кез келген төлсипатта myClass бар элементтерді, соның ішінде .myClass сынып атауы бар элементтерді — сондай-ақ .myClass2 сияқты жолда «myClass» бар элементтерді таңдайды. XPath бұл мағынада кеңірек. Сонымен, жоқ. Мен CSS-ті алып тастап, XPath арқылы барлық элементтерді таңдауды бастау керек деп ұсынбаймын. Мәселе бұл емес. Мәселе мынада, XPath CSS жасай алмайтын және әлі де пайдалы болуы мүмкін нәрселерді жасай алады, тіпті бұл браузер стекіндегі ескі технология және бір қарағанда айқын көрінбеуі мүмкін. Екі технологияны қолымыздан келгендіктен ғана емес, сонымен бірге XPath туралы бірдеңе біліп, оны стекіңіздегі басқа құралға айналдыратындықтан бірге қолданайық - сіз бұрыннан бар екенін білмеуіңіз мүмкін! Мәселе мынада: JavaScript-тің document.evaluate әдісі және JavaScript үшін CSS API интерфейстерімен қолданатын әртүрлі сұрау таңдау әдістері үйлесімсіз. Бізді бастау үшін мен үйлесімді сұрау API жасадым, бірақ мен бұл туралы көп ойланбадым, өйткені бұл біздің осы жерде істеп жатқан жұмысымыздан бас тарту. Міне, қайта пайдалануға болатын сұрау конструкторының қарапайым жұмыс мысалы: Брайан Расмуссен жазған Pen queryXPath [айырылған] қараңыз. Мен құжат нысанына екі әдіс қостым: queryCSSSelectors (бұл querySelectorAll) және queryXPaths. Олардың екеуі queryResults нысанын қайтарады:
{ сұрау түрі: түйіндер | жол | саны | логикалық, нәтижелер: кез келген[] // html элементтері, xml элементтері, жолдар, сандар, логикалық мәндер, queryCSSSelectors: (сұрау: жол, түзету: логикалық) => queryResults, queryXpaths: (сұрау: жол, түзету: логикалық) => queryResults }
queryCSSSelectors және queryXpaths функциялары нәтижелер массиві, әрине, типті түйіндер болса, сіз оларға берілген сұрауды нәтижелер массивіндегі элементтер бойынша іске қосады. Әйтпесе, ол бос массив пен түйіндер түрі бар queryResult қайтарады. Егер түзету сипаты шын мәніне орнатылса, функциялар өздерінің queryResults нәтижелерін өзгертеді. Оны ешбір жағдайда өндірістік ортада қолдануға болмайды. Мен мұны екі сұрау API бірге пайдаланудың әртүрлі әсерлерін көрсету үшін ғана жасаймын. Мысал сұраулар Мен әртүрлі XPath сұрауларының бірнеше мысалдарын көрсеткім келеді, олар жасай алатын кейбір күшті нәрселерді және оларды басқа тәсілдердің орнына қалай пайдалануға болатынын көрсетеді. Бірінші мысал //li/text(). Бұл барлық li элементтерін сұрайды және олардың мәтіндік түйіндерін қайтарады. Сонымен, егер біз келесі HTML-ді сұрайтын болсақ:
- бір
- екі
- үш
…бұл қайтарылады:
{"queryType":"xpathEvaluate","results":["бір","екі","үш"],"resultType":"string"}
Басқаша айтқанда, біз келесі массив аламыз: ["бір", "екі", "үш"]. Әдетте, сіз оны алу үшін li элементтерін сұрайсыз, сол сұраудың нәтижесін массивке айналдырасыз, массивті салыстырасыз және әрбір элементтің мәтіндік түйінін қайтарасыз. Бірақ біз мұны XPath көмегімен қысқаша жасай аламыз: document.queryXPaths("//li/text()").нәтижелері.
Мәтіндік түйінді алу жолы функция қолтаңбасына ұқсайтын text() функциясын пайдалану екенін ескеріңіз — және солай. Ол элементтің мәтіндік түйінін қайтарады. Біздің мысалда белгілеуде үш li элементі бар, олардың әрқайсысында мәтін бар («бір», «екі» және «үш»).
text() сұрауының тағы бір мысалын қарастырайық. Бұл біздің белгілеуіміз деп есептейік:
href төлсипатының мәнін қайтаратын сұрауды жазайық: document.queryXPaths("//a[text() = 'Кіру']/@href").нәтижелері.
Бұл соңғы мысал сияқты ағымдағы құжаттағы XPath сұрауы, бірақ бұл жолы біз «Кіру» мәтіні бар сілтеменің (элементтің) href төлсипатын қайтарамыз. Нақтысы қайтарылдынәтиже ["/login.html"] болып табылады. XPath функцияларына шолу Бірнеше XPath функциялары бар және сіз олармен таныс емес шығарсыз. Менің ойымша, бірнеше білуге тұрарлық, соның ішінде мыналар:
starts-withЕгер мәтін белгілі бір басқа мәтіндік мысалмен басталса, href атрибуты http: арқылы басталса, starts-with(@href, 'http:') ақиқат мәнін қайтарады. егер мәтінде белгілі бір басқа мәтін үлгісі болса, онда (text(), "Smashing Magazine") мәтіндік түйінде кез келген жерде "Smashing Magazine" сөздері болса, ақиқат мәнін қайтарады. count Сұрау үшін қанша сәйкестік бар екенін көрсетеді. Мысалы, count(//*[starts-with(@href, 'http:']) мәтінмәндік түйінде http:-мен басталатын мәтінді қамтитын href атрибуты бар элементтердің қанша сілтемесі бар екенін көрсетеді. substring JavaScript ішкі жолы сияқты жұмыс істейді, тек жолды аргумент ретінде беруді қоспағанда. Мысалы, substring("менің мәтінім", 2, 4) "y t" қайтарады. substring-before Басқа жолдың алдындағы жолдың бөлігін қайтарады. Мысалы, substing-befor("менің мәтінім", " ") "менің" мәнін қайтарады. Сол сияқты, substring-before("hi","bye") бос жолды қайтарады. substring-after Басқа жолдан кейінгі жолдың бөлігін қайтарады. Мысалы, substing-after("менің мәтінім", " ") "мәтінді" қайтарады. Сол сияқты, substring-after("hi","bye") бос жолды қайтарады. normalize-space Алдыңғы және кейінгі бос орындарды алып тастау және бос орын таңбаларының тізбегін бір бос орынға ауыстыру арқылы қалыпқа келтірілген бос орыны бар аргумент жолын қайтарады. notАргумент жалған болса, логикалық ақиқат мәнін қайтарады, әйтпесе жалған. true Логикалық шындықты қайтарады. false Бульдік жалған мәнін қайтарады. concat JavaScript concat сияқты бірдей нәрсе, тек сіз оны жолда әдіс ретінде іске қоспасаңыз. Оның орнына сіз біріктіргіңіз келетін барлық жолдарды енгізесіз. string-lengthБұл JavaScript жол ұзындығымен бірдей емес, керісінше аргумент ретінде берілген жолдың ұзындығын қайтарады. translateThis жолды алып, екінші аргументті үшінші аргументке өзгертеді. Мысалы, translate("abcdef", "abc", "XYZ") XYZdef шығарады.
Осы арнайы XPath функцияларынан басқа, JavaScript аналогтарымен немесе негізінен кез келген бағдарламалау тіліндегі әріптестермен бірдей жұмыс істейтін бірқатар басқа функциялар бар, олар сізге еден, төбе, дөңгелек, қосынды және т.б. сияқты пайдалы болуы мүмкін. Төмендегі демонстрация осы функциялардың әрқайсысын көрсетеді: Брайан Расмуссен жазған Pen XPath сандық функцияларын қараңыз. Жолды манипуляциялау функцияларының көпшілігі сияқты, сандық функциялардың көпшілігі бір енгізуді қабылдайтынын ескеріңіз. Бұл, әрине, соңғы XPath мысалындағыдай, олар сұрау үшін пайдаланылуы керек: //li[қабат(мәтін()) > 250]/@val
Егер сіз оларды қолдансаңыз, мысалдардың көпшілігі сияқты, оны жолға сәйкес келетін бірінші түйінде іске қосасыз. Сондай-ақ, кейбір түрлендіру функцияларынан аулақ болуыңыз керек, себебі JavaScript-те түр түрлендіруге қатысты өз проблемалары бар. Бірақ жолды басқа санмен салыстыру үшін оны санға түрлендіру қажет болатын кездер болады. Бір нәрсенің түрін орнататын функциялар логикалық, сан, жол және түйін болып табылады. Бұл маңызды XPath деректер типтері. Сіз ойлағандай, бұл функциялардың көпшілігін DOM түйіндері болып табылмайтын деректер түрлерінде пайдалануға болады. Мысалы, substring-after біз қарастырғандай жолды қабылдайды, бірақ ол href атрибутының жолы болуы мүмкін. Бұл жай ғана жол болуы мүмкін:
const testSubstringAfter = document.queryXPaths("substring-after('сәлем әлем',' ')");
Әлбетте, бұл мысал бізге нәтижелер массивін ["әлем"] ретінде қайтарады. Мұны әрекетте көрсету үшін мен DOM түйіндері болып табылмайтын нәрселерге қарсы функцияларды пайдаланып демонстрациялық бет жасадым: Брайан Расмуссен жазған Pen queryXPath [айырылған] қараңыз. Аудару функциясының таңқаларлық аспектісін атап өту керек, яғни екінші аргументте таңба болса (яғни, аударғыңыз келетін таңбалар тізімі) және аударуға сәйкес таңба болмаса, бұл таңба шығыстан жойылады. Осылайша, бұл:
translate('Сәлеметсіз бе, менің атым Иниго Монтойя, сіз менің әкемді өлтірдіңіз, өлуге дайындалыңыз','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
…жолдағы нәтижелер, соның ішінде бос орындар: [" * * ** "]
Бұл «a» әрпі жұлдызшаға (*) аударылып жатқанын білдіреді, бірақ мақсатты жолда аудармасы жоқ кез келген басқа таңба толығымен жойылады. Бізде бос орын қалдыаударылған «а» таңбаларының арасында. Содан кейін қайтадан бұл сұрау:
translate('Сәлеметсіз бе, менің атым Иниго Монтойя, сіз менің әкемді өлтірдіңіз, өлуге дайындалыңыз','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','********************************************************)")
…мәселе жоқ және келесідей нәтиже береді:
"***** ** **** ** ***** ******* *** ****** ** ****** ******* ** ***"
JavaScript-те XPath аудару функциясының дәл әрекетін орындаудың оңай жолы жоқ екені сізді таңғалдыруы мүмкін, дегенмен көптеген пайдалану жағдайлары үшін replaceAll тұрақты өрнектермен жұмыс істей алады. Сіз мен көрсеткен тәсілді пайдалана аласыз, бірақ егер сіз тек жолдарды аударуды қаласаңыз, бұл оңтайлы емес. Келесі демонстрация JavaScript нұсқасын қамтамасыз ету үшін XPath аударма функциясын қосады: Брайан Расмуссеннің қаламды аудару функциясын [айырылған] қараңыз. Мұндай нәрсені қайда қолдануға болады? Үш орындық ығысуы бар Цезарь шифрын шифрлауды қарастырайық (мысалы, б.з.б. 48 жылдан бастап ең соңғы шифрлау):
translate("Цезарь Рубиконды кесіп өтуді жоспарлап отыр!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
Кіріс мәтіні «Цезарь Рубиконды кесіп өтуді жоспарлап отыр!» нәтижелері "Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!" Түрлі мүмкіндіктердің тағы бір жылдам мысалын келтіру үшін мен жолды енгізуді қабылдайтын және мәтінді қайтару үшін аудару функциясын пайдаланатын металл функциясын жасадым, оның ішінде барлық таңбаларды қоса алғанда. Брайан Расмуссеннің металл қалам функциясын [айырланған] қараңыз.
const metal = (str) => { return translate(str, "AOUaou","ÄÖÜäöü"); }
Ал егер «Motley Crue rules, rock on dudes!» мәтіні берілсе, «Mötley Crue rüles, röck on dudes!» деп қайтарады. Әлбетте, бұл функцияны пародия қолданудың барлық түрлері болуы мүмкін. Егер бұл сіз болсаңыз, онда бұл TVTropes мақаласы сізге көп шабыт беруі керек. XPath көмегімен CSS пайдалану XPath-пен бірге CSS селекторларын пайдаланудың негізгі себебін есте сақтаңыз: CSS класстың не екенін жақсы түсінеді, ал XPath-пен жасай алатын ең жақсы нәрсе - бұл сынып атрибутының жолды салыстыру. Бұл көп жағдайда жұмыс істейді. Бірақ сіз, айталық, біреу .primaryLinks және .primaryLinks2 деп аталатын сыныптарды жасаған және .primaryLinks сыныбын алу үшін XPath пайдаланатын жағдайға тап болсаңыз, онда қиындықтарға тап болуыңыз мүмкін. Мұндай ақымақ ештеңе болмаса, сіз XPath-ты қолданасыз. Бірақ мен адамдар осындай ақымақтық жасайтын жерлерде жұмыс істегенімді хабарлауға өкінемін. Міне, CSS және XPath бірге қолданатын тағы бір демонстрация. Ол құжаттың түйіні болып табылмайтын мәтінмәндік түйінде XPath іске қосу үшін кодты пайдаланған кезде не болатынын көрсетеді. Брайан Расмуссен жазған Pen css және xpath бірге [айырылған] қараңыз. CSS сұрауы .relatedarticles сыныбына тағайындалған div ішіндегі екі a элементін алатын .relatedarticles a болып табылады. Осыдан кейін үш «жаман» сұрау, яғни мәтінмәндік түйін ретінде осы элементтермен жұмыс істегенде біз қалаған нәрсені орындамайтын сұраулар. Мен олардың неге сіз күткеннен басқаша әрекет ететінін түсіндіре аламын. Қарастырылып отырған үш жаман сұрау:
//text(): Құжаттағы барлық мәтінді қайтарады. //a/text(): Құжаттағы сілтемелердің ішіндегі барлық мәтінді қайтарады. ./a/text(): Нәтижелерді қайтармайды.
Бұл нәтижелердің себебі - сіздің контекстіңіз CSS сұрауынан қайтарылған элементтер болғанымен, // бүкіл құжатқа қарсы келеді. Бұл XPath-тың күші; CSS түйіннен ата-бабаға, содан кейін сол ата-бабаның іні-қарындасына өтіп, сол ағаның ұрпағына қарай жүре алмайды. Бірақ XPath мүмкін. Сонымен қатар, ./ ағымдағы түйіннің еншілестерін сұрайды, мұнда нүкте (.) ағымдағы түйінді білдіреді, ал қиғаш сызық (/) кейбір еншілес түйінге өтуді білдіреді — бұл төлсипат, элемент немесе мәтін жолдың келесі бөлігімен анықталады. Бірақ CSS сұрауы арқылы таңдалған ешқандай еншілес элемент жоқ, сондықтан бұл сұрау да ештеңені қайтармайды. Соңғы демонстрацияда үш жақсы сұрау бар:
.//мәтін(), ./text(), normalize-space(./text()).
Қалыптастыру-кеңістік сұрауы XPath функциясын пайдалануды көрсетеді, бірақ басқа сұрауларға енгізілген мәселені де түзетеді. HTML құрылымы келесідей:
Selenium WebDriver көмегімен мүмкіндіктерді тексеруді автоматтандыру
Сұрау мәтін түйінінің басында және соңында жол арнасын қайтарады,және normalize-кеңістік мұны жояды. XPath кірісі бар логикалық мәннен басқа нәрсені қайтаратын кез келген XPath функциясын пайдалану басқа функцияларға қолданылады. Төмендегі демонстрация бірнеше мысалдарды көрсетеді: Брайан Расмуссен жазған Pen 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 мекенжайының барлығын алыңыз, алғашқы тоғыз таңбаны алып тастаңыз, содан кейін қиғаш сызықты (/) таңбасын еш нәрсеге аударыңыз, осылайша соңындағы қиғаш сызықтан құтылыңыз. Алынған массив:
["feature-testing-selenium-webdriver","автоматтандырылған-тестілеу-нәтижелері-қолжетімділікті жақсарту"]
Қосымша XPath қолдану жағдайлары XPath тестілеуде шынымен жарқырайды. Мұның себебін түсіну қиын емес, өйткені XPath DOM ішіндегі әрбір элементті DOM ішіндегі кез келген позициядан алуға болады, ал CSS мүмкін емес. Көптеген заманауи құрастыру жүйелерінде тұрақты болып қалатын CSS сыныптарына сене алмайсыз, бірақ XPath көмегімен DOM құрылымының өзгеруіне қарамастан, элементтің мәтіндік мазмұны қандай болатынына сенімдірек сәйкестіктер жасай аламыз. Тұрақты XPath сынақтарын жасауға мүмкіндік беретін әдістер бойынша зерттеулер жүргізілді. Бірдеңе атауы өзгертілген немесе жойылғандықтан CSS селекторы енді жұмыс істемейтіндіктен, сынақтардың қабыршақтап, сәтсіздікке ұшырауынан жаман ештеңе жоқ. XPath сонымен қатар бірнеше локаторды шығаруда өте жақсы. Элементті сәйкестендіру үшін XPath сұрауларын пайдаланудың бірнеше жолы бар. CSS-те де солай. Бірақ XPath сұраулары қайтарылатын нәрсені шектейтін, бірнеше ықтимал сәйкестіктер болуы мүмкін нақты сәйкестікті табуға мүмкіндік беретін нәрселерді мақсатты түрде бұрғылай алады. Мысалы, біз XPath функциясын div ішіндегі нақты h2 элементін қайтару үшін пайдалана аламыз.
бұл тақырыпты алмайсыз
Бұл тақырыпты да көрмеңіз
Көшбасшы кескінінің тақырыбы
Бұл сұрау: document.queryXPaths(` //div[ келесі ағайынды ::div[1] /img[@data-testID='көшбасшы'] ] /сағ2/ мәтін() `);
Мұның бәрі қалай біріктірілетінін көру үшін демонстрацияға көшейік: Брайан Расмуссен жазған қалам кешені H2 сұрауын қараңыз. Сонымен, иә. XPath көмегімен сынақта кез келген элементке көптеген ықтимал жолдар бар. XSLT 1.0 ескіруі Мен Chrome тобы XSLT 1.0 қолдауын шолғыштан алып тастауды жоспарлап отырғанын басында айттым. Бұл маңызды, себебі XSLT 1.0 құжатты түрлендіру үшін XML-бағытталған бағдарламалауды пайдаланады, ол өз кезегінде көптеген браузерлерде кездесетін XPath 1.0-ге сүйенеді. Бұл орын алғанда, XPath негізгі құрамдас бөлігінен айырыламыз. Бірақ XPath тест жазу үшін өте жақсы екенін ескере отырып, XPath-тың жақын арада жойылып кетуі екіталай деп ойлаймын. Айтуынша, мен адамдар функцияны алып тастаған кезде оған қызығушылық танытатынын байқадым. Бұл, әрине, XSLT 1.0 ескірген жағдайда дұрыс. Hacker News сайтында ескіруге қарсы дәлелдерге толы толық пікірталас жүріп жатыр. Жазбаның өзі XSLT көмегімен блог жүргізу негізін жасаудың тамаша үлгісі болып табылады. Сізталқылауды өзіңіз оқи аласыз, бірақ ол JavaScript-ті XLST үшін осындай жағдайларды өңдеу үшін шеге ретінде қалай пайдалануға болатынын түсінеді. Сондай-ақ, браузерлер JavaScript-тің Saxon XSLT, XQUERY және XPath қозғалтқыштарының порты болып табылатын SaxonJS-ті пайдалануы керек деген ұсыныстарды көрдім. Бұл қызықты идея, әсіресе Saxon-JS осы спецификациялардың ағымдағы нұсқасын жүзеге асырады, ал XPath немесе XSLT-тің 1.0-ден кейінгі кез келген нұсқасын іске асыратын браузер жоқ және XQuery-ді іске асыратын бірде-бір браузер жоқ. Мен SaxonJS және Saxon қозғалтқышының басқа нұсқаларының артында тұрған компания Саксоникадағы Норм Товей-Уолшқа хабарластым. Ол былай деді: «Егер кез келген браузер сатушысы SaxonJS-ті браузерге заманауи XML технологияларын біріктірудің бастапқы нүктесі ретінде алуға мүдделі болса, біз оны олармен талқылауға қуаныштымыз.» - Норм Товей-Уолш
Бірақ сонымен бірге: "Егер кімде-кім SaxonJS-ті қазіргі күйінде алып, оны браузер құрастыруына өзгеріссіз қалдыру идеалды тәсіл деп ойласа, мен өте таң қаламын. Браузер жеткізушісі браузерді құрастыру табиғаты бойынша интеграцияға біз "сырттан" қарағанда әлдеқайда тереңірек жақындай алады. "— Норм Товей-Уолш.
Айта кетейік, Товей-Уолштың пікірлері XSLT ескіруі туралы хабарландырудан бір апта бұрын келген. Қорытынды Мен әрі қарай жалғастыра алар едім. Бірақ бұл XPath қуатын көрсетті және үлкен жетістіктерге жету үшін оны қалай пайдалану керектігін көрсететін көптеген мысалдар берді деп үміттенемін. Бұл браузер стегіндегі ескі технологияның тамаша үлгісі, оның бар екенін білмесеңіз немесе оған қол жеткізуді ешқашан ойламаған болсаңыз да, бүгінгі күні де көптеген утилиталары бар. Қосымша оқу
Марун Айли, Юсеф Бакуни, Надер Джаллоул және Рима Килани жазған «Табиғи тілмен автоматтандырылған веб-тесттердің тұрақтылығын арттыру» (ACM цифрлық кітапханасы) Бұл мақалада төзімділік сынақтарын жазуға арналған көптеген XPath мысалдары берілген. XPath (MDN) XPath қалай жұмыс істейтінін егжей-тегжейлі сипаттайтын техникалық түсініктеме қажет болса, бұл бастау үшін тамаша орын. XPath оқу құралы (ZVON) Мен көптеген мысалдар мен нақты түсініктемелердің арқасында бұл оқу құралын өзімнің оқуымда ең пайдалы деп таптым. XPatherБұл интерактивті құрал кодпен тікелей жұмыс істеуге мүмкіндік береді.
