Kuring geus di hareup-tungtung ngembangkeun cukup lila pikeun nempo trend leuwih taun: pamekar ngora gawé bareng paradigma anyar programming tanpa ngarti konteks sajarah eta. Ieu, tangtosna, sampurna kaharti mun teu nyaho hiji hal. Wéb mangrupikeun tempat anu ageung kalayan rupa-rupa kaahlian sareng spesialisasi, sareng urang henteu terang naon anu urang henteu terang. Diajar dina widang ieu mangrupa lalampahan lumangsung tinimbang hiji hal anu lumangsung sakali sarta ends. Kasus dina titik: Batur di tim kuring naroskeun naha éta mungkin pikeun ngawartosan upami pangguna napigasi jauh tina tab khusus dina UI. Kuring nunjuk kaluar acara beforeunload JavaScript urang. Tapi jalma anu geus tackled ieu saméméh nyaho ieu mungkin sabab geus pencét jeung panggeuing ngeunaan data teu disimpen dina loka séjénna, nu beforeunload mangrupakeun kasus pamakéan has. Kuring ogé nunjuk kaluar pageHide na visibilityChange acara ka batur sapagawean kuring keur ukuran alus. Kumaha kuring terang ngeunaan éta? Kusabab éta sumping dina proyék sanés, sanés kusabab kuring diajarkeun nalika mimiti diajar JavaScript. Kanyataan yén kerangka hareup-tungtung modern nangtung dina taktak raksasa téknologi anu sateuacanna. Éta prakték pamekaran abstrak, sering pikeun pangalaman pamekar anu langkung saé anu ngirangan, atanapi malah ngaleungitkeun, peryogi terang atanapi nyabak naon anu sacara tradisional janten konsép hareup-tungtung penting anu sigana sadayana kedah terang. Mertimbangkeun Modél Objék CSS (CSSOM). Anjeun panginten tiasa nyangka yén saha waé anu damel di CSS sareng JavaScript gaduh seueur pangalaman CSSOM, tapi éta henteu salawasna janten masalahna. Aya proyék React pikeun situs e-commerce anu kuring damel dimana urang kedah ngamuat stylesheet pikeun panyadia pamayaran anu ayeuna dipilih. Masalahna nya éta stylesheet ieu dimuat dina unggal kaca lamun ieu ngan bener diperlukeun dina kaca husus. Pamekar anu ditugaskeun pikeun ngajantenkeun ieu henteu kantos ngeusian lambaran gaya sacara dinamis. Sakali deui, ieu leres-leres kaharti nalika React ngaleungitkeun pendekatan tradisional anu anjeun tiasa ngahontal. CSSOM sigana sanés hal anu anjeun peryogikeun dina padamelan sapopoé. Tapi sigana anjeun bakal kedah berinteraksi sareng éta dina sababaraha waktos, bahkan dina hiji waktos. Pangalaman ieu mere ilham kuring nulis artikel ieu. Aya seueur fitur sareng téknologi wéb anu aya di alam liar anu anjeun moal kantos noél langsung dina padamelan sadinten anjeun. Panginten anjeun énggal-énggal dina pamekaran wéb sareng teu terang aranjeunna sabab anjeun nuju kacepeng dina abstraksi kerangka khusus anu henteu ngabutuhkeun anjeun terang pisan, atanapi bahkan pisan. Kuring diomongkeun husus ngeunaan XML, nu loba urang nyaho mangrupa basa kuna teu sagemblengna dissimilar ti HTML. Kuring mawa ieu up kusabab diskusi WHATWG panganyarna suggesting yén chunk signifikan tina tumpukan XML katelah programming XSLT kudu dipiceun tina panyungsi. Ieu persis nurun tina heubeul, téhnologi aya kami geus mangtaun-taun anu bisa dipaké pikeun hal sakumaha praktis sakumaha kaayaan CSSOM tim kuring. Dupi anjeun damel sareng XSLT sateuacanna? Hayu urang tingali naha urang condong kana téknologi anu langkung lami ieu sareng ngungkit fitur-fiturna di luar konteks XML pikeun ngatasi masalah dunya nyata ayeuna. XPath: API Tengah Téknologi XML anu paling penting anu sigana anu paling kapaké di luar sudut pandang XML langsung nyaéta XPath, basa query anu ngamungkinkeun anjeun mendakan titik atanapi atribut dina tangkal markup sareng hiji unsur akar. Kuring boga sayang pribadi pikeun XSLT, tapi éta ogé ngandelkeun XPath, sarta sayang pribadi kudu nempatkeun kumisan dina ranking pentingna. Argumen pikeun ngahapus XSLT henteu nyarios ngeunaan XPath, janten kuring nyangka éta masih diidinan. Éta saé sabab XPath mangrupikeun API sentral sareng paling penting dina suite téknologi ieu, khususna nalika nyobian milarian anu tiasa dianggo di luar pamakean XML normal. Kadé sabab, bari pamilih CSS bisa dipaké pikeun manggihan lolobana elemen dina kaca anjeun, aranjeunna moal bisa manggihan kabeh. Saterusna, pamilih CSS teu bisa dipaké pikeun manggihan unsur dumasar kana posisi na ayeuna di DOM. XPath tiasa. Ayeuna, sababaraha anjeun anu maca ieu panginten terang XPath, sareng sababaraha anu henteu. XPath mangrupikeun daérah téknologi anu lumayan ageung, sareng kuring henteu tiasa ngajarkeun sadayana dasar-dasar sareng ogé nunjukkeun anjeun hal-hal anu pikaresepeun pikeun ngalakukeunana dina hiji tulisan sapertos kieu. Kuring saleresna nyobian nyerat tulisan éta, tapi rata-rata publikasi Majalah Smashing henteu langkung ti 5,000 kecap. Kuring éta geus di leuwih ti2.000 kecap bari ngan satengahna ngaliwatan dasar. Janten, kuring badé ngamimitian ngalakukeun hal-hal anu keren sareng XPath sareng masihan anjeun sababaraha tautan anu tiasa anjeun pake pikeun dasar-dasar upami anjeun mendakan barang ieu pikaresepeun. Ngagabungkeun XPath & CSS XPath tiasa ngalakukeun seueur hal anu henteu tiasa dilakukeun ku pamilih CSS nalika naroskeun elemen. Tapi pamilih CSS ogé tiasa ngalakukeun sababaraha hal anu XPath henteu tiasa, nyaéta, elemen pamundut ku nami kelas.
CSS XPath .myClass /*[ngandung (@class, "myClass")]
Dina conto ieu, CSS queries elemen nu ngandung .myClass classname. Samentara éta, conto XPath queries elemen anu ngandung hiji kelas atribut jeung string "myClass". Dina basa sejen, eta milih elemen kalawan myClass dina atribut naon, kaasup elemen kalawan .myClass classname - sakumaha ogé elemen kalawan "myClass" dina senar, kayaning .myClass2. XPath langkung lega dina rasa éta. Janten, henteu. Abdi henteu nyarankeun yén urang kedah ngaluarkeun CSS sareng mimitian milih sadaya elemen via XPath. Éta henteu titik. Intina nyaéta XPath tiasa ngalakukeun hal-hal anu CSS henteu tiasa sareng masih tiasa mangpaat, sanaos éta téknologi anu langkung lami dina tumpukan browser sareng sigana henteu écés dina pandangan anu munggaran. Hayu urang nganggo dua téknologi babarengan henteu ngan kusabab urang tiasa, tapi kusabab urang bakal diajar ngeunaan XPath dina prosésna, ngajantenkeun alat anu sanés dina tumpukan anjeun - hiji anu anjeun teu acan terang parantos aya sapanjangna! Masalahna nyaéta métode document.evaluate JavaScript jeung rupa-rupa métode pamilih query kami nganggo jeung API CSS pikeun JavaScript teu cocog. Kuring geus nyieun API querying cocog pikeun ngamimitian urang, sanajan diaku, Kuring geus teu nempatkeun loba pamikiran kana eta saprak éta miang tina naon nuju kami lakukeun di dieu. Ieu conto kerja anu cukup saderhana pikeun konstruktor pamundut anu tiasa dianggo deui: Ningali Pen queryXPath [forked] ku Bryan Rasmussen. Kuring geus ditambahkeun dua métode dina objék dokumen: queryCSSSelectors (anu dasarna querySelectorAll) jeung queryXPaths. Duanana ieu balik hiji obyék queryResults:
{ queryType: titik | string | angka | boolean, hasil: naon [] // elemen html, elemen xml, string, angka, booleans, queryCSSSelectors: (query: string, ngarobah: boolean) => queryResults, queryXpaths: (query: string, ngarobah: boolean) => queryResults }
Fungsi queryCSSSelectors sareng queryXpaths ngajalankeun query anu anjeun pasihan ka aranjeunna dina unsur-unsur dina hasil arrays, salami hasil arrays tina tipe titik, tangtosna. Upami teu kitu, éta bakal balik a queryResult kalawan Asép Sunandar Sunarya kosong sarta jenis titik. Lamun harta amandemen disetel ka leres, fungsi bakal ngarobah queryResults sorangan. Dina kaayaan naon waé, ieu kedah dianggo dina lingkungan produksi. Kuring ngalakonan cara kieu murni pikeun demonstrate rupa épék tina ngagunakeun dua API query babarengan. Conto Patarosan Abdi hoyong nunjukkeun sababaraha conto patarosan XPath anu béda-béda anu nunjukkeun sababaraha hal anu kuat anu tiasa dilakukeun sareng kumaha aranjeunna tiasa dianggo pikeun ngagentos pendekatan anu sanés. Conto kahiji nyaéta //li/text(). Ieu queries sadayana elemen li sarta mulih titik téks maranéhanana. Janten, upami urang naroskeun HTML di handap ieu:
- hiji
- dua
- tilu
... ieu anu dipulangkeun:
{"queryType":"xpathEvaluate","results":["hiji","dua","tilu"],"resultType":"string"}
Dina basa sejen, urang meunang Asép Sunandar Sunarya handap: ["hiji", "dua", "tilu"]. Biasana, anjeun bakal naroskeun elemen li pikeun kéngingkeun éta, kéngingkeun hasil tina pamundut éta kana susunan, petakeun susunan, sareng mulangkeun titik téks unggal unsur. Tapi urang tiasa ngalakukeun éta langkung ringkes sareng XPath: document.queryXPaths ("//li/text ()").hasilna.
Perhatikeun yén cara pikeun meunangkeun titik téks nyaéta ngagunakeun téks (), nu Sigana mah a signature fungsi - sarta éta. Ieu mulih titik téks unsur. Dina conto urang, aya tilu elemen li dina markup nu, unggal ngandung téks ( "hiji", "dua", jeung "tilu").
Hayu urang tingali hiji deui conto téks () query. Anggap ieu markup kami:
Hayu urang nyerat pamundut anu mulihkeun nilai atribut href: document.queryXPaths ("//a [téks () = 'Asup']/@href"). hasil.
Ieu mangrupikeun query XPath dina dokumen ayeuna, sapertos conto anu terakhir, tapi waktos ieu kami uih deui atribut href tina tautan (unsur) anu ngandung téks "Asup". Nu sabenerna balikhasilna nyaeta ["/login.html"]. Ihtisar Fungsi XPath Aya sababaraha fungsi XPath, sareng anjeun sigana teu wawuh sareng aranjeunna. Aya sababaraha, Jigana, anu patut uninga ngeunaan, kaasup handap:
dimimitian-kalayan Lamun téks dimimitian ku conto téks sejenna tinangtu, dimimitian-kalawan (@href, 'http:') mulih leres lamun hiji atribut href dimimitian ku http:. ngandung Lamun téks ngandung hiji conto téks sejenna tinangtu, ngandung (téks (), "Majalah Smashing") balik leres lamun titik téks ngandung kecap "Smashing Magazine" di mana wae. countReturns count tina sabaraha patandingan aya kana query a. Contona, count (//* [starts-with (@href, 'http:']) mulih count sabaraha Tumbu dina titik konteks mibanda elemen kalawan atribut href nu ngandung téks dimimitian ku http:. substringWorks kawas JavaScript substring, iwal mun lulus string salaku argumen. Contona, substring ("teks abdi", 2, 4) mulih "y t". substring-beforeReturns bagian tina string saméméh string sejen. Contona, substing-sateuacan ("teks abdi", " ") mulih "abdi". Nya kitu, substring-sateuacan ("hi", "bye") mulih string kosong. substring-afterReturns bagian tina string sanggeus string sejen. Contona, substing-sanggeus("teks abdi", " ") mulih "teks". Nya kitu, substring-sanggeus ("hi", "bye") mulih string kosong. normalize-spaceMulangkeun string argumen kalawan spasi bodas dinormalisasi ku stripping whitespace ngarah jeung labuh tur ngaganti runtuyan karakter spasi bodas ku spasi tunggal. notReturns boolean leres lamun argumen salah, disebutkeun palsu. trueReturns boolean leres. falseReturns boolean false. concatThe hal anu sarua sakumaha JavaScript concat, iwal anjeun teu ngajalankeun salaku padika on string a. Gantina, anjeun nempatkeun dina sakabéh string rék concatenate. string-lengthIeu teu sarua JavaScript string-panjangna, tapi rada mulih panjang string eta dibikeun salaku argumen. translateThis nyokot string sarta ngarobah argumen kadua pikeun argumen katilu. Contona, narjamahkeun ("abcdef", "abc", "XYZ") kaluaran XYZdef.
Kumisan ti fungsi XPath tinangtu ieu, aya sababaraha pungsi séjén nu gawéna ngan sarua jeung counterparts JavaScript maranéhanana - atawa counterparts dina dasarna sagala basa programming - nu Anjeun meureun ogé bakal manggihan mangpaat, kayaning lantai, siling, buleud, jumlah, jeung saterusna. Demo di handap ieu ngagambarkeun unggal fungsi ieu: Tempo fungsi Pen XPath Numerical [forked] ku Bryan Rasmussen. Catet yén, sapertos sabagéan ageung fungsi manipulasi string, seueur numerik nyandak hiji input tunggal. Ieu, tangtosna, sabab sakuduna dianggo pikeun query, sapertos dina conto XPath anu terakhir: //li[floor(text())> 250]/@val
Upami anjeun nganggo éta, sapertos seueur conto anu dilakukeun, anjeun bakal ngeureunkeunana dina titik munggaran anu cocog sareng jalur. Aya ogé sababaraha fungsi konversi tipe Anjeun meureun kedah ulah aya sabab JavaScript geus boga masalah konversi tipe sorangan. Tapi tiasa aya waktos nalika anjeun hoyong ngarobih senar kana nomer pikeun mariksana ngalawan sababaraha nomer anu sanés. Fungsi anu netepkeun jinis hiji hal nyaéta boolean, angka, string, sareng titik. Ieu mangrupikeun jinis data XPath anu penting. Sareng sakumaha anu anjeun bayangkeun, seueur fungsi ieu tiasa dianggo dina tipe data anu sanés titik DOM. Contona, substring-sanggeus nyokot string sakumaha kami geus katutupan, tapi bisa jadi string ti hiji atribut href. Éta ogé tiasa janten senar:
const testSubstringAfter = document.queryXPaths ("substring-sanggeus ( 'halo dunya',' ')");
Jelas, conto ieu bakal masihan urang deui hasil Asép Sunandar Sunarya salaku ["dunya"]. Pikeun nunjukkeun ieu dina aksi, kuring parantos ngadamel halaman demo nganggo fungsi ngalawan hal-hal anu sanés titik DOM: Ningali Pen queryXPath [forked] ku Bryan Rasmussen. Anjeun kedah perhatikeun aspék héran tina fungsi narjamahkeun, nyaéta upami anjeun gaduh karakter dina argumen kadua (nyaéta, daptar karakter anu anjeun hoyong ditarjamahkeun) sareng henteu aya karakter anu cocog pikeun ditarjamahkeun, karakter éta bakal dipiceun tina kaluaran. Ku kituna, ieu:
translate('Halo, Nami abdi Inigo Montoya, anjeun maéhan bapa abdi, siapkeun maot','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
...hasil dina string, kaasup spasi: [" *** ** "]
Ieu ngandung harti yén hurup "a" keur ditarjamahkeun kana tanda bintang (*), tapi unggal karakter sejenna nu teu boga tarjamahan dibere target string sagemblengna dipiceun. spasi bodas téh sadayana urang geus ditinggalkeunantara karakter "a" ditarjamahkeun. Teras deui, patarosan ieu:
tarjamahkeun ('Halo, Nami abdi Inigo Montoya, anjeun maéhan bapa abdi, siapkeun maot','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','******************************************************')")
... teu ngagaduhan masalah sareng ngahasilkeun hasil sapertos kieu:
"***** ** **** ** ***** ******* *** ****** ** ****** ****** ** ***"
Éta tiasa nyerang anjeun yén teu aya cara anu gampang dina JavaScript pikeun ngalakukeun naon anu dilakukeun ku fungsi narjamahkeun XPath, sanaos pikeun seueur kasus pamakean, ngagantikeunAll nganggo ekspresi biasa tiasa ngadamel éta. Anjeun tiasa nganggo pendekatan anu sami anu kuring nunjukkeun, tapi éta suboptimal upami anjeun hoyong narjamahkeun senar. Demo di handap ieu ngabungkus fungsi tarjamah XPath pikeun nyayogikeun versi JavaScript: Tempo fungsi Pen narjamahkeun [forked] ku Bryan Rasmussen. Dimana anjeun tiasa nganggo anu sapertos kieu? Pertimbangkeun énkripsi Caesar Cipher kalayan offset tilu tempat (contona, énkripsi top-of-the-line ti 48 SM):
translate ("Caesar ngarencanakeun meuntas Rubicon!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
Tulisan input "Caesar badé nyebrang Rubicon!" hasilna "Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!" Pikeun masihan conto gancang sejen tina kemungkinan béda, Kuring dijieun fungsi logam nu nyokot input string sarta ngagunakeun fungsi narjamahkeun pikeun balik téks, kaasup sakabeh karakter nu nyandak umlauts. Tempo fungsi Pen logam [forked] ku Bryan Rasmussen.
const logam = (str) => { return translate(str, "AOUaou","ÄÖÜäöü"); }
Sareng, upami dipasihan téks "Aturan Motley Crue, rock on dudes!", Ngabalikeun deui "Mötley Crüe rüles, röck ön düdes!" Jelas, hiji bisa mibanda sagala sorts parodi pamakéan fungsi ieu. Upami éta anjeun, maka tulisan TVTropes ieu kedah masihan anjeun seueur inspirasi. Ngagunakeun CSS Jeung XPath Inget alesan utama urang pikeun ngagunakeun pamilih CSS babarengan jeung XPath: CSS lumayan loba understands naon kelas hiji, sedengkeun nu pangalusna anjeun bisa ngalakukeun kalawan XPath nyaeta string ngabandingkeun tina atribut kelas. Éta bakal tiasa dianggo dina kalolobaan kasus. Tapi upami anjeun kantos ngalaman kaayaan dimana, sebutkeun, aya anu nyiptakeun kelas anu namina .primaryLinks sareng .primaryLinks2 sareng anjeun nganggo XPath pikeun kéngingkeun kelas .primaryLinks, maka anjeun kamungkinan bakal ngalaman masalah. Salami teu aya anu konyol sapertos kitu, anjeun panginten bakal nganggo XPath. Tapi kuring sedih ngalaporkeun yén kuring parantos damel di tempat-tempat dimana jalma-jalma ngalakukeun jinis-jinis konyol éta. Ieu demo sanés nganggo CSS sareng XPath babarengan. Éta nunjukkeun naon anu lumangsung nalika kami nganggo kodeu pikeun ngajalankeun XPath dina titik kontéks anu sanés titik dokumen. Tempo css Pen jeung xpath babarengan [forked] ku Bryan Rasmussen. The CSS query nyaeta .relatedarticles a, nu fetches dua elemen a dina div ditugaskeun kelas .relatedarticles. Sanggeus éta tilu "goréng" queries, maksudna, queries nu teu ngalakukeun naon urang hayang aranjeunna ngalakukeun lamun ngajalankeun kalawan elemen ieu salaku titik konteks. Abdi tiasa ngajelaskeun naha aranjeunna behaving béda ti anjeun nyangka. Tilu patarosan goréng anu dimaksud nyaéta:
//text(): Mulih sakabeh téks dina dokumen éta. //a/text (): Ngabalikeun sadaya téks dina tautan dina dokumen éta. ./a/text (): Mulih euweuh hasil.
Alesan pikeun hasil ieu nyaéta nalika kontéks anjeun mangrupikeun unsur anu dipulangkeun tina pamundut CSS, // ngalawan sadayana dokumen. Ieu kakuatan XPath; CSS teu bisa balik ti titik nepi ka karuhun lajeng ka duduluran karuhun éta, sarta leumpang ka handap ka turunan duduluran éta. Tapi XPath tiasa. Samentara éta, ./ queries barudak tina titik ayeuna, dimana titik (.) ngagambarkeun titik ayeuna, sarta slash maju (/) ngagambarkeun bade sababaraha titik anak - naha éta mangrupa atribut, unsur, atawa téks ditangtukeun ku bagian hareup jalur. Tapi euweuh anak unsur dipilih ku query CSS, sahingga query nu ogé mulih nanaon. Aya tilu patarosan anu saé dina éta demo anu terakhir:
.//text(), ./text(), normalize-spasi(./text()).
Paménta normalize-spasi nunjukkeun pamakean fungsi XPath, tapi ogé ngalereskeun masalah anu kalebet dina patarosan anu sanés. HTML disusun sapertos kieu:
Ngaotomatiskeun Uji Fitur Anjeun Sareng Selenium WebDriver
Paménta ngabalikeun feed baris di awal sareng tungtung titik téks,sareng normalize-spasi ngahapus ieu. Ngagunakeun sagala fungsi XPath nu mulih hal lian ti boolean kalawan input XPath lumaku pikeun fungsi séjén. Demo di handap ieu nunjukkeun sababaraha conto: Tempo conto Pen xpath fungsi [forked] ku Bryan Rasmussen. Conto munggaran nunjukkeun masalah anu anjeun kedah awas. Sacara husus, kodeu handap:
document.queryXPaths("substring-sanggeus(//a/@href,'https://')");
…ngabalikeun hiji senar:
"www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/"
Ieu asup akal, katuhu? Pungsi ieu teu balik arrays tapi rada string tunggal atawa angka tunggal. Ngajalankeun fungsi di mana waé kalayan sababaraha hasil ngan ukur ngahasilkeun hasil anu munggaran. Hasil kadua nunjukkeun naon anu urang pikahoyong:
document.queryCSSSelectors("a").queryXPaths("substring-sanggeus(./@href, 'HTTPS: //')");
Anu mulihkeun susunan dua senar:
["www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/","www.smashingmagazine.com/2022/11/automated-test-results-improve-accessibility/"]
Fungsi XPath tiasa disarangkeun sapertos fungsi dina JavaScript. Janten, upami urang terang struktur URL Majalah Smashing, urang tiasa ngalakukeun ieu (nganggo literal template disarankeun): `narjamahkeun ( substring ( substring-sanggeus(./@href, 'www.smashingmagazine.com/') ,9), '/','')`
Ieu janten rada rumit dugi ka peryogi koméntar anu ngajelaskeun naon anu dilakukeun: cokot sadaya URL tina atribut href saatos www.smashingmagazine.com/, miceun salapan karakter anu munggaran, teras narjamahkeun slash maju (/) karakter kana nanaon supados ngaleungitkeun slash payun tungtung. Array anu dihasilkeun:
["fitur-testing-selenium-webdriver","otomatis-test-hasil-ningkatkeun-aksésibilitas"]
Langkung Kasus Pamakéan XPath XPath tiasa leres-leres terang dina tés. Alesanna henteu sesah ningali, sabab XPath tiasa dianggo pikeun nyandak unggal unsur dina DOM, tina posisi naon waé dina DOM, sedengkeun CSS henteu tiasa. Anjeun teu tiasa ngandelkeun kelas CSS anu tetep konsisten dina seueur sistem ngawangun modern, tapi kalayan XPath, kami tiasa ngadamel patandingan anu langkung kuat ngeunaan naon eusi téks unsur, henteu paduli struktur DOM anu robih. Aya panalungtikan ngeunaan téknik anu ngamungkinkeun anjeun ngadamel tés XPath anu tahan banting. Euweuh anu leuwih goreng ti ngabogaan tés flake kaluar sarta gagal ngan kusabab hiji pamilih CSS euweuh jalan sabab aya nu geus diganti atawa dihapus. XPath ogé saé pisan dina sababaraha ékstraksi locator. Aya leuwih ti hiji cara ngagunakeun queries XPath pikeun cocog unsur. Sami bener jeung CSS. Tapi patarosan XPath tiasa ngebor kana hal-hal dina cara anu langkung sasar anu ngabatesan naon anu dipulangkeun, ngamungkinkeun anjeun mendakan pertandingan anu khusus dimana aya sababaraha pertandingan anu mungkin. Salaku conto, urang tiasa nganggo XPath pikeun ngabalikeun unsur h2 khusus anu dikandung di jero div anu langsung nuturkeun div sibling anu, kahareupna ngandung unsur gambar anak sareng atribut data-testID = "pamimpin":
teu meunang judul ieu
Teu meunang judul ieu ogé
Judul pikeun gambar pamimpin
Ieu patarosan: document.queryXPaths(` //div[ handap-dudulur::div[1] /img[@data-testID='pamimpin'] ] /h2/ téks () `);
Hayu urang lungsur dina demo pikeun ningali kumaha éta sadayana ngahiji: Ningali Query Pen Complex H2 [forked] ku Bryan Rasmussen. Janten, enya. Aya seueur jalur anu mungkin pikeun unsur naon waé dina tés nganggo XPath. XSLT 1.0 Deprecation Kuring nyarios awal yén tim Chrome ngarencanakeun pikeun ngahapus dukungan XSLT 1.0 tina browser. Éta penting sabab XSLT 1.0 ngagunakeun program XML-fokus pikeun transformasi dokumén anu, gilirannana, ngandelkeun XPath 1.0, nu naon kapanggih dina paling panyungsi. Nalika éta kajantenan, urang bakal kaleungitan komponén konci XPath. Tapi tinangtu kanyataan yén XPath saé pisan pikeun tés tulisan, kuring mendakan yén XPath sacara gembleng bakal ngaleungit iraha waé pas. Kitu cenah, Kuring geus noticed nu urang meunang kabetot dina fitur nalika eta dicokot jauh. Sareng éta leres-leres dina kasus XSLT 1.0 dicabut. Aya hiji sakabéh sawala lumangsung leuwih di Hacker News ngeusi argumen ngalawan deprecation nu. Pos sorangan mangrupikeun conto anu hadé pikeun nyiptakeun kerangka blogging sareng XSLT. Anjeunbisa maca sawala pikeun diri, tapi asup kana kumaha JavaScript bisa dipaké salaku shim pikeun XLST pikeun nanganan maranéhanana sorts kasus. Kuring ogé geus katempo bongbolongan yén panyungsi kedah nganggo SaxonJS, nu mangrupakeun port ka JavaScript urang Saxon XSLT, XQUERY, sarta mesin XPath. Éta mangrupikeun ide anu pikaresepeun, khususna nalika Saxon-JS nerapkeun versi spésifikasi ieu ayeuna, sedengkeun henteu aya browser anu ngalaksanakeun versi XPath atanapi XSLT saluareun 1.0, sareng teu aya anu ngalaksanakeun XQuery. Kuring ngahontal kaluar ka Norm Tovey-Walsh di Saxonica, pausahaan balik SaxonJS sarta versi sejen tina mesin Saxon. Anjeunna ngadawuh: "Upami aya anu ngajual browser anu resep nyandak SaxonJS salaku titik awal pikeun ngahijikeun téknologi XML modéren kana browser, kami bakal bungah ngabahas éta sareng aranjeunna." - Norm Tovey-Walsh
Tapi ogé ditambahkeun: "Kuring bakal reuwas pisan upami aya anu ngira yén nyandak SaxonJS dina bentuk ayeuna sareng ngalungkeun kana browser ngawangun unchanged bakal pendekatan idéal. A vendor browser, ku alam kanyataan yén maranéhna ngawangun browser nu, bisa ngadeukeutan integrasi dina tingkat loba deeper ti urang tiasa 'ti luar' - Norm Tovey-Walsh.
Ieu kudu dicatet yén komentar Tovey-Walsh urang sumping ngeunaan saminggu saméméh pengumuman deprecation XSLT. kacindekan Abdi tiasa teras-terasan. Tapi kuring ngarepkeun ieu nunjukkeun kakuatan XPath sareng masihan anjeun seueur conto anu nunjukkeun kumaha ngagunakeunana pikeun ngahontal hal-hal anu hébat. Ieu conto sampurna téknologi heubeul dina tumpukan browser nu masih boga nyatu utilitas kiwari, sanajan lamun geus pernah dipikawanoh éta eksis atawa pernah dianggap ngahontal éta. Bacaan salajengna
"Ningkatkeun Ketahanan Tés Wéb Otomatis sareng Basa Alam" (Perpustakaan Digital ACM) ku Maroun Ayli, Youssef Bakouny, Nader Jalloul, sareng Rima Kilany Artikel ieu nyayogikeun seueur conto XPath pikeun nyerat tés tahan banting. XPath (MDN) Ieu mangrupikeun tempat anu saé pikeun ngamimitian upami anjeun hoyong katerangan téknis anu detil kumaha jalanna XPath. XPath Tutorial (ZVON)Kuring mendakan tutorial ieu anu paling mangpaat dina diajar kuring sorangan, hatur nuhun kana seueur conto sareng katerangan anu jelas. Alat interaktif XPatherThis ngamungkinkeun anjeun damel langsung sareng kodeu.
