Rwyf wedi bod yn natblygiad pen blaen yn ddigon hir i weld tuedd dros y blynyddoedd: datblygwyr iau yn gweithio gyda phatrwm newydd o raglennu heb ddeall ei gyd-destun hanesyddol. Wrth gwrs, mae'n gwbl ddealladwy peidio â gwybod rhywbeth. Mae'r we yn lle mawr iawn gyda set amrywiol o sgiliau ac arbenigeddau, ac nid ydym bob amser yn gwybod beth nad ydym yn ei wybod. Mae dysgu yn y maes hwn yn daith barhaus yn hytrach na rhywbeth sy'n digwydd unwaith ac yn dod i ben. Achos dan sylw: Gofynnodd rhywun ar fy nhîm a oedd yn bosibl dweud a oedd defnyddwyr yn llywio i ffwrdd o dab penodol yn yr UI. Tynnais sylw at ddigwyddiad dadlwytho JavaScript cyn. Ond mae'r rhai sydd wedi mynd i'r afael â hyn o'r blaen yn gwybod bod hyn yn bosibl oherwydd eu bod wedi cael eu taro â rhybuddion am ddata heb ei gadw ar wefannau eraill, y mae dadlwytho ymlaen llaw yn achos defnydd nodweddiadol ar ei gyfer. Tynnais sylw hefyd at y digwyddiadau pageHide a visibilityChange i fy nghydweithiwr i fesur da. Sut oeddwn i'n gwybod am hynny? Oherwydd ei fod wedi codi mewn prosiect arall, nid oherwydd i mi astudio arno wrth ddysgu JavaScript i ddechrau. Y ffaith yw bod fframweithiau pen blaen modern yn sefyll ar ysgwyddau'r cewri technoleg a'u rhagflaenodd. Maent yn haniaethu arferion datblygu, yn aml ar gyfer profiad datblygwr gwell sy'n lleihau, neu hyd yn oed yn dileu, yr angen i wybod neu gyffwrdd â'r hyn sydd wedi bod yn draddodiadol yn gysyniadau pen blaen hanfodol y mae'n debyg y dylai pawb eu gwybod. Ystyried Model Gwrthrych CSS (CSSOM). Efallai y byddwch chi'n disgwyl bod gan unrhyw un sy'n gweithio yn CSS a JavaScript griw o brofiad CSSOM ymarferol, ond nid yw hynny'n wir bob amser. Roedd prosiect React ar gyfer safle e-fasnach y bûm yn gweithio arno lle roedd angen i ni lwytho taflen arddull ar gyfer y darparwr talu a ddewiswyd ar hyn o bryd. Y broblem oedd bod y ddalen arddull yn llwytho ar bob tudalen pan oedd ei gwir angen ar dudalen benodol. Nid oedd y datblygwr a gafodd y dasg o wneud i hyn ddigwydd erioed wedi llwytho dalen arddull yn ddeinamig. Unwaith eto, mae hyn yn gwbl ddealladwy pan fydd React yn tynnu oddi ar y dull traddodiadol y gallech fod wedi cyrraedd ar ei gyfer. Mae'n debyg nad yw'r CSSOM yn rhywbeth sydd ei angen arnoch yn eich gwaith bob dydd. Ond mae'n debygol y bydd angen i chi ryngweithio ag ef ar ryw adeg, hyd yn oed mewn achos unwaith ac am byth. Fe wnaeth y profiadau hyn fy ysbrydoli i ysgrifennu'r erthygl hon. Mae yna lawer o nodweddion a thechnolegau gwe sy'n bodoli eisoes yn y gwyllt efallai na fyddwch byth yn eu cyffwrdd yn uniongyrchol yn eich gwaith o ddydd i ddydd. Efallai eich bod yn weddol newydd i ddatblygiad gwe ac yn syml yn anymwybodol ohonynt oherwydd eich bod wedi'ch trwytho yn y broses o dynnu fframwaith penodol nad yw'n gofyn ichi ei wybod yn ddwfn, neu hyd yn oed o gwbl. Rwy'n siarad yn benodol am XML, y mae llawer ohonom yn gwybod sy'n iaith hynafol nad yw'n hollol annhebyg i HTML. Rwy'n codi hyn oherwydd trafodaethau diweddar WHATWG sy'n awgrymu y dylid tynnu cyfran sylweddol o'r pentwr XML a elwir yn raglennu XSLT o borwyr. Dyma’r union fath o dechnoleg hŷn, bresennol yr ydym wedi’i chael ers blynyddoedd y gellid ei defnyddio ar gyfer rhywbeth mor ymarferol â’r sefyllfa CSSOM yr oedd fy nhîm ynddi. Ydych chi wedi gweithio gyda XSLT o'r blaen? Gadewch i ni weld a ydym yn pwyso'n drwm ar y dechnoleg hŷn hon ac yn trosoli ei nodweddion y tu allan i gyd-destun XML i fynd i'r afael â phroblemau'r byd go iawn heddiw. XPath: Yr API Canolog Y dechnoleg XML bwysicaf sydd efallai'r mwyaf defnyddiol y tu allan i bersbectif XML syth yw XPath, iaith ymholiad sy'n eich galluogi i ddod o hyd i unrhyw nod neu briodoledd mewn coeden farcio ag un elfen wraidd. Mae gennyf hoffter personol o XSLT, ond mae hynny hefyd yn dibynnu ar XPath, a rhaid rhoi hoffter personol o'r neilltu o ran pwysigrwydd graddio. Nid yw'r ddadl dros gael gwared ar XSLT yn gwneud unrhyw sôn am XPath, felly mae'n debyg ei fod yn dal i gael ei ganiatáu. Mae hynny'n dda oherwydd XPath yw'r API canolog a phwysicaf yn y gyfres hon o dechnolegau, yn enwedig wrth geisio dod o hyd i rywbeth i'w ddefnyddio y tu allan i ddefnydd XML arferol. Mae'n bwysig oherwydd, er y gellir defnyddio dewiswyr CSS i ddod o hyd i'r rhan fwyaf o'r elfennau yn eich tudalen, ni allant ddod o hyd iddynt i gyd. At hynny, ni ellir defnyddio dewiswyr CSS i ddod o hyd i elfen yn seiliedig ar ei safle presennol yn y DOM. XPath gall. Nawr, efallai y bydd rhai ohonoch sy'n darllen hwn yn gwybod XPath, ac efallai na fydd rhai. Mae XPath yn faes technoleg eithaf mawr, ac ni allaf ddysgu'r holl bethau sylfaenol mewn gwirionedd a hefyd dangos pethau cŵl i'w gwneud ag ef mewn un erthygl fel hon. Ceisiais ysgrifennu'r erthygl honno mewn gwirionedd, ond nid yw cyhoeddiad cyfartalog Smashing Magazine yn mynd dros 5,000 o eiriau. Roeddwn i eisoes ar fwy na2,000 o eiriau tra dim ond hanner ffordd trwy'r pethau sylfaenol. Felly, rydw i'n mynd i ddechrau gwneud pethau cŵl gydag XPath a rhoi rhai dolenni i chi y gallwch chi eu defnyddio ar gyfer y pethau sylfaenol os yw'r pethau hyn yn ddiddorol i chi. Cyfuno XPath a CSS Gall XPath wneud llawer o bethau na all dewiswyr CSS eu gwneud wrth gwestiynu elfennau. Ond gall dewiswyr CSS hefyd wneud ychydig o bethau na all XPath eu gwneud, sef holi elfennau yn ôl enw dosbarth.
CSS XPath .fyDosbarth /*[yn cynnwys (@dosbarth, "fyDosbarth")]
Yn yr enghraifft hon, mae CSS yn holi elfennau sy'n cynnwys enw dosbarth .myClass. Yn y cyfamser, mae enghraifft XPath yn holi elfennau sy'n cynnwys dosbarth priodoledd gyda'r llinyn “myClass”. Mewn geiriau eraill, mae'n dewis elfennau gyda myClass mewn unrhyw briodoledd, gan gynnwys elfennau gyda'r .myClass classname — yn ogystal ag elfennau gyda "myClass" yn y llinyn, megis .myClass2. Mae XPath yn ehangach yn yr ystyr hwnnw. Felly, na. Nid wyf yn awgrymu y dylem ddileu CSS a dechrau dewis pob elfen trwy XPath. Nid dyna'r pwynt. Y pwynt yw y gall XPath wneud pethau na all CSS fod yn ddefnyddiol iawn ac a allai fod yn ddefnyddiol iawn, er ei bod yn dechnoleg hŷn yn y pentwr porwr ac efallai nad yw'n ymddangos yn amlwg ar yr olwg gyntaf. Gadewch i ni ddefnyddio'r ddwy dechnoleg gyda'n gilydd nid yn unig oherwydd y gallwn, ond oherwydd byddwn yn dysgu rhywbeth am XPath yn y broses, gan ei wneud yn arf arall yn eich pentwr - efallai nad ydych yn gwybod bod un wedi bod yno o hyd! Y broblem yw bod dull dogfen.evaluate JavaScript a'r gwahanol ddulliau dewis ymholiad a ddefnyddiwn gyda'r APIs CSS ar gyfer JavaScript yn anghydnaws. Rwyf wedi gwneud API ymholi cydnaws i'n rhoi ar ben ffordd, er, rhaid cyfaddef, nid wyf wedi rhoi llawer o ystyriaeth iddo gan ei fod yn wyriad o'r hyn yr ydym yn ei wneud yma. Dyma enghraifft waith eithaf syml o adeiladwr ymholiad y gellir ei ailddefnyddio: Gweler y Pen queryXPath [fforchog] gan Bryan Rasmussen. Rwyf wedi ychwanegu dau ddull ar wrthrych y ddogfen: queryCSSSelectors (sef yn ei hanfod querySelectorAll) a queryXPaths. Mae'r ddau o'r rhain yn dychwelyd gwrthrych queryResults:
{ queryType: nodau | llinyn | rhif | boolean, canlyniadau: unrhyw[] // elfennau html, elfennau xml, llinynnau, rhifau, booleans, queryCSSSelectors: (ymholiad: llinyn, diwygio: boolean) => queryResults, queryXpaths: (ymholiad: llinyn, diwygio: boolean) => queryResults }
Mae'r swyddogaethau queryCSSSelectors a queryXpaths yn rhedeg yr ymholiad a roddwch iddynt dros yr elfennau yn yr arae canlyniadau, cyn belled â bod yr arae canlyniadau o nodau math, wrth gwrs. Fel arall, bydd yn dychwelyd queryResult gydag arae wag a math o nodau. Os yw'r eiddo diwygio wedi'i osod yn wir, bydd y swyddogaethau'n newid eu canlyniadau ymholiad eu hunain. Ni ddylid defnyddio hwn mewn amgylchedd cynhyrchu o dan unrhyw amgylchiadau. Rwy'n ei wneud fel hyn yn unig i ddangos effeithiau amrywiol defnyddio'r ddau API ymholiad gyda'i gilydd. Ymholiadau Enghreifftiol Rwyf am ddangos ychydig o enghreifftiau o wahanol ymholiadau XPath sy'n dangos rhai o'r pethau pwerus y gallant eu gwneud a sut y gellir eu defnyddio yn lle dulliau eraill. Yr enghraifft gyntaf yw //li/text(). Mae hyn yn cwestiynu holl elfennau li ac yn dychwelyd eu nodau testun. Felly, pe baem yn cwestiynu'r HTML canlynol:
- un
- dau
- tri
…dyma beth sy'n cael ei ddychwelyd:
{ "queryType": "xpathEvaluate" , "results":[ "un", "dau", "tri"], "resultType" : "llinyn"}
Mewn geiriau eraill, cawn yr arae ganlynol: ["un", "dau", "tri"]. Fel arfer, byddech yn ymholi am yr elfennau li i gael hynny, yn troi canlyniad yr ymholiad hwnnw yn arae, yn mapio'r arae, ac yn dychwelyd nod testun pob elfen. Ond gallwn wneud hynny'n fwy cryno gydag XPath: document.queryXPaths ("//li/text()").canlyniadau.
Sylwch mai'r ffordd i gael nod testun yw defnyddio testun (), sy'n edrych fel llofnod swyddogaeth - ac y mae. Mae'n dychwelyd nod testun elfen. Yn ein hesiampl, mae tair elfen li yn y marcio, pob un yn cynnwys testun ("un", "dau", a "thri").
Edrychwn ar un enghraifft arall o ymholiad testun(). Tybiwch mai dyma ein marcio:
Gadewch i ni ysgrifennu ymholiad sy'n dychwelyd gwerth priodoledd href: document.queryXPaths("//a[text() = 'Mewngofnodi']/@href").results.
Mae hwn yn ymholiad XPath ar y ddogfen gyfredol, yn union fel yr enghraifft olaf, ond y tro hwn rydym yn dychwelyd priodoledd href dolen (elfen) sy'n cynnwys y testun “Sign In”. Dychwelodd y gwircanlyniad yw ["/login.html"]. Trosolwg o Swyddogaethau XPath Mae yna nifer o swyddogaethau XPath, ac mae'n debyg eich bod chi'n anghyfarwydd â nhw. Mae sawl un, rwy’n meddwl, sy’n werth gwybod amdanynt, gan gynnwys y canlynol:
starts-withOs yw testun yn dechrau gydag enghraifft testun arbennig arall, mae starts-with(@href, 'http:') yn dychwelyd yn wir os yw priodoledd href yn dechrau gyda http:. containsOs yw testun yn cynnwys enghraifft testun arbennig arall, mae cynnwys (testun(), “Smashing Magazine”) yn dychwelyd yn wir os yw nod testun yn cynnwys y geiriau “Smashing Magazine” ynddo unrhyw le. Cyfrif Yn dychwelyd cyfrif o sawl cyfatebiaeth sydd i ymholiad. Er enghraifft, mae count(//*[starts-with(@href, 'http:']) yn dychwelyd cyfrif o faint o ddolenni yn y nod cyd-destun sydd ag elfennau â phriodoledd href sy'n cynnwys y testun sy'n dechrau gyda'r http:. substringWorks fel is-linyn JavaScript, heblaw eich bod yn pasio'r llinyn fel dadl. Er enghraifft, mae substring ("fy nhestun", 2, 4) yn dychwelyd "y t". substring-before Yn dychwelyd rhan llinyn cyn llinyn arall. Er enghraifft, mae substing-before ("fy nhestun", " ") yn dychwelyd "fy". Yn yr un modd, mae substring-before ("hi", "bye") yn dychwelyd llinyn gwag. substring-afterYn dychwelyd rhan llinyn ar ôl llinyn arall. Er enghraifft, mae substing-after ("fy nhestun", " ") yn dychwelyd "testun". Yn yr un modd, mae substring-after ("hi", "bye") yn dychwelyd llinyn gwag. normalize-spaceYn dychwelyd llinyn y ddadl gyda gofod gwyn wedi'i normaleiddio trwy dynnu gofod gwyn yn arwain ac yn llusgo a gosod un bwlch yn lle dilyniannau o nodau gofod gwyn. notReturn boolean yn wir os yw'r ddadl yn ffug, fel arall yn ffug. gwir Yn dychwelyd boolean gwir. ffug Yn dychwelyd boolean ffug. concatYr un peth â JavaScript concat, ac eithrio nad ydych yn ei redeg fel dull ar linyn. Yn lle hynny, rydych chi'n rhoi'r holl linynnau rydych chi am eu cydgadwynu i mewn. string-lengthNid yw hyn yr un peth â JavaScript string-length, ond yn hytrach yn dychwelyd hyd y llinyn a roddir iddo fel dadl. translateThis yn cymryd llinyn ac yn newid yr ail arg i'r drydedd ddadl. Er enghraifft, cyfieithu ("abcdef", "abc", "XYZ") allbynnau XYZdef.
Ar wahân i'r swyddogaethau XPath penodol hyn, mae yna nifer o swyddogaethau eraill sy'n gweithio yn union yr un fath â'u cymheiriaid JavaScript - neu gymheiriaid mewn unrhyw iaith raglennu yn y bôn - y byddech chi fwy na thebyg yn ddefnyddiol hefyd, fel llawr, nenfwd, crwn, swm, ac ati. Mae'r demo canlynol yn dangos pob un o'r swyddogaethau hyn: Gweler ffwythiannau rhifiadol Pen XPath [fforchog] gan Bryan Rasmussen. Sylwch, fel y rhan fwyaf o'r swyddogaethau trin llinynnau, bod llawer o'r rhai rhifiadol yn cymryd un mewnbwn. Mae hyn, wrth gwrs, oherwydd eu bod i fod i gael eu defnyddio ar gyfer ymholi, fel yn yr enghraifft XPath ddiwethaf: //li[llawr(testun()) > 250]/@val
Os ydych chi'n eu defnyddio, fel y mae'r rhan fwyaf o'r enghreifftiau yn ei wneud, byddwch yn ei redeg ar y nod cyntaf sy'n cyfateb i'r llwybr. Mae yna hefyd rai swyddogaethau trosi math mae'n debyg y dylech eu hosgoi oherwydd bod gan JavaScript ei broblemau trosi math ei hun eisoes. Ond gall fod adegau pan fyddwch chi eisiau trosi llinyn yn rif er mwyn ei wirio yn erbyn rhif arall. Swyddogaethau sy'n gosod y math o rywbeth yw boolean, rhif, llinyn, a nod. Dyma'r mathau data XPath pwysig. Ac fel y gallech ddychmygu, gellir defnyddio'r rhan fwyaf o'r swyddogaethau hyn ar fathau o ddata nad ydynt yn nodau DOM. Er enghraifft, mae is-linyn ar ôl yn cymryd llinyn fel yr ydym eisoes wedi'i orchuddio, ond gallai fod yn llinyn o briodoledd href. Gall hefyd fod yn llinyn yn unig:
const testSubstringAfter = document.queryXPaths("substring-after('helo world','')");
Yn amlwg, bydd yr enghraifft hon yn rhoi'r arae canlyniadau yn ôl i ni fel ["byd"]. I ddangos hyn ar waith, rwyf wedi gwneud tudalen demo gan ddefnyddio swyddogaethau yn erbyn pethau nad ydynt yn nodau DOM: Gweler y Pen queryXPath [fforchog] gan Bryan Rasmussen. Dylech nodi’r agwedd sy’n peri syndod i’r swyddogaeth gyfieithu, sef os oes gennych chi gymeriad yn yr ail ddadl (h.y., y rhestr o nodau rydych chi am eu cyfieithu) a dim nod cyfatebol i gyfieithu iddo, bydd y nod hwnnw’n cael ei dynnu o’r allbwn. Felly, dyma:
cyfieithu('Helo, Fy Enw i yw Inigo Montoya, lladdasoch fy nhad, paratoi i farw','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
…canlyniadau yn y llinyn, gan gynnwys bylchau: [" * **"]
Mae hyn yn golygu bod y llythyren “a” yn cael ei chyfieithu i seren (*), ond mae pob nod arall nad oes ganddo gyfieithiad o ystyried y llinyn targed yn cael ei ddileu yn llwyr. Y gofod gwyn yw'r cyfan sydd gennym ar ôlrhwng y cymeriadau “a” a gyfieithwyd. Yna eto, yr ymholiad hwn:
cyfieithu ('Helo, Fy Enw i yw Inigo Montoya, lladdaist fy nhad, paratowch i farw', 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,', '****************************************************))
…nad oes ganddo'r broblem ac mae'n rhoi canlyniad sy'n edrych fel hyn:
" ***** ****** ** ***** ******* *** ****** ** ************** ** ***"
Efallai y bydd yn eich taro nad oes unrhyw ffordd hawdd yn JavaScript i wneud yn union yr hyn y mae swyddogaeth cyfieithu XPath yn ei wneud, er mewn llawer o achosion defnydd, gall replaceAll ag ymadroddion rheolaidd ei drin. Fe allech chi ddefnyddio'r un dull yr wyf wedi'i ddangos, ond nid yw hynny'n optimaidd os mai'r cyfan rydych chi ei eisiau yw cyfieithu'r llinynnau. Mae'r demo canlynol yn lapio swyddogaeth gyfieithu XPath i ddarparu fersiwn JavaScript: Gweler y swyddogaeth cyfieithu Pen [fforchog] gan Bryan Rasmussen. Ble allech chi ddefnyddio rhywbeth fel hyn? Ystyriwch amgryptio Caesar Cipher gyda gwrthbwyso tri lle (e.e., amgryptio top-of-the-line o 48 CC):
translate ("Mae Cesar yn bwriadu croesi'r Rubicon!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
Mae'r testun mewnbwn "Caesar yn bwriadu croesi'r Rubicon!" yn arwain at “Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!” I roi enghraifft gyflym arall o wahanol bosibiliadau, fe wnes i swyddogaeth fetel sy'n cymryd mewnbwn llinynnol ac yn defnyddio swyddogaeth gyfieithu i ddychwelyd y testun, gan gynnwys yr holl nodau sy'n cymryd umlauts. Gweler swyddogaeth metel Pen [fforchog] gan Bryan Rasmussen.
const metel = (str) => { return translate(str, "AOUaou",,"ÄÖÜäöü"); }
Ac, os rhoddir y testun “Motley Crue rules, rock on dudes!”, yn dychwelyd “Mötley Crüe rüles, röck ön düdes!” Yn amlwg, efallai y bydd gan un bob math o ddefnydd parodi o'r swyddogaeth hon. Os mai dyna chi, yna dylai'r erthygl TVTropes hon roi digon o ysbrydoliaeth i chi. Defnyddio CSS Gyda XPath Cofiwch ein prif reswm dros ddefnyddio dewiswyr CSS ynghyd ag XPath: mae CSS yn deall i raddau helaeth beth yw dosbarth, a'r gorau y gallwch chi ei wneud gydag XPath yw cymariaethau llinynnol o briodoledd dosbarth. Bydd hynny'n gweithio yn y rhan fwyaf o achosion. Ond pe baech byth yn mynd i sefyllfa lle, dyweder, fod rhywun wedi creu dosbarthiadau o'r enw .primaryLinks a .primaryLinks2 a'ch bod yn defnyddio XPath i gael y dosbarth .primaryLinks, yna byddech yn debygol o gael problemau. Cyn belled nad oes unrhyw beth gwirion fel hynny, mae'n debyg y byddech chi'n defnyddio XPath. Ond rwy’n drist i adrodd fy mod wedi gweithio mewn mannau lle mae pobl yn gwneud y mathau hynny o bethau gwirion. Dyma demo arall gan ddefnyddio CSS ac XPath gyda'i gilydd. Mae'n dangos beth sy'n digwydd pan fyddwn yn defnyddio'r cod i redeg XPath ar nod cyd-destun nad yw'n nod y ddogfen. Gweler y Pen css a xpath gyda'i gilydd [forked] gan Bryan Rasmussen. Yr ymholiad CSS yw .relatedarticles a, sy'n nôl y ddwy elfen a mewn dosbarth .relatedarticles a neilltuwyd iddo. Ar ôl hynny mae tri ymholiad “drwg”, hynny yw, ymholiadau nad ydyn nhw'n gwneud yr hyn rydyn ni am iddyn nhw ei wneud wrth redeg gyda'r elfennau hyn fel nod cyd-destun. Gallaf egluro pam eu bod yn ymddwyn yn wahanol nag y gallech ei ddisgwyl. Y tri chwestiwn drwg dan sylw yw:
//text(): Yn dychwelyd yr holl destun yn y ddogfen. //a/text(): Yn dychwelyd yr holl destun y tu mewn i ddolenni yn y ddogfen. ./a/text(): Dim canlyniadau.
Y rheswm am y canlyniadau hyn yw er bod eich cyd-destun yn elfen a ddychwelwyd o'r ymholiad CSS, // yn mynd yn erbyn y ddogfen gyfan. Dyma gryfder XPath; Ni all CSS fynd o nod i fyny at hynafiad ac yna i frawd neu chwaer o'r hynafiad hwnnw, a cherdded i lawr at ddisgynnydd y brawd neu chwaer hwnnw. Ond gall XPath. Yn y cyfamser, mae ./ yn holi plant y nod presennol, lle mae'r dot (.) yn cynrychioli'r nod cyfredol, a'r blaenslaes (/) yn cynrychioli mynd i ryw nod plentyn - a yw'n briodoledd, elfen, neu destun yn cael ei bennu gan y rhan nesaf o'r llwybr. Ond nid oes unrhyw blentyn yn elfen a ddewiswyd gan yr ymholiad CSS, felly nid yw'r ymholiad hwnnw'n dychwelyd dim. Mae tri chwestiwn da yn y demo olaf hwnnw:
.//testun(), ./testun(), normaleiddio gofod (./testun()).
Mae'r ymholiad normaleiddio gofod yn dangos defnydd swyddogaeth XPath, ond mae hefyd yn datrys problem sydd wedi'i chynnwys yn yr ymholiadau eraill. Mae'r HTML wedi'i strwythuro fel hyn:
Awtomeiddio Eich Profi Nodwedd Gyda Seleniwm WebDriver
Mae'r ymholiad yn dychwelyd porthiant llinell ar ddechrau a diwedd y nod testun,a normalize-space yn dileu hyn. Mae defnyddio unrhyw swyddogaeth XPath sy'n dychwelyd rhywbeth heblaw boole gyda mewnbwn XPath yn berthnasol i swyddogaethau eraill. Mae'r demo canlynol yn dangos nifer o enghreifftiau: Gweler yr enghreifftiau Pen xpath functions [forked] gan Bryan Rasmussen. Mae'r enghraifft gyntaf yn dangos problem y dylech wylio amdani. Yn benodol, y cod canlynol:
document.queryXPaths("substring-after(//a/@href,'https://')");
…yn dychwelyd un llinyn:
"www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/"
Mae'n gwneud synnwyr, iawn? Nid yw'r swyddogaethau hyn yn dychwelyd araeau ond yn hytrach llinynnau sengl neu rifau sengl. Mae rhedeg y swyddogaeth yn unrhyw le gyda chanlyniadau lluosog yn dychwelyd y canlyniad cyntaf yn unig. Mae'r ail ganlyniad yn dangos yr hyn yr ydym ei eisiau mewn gwirionedd:
document.queryCSSSelectors("a").queryXPaths("substring-after(./@href,'https://')");
Sy'n dychwelyd amrywiaeth o ddau llinyn:
["www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/","www.smashingmagazine.com/2022/11/automated-test-results-improve-accessibility/"]
Gellir nythu swyddogaethau XPath yn union fel swyddogaethau yn JavaScript. Felly, os ydym yn gwybod strwythur URL Smashing Magazine, gallem wneud y canlynol (argymhellir defnyddio llythrennau bras): `cyfieithu ( is-linyn ( substring-after(./@href, 'www.smashingmagazine.com/') ,9), '/','')`
Mae hyn yn mynd ychydig yn rhy gymhleth i'r graddau ei fod angen sylwadau sy'n disgrifio'r hyn y mae'n ei wneud: tynnwch yr URL i gyd o'r priodoledd href ar ôl www.smashingmagazine.com/, tynnwch y naw nod cyntaf, yna troswch y nod blaen slaes (/) i ddim er mwyn cael gwared ar y slaes ymlaen sy'n dod i ben. Yr amrywiaeth sy'n deillio o hyn:
["profi nodwedd-seleniwm-webdriver", "canlyniadau prawf-awtomatig-gwella-hygyrchedd"]
Mwy o Achosion Defnydd XPath Gall XPath ddisgleirio mewn profion. Nid yw'r rheswm yn anodd ei weld, gan y gellir defnyddio XPath i gael pob elfen yn y DOM, o unrhyw safle yn y DOM, ond ni all CSS. Ni allwch ddibynnu ar ddosbarthiadau CSS yn aros yn gyson mewn llawer o systemau adeiladu modern, ond gydag XPath, gallwn wneud paru mwy cadarn o ran beth yw cynnwys testun elfen, waeth beth fo strwythur DOM sy'n newid. Bu ymchwil ar dechnegau sy'n eich galluogi i wneud profion XPath gwydn. Nid oes dim yn waeth na chael profion yn fflawio a methu dim ond oherwydd nad yw dewisydd CSS yn gweithio mwyach oherwydd bod rhywbeth wedi'i ailenwi neu ei ddileu. Mae XPath hefyd yn wych iawn am echdynnu locator lluosog. Mae mwy nag un ffordd o ddefnyddio ymholiadau XPath i gyfateb elfen. Mae'r un peth yn wir gyda CSS. Ond gall ymholiadau XPath ddrilio i mewn i bethau mewn ffordd fwy targedig sy'n cyfyngu ar yr hyn sy'n cael ei ddychwelyd, gan ganiatáu i chi ddod o hyd i baru penodol lle gallai fod sawl paru posibl. Er enghraifft, gallwn ddefnyddio XPath i ddychwelyd elfen h2 benodol sydd wedi'i chynnwys y tu mewn i div sy'n dilyn yn syth div brawd neu chwaer sydd, yn ei dro, yn cynnwys elfen delwedd plentyn gyda phriodoledd data-testID = "leader" arno:
peidiwch â chael y pennawd hwn
Peidiwch â chael y pennawd hwn chwaith
Pennawd ar gyfer delwedd yr arweinydd
Dyma'r ymholiad: document.queryXPaths(` //div[ brawd neu chwaer canlynol::div[1] /img[@data-testID='arweinydd'] ] /h2/ testun () `);
Dewch i ni alw mewn demo i weld sut mae hynny i gyd yn dod at ei gilydd: Gweler Ymholiad Pen Cymhleth H2 [wedi'i fforchio] gan Bryan Rasmussen. Felly, ie. Mae llawer o lwybrau posibl i unrhyw elfen mewn prawf gan ddefnyddio XPath. XSLT 1.0 Dibrisiant Soniais yn gynnar fod tîm Chrome yn bwriadu tynnu cefnogaeth XSLT 1.0 o'r porwr. Mae hynny'n bwysig oherwydd bod XSLT 1.0 yn defnyddio rhaglennu sy'n canolbwyntio ar XML ar gyfer trawsnewid dogfennau sydd, yn ei dro, yn dibynnu ar XPath 1.0, sef yr hyn a geir yn y mwyafrif o borwyr. Pan fydd hynny'n digwydd, byddwn yn colli elfen allweddol o XPath. Ond o ystyried y ffaith bod XPath yn wirioneddol wych ar gyfer ysgrifennu profion, rwy'n ei chael hi'n annhebygol y bydd XPath yn ei gyfanrwydd yn diflannu unrhyw bryd yn fuan. Wedi dweud hynny, rwyf wedi sylwi bod pobl yn ymddiddori mewn nodwedd pan gaiff ei thynnu i ffwrdd. Ac mae hynny'n sicr yn wir yn achos XSLT 1.0 yn cael ei anghymeradwyo. Mae trafodaeth gyfan yn digwydd drosodd yn Hacker News yn llawn dadleuon yn erbyn y dibrisiant. Mae'r post ei hun yn enghraifft wych o greu fframwaith blogio gyda XSLT. Tiyn gallu darllen y drafodaeth drosoch eich hun, ond mae'n dod i mewn i sut y gellir defnyddio JavaScript fel shim i XLST drin y mathau hynny o achosion. Rwyf hefyd wedi gweld awgrymiadau y dylai porwyr ddefnyddio SaxonJS, sy'n borthladd i beiriannau Saxon XSLT, XQUERY, ac XPath JavaScript. Mae hynny'n syniad diddorol, yn enwedig gan fod Saxon-JS yn gweithredu'r fersiwn gyfredol o'r manylebau hyn, tra nad oes porwr sy'n gweithredu unrhyw fersiwn o XPath neu XSLT y tu hwnt i 1.0, a dim un sy'n gweithredu XQuery. Cyrhaeddais Norm Tovey-Walsh yn Saxonica, y cwmni y tu ôl i SaxonJS a fersiynau eraill o'r injan Sacsonaidd. Dywedodd: “Pe bai gan unrhyw werthwr porwr ddiddordeb mewn cymryd SaxonJS fel man cychwyn ar gyfer integreiddio technolegau XML modern i'r porwr, byddem wrth ein bodd yn ei drafod gyda nhw.” - Norm Tovey-Walsh
Ond ychwanegodd hefyd: “Byddwn yn synnu’n fawr pe bai unrhyw un yn meddwl mai cymryd SaxonJS yn ei ffurf bresennol a’i ollwng yn y porwr heb ei newid fyddai’r dull delfrydol. Gallai gwerthwr porwr, oherwydd natur y ffaith ei fod yn adeiladu’r porwr, fynd at yr integreiddio ar lefel lawer dyfnach nag y gallwn ‘o’r tu allan’.”— Norm Tovey-Walsh
Mae'n werth nodi bod sylwadau Tovey-Walsh wedi dod tua wythnos cyn y cyhoeddiad am ddibrisiad XSLT. Casgliad Gallwn i fynd ymlaen ac ymlaen. Ond rwy'n gobeithio bod hyn wedi dangos pŵer XPath ac wedi rhoi digon o enghreifftiau i chi yn dangos sut i'w ddefnyddio ar gyfer cyflawni pethau gwych. Mae'n enghraifft berffaith o dechnoleg hŷn yn y pentwr porwr sydd â digon o ddefnyddioldeb o hyd heddiw, hyd yn oed os nad ydych chi erioed wedi gwybod ei fod yn bodoli neu heb ystyried estyn amdano. Darllen Pellach
“Gwella Gwydnwch Profion Gwe Awtomataidd ag Iaith Naturiol” (Llyfrgell Ddigidol ACM) gan Maroun Ayli, Youssef Bakouny, Nader Jalloul, a Rima KilanyMae'r erthygl hon yn darparu llawer o enghreifftiau XPath ar gyfer ysgrifennu profion gwydn. XPath (MDN)Dyma le gwych i ddechrau os ydych chi eisiau esboniad technegol yn manylu ar sut mae XPath yn gweithio. Tiwtorial XPath (ZVON) Mae'r tiwtorial hwn wedi bod fwyaf defnyddiol yn fy nysgu fy hun, diolch i gyfoeth o enghreifftiau ac esboniadau clir. XPatherMae'r offeryn rhyngweithiol hwn yn gadael i chi weithio'n uniongyrchol gyda'r cod.
