Pakankamai ilgai dirbau priekinėje programoje, kad pastebėčiau tendenciją bėgant metams: jaunesni kūrėjai dirba su nauja programavimo paradigma, nesuvokdami istorinio jos konteksto. Žinoma, visiškai suprantama kažko nežinoti. Žiniatinklis yra labai didelė vieta, turinti įvairių įgūdžių ir specialybių, ir mes ne visada žinome, ko nežinome. Mokymasis šioje srityje yra nuolatinė kelionė, o ne tai, kas atsitinka vieną kartą ir baigiasi. Pavyzdys: kažkas iš mano komandos paklausė, ar galima pasakyti, ar naudotojai nueina nuo konkretaus vartotojo sąsajos skirtuko. Aš atkreipiau dėmesį į „JavaScript“ įvykį prieš iškrovimą. Tačiau tie, kurie tai sprendė anksčiau, žino, kad tai įmanoma, nes jiems buvo pranešta apie neišsaugotus duomenis kitose svetainėse, kurioms prieš iškraunant yra įprastas naudojimo atvejis. Taip pat savo kolegai atkreipiau dėmesį į puslapio Slėpti ir matomumasKeisti įvykius. Kaip aš apie tai sužinojau? Nes tai atsirado kitame projekte, o ne todėl, kad iš pradžių mokiausi JavaScript. Faktas yra tas, kad šiuolaikiniai priekiniai karkasai stovi ant ankstesnių technologijų milžinų pečių. Jie abstrakčia kūrimo praktiką, dažnai siekdami geresnės kūrėjo patirties, kuri sumažina arba net pašalina poreikį žinoti ar paliesti tai, kas tradiciškai buvo esminės sąsajos sąvokos, kurias tikriausiai turėtų žinoti visi. Apsvarstykite CSS objekto modelį (CSSOM). Galite tikėtis, kad kiekvienas, dirbantis su CSS ir JavaScript, turi daug praktinės CSSOM patirties, tačiau taip bus ne visada. Buvo „React“ projektas, skirtas el. prekybos svetainei, kurioje dirbau, kur reikėjo įkelti šiuo metu pasirinkto mokėjimo teikėjo stiliaus lentelę. Problema ta, kad stiliaus lapas buvo įkeliamas kiekviename puslapyje, kai jo tikrai reikėjo tik konkrečiame puslapyje. Kūrėjas, kuriam pavesta tai padaryti, niekada nebuvo dinamiškai įkėlęs stiliaus lapo. Vėlgi, tai visiškai suprantama, kai „React“ atsisako tradicinio požiūrio, kurio galbūt pasiekėte. CSSOM greičiausiai nėra kažkas, ko jums reikia kasdieniame darbe. Tačiau tikėtina, kad tam tikru momentu turėsite su juo bendrauti, net ir vienkartiniu atveju. Šios patirtys paskatino mane parašyti šį straipsnį. Gamtoje yra daug esamų žiniatinklio funkcijų ir technologijų, kurių galite niekada nepaliesti dirbdami kasdienį darbą. Galbūt esate gana naujokas žiniatinklio kūrimo srityje ir paprasčiausiai apie juos nežinote, nes esate persunktas tam tikros sistemos abstrakcijoje, kuri nereikalauja, kad jos giliai ar net iš viso išmanytų. Aš kalbu konkrečiai apie XML, kuris, kaip daugelis iš mūsų žino, yra senovės kalba, kuri visiškai nesiskiria nuo HTML. Tai iškeliu dėl neseniai vykusių WHATWG diskusijų, siūlančių, kad iš naršyklių reikėtų pašalinti didelę XML dėklo, žinomo kaip XSLT programavimas, dalį. Tai yra būtent tokia senesnė, egzistuojanti technologija, kurią naudojome daugelį metų, kurias būtų galima panaudoti tokiam praktiškam dalykui kaip CSSOM situacija, kurioje buvo mano komanda. Ar anksčiau dirbote su XSLT? Pažiūrėkime, ar labai pasikliaujame šia senesne technologija ir panaudojame jos funkcijas už XML konteksto ribų, kad šiandien išspręstume realaus pasaulio problemas. XPath: centrinė API Svarbiausia XML technologija, kuri galbūt yra pati naudingiausia ne tiesioginėje XML perspektyvoje, yra XPath – užklausų kalba, leidžianti žymėjimo medyje rasti bet kurį mazgą ar atributą su vienu šaknies elementu. Aš asmeniškai myliu XSLT, bet tai taip pat priklauso nuo XPath, todėl asmeninį meilę reikia atidėti vertinant svarbą. Argumente dėl XSLT pašalinimo XPath neužsimenama, todėl manau, kad jis vis dar leidžiamas. Tai gerai, nes XPath yra pagrindinė ir svarbiausia API šiame technologijų rinkinyje, ypač kai bandoma rasti ką nors naudoti už įprasto XML naudojimo ribų. Tai svarbu, nes nors CSS parinkikliai gali būti naudojami norint rasti daugumą jūsų puslapio elementų, jie negali rasti jų visų. Be to, CSS parinkikliai negali būti naudojami norint rasti elementą pagal jo dabartinę vietą DOM. XPath gali. Dabar kai kurie iš jūsų, skaitančių tai, gali žinoti XPath, o kiti – ne. XPath yra gana didelė technologijų sritis, ir aš tikrai negaliu išmokyti visų pagrindų ir taip pat parodyti jums įdomių dalykų, kuriuos reikia padaryti su juo viename straipsnyje, kaip šis. Iš tikrųjų bandžiau rašyti tą straipsnį, bet vidutinis Smashing Magazine leidinys neviršija 5000 žodžių. Aš jau buvau daugiau nei2000 žodžių, o tik įpusėjus pagrindus. Taigi, aš pradėsiu daryti šaunius dalykus naudodamas XPath ir pateiksiu keletą nuorodų, kurias galite naudoti pagrindiniams dalykams, jei jums tai bus įdomu. XPath ir CSS derinimas XPath gali atlikti daug dalykų, kurių CSS parinkikliai negali atlikti, kai pateikia užklausas apie elementus. Tačiau CSS parinkikliai taip pat gali atlikti keletą dalykų, kurių XPath negali, būtent, pateikti užklausos elementus pagal klasės pavadinimą.
CSS XPath .myClass /*[yra(@klasė, "manoKlasė")]
Šiame pavyzdyje CSS užklausa elementų, kuriuose yra .myClass klasės pavadinimas. Tuo tarpu XPath pavyzdys ieško elementų, kuriuose yra atributų klasė su eilute „myClass“. Kitaip tariant, jis parenka elementus su myClass bet kuriame atribute, įskaitant elementus su .myClass klasės pavadinimu, taip pat elementus, kurių eilutėje yra „myClass“, pvz., .myClass2. XPath šia prasme yra platesnis. Taigi, ne. Aš nesiūlau, kad turėtume išmesti CSS ir pradėti pasirinkti visus elementus naudodami XPath. Tai ne esmė. Esmė ta, kad XPath gali padaryti tai, ko CSS negali ir gali būti labai naudingas, nors tai yra senesnė naršyklės dėklo technologija ir iš pirmo žvilgsnio gali atrodyti neaiški. Naudokime šias dvi technologijas kartu ne tik todėl, kad galime, bet ir todėl, kad proceso metu sužinosime ką nors apie XPath, todėl tai bus dar vienas įrankis jūsų krūvoje – toks, apie kurį galbūt nežinojote, buvo ten visą laiką! Problema ta, kad „JavaScript“ metodas document.evaluate ir įvairūs užklausų parinkimo metodai, kuriuos naudojame su „JavaScript“ skirtomis CSS API, yra nesuderinami. Sukūriau suderinamą užklausų API, kad galėtume pradėti, nors, tiesa, daug apie tai negalvojau, nes tai nukrypsta nuo to, ką čia darome. Štai gana paprastas daugkartinio naudojimo užklausų konstruktoriaus pavyzdys: Žr. Bryano Rasmusseno rašiklio užklausąXPath [forked]. Prie dokumento objekto pridėjau du metodus: queryCSSSelectors (kuris iš esmės yra querySelectorAll) ir queryXPaths. Abu jie grąžina queryResults objektą:
{ užklausos tipas: mazgai | styga | numeris | loginis, rezultatai: bet kurie [] // html elementai, xml elementai, eilutės, skaičiai, loginiai, queryCSSSelectors: (užklausa: eilutė, taisyti: loginis) => queryResults, queryXpaths: (užklausa: eilutė, taisyti: loginis) => queryResults }
Funkcijos queryCSSSelectors ir queryXpaths vykdo užklausą, kurią joms pateikiate per rezultatų masyvo elementus, jei, žinoma, rezultatų masyvas yra mazgų tipo. Priešingu atveju jis pateiks užklausąResult su tuščiu masyvu ir mazgų tipu. Jei ypatybė amend nustatyta į true, funkcijos pakeis savo užklausąResults. Jokiomis aplinkybėmis tai neturėtų būti naudojama gamybos aplinkoje. Tai darau tik norėdamas parodyti įvairius dviejų užklausų API naudojimo kartu efektus. Užklausų pavyzdžiai Noriu parodyti keletą skirtingų XPath užklausų pavyzdžių, kurie parodo kai kuriuos galingus dalykus, kuriuos jos gali padaryti ir kaip jas galima naudoti vietoj kitų metodų. Pirmasis pavyzdys yra //li/text(). Tai užklausa visus li elementus ir grąžina jų teksto mazgus. Taigi, jei turėtume užklausti šio HTML:
- vienas
- du
- trys
... štai kas grąžinama:
{"queryType":"xpathEvaluate","results":["one","du","trys"],"resultType":"string"}
Kitaip tariant, gauname tokį masyvą: ["vienas", "du", "trys"]. Paprastai jūs turite užklausą dėl li elementų, kad tai gautumėte, paverstumėte tos užklausos rezultatą į masyvą, susietumėte masyvą ir grąžintumėte kiekvieno elemento teksto mazgą. Bet mes galime tai padaryti glausčiau naudodami XPath: document.queryXPaths("//li/text()").rezultatai.
Atkreipkite dėmesį, kad būdas gauti teksto mazgą yra naudoti text (), kuris atrodo kaip funkcijos parašas – ir taip yra. Jis grąžina elemento tekstinį mazgą. Mūsų pavyzdyje žymėjime yra trys li elementai, kurių kiekviename yra tekstas („vienas“, „du“ ir „trys“).
Pažvelkime į dar vieną teksto () užklausos pavyzdį. Tarkime, kad tai yra mūsų žymėjimas:
Parašykime užklausą, kuri grąžina href atributo reikšmę: document.queryXPaths("//a[text() = 'Prisijungti']/@href").rezultatai.
Tai yra XPath užklausa dabartiniame dokumente, kaip ir paskutiniame pavyzdyje, tačiau šį kartą grąžiname nuorodos (elemento), kurioje yra tekstas „Prisijungti“, atributą „href“. Tikrasis grąžintasrezultatas yra ["/login.html"]. XPath funkcijų apžvalga Yra daugybė XPath funkcijų, ir jūs tikriausiai jų nesate susipažinę. Manau, kad verta žinoti keletą dalykų, įskaitant šiuos:
starts-withJei tekstas prasideda konkrečiu kitu teksto pavyzdžiu, starts-with(@href, 'http:') grąžina true, jei href atributas prasideda http:. includeJei tekste yra konkretus kito teksto pavyzdys, include(text(), "Smashing Magazine") grąžina true, jei teksto mazge bet kurioje vietoje yra žodžiai "Smashing Magazine". countPateikia užklausos atitikčių skaičių. Pavyzdžiui, count(//*[starts-with(@href, 'http:']) pateikia skaičių, kiek nuorodų kontekstiniame mazge turi elementų su href atributu, kuriame yra tekstas, prasidedantis raide http:. substringVeikia kaip JavaScript poeilutė, išskyrus tai, kad eilutę perduodate kaip argumentą. Pavyzdžiui, substring ("mano tekstas", 2, 4) grąžina "y t". substring-beforeGrąžina eilutės dalį prieš kitą eilutę. Pavyzdžiui, substing-befor("mano tekstas", " ") grąžina "mano". Panašiai substring-before("hi", "bye") grąžina tuščią eilutę. substring-afterPateikia eilutės dalį po kitos eilutės. Pavyzdžiui, substing-after("mano tekstas", " ") grąžina "tekstą". Panašiai substring-after("hi","bye") grąžina tuščią eilutę. normalize-space Grąžina argumentų eilutę su tarpais, normalizuotais pašalinus tarpą priekyje ir gale, o tarpų simbolių sekas pakeičiant vienu tarpu. notGrąžina loginį teisingą, jei argumentas yra klaidingas, kitu atveju klaidingas. trueGrauna loginį true. falseGauna loginį klaidingą. concatTas pats dalykas kaip JavaScript concat, išskyrus tai, kad nepaleidžiate jo kaip metodo eilutėje. Vietoj to, jūs įdedate visas eilutes, kurias norite sujungti. string-lengthTai nėra tas pats, kas JavaScript eilutės ilgis, bet grąžina eilutės ilgį, kuris pateikiamas kaip argumentas. translateThis paima eilutę ir pakeičia antrąjį argumentą į trečiąjį. Pavyzdžiui, translate("abcdef", "abc", "XYZ") išveda XYZdef.
Be šių konkrečių XPath funkcijų, yra daugybė kitų funkcijų, kurios veikia taip pat, kaip ir jų „JavaScript“ atitikmenys – arba iš esmės bet kurios programavimo kalbos atitikmenys – ir kurios tikriausiai taip pat būtų naudingos, pavyzdžiui, grindų, lubų, apvalių, suma ir pan. Toliau pateikta demonstracinė versija iliustruoja kiekvieną iš šių funkcijų: Žiūrėkite Bryano Rasmusseno „Pen XPath Numerical“ funkcijas [forked]. Atkreipkite dėmesį, kad, kaip ir daugelis manipuliavimo eilutėmis funkcijų, daugelis skaitinių įveda vieną įvestį. Taip yra, žinoma, nes jie turėtų būti naudojami užklausoms, kaip ir paskutiniame XPath pavyzdyje: //li[grindys(text()) > 250]/@val
Jei juos naudosite, kaip daroma daugumoje pavyzdžių, jis bus paleistas pirmame mazge, kuris atitinka kelią. Taip pat yra keletas tipų konvertavimo funkcijų, kurių tikriausiai turėtumėte vengti, nes „JavaScript“ jau turi savo tipo konvertavimo problemų. Tačiau gali būti atvejų, kai norite konvertuoti eilutę į skaičių, kad palygintumėte ją su kitu skaičiumi. Funkcijos, kurios nustato kažko tipą, yra loginis, skaičius, eilutė ir mazgas. Tai yra svarbūs XPath duomenų tipai. Ir kaip galite įsivaizduoti, dauguma šių funkcijų gali būti naudojamos duomenų tipuose, kurie nėra DOM mazgai. Pavyzdžiui, substring-after įgauna eilutę, kurią jau aptarėme, bet tai gali būti eilutė iš atributo href. Tai taip pat gali būti tik eilutė:
const testSubstringAfter = document.queryXPaths("substring-after('labas pasauli',' ')");
Akivaizdu, kad šis pavyzdys mums grąžins rezultatų masyvą kaip ["pasaulis"]. Kad tai parodyčiau, sukūriau demonstracinį puslapį, naudodamas funkcijas, kurios nėra DOM mazgai: Žr. Bryano Rasmusseno rašiklio užklausąXPath [forked]. Turėtumėte atkreipti dėmesį į stebinantį vertimo funkcijos aspektą, t. y. jei antrajame argumente (t. y. simbolių, kuriuos norite išversti, sąraše) yra simbolis ir nėra tinkamo simbolio, į kurį būtų galima išversti, tas simbolis pašalinamas iš išvesties. Taigi, tai:
translate('Sveiki, mano vardas Inigo Montoya, tu nužudei mano tėvą, ruoškis mirti','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
…rezultatai eilutėje, įskaitant tarpus: [" * * ** "]
Tai reiškia, kad raidė „a“ verčiama į žvaigždutę (*), tačiau visi kiti simboliai, kurie neturi vertimo, atsižvelgiant į tikslinę eilutę, yra visiškai pašalinami. Mums liko tik tarpastarp išverstų „a“ simbolių. Tada vėl ši užklausa:
translate ('Sveiki, mano vardas Inigo Montoya, tu nužudei mano tėvą, ruoškis mirti','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','********************************************************'))
...neturi problemų ir pateikia tokį rezultatą:
"****** *** **** ** ***** ******* *** ****** ** ****** ******* *** ***"
Gali pasirodyti, kad „JavaScript“ nėra lengvo būdo tiksliai atlikti tai, ką daro XPath vertimo funkcija, nors daugeliu atvejų tai gali atlikti „All“ pakeitimas įprastomis išraiškomis. Galite naudoti tą patį metodą, kurį parodžiau, bet tai nėra optimalu, jei norite tik išversti eilutes. Toliau pateikta demonstracinė versija apima XPath vertimo funkciją, kad būtų pateikta „JavaScript“ versija: Žr. Bryano Rasmusseno rašiklio vertimo funkciją [forked]. Kur galėtumėte panaudoti kažką panašaus? Apsvarstykite Cezario šifravimo šifravimą su trijų vietų poslinkiu (pvz., aukščiausio lygio šifravimas nuo 48 B.C.):
translate("Cezaris planuoja kirsti Rubikoną!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", „XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw“)
Įvesties tekstas „Cezaris planuoja kirsti Rubikoną! Rezultatai „Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk! Norėdamas pateikti dar vieną greitą įvairių galimybių pavyzdį, sukūriau metalinę funkciją, kuri paima eilutės įvestį ir naudoja vertimo funkciją tekstui grąžinti, įskaitant visus simbolius, kuriuose yra umlauto raidės. Žiūrėkite Bryano Rasmusseno metalo rašiklio funkciją [forked].
const metal = (str) => { return translate(str, "AOUaou","ÄÖÜäöü"); }
Ir, jei pateikiamas tekstas „Motley Crue rule, rock on dudes!“, grąžina „Mötley Crüe rüles, röck ön düdes! Akivaizdu, kad šią funkciją galima panaudoti įvairiai parodijai. Jei tai jūs, šis TVTropes straipsnis turėtų suteikti jums daug įkvėpimo. CSS naudojimas su XPath Prisiminkite pagrindinę priežastį, kodėl naudojame CSS parinkiklius kartu su XPath: CSS beveik supranta, kas yra klasė, o geriausia, ką galite padaryti naudodami XPath, yra klasės atributo eilučių palyginimas. Tai veiks daugeliu atvejų. Bet jei kada nors susidurtumėte su situacija, kai, tarkime, kas nors sukūrė klases, pavadintas .primaryLinks ir .primaryLinks2, o jūs naudojate XPath, kad gautumėte .primaryLinks klasę, greičiausiai susidurtumėte su problemomis. Kol nėra nieko panašaus kvailo, tikriausiai naudotumėte XPath. Tačiau man liūdna pranešti, kad dirbau vietose, kur žmonės daro tokius kvailus dalykus. Štai dar viena demonstracinė versija, kurioje kartu naudojamas CSS ir XPath. Tai parodo, kas nutinka, kai naudojame kodą XPath paleidimui kontekstiniame mazge, kuris nėra dokumento mazgas. Pamatykite „Pen css“ ir „xpath“ kartu [forked], kurį sukūrė Bryanas Rasmussenas. CSS užklausa yra .relatedarticles a, kuri gauna du a elementus, esančius div, kuriems priskirta .relatedarticles klasė. Po to yra trys „blogos“ užklausos, ty užklausos, kurios nedaro to, ko mes norime, kai vykdomi šie elementai kaip kontekstinis mazgas. Galiu paaiškinti, kodėl jie elgiasi kitaip, nei tikėjotės. Aptariamos trys blogos užklausos:
//text(): grąžina visą dokumente esantį tekstą. //a/text(): grąžina visą tekstą nuorodų viduje dokumente. ./a/text(): nepateikia jokių rezultatų.
Šių rezultatų priežastis yra ta, kad nors jūsų kontekstas yra elementas, grąžintas iš CSS užklausos, // prieštarauja visam dokumentui. Tai XPath stiprybė; CSS negali pereiti iš mazgo į protėvį, o paskui į to protėvio brolį ir seserį ir pereiti iki to brolio ir sesers palikuonio. Bet XPath gali. Tuo tarpu ./ užklausa dabartinio mazgo vaikų, kur taškas (.) žymi dabartinį mazgą, o pasvirasis brūkšnys (/) reiškia ėjimą į kokį nors antrinį mazgą – ar tai atributas, elementas ar tekstas, nustato kita kelio dalis. Tačiau CSS užklausa pasirinkto antrinio elemento nėra, todėl ta užklausa taip pat nieko nepateikia. Paskutinėje demonstracinėje versijoje yra trys geros užklausos:
.//text(), ./text(), normalize-space(./text()).
Normalize-space užklausa parodo XPath funkcijos naudojimą, bet taip pat išsprendžia problemą, įtrauktą į kitas užklausas. HTML struktūra yra tokia:
Funkcijų tikrinimo automatizavimas naudojant Selenium WebDriver
Užklausa grąžina eilutės tiekimą teksto mazgo pradžioje ir pabaigoje,ir normalizavimo erdvė tai pašalina. Naudojant bet kokią XPath funkciją, kuri grąžina ką nors kita nei loginė vertė su įvestimi XPath, taikoma ir kitoms funkcijoms. Toliau pateiktoje demonstracijoje pateikiami keli pavyzdžiai: Žr. Bryano Rasmusseno „Pen xpath“ funkcijų pavyzdžius [forked]. Pirmas pavyzdys rodo problemą, kurios turėtumėte saugotis. Tiksliau, šis kodas:
document.queryXPaths("substring-after(//a/@href,'https://')");
…pateikia vieną eilutę:
"www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/"
Tai prasminga, tiesa? Šios funkcijos grąžina ne masyvus, o pavienes eilutes arba pavienius skaičius. Paleidus funkciją bet kur su keliais rezultatais, pateikiamas tik pirmasis rezultatas. Antrasis rezultatas parodo, ko mes iš tikrųjų norime:
document.queryCSSSelectors("a").queryXPaths("substring-after(./@href,'https://')");
Kuris grąžina dviejų eilučių masyvą:
["www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/","www.smashingmagazine.com/2022/11/automated-test-results-improve-accessibility/"]
XPath funkcijos gali būti įdėtos kaip ir JavaScript funkcijos. Taigi, jei žinome „Smashing Magazine“ URL struktūrą, galėtume atlikti šiuos veiksmus (rekomenduojama naudoti šablono literatūrą): `išversti ( poeilutė ( substring-after(./@href, 'www.smashingmagazine.com/') ,9), '/','')'
Tai darosi šiek tiek per sudėtinga, nes reikia komentarų, apibūdinančių, ką ji daro: paimkite visą URL iš href atributo po www.smashingmagazine.com/, pašalinkite pirmuosius devynis simbolius, tada išverskite pasvirąjį brūkšnį (/) į nieką, kad atsikratytumėte besibaigiančio pasvirojo brūkšnio. Gautas masyvas:
["feature-testing-selenium-webdriver", "automated-test-results-improve-accessibility"]
Daugiau XPath naudojimo atvejų „XPath“ tikrai gali sužibėti atliekant bandymus. Priežastį nesunku suprasti, nes XPath gali būti naudojamas norint gauti kiekvieną DOM elementą iš bet kurios DOM vietos, o CSS negali. Negalite tikėtis, kad CSS klasės išliks nuoseklios daugelyje šiuolaikinių kūrimo sistemų, tačiau naudodami XPath galime nustatyti tikslesnius elemento teksto turinio atitikmenis, nepaisant besikeičiančios DOM struktūros. Buvo atlikti metodai, leidžiantys atlikti atsparius XPath testus. Nieko nėra blogiau už tai, kad testai nutrūksta ir nepavyksta vien dėl to, kad CSS parinkiklis nebeveikia, nes kažkas buvo pervadinta arba pašalinta. XPath taip pat puikiai tinka kelių vietovių ištraukimui. Yra daugiau nei vienas būdas naudoti XPath užklausas, kad atitiktų elementą. Tas pats pasakytina apie CSS. Tačiau XPath užklausos gali būti tikslingesnės, o tai apriboja, kas grąžinama, todėl galite rasti konkrečią atitiktį, kurioje gali būti kelios galimos atitikties. Pavyzdžiui, galime naudoti XPath, norėdami grąžinti konkretų elementą h2, esantį div viduje, kuris iš karto seka po brolio div, kuris savo ruožtu turi antrinį vaizdo elementą su atributu data-testID="leader":
negauti šios antraštės
Nesupraskite ir šios antraštės
Pirmojo vaizdo antraštė
Tai yra užklausa: document.queryXPaths(` //div[ sekantis brolis::div[1] /img[@data-testID='lyderis'] ] /h2/ tekstas () `);
Įjunkite demonstracinę versiją, kad pamatytumėte, kaip visa tai susideda: Žr. Bryano Rasmusseno užklausą „Pen Complex H2“ [šakė]. Taigi, taip. Yra daug galimų kelių iki bet kurio testo elemento naudojant XPath. XSLT 1.0 naudojimo nutraukimas Anksčiau minėjau, kad „Chrome“ komanda planuoja pašalinti XSLT 1.0 palaikymą iš naršyklės. Tai svarbu, nes XSLT 1.0 naudoja XML orientuotą programavimą dokumentų transformavimui, kuris savo ruožtu remiasi XPath 1.0, kuris yra daugumoje naršyklių. Kai tai atsitiks, prarasime pagrindinį XPath komponentą. Tačiau atsižvelgiant į tai, kad XPath tikrai puikiai tinka rašyti testus, mažai tikėtina, kad XPath kaip visuma greitai išnyks. Beje, pastebėjau, kad žmonės susidomi funkcija, kai ji atimama. Ir tai tikrai tiesa, kai XSLT 1.0 nebenaudojamas. „Hacker News“ vyksta visa diskusija, kupina argumentų prieš nusidėvėjimą. Pats įrašas yra puikus tinklaraščių sistemos su XSLT kūrimo pavyzdys. JūsGalite patys perskaityti diskusiją, bet kalbama apie tai, kaip „JavaScript“ gali būti naudojamas kaip XLST priemonė sprendžiant tokius atvejus. Taip pat mačiau pasiūlymų, kad naršyklės turėtų naudoti SaxonJS, kuri yra prievadas į JavaScript Saxon XSLT, XQUERY ir XPath variklius. Tai įdomi idėja, ypač dėl to, kad Saxon-JS įgyvendina dabartinę šių specifikacijų versiją, tuo tarpu nėra naršyklės, kuri įdiegtų XPath ar XSLT versiją po 1.0, ir nė vienos, kuri įdiegtų XQuery. Susisiekiau su Norm Tovey-Walsh iš Saxonica, įmonės, kuri gamina SaxonJS ir kitas Saxon variklio versijas. Jis pasakė: „Jei kuris nors naršyklės pardavėjas norėtų pasinaudoti SaxonJS kaip atspirties tašku integruojant šiuolaikines XML technologijas į naršyklę, mums būtų malonu tai su juo aptarti.“ – Norm Tovey-Walsh
Bet taip pat pridūrė: "Būčiau labai nustebęs, jei kas nors pagalvotų, kad SaxonJS dabartinė forma ir nepakeistas įtraukimas į naršyklės versiją būtų idealus būdas. Naršyklės pardavėjas dėl to, kad jie kuria naršyklę, galėtų integruoti daug giliau nei mes galime "iš išorės".
Verta paminėti, kad Tovey-Walsh komentarai pasirodė likus maždaug savaitei iki pranešimo apie XSLT naudojimo nutraukimą. Išvada Galėčiau tęsti ir tęsti. Tačiau tikiuosi, kad tai parodė XPath galią ir pateikė daug pavyzdžių, rodančių, kaip jį panaudoti siekiant didelių dalykų. Tai puikus senesnių technologijų pavyzdys naršyklės krūvoje, kuri ir šiandien turi daug naudingų dalykų, net jei niekada nežinojote, kad ji egzistuoja arba nesvarstėte, kad jos siekiate. Tolesnis skaitymas
„Automatizuotų žiniatinklio testų atsparumo didinimas naudojant natūralią kalbą“ (ACM skaitmeninė biblioteka), autorius Maroun Ayli, Youssef Bakouny, Nader Jalloul ir Rima KilanyŠiame straipsnyje pateikiama daug XPath pavyzdžių, kaip rašyti atsparius testus. XPath (MDN) Tai puiki vieta pradėti, jei norite techninio paaiškinimo, kuriame išsamiai aprašoma, kaip veikia XPath. „XPath Tutorial“ (ZVON) Dėl daugybės pavyzdžių ir aiškių paaiškinimų, ši mokymo programa man labiausiai padeda mokytis. XPatherŠis interaktyvus įrankis leidžia dirbti tiesiogiai su kodu.
