Efa ela aho no teo amin'ny fivoarana teo aloha mba hahitana fironana nandritra ny taona maro: ireo mpamorona tanora miasa miaraka amin'ny paradigma vaovao amin'ny fandaharana nefa tsy mahazo ny tontolon'ny tantarany. Mazava ho azy fa azo takarina tsara ny tsy mahalala zavatra. Ny tranonkala dia toerana tena lehibe misy fahaiza-manao sy fahaiza-manao samihafa, ary tsy fantatsika foana izay tsy fantatsika. Ny fianarana amin'ity sehatra ity dia dia mitohy fa tsy zavatra mitranga indray mandeha ary mifarana. Ohatra iray: Nisy olona tao amin'ny ekipako nanontany raha azo atao ny milaza raha miala amin'ny tabilao manokana ao amin'ny UI ny mpampiasa. Nasongadiko ny hetsika alohan'ny famoahana ny JavaScript. Saingy ireo izay efa niatrika izany taloha dia mahafantatra fa azo atao izany satria efa voadona tamin'ny fampandrenesana momba ny angon-drakitra tsy voatahiry amin'ny tranokala hafa izy ireo, izay tranga fampiasa mahazatra mialoha ny famoahana azy. Nanondro ny pageHide sy visibilityChange amin'ny mpiara-miasa amiko ihany koa aho. Ahoana no nahafantarako izany? Satria nipoitra tamin'ny tetikasa hafa izy io, fa tsy noho izaho nianatra momba azy io tamin'ny voalohany nianatra JavaScript. Ny zava-misy dia ny rafitra maoderina eo anoloana dia mijoro eo an-tsorok'ireo goavambe teknolojia izay nialoha azy ireo. Izy ireo dia fomba fanao amin'ny fampandrosoana mibaribary, matetika ho an'ny traikefan'ny mpamorona tsara kokoa izay mampihena, na manafoana mihitsy aza, ny filana hahalala na hikasika ireo hevitra tena ilaina amin'ny ankapobeny izay mety ho fantatry ny rehetra. Diniho ny CSS Object Model (CSSOM). Mety hanantena ianao fa na iza na iza miasa amin'ny CSS sy JavaScript dia manana traikefa CSSOM an-tanana, saingy tsy izany foana no hitranga. Nisy tetik'asa React ho an'ny tranokala e-varotra niasako izay nilananay hampidirana stylesheet ho an'ny mpamatsy vola voafantina amin'izao fotoana izao. Ny olana dia ny fametahana ny stylesheet isaky ny pejy rehefa tena ilaina amin'ny pejy iray ihany. Tsy mbola nampiditra stylesheet tamin'ny fomba dinamika ny mpamorona nikasa hanao izany. Averina indray, azo takarina tanteraka izany rehefa miala amin'ny fomba nentim-paharazana mety ho tratrarinao ny React. Ny CSSOM dia mety tsy zavatra ilainao amin'ny asanao andavanandro. Saingy azo inoana fa mila mifandray aminy ianao amin'ny fotoana iray, na dia amin'ny fotoana iray aza. Ireo traikefa ireo dia nanentana ahy hanoratra ity lahatsoratra ity. Betsaka ny endri-tranonkala sy teknolojia efa misy any anaty ala izay mety tsy hokasihinao mivantana amin'ny asanao andavanandro. Angamba vao haingana ianao amin'ny fampivoarana tranonkala ary tsy mahafantatra azy ireo fotsiny ianao satria tafiditra ao anatin'ny abstraction ny rafitra manokana izay tsy mitaky anao hahalala izany lalina, na mihitsy aza. Miresaka manokana momba ny XML aho, izay fantatry ny maro amintsika fa fiteny tranainy tsy mitovy amin'ny HTML. Mitondra an'io aho noho ny fifanakalozan-kevitra WHATWG vao haingana izay milaza fa tokony esorina amin'ny navigateur ny ampahany manan-danja amin'ny XML stack fantatra amin'ny hoe fandaharana XSLT. Izany indrindra no karazana teknolojia efa tranainy efa nisy nandritra ny taona maro izay azo ampiasaina amin'ny zavatra azo ampiharina toy ny toe-javatra niainan'ny ekipako CSSOM. Efa niasa tamin'ny XSLT ve ianao taloha? Andeha hojerentsika raha miantehitra mafy amin'ity teknolojia tranainy ity isika ary mampiasa ny endri-javatra ao ivelan'ny tontolon'ny XML mba hamahana ireo olana tena misy ankehitriny. XPath: Ny Central API Ny teknolojia XML manan-danja indrindra izay mety mahasoa indrindra ivelan'ny fomba fijery XML mahitsy dia ny XPath, fiteny manontany izay ahafahanao mahita node na toetra ao anaty hazo marika misy singa fototra iray. Manana firaiketam-po manokana amin'ny XSLT aho, saingy miankina amin'ny XPath ihany koa izany, ary ny fitiavana manokana dia tsy maintsy apetraka amin'ny laharam-pahamehana. Ny tohan-kevitra hanesorana ny XSLT dia tsy miresaka momba ny XPath, ka ataoko fa mbola azo atao izany. Tsara izany satria XPath no API afovoany sy manan-danja indrindra amin'ity andian-teknolojia ity, indrindra rehefa miezaka mitady zavatra hampiasaina ivelan'ny fampiasana XML mahazatra. Zava-dehibe izany satria, raha azo ampiasaina hahitana ny ankamaroan'ny singa ao amin'ny pejinao ny mpifidy CSS, dia tsy afaka mahita azy rehetra izy ireo. Fanampin'izay, tsy azo ampiasaina hitadiavana singa mifototra amin'ny toerana misy azy ankehitriny ao amin'ny DOM ny CSS selectors. XPath afaka. Ankehitriny, ny sasany aminareo mamaky ity dia mety mahafantatra ny XPath, ary ny sasany mety tsy. XPath dia sehatra lehibe amin'ny teknolojia, ary tsy afaka mampianatra ny fototra rehetra aho ary mampiseho anao zavatra mahafinaritra hatao amin'ny lahatsoratra tokana tahaka izao. Nanandrana nanoratra an'io lahatsoratra io tokoa aho, saingy tsy mihoatra ny teny 5,000 ny salanisan'ny gazety Smashing Magazine. Efa tao amin'ny mihoatra ny ahoTeny 2.000 raha antsasa-manilan'ny fototra ihany. Noho izany, hanomboka hanao zavatra mahafinaritra miaraka amin'ny XPath aho ary hanome anao rohy vitsivitsy azonao ampiasaina amin'ny fototra raha hitanao fa mahaliana ity zavatra ity. Manambatra ny XPath & CSS XPath dia afaka manao zavatra maro izay tsy vitan'ny mpifidy CSS rehefa manontany singa. Saingy ny mpifidy CSS dia afaka manao zavatra vitsivitsy izay tsy vitan'ny XPath, izany hoe, manontany singa amin'ny anaran'ny kilasy.
CSS XPath .myClass /*[misy(@class, "myClass")]
Amin'ity ohatra ity, ny CSS dia manontany singa misy anaram-pianarana .myClass. Mandritra izany fotoana izany, ny ohatra XPath dia manontany singa izay misy kilasy toetra miaraka amin'ny tady "myClass". Raha lazaina amin'ny teny hafa dia mifidy singa misy myClass amin'ny toetra rehetra izy, anisan'izany ny singa misy ny anaram-pianarana .myClass — ary koa ireo singa misy “myClass” ao amin'ny tady, toy ny .myClass2. Ny XPath dia midadasika kokoa amin'io lafiny io. Noho izany, tsia. Tsy manoro hevitra aho fa tokony hanilika ny CSS isika ary hanomboka hisafidy ny singa rehetra amin'ny XPath. Tsy izany no hevitra. Ny tiana holazaina dia ny XPath dia afaka manao zavatra izay tsy vitan'ny CSS ary mety mbola tena ilaina, na dia teknolojia efa tranainy aza izy io ao amin'ny navigateur stack ary mety tsy ho hita miharihary raha vao jerena. Andao hiara-mampiasa ireo teknolojia roa ireo, tsy hoe satria vitantsika fotsiny, fa satria hianatra zavatra momba ny XPath isika ao anatin'ilay dingana, ka hahatonga azy io ho fitaovana hafa ao amin'ny stack anao - iray izay mety tsy fantatrao fa efa nisy hatrizay! Ny olana dia tsy mifanaraka amin'ny JavaScript ny document.evaluate fomba sy ny fomba mifantina fanontaniana isan-karazany ampiasaintsika amin'ny CSS API ho an'ny JavaScript. Nanao API fanontaniam-panontaniana mifanaraka amin'izany aho mba hanombohantsika, na dia ekena aza fa tsy dia nieritreritra firy momba izany aho satria fialana amin'ny zavatra ataontsika eto. Ity misy ohatra iray miasa tsotra amin'ny mpamorona fanontaniana azo ampiasaina indray: Jereo ny Pen queryXPath [forked] nataon'i Bryan Rasmussen. Nanampy fomba roa aho amin'ny zavatra antontan-taratasy: queryCSSSelectors (izay querySelectorAll amin'ny ankapobeny) ary queryXPaths. Ireo roa ireo dia mamerina zavatra queryResults:
{ queryType: nodes | string | laharana | boolean, valiny: misy [] // singa html, singa xml, tady, isa, booleans, queryCSSSelectors: (fanontaniana: string, amboary: boolean) => valin'ny fanontaniana, queryXpaths: (fanontaniana: string, amboary: boolean) => valin'ny fanontaniana }
Ny asa queryCSSSelectors sy queryXpaths dia mitantana ny fangatahana omenao azy ireo amin'ny singa ao amin'ny laharan'ny valiny, raha toa ka misy karazana nodes ny laharan'ny valiny. Raha tsy izany, dia hamerina queryResult miaraka amin'ny array foana sy karazana nodes. Raha apetraka amin'ny marina ny fananana fanitsiana, dia hanova ny fangatahany ny asa. Na ahoana na ahoana dia tsy tokony hampiasaina amin'ny tontolo famokarana izany. Manao izany aho mba hanehoana ny vokatra isan-karazany amin'ny fampiasana ny API fanontaniana roa miaraka. Fanontaniana ohatra Te-haneho ohatra vitsivitsy amin'ny fanontaniana XPath samihafa aho izay mampiseho ny sasany amin'ireo zavatra mahery azony atao sy ny fomba azo ampiasana azy ireo ho solon'ny fomba fiasa hafa. Ny ohatra voalohany dia //li/text(). Manontany ny singa li rehetra izany ary mamerina ny node lahatsoratra. Noho izany, raha hanontany ity HTML manaraka ity isika:
- iray
- roa
- telo
… izao no naverina:
{"queryType":"xpathEvaluate","results":["iray","roa","telo"],"resultType":"string"}
Raha lazaina amin'ny teny hafa, dia mahazo izao array manaraka izao isika: ["iray","roa", "telo"]. Amin'ny ankapobeny dia manontany ireo singa li ianao mba hahazoana izany, mamadika ny valin'io fanontaniana io ho laharana, sarintany ny laharan-tariby, ary mamerina ny node lahatsoratra amin'ny singa tsirairay. Saingy afaka manao izany amin'ny fomba fohy kokoa amin'ny XPath isika: document.queryXPaths("//li/text()").results.
Mariho fa ny fomba hahazoana node lahatsoratra dia ny fampiasana lahatsoratra (), izay toa sonia fiasa - ary izany no izy. Mamerina ny node lahatsoratra amin'ny singa iray. Amin'ny ohatra ataontsika, misy singa li telo ao amin'ny marika, izay misy lahatsoratra ("iray", "roa", ary "telo").
Andeha hojerentsika ohatra iray hafa momba ny fangatahana lahatsoratra (). Eritrereto hoe ity no marikantsika:
Andao hanoratra fanontaniana izay mamerina ny sandan'ny toetra href: document.queryXPaths("//a[text() = 'Miditra']/@href").results.
Ity dia fangatahana XPath amin'ny antontan-taratasy ankehitriny, sahala amin'ny ohatra farany, fa amin'ity indray mitoraka ity dia averinay ny toetra href amin'ny rohy (singa iray) misy ny lahatsoratra "Miditra". Ny tena niverinany vokatra dia ["/login.html"]. XPath Functions Overview Misy fiasa XPath maromaro, ary mety tsy mahazatra azy ireo ianao. Misy maromaro, heveriko fa mendrika ho fantatra, anisan'izany ireto manaraka ireto:
starts-withRaha misy lahatsoratra manomboka amin'ny ohatra iray hafa manokana, manomboka-amin'ny(@href, 'http:') dia miverina marina raha misy toetra href manomboka amin'ny http:. containsRaha misy lahatsoratra misy ohatra iray hafa manokana, misy(text(), "Smashing Magazine") dia miverina ho marina raha misy soratra hoe "Smashing Magazine" ao na aiza na aiza. countMamerina isa ny isan'ny mifanandrify amin'ny fanontaniana iray. Ohatra, ny count(//*[starts-with(@href, 'http:']) dia mamerina ny isan'ny rohy ao amin'ny node contexte manana singa misy toetra href izay misy lahatsoratra manomboka amin'ny http:. substringWorks toy ny JavaScript substring, afa-tsy ianao mandalo ny tady ho tohan-kevitra. Ohatra, ny substring("my text", 2, 4) dia mamerina "y t". substring-beforeMamerina ny ampahany amin'ny tady alohan'ny tady hafa. Ohatra, ny substing-before("my text", " ") dia mamerina ny "my". Toy izany koa, ny substring-before("hi", "bye") dia mamerina tady foana. substring-afterMamerina ny ampahany amin'ny tady aorian'ny tady hafa. Ohatra, ny substing-after("my text", " ") dia mamerina "text". Toy izany koa, ny substring-after("hi", "bye") dia mamerina tady foana. normalize-spaceMamerina ny tady tohan-kevitra miaraka amin'ny habaka fotsy natao ara-dalàna amin'ny alalan'ny fanalana ny lohany sy aoriana ary ny fanoloana ny filaharan'ireo tarehin-tsoratra fotsy amin'ny habaka tokana. notMiverina boolean marina raha diso ny hevitra, raha tsy izany dia diso. trueMiverina boolean marina. falseMiverina diso boolean. concatNy zavatra mitovy amin'ny JavaScript concat, afa-tsy ianao dia tsy mampiasa azy ho fomba amin'ny tady. Ampidirinao kosa ny tady rehetra tianao hatambatra. string-lengthIty dia tsy mitovy amin'ny JavaScript string-length, fa mamerina ny halavan'ny tady nomena azy ho adihevitra. translateThis dia maka tady ary manova ny hevitra faharoa ho an'ny hevitra fahatelo. Ohatra, ny fandikana("abcdef", "abc", "XYZ") dia mamoaka XYZdef.
Ankoatra ireo fiasa XPath manokana ireo, dia misy fiasa maromaro hafa izay miasa mitovy amin'ny mpiara-miasa aminy JavaScript - na mifanandrify amin'ny fiteny fandaharana rehetra - izay mety ho hitanao fa ilaina ihany koa, toy ny gorodona, valindrihana, boribory, sum, sns. Ity demo manaraka ity dia mampiseho ny tsirairay amin'ireto asa ireto: Jereo ny fonction Pen XPath Numerical [forked] nataon'i Bryan Rasmussen. Mariho fa, toy ny ankamaroan'ny asa fanodinkodinana tady, maro amin'ireo isa no maka fidirana tokana. Mazava ho azy fa tokony hampiasaina amin'ny fangatahana izy ireo, toy ny tamin'ny ohatra XPath farany: //li[floor(text()) > 250]/@val
Raha mampiasa azy ireo ianao, toy ny ataon'ny ankamaroan'ny ohatra, dia hiafara amin'ny fampandehanana azy amin'ny node voalohany mifanaraka amin'ny lalana ianao. Misy ihany koa ny karazana fiovam-po sasany tokony hohalavirinao satria ny JavaScript dia efa manana ny olan'ny fiovam-pony manokana. Saingy mety misy fotoana izay tianao hamadika tady ho laharana iray mba hanamarinana azy amin'ny isa hafa. Ny fiasa mametraka karazana zavatra dia boolean, isa, tady ary node. Ireo no angona XPath manan-danja. Ary araka ny azonao eritreretina, ny ankamaroan'ireo fiasa ireo dia azo ampiasaina amin'ny karazana data izay tsy node DOM. Ohatra, ny substring-after dia maka tady izay efa norakofanay, fa mety ho tady avy amin'ny toetra href. Mety ho tady ihany koa izy io:
const testSubstringAfter = document.queryXPaths("substring-after('hello world',' ')");
Mazava ho azy fa ity ohatra ity dia hanome antsika ny laharan'ny vokatra ho ["izao tontolo izao"]. Mba hanehoana izany amin'ny hetsika dia nanao pejy demo aho tamin'ny fampiasana fiasa manohitra ny zavatra tsy node DOM: Jereo ny Pen queryXPath [forked] nataon'i Bryan Rasmussen. Tokony ho marihinao ny lafiny mahagaga amin'ny asa fandikan-teny, izany hoe raha manana toetra ianao ao amin'ny tohan-kevitra faharoa (izany hoe ny lisitry ny tarehin-tsoratra tianao hadika) ary tsy misy tarehin-tsoratra mifanandrify handikana, dia esorina amin'ny vokatra io toetra io. Noho izany, ity:
adika('Manahoana, Inigo Montoya no anarako, namono ny raiko ianao, miomàna ho faty','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
…dia vokatry ny tady, anisan'izany ny habaka: [" *** ** "]
Midika izany fa adika amin'ny asterisk (*) ny litera “a”, saingy esorina tanteraka ny tarehintsoratra hafa rehetra tsy misy dikanteny nomena ny tady kendrena. Ny habaka fotsy no sisa tavelaeo anelanelan'ireo litera nadika hoe “a”. Avereno indray ity fanontaniana ity:
translate('Miarahaba, Inigo Montoya no anarako, namono ny raiko ianao, miomàna ho faty','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','******************************************************')")
…tsy manana olana ary mamoaka vokatra toy izao:
"***** ** **** ** ***** ******* *** ****** ** ****** ****** ****** "
Mety hahaliana anao izany fa tsy misy fomba mora amin'ny JavaScript hanaovana izay tena ataon'ny fandikana XPath, na dia ho an'ny trangan-javatra maro aza, ny soloyAll amin'ny fomba fiteny mahazatra dia afaka miatrika izany. Azonao atao ny mampiasa fomba mitovy nasehoko, fa izany no suboptimal raha ny hany tianao dia ny mandika ny tady. Ity demo manaraka ity dia mandrakotra ny asan'ny fandikana XPath mba hanomezana kinova JavaScript: Jereo ny asan'ny fandikana Pen [voasampana] nataon'i Bryan Rasmussen. Aiza no mety hampiasanao zavatra toy izany? Diniho ny encryption Caesar Cipher miaraka amin'ny offset telo (ohatra, ny encryption ambony indrindra tamin'ny 48 T.K.):
translate("Mikasa hiampita ny Rubicon i Kaisara!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
Ny lahatsoratra fampidirana "Kaisara dia mikasa ny hiampita ny Rubicon!" Vokatry ny “Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!” Mba hanomezana ohatra haingana hafa amin'ny fahafaha-manao samihafa, dia nanao asa metaly aho izay maka fidirana amin'ny tady ary mampiasa asa fandikan-teny hamerenana ny lahatsoratra, anisan'izany ny endri-tsoratra rehetra mitondra umlauts. Jereo ny fiasan'ny Pen metal [voasampana] nataon'i Bryan Rasmussen.
const metal = (str) => { avereno dikanteny(str, "AOUaou","ÄÖÜäöü"); }
Ary, raha omena ny lahatsoratra hoe "Motley Crue rules, rock on dudes!", dia miverina "Mötley Crüe rüles, röck ön düdes!" Mazava ho azy fa mety manana karazana fandokoana isan-karazany amin'ity fiasa ity ny olona iray. Raha ianao izany, ity lahatsoratra TVTropes ity dia tokony hanome aingam-panahy ho anao. Mampiasa CSS miaraka amin'ny XPath Tsarovy ny antony lehibe indrindra amin'ny fampiasana CSS selectors miaraka amin'ny XPath: CSS dia mahafantatra tsara ny atao hoe kilasy, fa ny tsara indrindra azonao atao amin'ny XPath dia ny fampitahana tady amin'ny toetran'ny kilasy. Izany dia hiasa amin'ny ankamaroan'ny tranga. Fa raha sendra toe-javatra ianao, ohatra, dia misy olona namorona kilasy antsoina hoe .primaryLinks sy .primaryLinks2 ary mampiasa XPath ianao mba hahazoana ny kilasy .primaryLinks, dia mety ho sahirana ianao. Raha mbola tsy misy zavatra adaladala tahaka izany dia mety hampiasa XPath ianao. Saingy mampalahelo ahy ny mitatitra fa niasa tany amin'ny toerana misy olona manao ireny karazana adala ireny aho. Ity misy demo hafa mampiasa CSS sy XPath miaraka. Mampiseho ny zava-mitranga rehefa mampiasa ny kaody isika mba hampandehanana XPath amin'ny node contexte izay tsy node an'ny rakitra. Jereo ny Pen css sy ny xpath miaraka [misaraka] nataon'i Bryan Rasmussen. Ny fangatahana CSS dia .relatedarticles a, izay maka ireo singa roa ao anaty div nomena kilasy .relatedarticles. Aorian'izay dia misy fanontaniana telo "ratsy", izany hoe, fanontaniana tsy manao izay tiantsika hataony rehefa mihazakazaka miaraka amin'ireo singa ireo ho toy ny node contexte. Azoko hazavaina ny antony mahatonga azy ireo tsy hitovy amin'ny mety ho eritreretinao. Ireo fanontaniana ratsy telo resahina dia:
//text(): Mamerina ny lahatsoratra rehetra ao anaty rakitra. //a/text(): Mamerina ny lahatsoratra rehetra ao anatin'ny rohy ao anatin'ilay antontan-taratasy. ./a/text(): Tsy mamerina valiny.
Ny anton'ireo valiny ireo dia satria na dia singa iray naverina avy amin'ny fangatahana CSS aza ny contexte-nao, // dia manohitra ny antontan-taratasy manontolo. Izany no tanjaky ny XPath; Ny CSS dia tsy afaka mandeha avy amin'ny node mankany amin'ny razambe iray ary avy eo mankany amin'ny iray tampo amin'io razambe io, ary mandeha midina mankany amin'ny taranak'io iray tam-po io. Fa ny XPath dia afaka. Mandritra izany fotoana izany, ./ dia manontany ny zanaky ny node amin'izao fotoana izao, izay misy ny teboka (.) maneho ny node amin'izao fotoana izao, ary ny slash mandroso (/) dia maneho ny fandehanana any amin'ny node ankizy iray — na toetra, singa, na lahatsoratra dia voafaritra amin'ny ampahany manaraka amin'ny lalana. Saingy tsy misy ankizy singa iray voafantina amin'ny fangatahana CSS, noho izany dia tsy mamerina na inona na inona io fanontaniana io. Misy fanontaniana telo tsara amin'ity demo farany ity:
.//text(), ./text(), normalize-space(./text()).
Ny fangatahana normalize-space dia mampiseho ny fampiasana ny fiasan'ny XPath, fa mamaha olana iray ao anatin'ireo fanontaniana hafa koa. Ny HTML dia voarafitra toy izao:
Manao automatique ny andranao amin'ny Selenium WebDriver
Ny fangatahana dia mamerina fahana andalana eo am-piandohana sy fiafaran'ny node lahatsoratra,ary ny normalize-space dia manala izany. Ny fampiasana asa XPath izay mamerina zavatra hafa ankoatry ny boolean misy fampidirana XPath dia mihatra amin'ny fiasa hafa. Ity demo manaraka ity dia mampiseho ohatra maromaro: Jereo ny ohatra momba ny fiasan'ny Pen xpath [voaforona] nataon'i Bryan Rasmussen. Ny ohatra voalohany dia mampiseho olana iray tokony hotandremana. Indrindra indrindra, ity code manaraka ity:
document.queryXPaths("substring-after(//a/@href,'https://')");
…mamerina tady iray:
"www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/"
Misy dikany izany, sa tsy izany? Ireo fiasa ireo dia tsy mamerina array fa tady tokana na isa tokana. Ny fampandehanana ny asa na aiza na aiza misy valiny marobe dia mamerina ny vokatra voalohany ihany. Ny valiny faharoa dia mampiseho izay tena tadiavintsika:
document.queryCSSSelectors("a").queryXPaths("substring-after(./@href,'https://')");
Izay mamerina array misy tady roa:
["www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/","www.smashingmagazine.com/2022/11/automated-test-results-improve-accessibility/"]
Ny fiasa XPath dia azo apetraka toy ny fiasa ao amin'ny JavaScript. Noho izany, raha fantatsika ny firafitry ny URL Smashing Magazine, dia afaka manao izao manaraka izao isika (mampiasa litera môdely no soso-kevitra): `mandika ( zana-tsipìka ( substring-after(./@href, 'www.smashingmagazine.com/') ,9), '/','')`
Mihasarotra loatra izany ka mila fanehoan-kevitra mamaritra ny ataony: alaivo ny URL rehetra ao amin'ny toetra href ao aorian'ny www.smashingmagazine.com/, esory ireo tarehintsoratra sivy voalohany, ary adikao tsy misy dikany ny slash mandroso (/) mba hialana amin'ny slash mandroso. Ny vokatra array:
["feature-testing-selenium-webdriver", "automated-test-results-improve-accessibility"]
Raharaha fampiasana XPath bebe kokoa Tena mety hamirapiratra amin'ny fitsapana ny XPath. Tsy sarotra ny mahita ny antony, satria ny XPath dia azo ampiasaina hahazoana ny singa rehetra ao amin'ny DOM, avy amin'ny toerana rehetra ao amin'ny DOM, fa ny CSS kosa tsy afaka. Tsy afaka miantehitra amin'ny kilasy CSS tsy miova amin'ny rafitra fananganana maoderina maro ianao, fa miaraka amin'ny XPath, afaka manao lalao matanjaka kokoa momba ny votoatin'ny lahatsoratra iray izahay, na inona na inona firafitry ny DOM miova. Nisy fikarohana momba ny teknika ahafahanao manao fitsapana XPath mahazaka. Tsy misy na inona na inona ratsy kokoa noho ny fanalana ny fitsapana ary tsy nahomby satria tsy mandeha intsony ny mpifidy CSS satria misy zavatra novana na nesorina. XPath koa dia tena tsara amin'ny fitrandrahana locator marobe. Misy fomba mihoatra ny iray hampiasana ny fangatahana XPath hifanaraka amin'ny singa iray. Toy izany koa ny amin'ny CSS. Saingy ny fanontaniana XPath dia afaka mandalina zavatra amin'ny fomba kendrena kokoa izay mametra ny zavatra averina, ahafahanao mahita lalao manokana izay mety hisy lalao maromaro. Ohatra, azontsika atao ny mampiasa XPath mba hamerenana singa h2 manokana izay voarakitra ao anatin'ny div iray izay manaraka avy hatrany ny div iray mianadahy izay, ho setrin'izany, dia misy singa sarin'ankizy miaraka amin'ny toetra data-testID="leader" eo aminy:
aza mahazo ity lohateny ity
Aza mahazo ity lohateny ity koa
Ny lohatenin'ny sarin'ny mpitarika
Ity ny fanontaniana: document.queryXPaths(` //div[ manaraka-rahalahy ::div[1] /img[@data-testID='mpitarika'] ] /h2/ lahatsoratra () `);
Andao hirotsaka amin'ny demo hahitana ny fomba iarahan'izany rehetra izany: Jereo ny Pen Complex H2 Query [voasampana] nataon'i Bryan Rasmussen. Noho izany, eny. Betsaka ny lalana azo atao mankany amin'ny singa rehetra amin'ny fitsapana mampiasa XPath. XSLT 1.0 Fanesorana Nolazaiko tany am-boalohany fa ny ekipa Chrome dia mikasa ny hanaisotra ny fanohanana XSLT 1.0 amin'ny navigateur. Zava-dehibe izany satria XSLT 1.0 dia mampiasa fandaharana mifantoka amin'ny XML ho an'ny fanovana antontan-taratasy izay miankina amin'ny XPath 1.0, izay hita amin'ny ankamaroan'ny navigateur. Rehefa mitranga izany dia ho very ny singa fototra amin'ny XPath. Saingy raha jerena ny zava-misy fa ny XPath dia tena tsara amin'ny fitsapana fanoratana, hitako fa tsy azo inoana fa hanjavona tsy ho ela ny XPath manontolo. Izany hoe, nahatsikaritra aho fa liana amin'ny endri-javatra iray ny olona rehefa esorina izany. Ary azo antoka fa marina izany amin'ny tranga XSLT 1.0 tsy ampiasaina. Misy adihevitra iray manontolo mitranga ao amin'ny Hacker News feno tohan-kevitra manohitra ny fanararaotana. Ny lahatsoratra mihitsy dia ohatra tsara amin'ny famoronana rafitra fitorahana bilaogy miaraka amin'ny XSLT. ianaoAfaka mamaky ny fifanakalozan-kevitra ho an'ny tenanao manokana, fa miditra amin'ny fomba mety hampiasana JavaScript ho toy ny shim ho an'ny XLST hiatrehana ireo karazana tranga ireo. Nahita soso-kevitra ihany koa aho fa tokony hampiasa ny SaxonJS ny navigateur, izay seranan-tsambo ho an'ny motera Saxon XSLT, XQUERY, ary XPath an'ny JavaScript. Hevitra mahaliana izany, indrindra fa ny Saxon-JS dia mampihatra ny dikan-teny amin'izao fotoana izao amin'ireo fepetra ireo, fa tsy misy navigateur izay mampihatra ny dikan-teny XPath na XSLT mihoatra ny 1.0, ary tsy misy mampiasa XQuery. Nanatona an'i Norm Tovey-Walsh tao Saxonica aho, ilay orinasa ao ambadiky ny SaxonJS sy ny dikan-teny hafa amin'ny motera Saxon. Hoy izy: "Raha misy mpivarotra navigateur liana handray ny SaxonJS ho toy ny fanombohana ny fampidirana ny teknolojia XML maoderina ao amin'ny navigateur, dia ho faly izahay hiresaka momba izany amin'izy ireo." - Norm Tovey-Walsh
Fa nampiana koa hoe: "Tena gaga aho raha misy mihevitra fa ny fakana ny SaxonJS amin'ny endriny ankehitriny sy ny fametrahana azy ao amin'ny navigateur hanorina tsy miova no fomba tsara indrindra. Ny mpivarotra navigateur, amin'ny maha-izy azy dia manamboatra ny navigateur, dia afaka manatona ny fampidirana amin'ny ambaratonga lalina kokoa noho izay azontsika 'avy any ivelany'. " - Norm Tovey-Walsh
Tsara ny manamarika fa ny fanehoan-kevitr'i Tovey-Walsh dia tonga herinandro talohan'ny fanafoanana ny XSLT. Fehiny Afaka manohy hatrany aho. Saingy manantena aho fa naneho ny herin'ny XPath izany ary nanome anao ohatra maro mampiseho ny fomba fampiasana azy io amin'ny fanatrarana zavatra lehibe. Ohatra tonga lafatra amin'ny teknolojia tranainy ao amin'ny tranokalan'ny navigateur izay mbola manana fitaovana be dia be amin'izao fotoana izao, na dia mbola tsy fantatrao aza ny fisiany na tsy nieritreritra ny hanatratra izany. Famakiana fanampiny
"Fampitomboana ny faharetan'ny fitsapana amin'ny Internet mandeha ho azy miaraka amin'ny fiteny voajanahary" (Bibliothèque Digital ACM) nataon'i Maroun Ayli, Youssef Bakouny, Nader Jalloul, ary Rima Kilany Ity lahatsoratra ity dia manome ohatra XPath maro amin'ny fanoratana andrana mahazaka. XPath (MDN)Ity dia toerana tsara hanombohana raha mila fanazavana ara-teknika momba ny fomba fiasan'ny XPath ianao. XPath Tutorial (ZVON) Hitako fa ity fampianarana ity no tena manampy indrindra amin'ny fianarako manokana, noho ireo ohatra maro sy fanazavana mazava. XPatherIty fitaovana ifandrimbonana ity dia ahafahanao miasa mivantana amin'ny kaody.
