Dugay na akong naa sa front-end nga pag-uswag aron makita ang us aka us aka mga tuig: ang mga batan-on nga developer nga nagtrabaho sa usa ka bag-ong paradigm sa programming nga wala makasabut sa konteksto sa kasaysayan niini. Kini, siyempre, hingpit nga masabtan nga wala mahibal-an ang usa ka butang. Ang web usa ka dako kaayo nga lugar nga adunay lainlain nga hugpong sa mga kahanas ug espesyalidad, ug dili kami kanunay mahibal-an kung unsa ang wala namon nahibal-an. Ang pagkat-on niini nga natad usa ka nagpadayon nga panaw kay sa usa ka butang nga mahitabo sa makausa ug matapos. Kaso sa punto: Usa ka tawo sa akong team nangutana kung posible ba nga isulti kung ang mga tiggamit mag-navigate gikan sa usa ka partikular nga tab sa UI. Gitudlo nako ang JavaScript's before unload event. Apan kadtong nakasulbad niini kaniadto nahibal-an nga posible kini tungod kay naigo sila sa mga alerto bahin sa wala maluwas nga datos sa ubang mga site, diin sa wala pa i-unload usa ka kasagaran nga kaso sa paggamit. Gitudlo usab nako ang pageHide ug visibilityChange events sa akong kauban para sa maayong sukod. Giunsa nako pagkahibalo bahin niana? Tungod kay kini miabut sa laing proyekto, dili tungod kay ako nagtuon niini sa diha nga sa sinugdan sa pagkat-on sa JavaScript. Ang tinuod mao nga ang modernong front-end frameworks nagbarug sa mga abaga sa mga higante sa teknolohiya nga nag-una kanila. Abtik nila ang mga gawi sa pag-uswag, kasagaran alang sa usa ka mas maayo nga kasinatian sa developer nga nagpamenos, o nagtangtang pa, ang panginahanglan nga mahibal-an o mahikap kung unsa ang naandan nga hinungdanon nga mga konsepto sa atubangan nga kinahanglan mahibal-an sa tanan. Hunahunaa ang CSS Object Model (CSSOM). Mahimo nimong madahom nga bisan kinsa nga nagtrabaho sa CSS ug JavaScript adunay daghang mga hands-on nga kasinatian sa CSSOM, apan dili kana kanunay nga mahitabo. Adunay usa ka proyekto sa React alang sa usa ka e-commerce nga site nga akong gitrabahoan diin kinahanglan namon nga mag-load sa usa ka stylesheet alang sa gipili karon nga tighatag sa pagbayad. Ang problema mao nga ang stylesheet nagkarga sa matag panid kung gikinahanglan lang kini sa usa ka piho nga panid. Ang nag-develop nga gitahasan sa paghimo niini nga mahitabo wala sukad nag-load sa usa ka stylesheet nga dinamikong. Sa makausa pa, kini hingpit nga masabtan kung ang React nagwagtang sa tradisyonal nga pamaagi nga mahimo nimong makab-ot. Ang CSSOM lagmit dili usa ka butang nga imong gikinahanglan sa imong adlaw-adlaw nga trabaho. Apan lagmit kinahanglan nimo nga makig-uban niini sa usa ka punto, bisan sa usa ka higayon. Kini nga mga kasinatian nakadasig kanako sa pagsulat niini nga artikulo. Adunay daghang naglungtad nga mga bahin sa web ug mga teknolohiya sa ihalas nga dili nimo mahikap direkta sa imong adlaw-adlaw nga trabaho. Tingali bag-o ka lang sa pag-uswag sa web ug wala ka nahibal-an nila tungod kay napuno ka sa abstraction sa usa ka piho nga balangkas nga wala kinahanglana nga mahibal-an nimo kini pag-ayo, o bisan sa tanan. Naghisgot ako bahin sa XML, nga nahibal-an sa kadaghanan nga usa ka karaang pinulongan nga dili hingpit nga lahi sa HTML. Gidala ko kini tungod sa bag-o nga mga diskusyon sa WHATWG nga nagsugyot nga ang usa ka mahinungdanon nga tipik sa XML stack nga nailhan nga XSLT programming kinahanglan nga tangtangon gikan sa mga browser. Kini gyud ang matang sa mas karaan, naglungtad nga teknolohiya nga naa na namo sa daghang katuigan nga mahimong magamit alang sa usa ka butang nga praktikal sama sa sitwasyon sa CSSOM nga naa sa akong team. Nakatrabaho ka na ba sa XSLT kaniadto? Atong tan-awon kon kita mosalig pag-ayo niining karaan nga teknolohiya ug gamiton ang mga bahin niini gawas sa konteksto sa XML aron masulbad ang mga problema sa tinuod nga kalibotan karon. XPath: Ang Central API Ang labing importante nga XML nga teknolohiya nga tingali ang labing mapuslanon sa gawas sa usa ka tul-id nga XML nga panglantaw mao ang XPath, usa ka pangutana nga pinulongan nga nagtugot kanimo sa pagpangita sa bisan unsa nga node o hiyas sa usa ka markup tree nga adunay usa ka gamut nga elemento. Ako adunay usa ka personal nga pagmahal alang sa XSLT, apan kana usab nagsalig sa XPath, ug ang personal nga pagmahal kinahanglan isalikway sa ranggo nga importansya. Ang argumento sa pagtangtang sa XSLT wala maghisgot sa XPath, mao nga sa akong hunahuna kini gitugotan gihapon. Maayo kana tungod kay ang XPath mao ang sentro ug labing hinungdanon nga API sa kini nga hugpong sa mga teknolohiya, labi na kung nangita usa ka butang nga magamit gawas sa normal nga paggamit sa XML. Importante kini tungod kay, samtang ang mga tigpili sa CSS mahimong gamiton sa pagpangita sa kadaghanan sa mga elemento sa imong panid, dili nila kini makit-an tanan. Dugang pa, ang mga tigpili sa CSS dili magamit sa pagpangita og elemento base sa kasamtangang posisyon niini sa DOM. Mahimong XPath. Karon, ang uban kaninyo nga nagbasa niini tingali nakahibalo sa XPath, ug ang uban tingali wala. Ang XPath usa ka dako nga lugar sa teknolohiya, ug dili gyud nako matudlo ang tanan nga sukaranan ug ipakita usab kanimo ang mga cool nga butang nga buhaton niini sa usa ka artikulo nga sama niini. Gisulayan gyud nako ang pagsulat sa kana nga artikulo, apan ang kasagaran nga publikasyon sa Smashing Magazine dili molapas sa 5,000 nga mga pulong. Ako na sa labaw pa sa2,000 ka pulong samtang katunga lang sa mga sukaranan. Mao nga, magsugod ako sa pagbuhat sa mga cool nga butang sa XPath ug hatagan ka pipila ka mga link nga magamit nimo alang sa mga sukaranan kung nakit-an nimo kini nga mga butang nga makapaikag. Paghiusa sa XPath ug CSS Ang XPath makahimo og daghang mga butang nga dili mahimo sa mga tigpili sa CSS sa pagpangutana sa mga elemento. Apan ang mga tigpili sa CSS makahimo usab og pipila ka mga butang nga dili mahimo sa XPath, nga mao, mga elemento sa pagpangutana sa ngalan sa klase.
CSS XPath .akongKlase /*[naglangkob(@class, "akongKlas")]
Niini nga pananglitan, ang CSS nangutana sa mga elemento nga adunay .myClass classname. Samtang, ang pananglitan sa XPath nagpangutana sa mga elemento nga adunay usa ka klase nga kinaiya nga adunay string nga "myClass". Sa laing pagkasulti, nagpili kini og mga elemento nga adunay myClass sa bisan unsang attribute, lakip ang mga elemento nga adunay .myClass classname — ingon man mga elemento nga adunay "myClass" sa string, sama sa .myClass2. Ang XPath mas lapad sa kana nga diwa. Busa, dili. Wala ko nagsugyot nga kinahanglan natong ilabay ang CSS ug magsugod sa pagpili sa tanang elemento pinaagi sa XPath. Dili kana ang punto. Ang punto mao nga ang XPath makahimo sa mga butang nga dili mahimo ug mahimo gihapon nga magamit sa CSS, bisan kung kini usa ka karaan nga teknolohiya sa browser stack ug dili tingali klaro sa unang pagtan-aw. Gamiton nato ang duha ka teknolohiya nga magkauban dili lang tungod kay mahimo nato, apan tungod kay makakat-on kita mahitungod sa XPath sa proseso, nga himoon kini nga laing himan sa imong stack - usa nga wala nimo nahibal-an nga naa na didto! Ang problema kay ang document.evaluate nga pamaagi sa JavaScript ug ang lain-laing pamaagi sa pagpili sa pangutana nga atong gigamit sa CSS APIs para sa JavaScript dili magkauyon. Naghimo ako usa ka katugbang nga API sa pagpangutana aron makasugod kami, bisan kung tinuod, wala ako maghunahuna niini tungod kay kini usa ka pagbiya gikan sa among gibuhat dinhi. Ania ang usa ka yano nga nagtrabaho nga panig-ingnan sa usa ka magamit pag-usab nga tigtukod sa pangutana: Tan-awa ang Pen queryXPath [gi-forked] ni Bryan Rasmussen. Nagdugang ko og duha ka pamaagi sa butang nga dokumento: queryCSSSelectors (nga mao ang esensya querySelectorAll) ug queryXPaths. Kining duha nagbalik ug queryResults object:
{ PangutanaType: nodes | hilo | numero | boolean, resulta: bisan unsa [] // html nga mga elemento, xml nga mga elemento, mga kuwerdas, mga numero, mga boolean, queryCSSSelectors: (query: string, amend: boolean) => queryResults, queryXpaths: (query: string, amend: boolean) => queryResults }
Ang mga function sa queryCSSSelectors ug queryXpaths nagpadagan sa pangutana nga imong gihatag kanila sa ibabaw sa mga elemento sa laray sa mga resulta, basta ang laray sa mga resulta kay mga type node, siyempre. Kay kon dili, kini mobalik sa usa ka queryResult uban sa usa ka walay sulod nga laray ug usa ka matang sa mga node. Kung ang pag-usab sa kabtangan gitakda sa tinuod, ang mga gimbuhaton magbag-o sa ilang kaugalingon nga mga pangutana nga Resulta. Sa bisan unsang kahimtang kinahanglan kini gamiton sa usa ka palibot sa produksiyon. Gibuhat nako kini nga paagi aron ipakita ang lainlaing mga epekto sa paggamit sa duha nga mga pangutana nga API nga magkauban. Pananglitan nga mga Pangutana Gusto nakong ipakita ang pipila ka mga pananglitan sa lain-laing mga pangutana sa XPath nga nagpakita sa pipila ka gamhanang mga butang nga ilang mahimo ug sa unsang paagi kini magamit puli sa ubang mga paagi. Ang unang pananglitan mao ang //li/text(). Gipangutana niini ang tanan nga li nga mga elemento ug gibalik ang ilang mga node sa teksto. Busa, kung atong pangutan-on ang mosunod nga HTML:
- usa
- duha
- tulo
… mao kini ang gibalik:
{"queryType":"xpathEvaluate","results":["usa","duha","tulo"],"resultType":"string"}
Sa laing pagkasulti, atong makuha ang mosunod nga han-ay: ["usa","duha","tulo"]. Kasagaran, mangutana ka alang sa li nga mga elemento aron makuha kana, himuon ang resulta sa kana nga pangutana sa usa ka laray, mapa ang laray, ug ibalik ang node sa teksto sa matag elemento. Apan mahimo naton kana nga mas mubo sa XPath: document.queryXPaths("//li/text()").mga resulta.
Matikdi nga ang paagi aron makakuha og text node mao ang paggamit sa text(), nga morag function signature — ug mao kini. Gibalik niini ang text node sa usa ka elemento. Sa among pananglitan, adunay tulo ka li nga elemento sa markup, ang matag usa adunay sulod nga teksto ("usa", "duha", ug "tulo").
Atong tan-awon ang usa pa ka pananglitan sa usa ka text() nga pangutana. Hunahunaa nga kini ang among marka:
Magsulat kita og pangutana nga nagbalik sa href attribute value: document.queryXPaths("//a[text() = 'Sign In']/@href").results.
Kini usa ka pangutana sa XPath sa kasamtangan nga dokumento, sama sa katapusang pananglitan, apan niining higayona atong ibalik ang href attribute sa usa ka link (usa ka elemento) nga adunay sulod nga teksto nga "Sign In". Nibalik ang aktuwalang resulta mao ang ["/login.html"]. Kinatibuk-ang Pagtan-aw sa XPath Functions Adunay daghang mga gimbuhaton sa XPath, ug tingali dili ka pamilyar niini. Adunay pipila, sa akong hunahuna, nga angay mahibal-an, lakip ang mga musunud:
nagsugod-saKon ang usa ka teksto magsugod sa usa ka partikular nga laing teksto nga pananglitan, magsugod-sa(@href, 'http:') mobalik nga tinuod kung ang usa ka href nga hiyas magsugod sa http:. NaglangkobKon ang usa ka teksto adunay usa ka partikular nga lain nga pananglitan sa teksto, adunay(text(), "Smashing Magazine") mobalik nga tinuod kung ang usa ka text node adunay mga pulong nga "Smashing Magazine" bisan asa. countNagbalik sa usa ka ihap kung pila ang mga tugma sa usa ka pangutana. Pananglitan, ang count(//*[starts-with(@href, 'http:']) nagbalik ug count kung pila ka sumpay sa context node ang adunay mga elemento nga adunay href attribute nga naglangkob sa teksto nga nagsugod sa http:. substringWorks sama sa JavaScript substring, gawas kon imong ipasa ang string isip argumento. Pananglitan, substring("akong teksto", 2, 4) mobalik "y t". substring-beforeIbalik ang bahin sa usa ka hilo una pa ang laing hilo. Pananglitan, ang substing-before("akong teksto", " ") ibalik ang "akong". Sa susama, ang substring-before("hi","bye") nagbalik ug walay sulod nga string. substring-afterIbalik ang bahin sa usa ka hilo human sa laing hilo. Pananglitan, ang substing-after("akong teksto", " ") ibalik ang "teksto". Sa susama, ang substring-after("hi", "bye") mubalik ug walay sulod nga string. normalize-spaceGibalik ang argument string nga adunay whitespace nga gi-normalize pinaagi sa pagtangtang sa nag-una ug pag-trailing sa whitespace ug pag-ilis sa mga han-ay sa whitespace nga mga karakter sa usa ka space. notReturns usa ka boolean true kung ang argumento bakak, kung dili bakak. trueNagbalik boolean tinuod. falseNagbalik sa boolean nga bakak. concatAng parehas nga butang sama sa JavaScript concat, gawas kung dili nimo kini ipadagan ingon usa ka pamaagi sa usa ka hilo. Hinuon, imong gibutang ang tanan nga mga kuwerdas nga gusto nimong idugtong. string-lengthDili kini parehas sa JavaScript string-length, apan ibalik ang gitas-on sa string nga gihatag niini isip argumento. translateThis nagkinahanglan og usa ka pisi ug giusab ang ikaduhang argumento ngadto sa ikatulo nga argumento. Pananglitan, ang paghubad ("abcdef", "abc", "XYZ") nagpagawas sa XYZdef.
Gawas niining partikular nga mga gimbuhaton sa XPath, adunay daghang uban pang mga gimbuhaton nga parehas nga nagtrabaho sa ilang mga katugbang sa JavaScript - o mga katugbang sa batakan sa bisan unsang programming language - nga mahimo usab nimo makit-an nga mapuslanon, sama sa salog, kisame, lingin, sum, ug uban pa. Ang mosunod nga demo naghulagway sa matag usa niini nga mga gimbuhaton: Tan-awa ang Pen XPath Numerical functions [gisawang] ni Bryan Rasmussen. Timan-i nga, sama sa kadaghanan sa mga gimbuhaton sa pagmaniobra sa hilo, daghan sa mga numerical ang nagkuha og usa ka input. Kini, siyempre, tungod kay kini kinahanglan nga gamiton alang sa pagpangutana, sama sa katapusang pananglitan sa XPath: //li[floor(text()) > 250]/@val
Kung gamiton nimo kini, sama sa gibuhat sa kadaghanan sa mga pananglitan, mahuman nimo kini sa una nga node nga mohaum sa agianan. Adunay usab pipila ka mga function sa pagkakabig sa tipo nga kinahanglan nimong likayan tungod kay ang JavaScript adunay kaugalingon nga mga problema sa pagkakabig sa tipo. Apan adunay mga higayon nga gusto nimo nga i-convert ang usa ka string sa usa ka numero aron masusi kini batok sa ubang numero. Ang mga gimbuhaton nga nagtakda sa tipo sa usa ka butang mao ang boolean, numero, hilo, ug node. Kini ang hinungdanon nga mga tipo sa datos sa XPath. Ug sama sa imong mahanduraw, kadaghanan niini nga mga gimbuhaton mahimong magamit sa mga tipo sa datos nga dili mga DOM node. Pananglitan, ang substring-after nagkinahanglan og usa ka hilo sama sa atong natabonan na, apan kini mahimo nga ang hilo gikan sa usa ka href attribute. Mahimo usab kini nga usa ka hilo:
const testSubstringAfter = document.queryXPaths("substring-after('hello world',' ')");
Dayag, kini nga pananglitan maghatag kanato og balik sa han-ay sa mga resulta isip ["kalibutan"]. Aron ipakita kini sa aksyon, naghimo ko og demo page gamit ang mga function batok sa mga butang nga dili DOM node: Tan-awa ang Pen queryXPath [gi-forked] ni Bryan Rasmussen. Kinahanglan nimong timan-an ang makapakurat nga aspeto sa function sa paghubad, nga kung ikaw adunay karakter sa ikaduhang argumento (ie, ang lista sa mga karakter nga gusto nimong hubaron) ug wala’y katumbas nga karakter nga hubaron, kana nga karakter makuha gikan sa output. Busa, kini:
translate('Hello, My Name is Inigo Montoya, gipatay nimo ang akong amahan, pangandam nga mamatay','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
… resulta sa string, lakip ang mga espasyo: [" *** ** "]
Kini nagpasabot nga ang letrang “a” gihubad ngadto sa asterisk (*), apan ang tanang karakter nga walay hubad nga gihatag sa target string hingpit nga tangtangon. Ang whitespace na lang ang nahabilin namotali sa gihubad nga "a" nga mga karakter. Unya pag-usab, kini nga pangutana:
translate('Hello, My Name is Inigo Montoya, gipatay nimo ang akong amahan, pangandam nga mamatay','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','******************************************************')")
…walay problema ug nagpagawas ug resulta nga ingon niini:
"***** ** **** ** ***** ******* *** ****** ** ****** ****** ** ***"
Mahimong makahahadlok kanimo nga walay sayon nga paagi sa JavaScript aron mahimo ang eksakto kung unsa ang gibuhat sa XPath translate function, bisan kung alang sa daghang mga kaso sa paggamit, pulihan ang Tanan nga adunay regular nga mga ekspresyon ang makadumala niini. Mahimo nimong gamiton ang parehas nga pamaagi nga akong gipakita, apan kana suboptimal kung ang gusto nimo mao ang paghubad sa mga kuwerdas. Ang mosunud nga demo nagputos sa function sa paghubad sa XPath aron mahatagan usa ka bersyon sa JavaScript: Tan-awa ang Pen translate function [gisawang] ni Bryan Rasmussen. Asa nimo gamiton ang sama niini? Hunahunaa ang Caesar Cipher encryption nga adunay tulo ka lugar nga offset (pananglitan, top-of-the-line nga encryption gikan sa 48 B.C.):
translate("Nagplano si Cesar nga motabok sa Rubicon!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
Ang input text nga "Nagplano si Caesar nga motabok sa Rubicon!" resulta sa “Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!” Aron mahatagan ang usa ka dali nga pananglitan sa lainlaing mga posibilidad, naghimo ako usa ka function nga metal nga nagkuha usa ka input sa string ug naggamit usa ka function sa paghubad aron ibalik ang teksto, lakip ang tanan nga mga karakter nga nagkuha mga umlaut. Tan-awa ang Pen metal function [gisawang] ni Bryan Rasmussen.
const metal = (str) => { ibalik ang hubad(str, "AOUaou","ÄÖÜäöü"); }
Ug, kung hatagan ang teksto nga "Motley Crue rules, rock on dudes!", mobalik ang "Mötley Crüe rüles, röck ön düdes!" Dayag nga, ang usa mahimong adunay tanan nga mga matang sa paggamit sa parody niini nga function. Kung ikaw kana, nan kini nga artikulo sa TVTropes kinahanglan maghatag kanimo daghang inspirasyon. Paggamit sa CSS Uban sa XPath Hinumdumi ang among panguna nga hinungdan sa paggamit sa mga tigpili sa CSS kauban ang XPath: Nasabtan kaayo sa CSS kung unsa ang usa ka klase, samtang ang labing maayo nga mahimo nimo sa XPath mao ang mga pagtandi sa string sa hiyas sa klase. Motrabaho kana sa kadaghanang kaso. Apan kung makasinati ka sa usa ka sitwasyon diin, ingnon ta, adunay naghimo sa mga klase nga ginganlag .primaryLinks ug .primaryLinks2 ug gigamit nimo ang XPath aron makuha ang .primaryLinks nga klase, nan lagmit adunay mga problema. Hangtud nga wala’y binuang nga ingon niana, mahimo nimong gamiton ang XPath. Apan nasubo ako nga ireport nga nagtrabaho ako sa mga lugar diin ang mga tawo nagbuhat sa mga klase sa binuang nga mga butang. Ania ang laing demo gamit ang CSS ug XPath nga magkauban. Gipakita niini kung unsa ang mahitabo kung gamiton namon ang code aron magpadagan sa XPath sa usa ka node sa konteksto nga dili node sa dokumento. Tan-awa ang Pen css ug xpath nga magkauban [gisanga] ni Bryan Rasmussen. Ang pangutana sa CSS mao ang .relatedarticles a, nga nagkuha sa duha ka elemento sa div nga gi-assign og .relatedarticles nga klase. Human niana mao ang tulo ka "dili maayo" nga mga pangutana, sa ato pa, mga pangutana nga wala magbuhat kung unsa ang gusto namon nga buhaton nila kung nagdagan kini nga mga elemento ingon ang node sa konteksto. Mahimo nako ipasabut kung ngano nga lahi ang ilang pamatasan kaysa mahimo nimong damhon. Ang tulo ka dili maayo nga mga pangutana nga gipangutana mao ang:
//text(): Ibalik ang tanang teksto sa dokumento. //a/text(): Ibalik ang tanang teksto sulod sa mga link sa dokumento. ./a/text(): Wala'y gibalik nga resulta.
Ang hinungdan niini nga mga resulta mao nga samtang ang imong konteksto usa ka elemento nga gibalik gikan sa pangutana sa CSS, // supak sa tibuok nga dokumento. Kini mao ang kusog sa XPath; Ang CSS dili makaadto gikan sa usa ka node ngadto sa usa ka katigulangan ug dayon ngadto sa usa ka igsoon sa maong katigulangan, ug molakaw ngadto sa usa ka kaliwat sa maong igsoon. Apan mahimo sa XPath. Samtang, ./ nangutana sa mga bata sa kasamtangan nga node, diin ang tulbok (.) nagrepresentar sa kasamtangan nga node, ug ang forward slash (/) nagrepresentar sa pag-adto sa pipila ka bata nga node — kung kini usa ka kinaiya, elemento, o teksto gitino sa sunod nga bahin sa agianan. Apan walay bata nga usa ka elemento nga gipili sa CSS nga pangutana, busa kana nga pangutana wala usab magbalik. Adunay tulo ka maayong mga pangutana sa katapusang demo:
.//text(), ./text(), normalize-space(./text()).
Ang pangutana sa normalize-space nagpakita sa paggamit sa XPath function, apan nag-ayo usab sa usa ka problema nga gilakip sa ubang mga pangutana. Ang HTML gi-istruktura sama niini:
Pag-automate sa Imong Feature Testing Gamit ang Selenium WebDriver
Ang pangutana nagbalik sa usa ka linya sa feed sa sinugdanan ug katapusan sa node sa teksto,ug ang normalize-space nagtangtang niini. Ang paggamit sa bisan unsang XPath function nga nagbalik sa usa ka butang gawas sa usa ka boolean nga adunay input nga XPath magamit sa ubang mga gimbuhaton. Ang mosunod nga demo nagpakita sa daghang mga pananglitan: Tan-awa ang mga pananglitan sa Pen xpath functions [gisanga] ni Bryan Rasmussen. Ang una nga pananglitan nagpakita sa usa ka problema nga kinahanglan nimong bantayan. Sa partikular, ang mosunod nga code:
document.queryXPaths("substring-after(//a/@href,'https://')");
…nagbalik og usa ka string:
"www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/"
Makataronganon, di ba? Kini nga mga gimbuhaton wala magbalik sa mga arrays kondili usa ka kuldas o usa ka numero. Ang pagpadagan sa function bisan asa nga adunay daghang mga resulta nagbalik lamang sa unang resulta. Ang ikaduha nga resulta nagpakita kung unsa gyud ang gusto namon:
document.queryCSSSelectors("a").queryXPaths("substring-after(./@href,'https://')");
Nga nagbalik sa usa ka laray sa duha ka mga kuldas:
["www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/","www.smashingmagazine.com/2022/11/automated-test-results-improve-accessibility/"]
Ang mga function sa XPath mahimong ma-nested sama sa mga function sa JavaScript. Busa, kung nahibal-an namon ang istruktura sa URL sa Smashing Magazine, mahimo namon ang mosunod (girekomenda ang paggamit sa mga literal nga template): `hubad( substring( substring-after(./@href, 'www.smashingmagazine.com/') ,9), '/','')`
Kini nagkaanam ka komplikado sa gidak-on nga nagkinahanglan kini og mga komentaryo nga naghulagway kung unsa ang gibuhat niini: kuhaa ang tanan nga URL gikan sa href attribute human sa www.smashingmagazine.com/, kuhaa ang unang siyam ka mga karakter, unya hubaron ang forward slash (/) nga karakter ngadto sa wala aron mawala ang nagtapos nga forward slash. Ang resulta nga array:
["feature-testing-selenium-webdriver","automated-test-results-improve-accessibility"]
Daghang Kaso sa Paggamit sa XPath Ang XPath mahimong modan-ag sa pagsulay. Dili lisud nga makita ang hinungdan, tungod kay ang XPath mahimong magamit aron makuha ang matag elemento sa DOM, gikan sa bisan unsang posisyon sa DOM, samtang ang CSS dili mahimo. Dili ka makasalig sa mga klase sa CSS nga nagpabilin nga makanunayon sa daghang modernong sistema sa pagtukod, apan sa XPath, makahimo kami og mas lig-on nga mga posporo kon unsa ang sulod sa teksto sa usa ka elemento, bisan pa sa pagbag-o sa istruktura sa DOM. Adunay panukiduki bahin sa mga teknik nga nagtugot kanimo sa paghimo sa mabag-o nga mga pagsulay sa XPath. Wala nay mas grabe pa kay sa mga pagsulay nga mawala ug mapakyas tungod lang kay ang usa ka CSS selector dili na molihok tungod kay adunay usa nga gibag-o sa ngalan o gikuha. Nindot usab ang XPath sa daghang pagkuha sa locator. Adunay labaw pa sa usa ka paagi sa paggamit sa XPath nga mga pangutana aron sa pagpares sa usa ka elemento. Tinuod usab kini sa CSS. Apan ang mga pangutana sa XPath mahimong mag-drill sa mga butang sa mas gipunting nga paagi nga naglimite sa kung unsa ang ibalik, nga gitugotan ka nga makapangita usa ka piho nga tugma kung diin adunay daghang posible nga mga posporo. Pananglitan, mahimo natong gamiton ang XPath aron ibalik ang usa ka piho nga elemento sa h2 nga naa sa sulod sa usa ka div nga nagsunod dayon sa usa ka igsoon nga div nga, sa baylo, adunay usa ka elemento sa imahe sa bata nga adunay usa ka data-testID = "lider" nga hiyas niini:
ayaw pagkuha niini nga ulohan
Ayaw usab pagkuha niini nga ulohan
Ang ulohan para sa hulagway sa lider
Mao ni ang pangutana: document.queryXPaths(` //div[ mosunod nga igsoon::div[1] /img[@data-testID='lider'] ] /h2/ teksto() `);
Maghulog kita sa usa ka demo aron makita kung giunsa ang tanan nga nagkahiusa: Tan-awa ang Pen Complex H2 Query [gisawang] ni Bryan Rasmussen. Busa, oo. Adunay daghang posible nga mga agianan sa bisan unsang elemento sa usa ka pagsulay gamit ang XPath. XSLT 1.0 Depresyon Gihisgotan nako sayo nga ang koponan sa Chrome nagplano sa pagtangtang sa suporta sa XSLT 1.0 gikan sa browser. Importante kana tungod kay ang XSLT 1.0 naggamit sa XML-focused programming alang sa pagbag-o sa dokumento nga, sa baylo, nagsalig sa XPath 1.0, nga mao ang makita sa kadaghanan sa mga browser. Kung mahitabo kana, mawala ang usa ka hinungdanon nga sangkap sa XPath. Apan tungod sa kamatuoran nga ang XPath maayo kaayo alang sa pagsulat sa mga pagsulay, akong nakita nga dili tingali nga ang XPath sa kinatibuk-an mawala sa dili madugay. Ingon niana, akong namatikdan nga ang mga tawo interesado sa usa ka bahin kung kini gikuha. Ug tinuod kana sa kaso sa XSLT 1.0 nga wala magamit. Adunay tibuok nga diskusyon nga nahitabo sa Hacker News nga puno sa mga argumento batok sa deprecation. Ang post mismo usa ka maayong panig-ingnan sa paghimo sa usa ka balangkas sa pag-blog nga adunay XSLT. Ikawmakabasa sa diskusyon alang sa imong kaugalingon, apan kini moabut sa kung giunsa ang JavaScript mahimong magamit ingon usa ka shim alang sa XLST aron madumala ang mga klase nga kaso. Nakakita usab ako mga sugyot nga kinahanglan gamiton sa mga browser ang SaxonJS, nga usa ka pantalan sa mga makina sa Saxon XSLT, XQUERY, ug XPath sa JavaScript. Kana usa ka makapaikag nga ideya, labi na kung gipatuman sa Saxon-JS ang karon nga bersyon sa kini nga mga detalye, samtang wala’y browser nga nagpatuman sa bisan unsang bersyon sa XPath o XSLT lapas sa 1.0, ug wala’y nagpatuman sa XQuery. Nakab-ot nako ang Norm Tovey-Walsh sa Saxonica, ang kompanya sa luyo sa SaxonJS ug uban pang mga bersyon sa makina sa Saxon. Siya miingon: "Kung adunay bisan kinsa nga tigbaligya sa browser nga interesado sa pagkuha sa SaxonJS ingon usa ka punto sa pagsugod sa pag-integrate sa mga modernong XML nga teknolohiya sa browser, malipay kami nga hisgutan kini uban nila." - Norm Tovey-Walsh
Apan gidugang usab: "Makurat kaayo ko kung adunay maghunahuna nga ang pagkuha sa SaxonJS sa karon nga porma niini ug ihulog kini sa browser nga dili mabag-o mao ang sulundon nga pamaagi. Ang usa ka tigbaligya sa browser, tungod sa kamatuoran nga sila nagtukod sa browser, mahimong makaduol sa panagsama sa labi ka lawom nga lebel kaysa mahimo naton 'gikan sa gawas'. " - Norm Tovey-Walsh
Angay nga matikdan nga ang mga komento ni Tovey-Walsh miabut mga usa ka semana sa wala pa ang pag-anunsyo sa XSLT deprecation. Panapos Makapadayon ko. Apan nanghinaut ko nga kini nagpakita sa gahum sa XPath ug naghatag kanimo og daghang mga panig-ingnan nga nagpakita kung unsaon kini paggamit alang sa pagkab-ot sa dagkong mga butang. Kini usa ka hingpit nga panig-ingnan sa mas daan nga teknolohiya sa browser stack nga adunay daghang gamit karon, bisan kung wala nimo nahibal-an nga kini naglungtad o wala gyud gihunahuna nga maabot kini. Dugang nga Pagbasa
"Pagpauswag sa Kalig-on sa Automated Web Test nga adunay Natural nga Pinulongan" (ACM Digital Library) ni Maroun Ayli, Youssef Bakouny, Nader Jalloul, ug Rima KilanyKini nga artikulo naghatag daghang mga pananglitan sa XPath alang sa pagsulat sa mga pagsulay nga lig-on. XPath (MDN)Kini usa ka maayo kaayo nga lugar nga magsugod kung gusto nimo ang usa ka teknikal nga pagpatin-aw nga nagdetalye kung giunsa ang XPath molihok. XPath Tutorial (ZVON)Akong nakit-an nga kini nga panudlo mao ang labing makatabang sa akong kaugalingon nga pagkat-on, salamat sa daghang mga pananglitan ug tin-aw nga mga pagpasabut. XPatherKini nga interactive nga himan nagtugot kanimo sa pagtrabaho nga direkta sa code.
