Nabayagen nga addaak iti front-end development tapno makitak ti maysa nga uso iti panaglabas dagiti tawen: dagiti ub-ubing a developer nga agtartrabaho iti baro a paradigma ti panagprograma a dida maawatan ti historikal a konteksto dayta. Siempre, naan-anay a maawatan ti di ammo ti maysa a banag. Ti web ket dakkel unay a lugar nga addaan iti nadumaduma a set ti paglaingan ken espesialidad, ken saantayo a kanayon nga ammo no ania ti ditay ammo. Ti panagsursuro iti daytoy a tay-ak ket agtultuloy a panagdaliasat imbes a banag a maminsan a mapasamak ken agpatingga. Case in point: Adda nagsaludsod iti team-ko no mabalin a maibaga no dagiti agar-aramat ket ag-navigate nga adayo iti partikular a tab iti UI. Intudok ti JavaScript’s beforeunload event. Ngem dagidiay a nangtaming iti daytoy sakbayna ammoda a posible daytoy gapu ta nasaplitda kadagiti alerto maipapan iti di naidulin a datos kadagiti dadduma a site, a para iti daytoy ti beforeunload ket gagangay a kaso ti panagusar. Intudok met dagiti pasamak ti pageHide ken visibilityChange iti katrabahuak para iti nasayaat a rukod. Kasano a naammuak dayta? Gapu ta timmaud dayta iti sabali a proyekto, saan a gapu ta nagadal iti dayta idi damo nga agsursuroak iti JavaScript. Ti kinapudno ket dagiti moderno a front-end framework ket agtaktakder kadagiti abaga dagiti higante ti teknolohia nga immun-una ngem dagitoy. Dagitoy ket abstrakto dagiti aramid ti panagrang-ay, masansan para iti nasaysayaat a padas ti agparparang-ay a mangkissay, wenno uray pay mangikkat, ti panagkasapulan a mangammo wenno mangsagid no ania dagiti tradisional a nasken a konsepto ti front-end a nalabit rumbeng nga ammo ti tunggal maysa. Panunoten ti Modelo ti Bagay ti CSS (CSSOM). Mabalin a namnamaem nga asinoman nga agtartrabaho iti CSS ken JavaScript ket addaan iti maysa a bunggoy ti hands-on a padas ti CSSOM, ngem saan a kanayon a kasta. Adda proyekto ti React para iti e-commerce site a nagtrabahoak a sadiay kasapulanmi ti mangikarga iti stylesheet para iti agdama a napili a mangipapaay iti panagbayad. Ti parikut ket ti stylesheet ket agkarkarga iti tunggal panid idinto ta talaga a kasapulan laeng daytoy iti espesipiko a panid. Ti developer a naikkan iti annongen a mangaramid iti daytoy a mapasamak ket saan pay a pulos a nangikarga iti stylesheet a dinamiko. Manen, daytoy ket naan-anay a maawatan no ti React ket abstraktona ti tradisional a pamay-an a mabalin a nagun-odmo. Ti CSSOM ket saan la ketdi a banag a kasapulam iti inaldaw a trabahom. Ngem kasapulam la ketdi ti makilangen iti dayta iti maysa a punto, uray iti maminsan laeng a gundaway. Dagitoy a kapadasan ti nangtignay kaniak a mangisurat iti daytoy nga artikulo. Adu dagiti addan a tampok ken teknolohia ti web iti kabakiran a mabalin a dimo pulos direkta a sagiden iti inaldaw a trabahom. Nalabit medio baroka iti web development ken saanmo laeng nga ammo dagitoy gapu ta nalamuyotka iti abstraksion ti espesipiko a balangkas a saan a kasapulan nga ammuem dayta iti nauneg, wenno uray pay a pulos. Espesipiko nga agsasaoak maipapan iti XML, nga ammo ti adu kadatayo a maysa a kadaanan a pagsasao a saan a naan-anay a naiduma iti HTML. I’m bringing this up gapu kadagiti nabiit pay a diskusion ti WHATWG a mangisingasing a ti maysa a napateg a paset ti XML stack a pagaammo kas XSLT programming ket rumbeng a maikkat manipud kadagiti browser. Daytoy ti eksakto a kita ti daan, addan a teknolohia nga adda kadakami iti adu a tawen a mabalin nga usaren para iti maysa a banag a kas iti praktikal a kas iti kasasaad ti CSSOM a nakaikabilan ti team-ko. Nagtrabahoka kadin iti XSLT idi? Kitaentayo no agsandigtayo unay iti daytoy daan a teknolohia ken usarentayo dagiti tampokna iti ruar ti konteksto ti XML tapno tamingen dagiti pudno a parikut ita. XPath: Ti Sentral nga API Ti kapapatgan a teknolohia ti XML a nalabit ti kaaduan a mausar iti ruar ti diretso a panirigan ti XML ket ti XPath, ti pagsasao ti panagsaludsod a mangipalubos kenka a mangsapul ti ania man a nodo wenno kababalin iti maysa a kayo ti marka nga addaan iti maysa a ramut nga elemento. Adda personal a panagayatko iti XSLT, ngem agpannuray met dayta iti XPath, ken masapul a mailasin ti personal a panagayat iti kinapateg ti panagranggo. Ti argumento para iti panangikkat ti XSLT ket saan a mangaramid ti ania man a panangdakamat ti XPath, isu nga ipagarupko a daytoy ket maipalubos pay laeng. Nasayaat dayta gapu ta ti XPath ket isu ti sentral ken kapatgan nga API iti daytoy a suite dagiti teknolohia, nangruna no padpadasen ti agsapul ti maysa a banag nga usaren iti ruar ti normal a panagusar ti XML. Napateg daytoy gapu ta, bayat a dagiti agpili ti CSS ket mabalin a mausar a mangsapul kadagiti kaaduan nga elemento iti panidmo, dida masarakan amin dagitoy. Iti pay maipatinayon, dagiti agpili ti CSS ket saan a mausar a mangsapul ti elemento a naibatay iti agdama a posisionna iti DOM. Mabalin ti XPath. Ita, dadduma kadakayo a mangbasbasa iti daytoy ket mabalin nga ammoda ti XPath, ken dadduma ket mabalin a saan. Ti XPath ket maysa a medyo dakkel a lugar ti teknolohia, ken diak talaga maisuro amin dagiti pamunganayan ken ipakita met kadakayo dagiti nalamiis a banag nga aramiden iti dayta iti maymaysa nga artikulo a kas iti daytoy. Aktual a pinadasko nga insurat dayta nga artikulo, ngem ti gagangay a publikasion ti Smashing Magazine ket saan a nasurok a 5,000 a sasao. Addaak metten iti ad-adu ngem2,000 a sasao bayat a kagudua laeng ti pamunganayan. Gapuna, rugiak ti agaramid kadagiti nalamiis a bambanag babaen ti XPath ken ikkankayo iti sumagmamano a silpo a mabalinyo nga usaren para kadagiti kangrunaan no masarakanyo a makapainteres daytoy a banag. Panagtipon ti XPath & CSS Adu ti maaramidan ti XPath a saan a maaramid dagiti agpili ti CSS no agsaludsodda kadagiti elemento. Ngem dagiti agpili ti CSS ket makaaramidda pay kadagiti sumagmamano a banag a saan a maaramid ti XPath, nga isu ti, agsaludsod kadagiti elemento babaen ti nagan ti klase.
CSS XPath nga .tiKlasek /*[aglaon (@klase, "Klasek")]
Iti daytoy a pagarigan, ti CSS ket agsaludsod kadagiti elemento a naglaon ti .myClass a nagan ti klase. Kabayatanna, ti pagarigan ti XPath ket agsaludsod kadagiti elemento a naglaon ti klase ti attribute nga addaan iti kuerdas a “myClass”. Iti sabali a pannao, daytoy ket mangpili kadagiti elemento nga addaan iti myClass iti ania man a kababalin, a mairaman dagiti elemento nga addaan iti .myClass a nagan ti klase — ken dagiti pay elemento nga addaan iti “myClass” iti kuerdas, a kas ti .myClass2. Nalawlawa ti XPath iti dayta a kaipapanan. Gapuna, saan. Saan ko nga isingasing a rumbeng nga i-toss out tayo ti CSS ken rugian tayo ti agpili amin nga elemento babaen ti XPath. Saan a dayta ti punto. Ti punto ket ti XPath ket makaaramid kadagiti banag a ti CSS ket saan a makaaramid ken mabalin pay laeng a makatulong unay, urayno daytoy ket maysa a daan a teknolohia iti browser stack ken mabalin a kasla saan a nalawag iti umuna a panagkita. Usarentayo a sangsangkamaysa ti dua a teknolohia saan laeng a gapu ta kabaelantayo, no di ket gapu ta adda masursurotayo maipapan iti XPath iti proseso, a mamagbalin iti daytoy a sabali nga alikamen iti stack-mo — maysa a mabalin a dimo ammo ket addan sadiay iti amin a panawen! Ti parikut ket ti JavaScript’s document.evaluate method ken dagiti nadumaduma a query selector methods nga us-usarentayo kadagiti CSS APIs para iti JavaScript ket saan a maitunos. Nangaramidak iti maitunos nga API ti panagsaludsod tapno mangrugikami, nupay aminek, diak inkabil ti adu a napanunot iti dayta yantangay maysa dayta a panagpanaw manipud iti ar-aramidenmi ditoy. Adda ditoy ti medyo simple nga agtartrabaho a pagarigan ti mausar manen a query constructor: Kitaen ti Pen queryXPath [natinidor] babaen ni Bryan Rasmussen. Innayonko ti dua a pamay-an iti banag ti dokumento: queryCSSSelectors (a kangrunaanna ket querySelectorAll) ken queryXPaths. Agpada dagitoy nga agsubli ti maysa a banag ti queryResults:
{ tipo ti saludsod: dagiti nodo | kuerdas | numero | boolean, . resulta: aniaman[] // dagiti elemento ti html, dagiti elemento ti xml, dagiti kuerdas, dagiti numero, dagiti boolean, . queryCSSSelectors: (saludsod: kuerdas, baliwan: boolean) => Resulta ti saludsod, . queryXpaths: (saludsod: kuerdas, baliwan: boolean) => Resulta ti saludsod } .
Dagiti panagandar ti queryCSSSelectors ken queryXpaths ket mangpataray ti panagsaludsod nga itedmo kadakuada iti rabaw dagiti elemento iti urnos ti resulta, no la ketdi ti urnos ti resulta ket dagiti nodo ti tipo, siempre. No saan, daytoy ket mangisubli ti queryResult nga addaan iti empty array ken ti kita ti node. No ti tagikua ti panagbalbaliw ket naikeddeng iti pudno, dagiti panagandar ket mangbalbaliwda kadagiti bukodda a queryResults. Iti aniaman a kasasaad saan koma a mausar daytoy iti aglawlaw ti produksion. Ar-aramidek daytoy iti kastoy a wagas a puro tapno maipakita dagiti nadumaduma nga epekto ti panagusar kadagiti dua nga API ti panagsaludsod a sangsangkamaysa. Pagarigan a Saludsod Kayatko nga ipakita ti sumagmamano a pagarigan dagiti nadumaduma a panagsaludsod ti XPath a mangipakita kadagiti sumagmamano kadagiti nabileg a banag a mabalinda nga aramiden ken no kasano a mausar dagitoy a kasukat dagiti dadduma nga asidegan. Ti umuna a pagarigan ket ti //li/text(). Daytoy ket agsaludsod kadagiti amin nga elemento ti li ken mangisubli kadagiti nodo ti tekstoda. Isu a no saludsodentayo ti sumaganad nga HTML:
- maysa
- dua
- tallo
...daytoy ti maisubli:
{"queryType":"xpathEvaluate","dagiti resulta":["maysa","dua","tallo"],"resultType":"string"}
Iti sabali a pannao, magun-odtayo ti sumaganad nga array: ["maysa","dua","tallo"]. Gagangay, agsaludsodka para kadagiti elemento ti li tapno makaala iti dayta, pagbalinem ti resulta dayta a panagsaludsod iti maysa nga urnos, i-mapa ti urnos, ken isublim ti teksto a nodo ti tunggal maysa nga elemento. Ngem maaramidtayo dayta iti ad-adda nga ababa babaen ti XPath: dokumento.saludsodXPaths ("//li / teksto ()"). dagiti resulta.
Madlaw a ti wagas tapno makaala ti text node ket ti panagusar ti text(), a kasla ti pirma ti function — ken isu daytoy. Daytoy ket mangisubli ti teksto a nodo ti maysa nga elemento. Iti pagarigantayo, adda tallo nga elemento ti li iti markup, tunggal maysa ket naglaon iti teksto ("maysa", "dua", ken "tallo").
Kitaentayo ti maysa pay a pagarigan ti text() query. Ipapantayo a daytoy ti markup-tayo:
Mangisurattayo iti saludsod a mangisubli iti href attribute value: document.queryXPaths ("//a [teksto () = 'Agpirma'] / @ href"). dagiti resulta.
Daytoy ket maysa a panagsaludsod ti XPath iti agdama a dokumento, kas met laeng ti naudi a pagarigan, ngem iti daytoy a gundaway isublitayo ti href nga attribute ti maysa a silpo (maysa nga elemento) a naglaon ti teksto a “Sign In”. Nagsubli ti aktualti resulta ket ["/login.html"]. Panangidatag ti Pannakaandar ti XPath Adda sumagmamano a XPath functions, ken nalabit dikay’ pamiliar kadagitoy. Adda sumagmamano, pagarupek, a maikari a maammuan, agraman dagiti sumaganad:
starts-withNo ti maysa a teksto ket mangrugi iti partikular a sabali a pagarigan ti teksto, ti starts-with(@href, 'http:') ket mangisubli ti pudno no ti maysa a kababalin ti href ket mangrugi iti http:. containsNo ti maysa a teksto ket aglaon ti partikular a sabali a pagarigan ti teksto, ti contains(text(), "Smashing Magazine") ket agsubli ti pudno no ti maysa a nodo ti teksto ket aglaon kadagiti balikas a "Smashing Magazine" iti sadinoman. countIsubli ti panagbilang no mano a panagtunos ti adda iti maysa a saludsod. Kas pagarigan, ti count(//*[starts-with(@href, 'http:']) ket mangisubli ti panagbilang no mano a silpo iti nodo ti konteksto ket addaan kadagiti elemento nga addaan iti href a kababalin a naglaon ti teksto a mangrugi iti http:. substringAgtrabaho a kas ti substring ti JavaScript, malaksid no ipasamo ti kuerdas a kas maysa nga argumento. Kas pagarigan, ti substring("ti tekstok", 2, 4) ket mangisubli ti "y t". substring-beforeIsubli ti paset ti kuerdas sakbay ti sabali a kuerdas. Kas pagarigan, ti substing-before("ti tekstok", " ") ket mangisubli ti "ti tekstok". Kasta met, ti substring-before("hi","bye") ket mangisubli ti empty string. substring-afterIsubli ti paset ti kuerdas kalpasan ti sabali a kuerdas. Kas pagarigan, ti substing-after("ti tekstok", " ") ket mangisubli ti "teksto". Kasta met, ti substring-after("hi","bye") ket mangisubli ti empty string. normalize-spaceIsubli ti kuerdas ti argumento nga addaan iti puraw nga espasio a na-normalize babaen ti panangikkat ti mangiturong ken agturturong a puraw nga espasio ken panangsukat kadagiti panagsasaruno dagiti karakter ti puraw nga espasio babaen ti maymaysa nga espasio. notIsubli ti boolean a pudno no ti argumento ket ulbod, no saan ket ulbod. pudnoIsublina ti boolean a pudno. palseIsublina ti boolean nga palso. concatTi isu met laeng a banag a kas ti JavaScript concat, malaksid no saanmo nga ipatarayen daytoy a kas maysa a pamay-an iti maysa a kuerdas. Imbes ketdi, ikabilmo amin a kuerdas a kayatmo nga i-concatenate. string-lengthDaytoy ket saan a kapada ti JavaScript string-length, ngem ketdi mangisubli ti kaatiddog ti kuerdas a naited daytoy a kas maysa nga argumento. translateDaytoy ket mangala ti kuerdas ken baliwanna ti maikadua nga argumento iti maikatlo nga argumento. Kas pagarigan, ti ipatarus ("abcdef", "abc", "XYZ") ket mangiruar ti XYZdef.
Malaksid kadagitoy a partikular a panagandar ti XPath, adda dagiti sumagmamano a dadduma pay a panagandar nga agtrabaho a kas met laeng kadagiti katupagda iti JavaScript — wenno dagiti katupagda iti kangrunaan nga ania man a pagsasao ti panagprograma — a nalabit a masarakam met a makatulong, a kas ti suelo, tawa, nagtimbukel, kaadu, ken dadduma pay. Ti sumaganad a demo ket mangiladawan ti tunggal maysa kadagitoy a panagandar: Kitaen dagiti Pen XPath Numeriko a panagandar [natinidor] babaen ni Bryan Rasmussen. Panunoten a, kas ti kaaduan kadagiti panagandar ti panagmanipula ti kuerdas, adu kadagiti numeriko ket mangala ti maymaysa nga input. Daytoy ket, siempre, gapu ta dagitoy ket naipagarup a mausar para iti panagsaludsod, a kas iti naudi a pagarigan ti XPath: //li [suelo (teksto ()) > 250] / @ val
No usarem dagitoy, kas iti ar-aramiden ti kaaduan kadagiti pagarigan, agngudoka a mangpataray iti dayta iti umuna a nodo a maitunos iti dalan. Adda pay dagiti sumagmamano a panagandar ti panagbalbaliw ti tipo a rumbeng la ketdi a liklikam gapu ta ti JavaScript ket addaanen kadagiti bukodna a parikut ti panagbalbaliw ti tipo. Ngem mabalin nga adda dagiti gundaway a kayatmo a pagbalinen ti maysa a kuerdas iti numero tapno ma-check-mo dayta no maidilig iti sabali a numero. Dagiti panagandar a mangikeddeng ti kita ti maysa a banag ket ti boolean, numero, kuerdas, ken node. Dagitoy dagiti napateg a datatype ti XPath. Ket kas mabalin a panunotem, kaaduan kadagitoy a panagandar ket mabalin nga usaren kadagiti datatype a saan a DOM node. Kas pagarigan, ti substring-after ket mangala ti maysa a kuerdas a kas ti nasaklawtayon, ngem mabalin a daytoy ket ti kuerdas manipud iti maysa nga attribute ti href. Mabalin met a maysa laeng a kuerdas:
const testSubstringAfter = dokumento.questXPaths ("substring-kalpasan ('komusta lubong',' ')");
Nabatad, daytoy a pagarigan ket mangted kadatayo manen ti resulta nga array a kas ["lubong"]. Tapno maipakita daytoy iti panagtignay, nangaramidak ti panid ti demo nga agus-usar kadagiti panagandar a maibusor kadagiti banag a saan a DOM node: Kitaen ti Pen queryXPath [natinidor] babaen ni Bryan Rasmussen. Rumbeng a laglagipem ti nakaskasdaaw nga aspeto ti panagandar ti panagipatarus, nga isu daytoy no addaanka iti karakter iti maikadua nga argumento (i.e., ti listaan dagiti karakter a kayatmo a maipatarus) ken awan ti maitunos a karakter a maipatarus, dayta a karakter ket maikkat manipud iti rimmuar. Gapuna, daytoy:
translate('Kumusta, Ti Naganko ket Inigo Montoya, pinataymo ni tatangko, agsaganaka a matay','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
...dagiti resulta ti kuerdas, a mairaman dagiti espasio: [" * * ** "]
Kaipapanan daytoy a ti letra nga “a” ket maipatpatarus iti asterisk (*), ngem tunggal sabali a karakter nga awan ti patarusna a naited iti target string ket naan-anay a maikkat. Ti whitespace laengen ti nabati kadatayoiti nagbaetan dagiti naipatarus a karakter nga “a.” Kalpasanna manen, daytoy a saludsod:
translate('Kumusta, Ti Naganko ket Inigo Montoya, pinataymo ni tatangko, agsaganaka a matay','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','******************************************************')")
...awan ti problema ken mangiruar ti resulta a kastoy ti langana:
"***** ** **** ** ***** ******* *** ****** ** ****** ******* ** ***"
Mabalin a makaawis kenka nga awan ti nalaka a wagas iti JavaScript tapno aramiden ti eksakto nga ar-aramiden ti panagandar ti panagipatarus ti XPath, urayno para kadagiti adu a kaso ti panagusar, ti replaceAll kadagiti regular nga ebkas ket makabael a mangasikaso iti daytoy. Mabalinmo nga usaren ti isu met laeng a pamay-an nga impakitak, ngem dayta ket suboptimal no ti laeng kayatmo ket ti panangipatarus kadagiti kuerdas. Ti sumaganad a demo ket mangbalkot ti XPath’s translate function tapno mangipaay ti bersion ti JavaScript: Kitaen ti Pen translate function [forked] babaen ni Bryan Rasmussen. Sadino ti mabalin a pangusaram iti kastoy? Usigenyo ti Caesar Cipher encryption nga addaan iti tallo a lugar nga offset (e.g., top-of-the-line encryption manipud 48 B.C.):
translate("Plano ni Cesar ti bumallasiw iti Rubicon!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", ". "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
Ti input text “Plano ni Cesar ti bumallasiw iti Rubicon!” agresulta iti “Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!” Tapno mangted ti sabali pay a napardas a pagarigan dagiti nadumaduma a posibilidad, nagaramidak ti metal a panagandar a mangala ti maysa a kuerdas nga input ken agus-usar ti maysa a panagipatarus a panagandar tapno mangisubli ti teksto, a mairaman amin dagiti karakter a mangala kadagiti umlaut. Kitaen ti Pen metal function [natinidor] ni Bryan Rasmussen.
const metal = (str) => { . agsubli ipatarus (str, "AOUaou","ÄÖÜäöü"); } .
Ket, no maited ti teksto a “Agturay ni Motley Crue, rock on dudes!”, agsubli ti “Mötley Crüe rüles, röck ön düdes!” Nabatad a ti maysa ket mabalin nga addaan iti amin a kita ti parodia a panagusar iti daytoy a panagandar. No sika dayta, ngarud daytoy nga artikulo ti TVTropes ket rumbeng a mangipaay kenka iti adu nga inspirasion. Panagusar ti CSS nga Adda XPath Laglagipen ti kangrunaan a rasonmi iti panagusar kadagiti agpili ti CSS a kadua ti XPath: Ti CSS ket medyo maawatan no ania ti maysa a klase, idinto a ti kasayaatan a maaramidmo iti XPath ket dagiti panagidilig ti kuerdas ti kababalin ti klase. Agtrabaho dayta iti kaaduan a kaso. Ngem no makasabatka iti maysa a kasasaad a, kunaentayo, adda nangparnuay kadagiti klase a napanaganan iti .primaryLinks ken .primaryLinks2 ken agus-usarkayo iti XPath tapno makaala iti klase ti .primaryLinks, kalpasanna, nalabit a makasabatkayo kadagiti parikut. Basta awan ti maag a kas iti dayta, usarem la ketdi ti XPath. Ngem naladingitak a mangipadamag a nagtrabahoak kadagiti lugar nga ar-aramiden dagiti tattao dagita a kita ti minamaag a banag. Ania’t sabali a demo nga agus-usar iti CSS ken XPath a sangsangkamaysa. Ipakitana no ania ti mapasamak no usarentayo ti kodigo a mangpataray iti XPath iti context node a saan a document’s node. Kitaen ti Pen css ken xpath a sangsangkamaysa [forked] ni Bryan Rasmussen. Ti panagsaludsod ti CSS ket ti .relatedarticles a, a mangala kadagiti dua nga elemento ti a iti div a naituding iti klase ti .relatedarticles. Kalpasan dayta ket tallo a “dakes” a saludsod, kayatna a sawen, dagiti saludsod a saan nga agaramid iti kayattayo nga aramidenda no agtarayda kadagitoy nga elemento kas ti context node. Mailawlawagko no apay a naiduma ti kababalinda ngem iti namnamaem. Dagiti tallo a dakes a saludsod a pagsasaritaan ket:
//text(): Isubli amin a teksto iti dokumento. //a/text(): Isubli amin a teksto iti uneg dagiti silpo iti dokumento. ./a/text(): Isubli ti awan a resulta.
Ti rason para kadagitoy a resulta ket bayat a ti kontekstomo ket maysa nga elemento a naisubli manipud iti panagsaludsod ti CSS, // ket mapan a maikontra iti sibubukel a dokumento. Daytoy ti pigsa ti XPath; Ti CSS ket saan a mabalin a mapan manipud iti maysa a node aginggana iti maysa nga inapo ken kalpasanna iti maysa a kabsat dayta nga inapo, ken magna nga agpababa iti maysa a kaputotan dayta a kabsat. Ngem kabaelan ti XPath. Kabayatanna, ti ./ ket agsaludsod kadagiti annak ti agdama a nodo, a ti tulnek (.) ket mangibagi ti agdama a nodo, ken ti agpasango a slash (/) ket mangibagi ti mapan iti sumagmamano nga ubing a nodo — no daytoy ket maysa a kababalin, elemento, wenno teksto ket naikeddeng babaen ti sumaganad a paset ti dalan. Ngem awan ti ubing nga elemento a napili babaen ti panagsaludsod ti CSS, isu nga awan met ti isubli dayta a panagsaludsod. Adda tallo a nasayaat a saludsod iti dayta maudi a demo:
.//teksto (), . ./teksto (), . normalize-espasyo (. / teksto ()).
Ti panagsaludsod ti normalize-space ket mangipakita ti panagusar ti panagandar ti XPath, ngem mangtarimaan pay ti maysa a parikut a nairaman kadagiti sabali a panagsaludsod. Ti HTML ket naistruktura a kastoy:
Panag-automate ti Panagsubok ti Tampokmo Babaen ti Selenium WebDriver
Ti panagsaludsod ket mangisubli ti maysa a linia a feed iti rugi ken ngudo ti teksto a nodo, .ken ti normalize-space ket ikkatenna daytoy. Ti panagusar ti ania man a panagandar ti XPath a mangisubli ti maysa a banag malaksid ti boolean nga addaan iti input nga XPath ket agaplikar kadagiti sabali a panagandar. Ti sumaganad a demo ket mangipakita ti sumagmamano a pagarigan: Kitaen dagiti pagarigan dagiti panagandar ti Pen xpath [forked] babaen ni Bryan Rasmussen. Ipakita ti umuna a pagarigan ti maysa a parikut a rumbeng nga agannadka. Espesipiko, ti sumaganad a kodigo:
document.queryXPaths ("substring-kalpasan (//a/@href,'https://')");
...isubli ti maysa a kuerdas:
"www.smashingmagazine.com/2018/04/panagsubok-ti-tampok-selenium-webdriver/".
Adda kaipapanan dayta, saan kadi? Dagitoy a panagandar ket saan nga agsubli kadagiti array ngem ketdi dagiti agmaymaysa a kuerdas wenno agmaymaysa a numero. Ti panagtaray ti function iti sadinoman nga addaan iti adu a resulta ket mangisubli laeng ti umuna a resulta. Ipakita ti maikadua a resulta no ania a talaga ti kayattayo:
dokumento.saludsodCSSSelectors ("maysa"). queryXPaths ("substring-kalpasan (./@href,'https://')");
A mangisubli ti maysa nga array ti dua a kuerdas:
["www.smashingmagazine.com/2018/04/panagsubok-ti-tampok-selenium-webdriver/","www.smashingmagazine.com/2022/11/dagiti-resulta-ti-automated-a-panangsubok-mangpasayaat-ti-pannakagun-od/"]
Dagiti panagandar ti XPath ket mabalin nga umok a kas dagiti panagandar iti JavaScript. Isu a no ammotayo ti estruktura ti URL ti Smashing Magazine, mabalintayo nga aramiden dagiti sumaganad (mairekomendar ti panagusar kadagiti literal ti plantilia): `ipatarus( substring ( substring-kalpasan (./@href, ‘www.magasin ti panagburak.com/') . ,9), . '/','')`
Daytoy ket agbalin a medio komplikado unay aginggana ti saklaw a kasapulanna dagiti komento a mangiladawan no ania ti ar-aramidenna: alaen amin ti URL manipud iti href a kababalin kalpasan ti www.smashingmagazine.com/, ikkaten dagiti umuna a siam a karakter, kalpasanna ipatarus ti karakter ti agpasango a slash (/) iti awan tapno maikkat ti agngudo nga agpasango a slash. Ti nagbanagan nga array:
["tampok-panagsubok-selenium-webdriver","dagiti-automated-a-panangsubok-a-resulta-mangpasayaat-ti-pannakagun-od"]
Ad-adu pay a Kaso ti Panagusar ti XPath Talaga a mabalin nga agsilnag ti XPath iti panagsubok. Ti rason ket saan a narigat a makita, a kas ti XPath ket mabalin a mausar tapno makaala ti tunggal maysa nga elemento iti DOM, manipud iti ania man a posision iti DOM, idinto a ti CSS ket saan. Saanmo a mabilang dagiti klase ti CSS nga agtalinaed a maitunos kadagiti adu a moderno a sistema ti panagbangon, ngem babaen ti XPath, kabaelanmi ti agaramid kadagiti ad-adu a natibker a panagtunos no ania ti linaon ti teksto ti maysa nga elemento, urayno ania ti agbaliwbaliw nga estruktura ti DOM. Adda dagiti panagsukisok kadagiti teknik a mangipalubos kenka nga agaramid kadagiti naandur a panagsubok ti XPath. Awan ti nakarkaro ngem ti kaadda dagiti panagsubok a flake out ken mapaay gapu laeng ta saanen nga agtrabaho ti maysa a CSS selector gapu ta ti maysa a banag ket nabaliwan ti nagan wenno naikkat. Talaga met a nagsayaat ti XPath iti multiple locator extraction. Adda ti nasurok a maysa a wagas ti panagusar kadagiti panagsaludsod ti XPath tapno maipada ti maysa nga elemento. Kasta met laeng ti CSS. Ngem dagiti panagsaludsod ti XPath ket mabalinda ti ag-drill kadagiti banag iti ad-adu a naipuntiria a wagas a manglimitar no ania ti maisubli, a mangipalubos kenka a mangsapul ti espesipiko a panagtunos a mabalin nga adda dagiti sumagmamano a mabalin a panagtunos. Kas pagarigan, mabalintayo nga usaren ti XPath tapno mangisubli ti espesipiko nga elemento ti h2 a linaon ti uneg ti div a dagus a sumaruno iti kabsat a div a, iti kasumbangirna, ket aglaon ti elemento ti ladawan nga ubing nga addaan iti data-testID="leader" a kababalin iti daytoy:
saan a maala daytoy a paulo
Saanmo met a maala daytoy a paulo
Ti ulo para iti ladawan ti lider
Daytoy ti saludsod: dokumento.saludsodXPaths (` //div [ sumaruno-kakabsat::div[1] /img [@data-testID='daulo']. ] /h2/ . teksto () . `);
I-drop-tayo ti demo tapno makitatayo no kasano nga agtitipon dayta amin: Kitaen ti Pen Complex H2 Query [natinidor] babaen ni Bryan Rasmussen. Gapuna, wen. Adu dagiti mabalin a dalan iti ania man nga elemento iti maysa a panagsubok nga agus-usar ti XPath. XSLT 1.0 Panagpababa ti pateg Nasapa a dinakamatko a plano ti Chrome team nga ikkaten ti suporta ti XSLT 1.0 manipud iti browser. Napateg dayta gapu ta ti XSLT 1.0 ket agus-usar iti XML-focused programming para iti panagbalbaliw ti dokumento a, iti kasumbangirna, agpannuray iti XPath 1.0, nga isu ti masarakan iti kaaduan a browser. No mapasamak dayta, mapukawtayo ti maysa a kangrunaan a paset ti XPath. Ngem gapu iti kinapudno a ti XPath ket talaga a naindaklan para iti panagsurat kadagiti panagsubok, masarakak a saan a nalabit a ti XPath a kas maysa a pakabuklan ket agpukaw iti aniaman a panawen iti mabiit. Kas naibaga, nadlawko nga interesado dagiti tattao iti maysa a feature no maikkat dayta. Ket sigurado a pudno dayta iti kaso ti XSLT 1.0 a saanen a mausar. Adda intero a diskusion a mapaspasamak iti Hacker News a napno kadagiti argumento maibusor iti pannakaibabain. Ti post a mismo ket maysa a naindaklan a pagarigan ti panagpartuat ti blogging framework babaen ti XSLT. Sikamabalinmo a basaen ti diskusion para iti bagim, ngem makastrek daytoy no kasano a ti JavaScript ket mabalin a mausar a kas maysa a shim para iti XLST a mangasikaso kadagita a kita ti kaso. Nakitak met dagiti singasing a dagiti browser ket rumbeng nga agusar iti SaxonJS, nga isu ti puerto kadagiti JavaScript’s Saxon XSLT, XQUERY, ken XPath engines. Daytat’ makapainteres nga ideya, nangruna ta ti Saxon-JS ket mangipatungpal iti agdama a bersion dagitoy nga espesipikasion, idinto nga awan ti browser a mangipatungpal iti aniaman a bersion ti XPath wenno XSLT iti labes ti 1.0, ken awan ti mangipatungpal iti XQuery. Nadanonko ni Norm Tovey-Walsh idiay Saxonica, ti kompania iti likudan ti SaxonJS ken dadduma pay a bersion ti makina ti Saxon. Kinunana: “No interesado ti asinoman a managlako iti browser a mangala iti SaxonJS kas pangrugian a mangikabil kadagiti moderno a teknolohia ti XML iti browser, maragsakankami a makisarita kadakuada.”— Norm Tovey-Walsh
Ngem innayon pay: "Masdaawak unay no adda mangipagarup a ti panangala iti SaxonJS iti agdama a pormana ken panangitapuak iti dayta iti browser build a di agbaliw ti kasayaatan a pamay-an. Ti maysa a managlako iti browser, gapu iti nakaisigudan a kinapudno a bangonenda ti browser, mabalinna nga asitgan ti panagtipon iti naun-uneg nga amang a lebel ngem iti kabaelantayo ‘manipud iti ruar’.”— Norm Tovey-Walsh
It’s worth noting a dagiti komento ni Tovey-Walsh ket dimteng agarup makalawas sakbay ti anunsio ti XSLT deprecation. Konklusion Mabalinko ti agtultuloy ken agtultuloy. Ngem namnamaek a daytoy ket nangipakita ti bileg ti XPath ken nangted kadakayo kadagiti adu a pagarigan a mangipakpakita no kasano nga usaren daytoy para iti pananggun-od kadagiti naindaklan a banag. Daytat’ perpekto a pagarigan ti daan a teknolohia iti browser stack nga adu pay laeng ti utility-na ita, uray no dimo pulos ammo nga adda wenno dimo pulos inkonsiderar ti panangragpat iti dayta. Kanayonan a Panagbasa
“Panangpasayaat ti Resiliency dagiti Automated Web Tests babaen ti Natural Language” (ACM Digital Library) babaen da Maroun Ayli, Youssef Bakouny, Nader Jalloul, ken Rima KilanyDaytoy nga artikulo ket mangipaay kadagiti adu a pagarigan ti XPath para iti panagsurat kadagiti resilient test. XPath (MDN)Daytoy ket maysa a nasayaat a lugar a pangrugian no kayatmo ti teknikal a panangilawlawag a mangidetalye no kasano ti panagtrabaho ti XPath. XPath Tutorial (ZVON)Nasarakak daytoy a tutorial a makatulong unay iti bukodko a panagsursuro, gapu iti adu a pagarigan ken nalawag a panangilawlawag. XPatherDaytoy nga interaktibo nga alikamen ket palubosannaka nga agtrabaho a direkta iti kodigo.
