Mo ti wa ni idagbasoke iwaju-ipari ti o to lati rii aṣa kan ni awọn ọdun: awọn olupilẹṣẹ ọdọ ti n ṣiṣẹ pẹlu apẹrẹ tuntun ti siseto laisi agbọye ipo itan-akọọlẹ rẹ. O jẹ, dajudaju, ni oye pipe lati ko mọ nkan kan. Oju opo wẹẹbu jẹ aaye ti o tobi pupọ pẹlu eto oniruuru ti awọn ọgbọn ati awọn iyasọtọ, ati pe a ko nigbagbogbo mọ ohun ti a ko mọ. Ikẹkọ ni aaye yii jẹ irin-ajo ti nlọ lọwọ ju nkan ti o ṣẹlẹ ni ẹẹkan ati pari. Ọran ni aaye: Ẹnikan ninu ẹgbẹ mi beere boya o ṣee ṣe lati sọ boya awọn olumulo ba lọ kiri kuro ni taabu kan pato ninu UI. Mo tọka si iṣẹlẹ JavaScript ṣaaju ki o to gbejade. Ṣugbọn awọn ti o ti koju eyi ṣaaju ki o to mọ pe eyi ṣee ṣe nitori wọn ti kọlu pẹlu awọn titaniji nipa data ti ko fipamọ sori awọn aaye miiran, eyiti ṣaaju ki o to gbejade jẹ ọran lilo aṣoju. Mo tun tọka si oju-iwe Tọju ati awọn iṣẹlẹ visibilityChange si ẹlẹgbẹ mi fun iwọn to dara. Bawo ni MO ṣe mọ nipa iyẹn? Nitoripe o wa ninu iṣẹ akanṣe miiran, kii ṣe nitori pe Mo kọ ẹkọ lori rẹ nigbati kọkọ kọ JavaScript. Otitọ ni pe awọn ilana iwaju-ipari ode oni duro lori awọn ejika ti awọn omiran imọ-ẹrọ ti o ṣaju wọn. Wọn áljẹbrà awọn iṣe idagbasoke, nigbagbogbo fun iriri idagbasoke ti o dara julọ ti o dinku, tabi paapaa yọkuro, iwulo lati mọ tabi fi ọwọ kan ohun ti aṣa jẹ awọn imọran iwaju-ipin pataki ti gbogbo eniyan jasi yẹ lati mọ. Wo Awoṣe Nkan CSS (CSSOM). O le nireti pe ẹnikẹni ti n ṣiṣẹ ni CSS ati JavaScript ni ọpọlọpọ iriri iriri CSSOM, ṣugbọn iyẹn kii ṣe nigbagbogbo yoo jẹ ọran naa. Ise agbese React kan wa fun aaye iṣowo e-commerce Mo ṣiṣẹ lori ibiti a nilo lati gbe iwe aṣa kan fun olupese isanwo ti a yan lọwọlọwọ. Iṣoro naa ni pe iwe aṣa ti n ṣajọpọ lori oju-iwe kọọkan nigbati o nilo gaan ni oju-iwe kan pato. Olùgbéejáde ti a ṣe iṣẹ ṣiṣe pẹlu ṣiṣe eyi ṣẹlẹ ko tii gbe iwe aṣa kan ni agbara. Lẹẹkansi, eyi jẹ oye ni kikun nigbati React ba kuro ni ọna ibile ti o le ti de. CSSOM kii ṣe nkan ti o nilo ninu iṣẹ ojoojumọ rẹ. Ṣugbọn o ṣee ṣe pe iwọ yoo nilo lati ṣe ajọṣepọ pẹlu rẹ ni aaye kan, paapaa ni apẹẹrẹ ọkan-pipa. Awọn iriri wọnyi ṣe atilẹyin fun mi lati kọ nkan yii. Ọpọlọpọ awọn ẹya ayelujara ti o wa tẹlẹ ati imọ-ẹrọ ninu egan ti o le ma fi ọwọ kan taara ni iṣẹ ojoojumọ rẹ. Boya o jẹ tuntun tuntun si idagbasoke wẹẹbu ati pe o kan ko mọ wọn nitori pe o wọ inu abstraction ti ilana kan pato ti ko nilo ki o mọ jinna, tabi paapaa rara. Mo n sọrọ ni pataki nipa XML, eyiti ọpọlọpọ wa mọ pe ede atijọ ti ko yatọ patapata lati HTML. Mo n mu eyi wa nitori awọn ijiroro WHATWG aipẹ ni iyanju pe ipin pataki ti akopọ XML ti a mọ si siseto XSLT yẹ ki o yọkuro kuro ninu awọn aṣawakiri. Eyi ni deede iru agbalagba, imọ-ẹrọ ti o wa tẹlẹ ti a ti ni fun awọn ọdun ti o le ṣee lo fun nkan ti o wulo bi ipo CSSOM ti ẹgbẹ mi wa. Njẹ o ti ṣiṣẹ pẹlu XSLT tẹlẹ? Jẹ ki a rii ti a ba tẹra si imọ-ẹrọ agbalagba yii ati mu awọn ẹya rẹ lode ọrọ ti XML lati koju awọn iṣoro gidi-aye loni. XPath: Central API Imọ-ẹrọ XML ti o ṣe pataki julọ ti o jẹ boya iwulo julọ ni ita ti irisi XML ti o tọ ni XPath, ede ibeere ti o fun ọ laaye lati wa oju-ọna eyikeyi tabi abuda ninu igi isamisi kan pẹlu ipilẹ gbongbo kan. Mo ni ifẹ ti ara ẹni fun XSLT, ṣugbọn iyẹn tun da lori XPath, ati ifẹ ti ara ẹni gbọdọ wa ni apakan ni pataki ipo. Awọn ariyanjiyan fun yiyọ XSLT ko ṣe eyikeyi darukọ XPath, ki Mo Sawon o ti wa ni ṣi laaye. Iyẹn dara nitori XPath jẹ aringbungbun ati pataki API ni suite ti awọn imọ-ẹrọ, paapaa nigbati o n gbiyanju lati wa nkan lati lo ita lilo XML deede. O ṣe pataki nitori pe, lakoko ti awọn yiyan CSS le ṣee lo lati wa pupọ julọ awọn eroja inu oju-iwe rẹ, wọn ko le rii gbogbo wọn. Pẹlupẹlu, awọn yiyan CSS ko le ṣee lo lati wa ipin kan ti o da lori ipo lọwọlọwọ rẹ ni DOM. XPath le. Bayi, diẹ ninu awọn ti o kika eyi le mọ XPath, ati diẹ ninu awọn le ko. XPath jẹ agbegbe nla ti imọ-ẹrọ, ati pe Emi ko le kọ gbogbo awọn ipilẹ gaan ati tun fihan ọ awọn ohun tutu lati ṣe pẹlu rẹ ni nkan kan bi eyi. Mo gbiyanju lati kọ nkan yẹn gangan, ṣugbọn apapọ titẹjade Iwe irohin Smashing ko kọja awọn ọrọ 5,000. Mo ti wa ni diẹ sii juAwọn ọrọ 2,000 lakoko ti o wa ni agbedemeji nikan nipasẹ awọn ipilẹ. Nitorinaa, Emi yoo bẹrẹ ṣiṣe awọn nkan ti o tutu pẹlu XPath ati fun ọ ni diẹ ninu awọn ọna asopọ ti o le lo fun awọn ipilẹ ti o ba rii nkan yii ti o nifẹ. Apapọ XPath & CSS XPath le ṣe ọpọlọpọ awọn nkan ti awọn yiyan CSS ko le ṣe nigbati o n beere awọn eroja. Ṣugbọn awọn yiyan CSS tun le ṣe awọn nkan diẹ ti XPath ko le, eyun, awọn eroja ibeere nipasẹ orukọ kilasi.
CSS XPath .kilasi mi /*[ni ninu (@kilasi, "MyClass")]
Ninu apẹẹrẹ yii, CSS beere awọn eroja ti o ni orukọ kilasi .myClass ninu. Nibayi, apẹẹrẹ XPath n beere awọn eroja ti o ni kilasi abuda kan pẹlu okun “myClass”. Ni awọn ọrọ miiran, o yan awọn eroja pẹlu myClass ni eyikeyi abuda, pẹlu awọn eroja pẹlu orukọ kilasi .myClass — bakanna pẹlu awọn eroja pẹlu “myClass” ninu okun, bii .myClass2. XPath gbooro ni ọna yẹn. Nitorina, rara. Emi ko daba pe o yẹ ki a ju CSS jade ki o bẹrẹ yiyan gbogbo awọn eroja nipasẹ XPath. Iyẹn kii ṣe aaye naa. Oro naa ni pe XPath le ṣe awọn nkan ti CSS ko le ṣe ati pe o tun le wulo pupọ, botilẹjẹpe o jẹ imọ-ẹrọ agbalagba ninu akopọ aṣawakiri ati pe o le ma dabi gbangba ni iwo akọkọ. Jẹ ki a lo awọn imọ-ẹrọ meji papọ kii ṣe nitori a le nikan, ṣugbọn nitori pe a yoo kọ nkan nipa XPath ninu ilana, ṣiṣe ni ọpa miiran ninu akopọ rẹ - ọkan ti o le ma ti mọ ti wa nibẹ ni gbogbo igba! Iṣoro naa ni pe ọna dokomenti JavaScript. ṣe ayẹwo ati ọpọlọpọ awọn ọna yiyan ibeere ti a lo pẹlu awọn API CSS fun JavaScript ko ni ibamu. Mo ti ṣe API ibeere ibeere ibaramu lati jẹ ki a bẹrẹ, botilẹjẹpe o gbawọ, Emi ko fi ero pupọ sinu rẹ nitori o jẹ ilọkuro lati ohun ti a n ṣe nibi. Eyi ni apẹẹrẹ iṣiṣẹ ti o rọrun ti oluṣe ibeere atunlo: Wo Pen queryXPath [forked] nipasẹ Bryan Rasmussen. Mo ti ṣafikun awọn ọna meji lori nkan iwe: queryCSSSelectors (eyiti o jẹ ibeere ibeereSelectorAll pataki) ati queryXPaths. Mejeji wọnyi da ohun elo Awọn abajade ibeere pada:
{ queryType: apa | okun | nọmba | boolian, awọn abajade: eyikeyi[] // awọn eroja html, awọn eroja xml, awọn okun, awọn nọmba, awọn boolean, ìbéèrèCSSSelectors: (ìbéèrè: string, àtúnṣe: boolean) => Awọn abajade ibeere, queryXpaths: (ìbéèrè: string, àtúnṣe: boolean) => Awọn abajade ibeere }
Awọn ibeereCSSSelectors ati awọn iṣẹ queryXpaths nṣiṣẹ ibeere ti o fun wọn lori awọn eroja ti o wa ninu akojọpọ awọn abajade, niwọn igba ti awọn abajade abajade jẹ iru awọn apa, dajudaju. Bibẹẹkọ, yoo da esi ibeere pada pẹlu opo ṣofo ati iru awọn apa kan. Ti ohun-ini atunṣe ba ṣeto si otitọ, awọn iṣẹ naa yoo yi Awọn abajade ibeere tiwọn pada. Labẹ ọran kankan ko yẹ ki o lo eyi ni agbegbe iṣelọpọ kan. Mo n ṣe ni ọna yii nikan lati ṣe afihan awọn ipa oriṣiriṣi ti lilo awọn API ibeere meji papọ. Awọn ibeere apẹẹrẹ Mo fẹ lati ṣafihan awọn apẹẹrẹ diẹ ti awọn ibeere XPath oriṣiriṣi ti o ṣe afihan diẹ ninu awọn ohun ti o lagbara ti wọn le ṣe ati bii wọn ṣe le lo ni aaye awọn isunmọ miiran. Apẹẹrẹ akọkọ jẹ //li/text(). Eyi yoo beere gbogbo awọn eroja li ati da awọn apa ọrọ wọn pada. Nitorinaa, ti a ba beere ibeere HTML wọnyi:
- ọkan
- meji
- mẹta
Eyi ni ohun ti o da pada:
{"queryType":"xpathEvaluate","awọn esi":["ọkan","meji","meta"],"esiType":"okun"}
Ni awọn ọrọ miiran, a gba orun wọnyi: ["ọkan","meji","mẹta"]. Ni deede, iwọ yoo beere fun awọn eroja li lati gba iyẹn, yi abajade ibeere yẹn pada si akojọpọ kan, ṣe maapu eto naa, ki o da apa ọrọ pada ti ipin kọọkan. Ṣugbọn a le ṣe iyẹn diẹ sii ni ṣoki pẹlu XPath: document.queryXPaths ("//li/text ()") .awọn esi.
Ṣe akiyesi pe ọna lati gba ipade ọrọ ni lati lo ọrọ (), eyiti o dabi ibuwọlu iṣẹ - ati pe o jẹ. O da awọn ipade ọrọ ti ohun ano. Ninu apẹẹrẹ wa, awọn eroja li mẹta wa ninu isamisi, ọkọọkan ni ọrọ ninu ("ọkan", "meji", ati "mẹta").
Jẹ ki a wo apẹẹrẹ kan diẹ sii ti ibeere ọrọ () kan. Ro pe eyi ni isamisi wa:
Jẹ ki a kọ ibeere kan ti o da iye abuda href pada: document.queryXPaths ("// a [ọrọ () = 'Wọle']/@href") .awọn esi.
Eyi jẹ ibeere XPath lori iwe lọwọlọwọ, gẹgẹ bi apẹẹrẹ ti o kẹhin, ṣugbọn ni akoko yii a da pada abuda href ti ọna asopọ kan (ero kan) ti o ni ọrọ “Wọle”. Awọn gangan padaabajade jẹ ["/login.html"]. XPath Awọn iṣẹ Akopọ Nọmba awọn iṣẹ XPath wa, ati pe o ṣee ṣe ko mọ wọn. Ọpọlọpọ wa, Mo ro pe, ti o tọ lati mọ nipa, pẹlu atẹle naa:
bẹrẹ-pẹluTi ọrọ kan ba bẹrẹ pẹlu apẹẹrẹ ọrọ kan pato, bẹrẹ-pẹlu(@href, 'http:') pada ni otitọ ti ẹya href ba bẹrẹ pẹlu http:. Ni ti ọrọ kan ba ni apẹẹrẹ ọrọ kan pato kan ninu, ninu (ọrọ (), “Iwe irohin Fọ” jẹ otitọ ti oju ipade ọrọ ba ni awọn ọrọ “Iwe irohin Fọ” ninu rẹ nibikibi. kika dapada kika iye awọn ere-kere ti o wa si ibeere kan. Fun apẹẹrẹ, kika (//* [bẹrẹ-pẹlu (@ href, 'http:']) da nọmba awọn ọna asopọ melo ni oju ipade ọrọ ni awọn eroja pẹlu ẹya href ti o ni ọrọ ti o bẹrẹ pẹlu http:. SubstringWorks bi JavaScript substring, ayafi ti o ba kọja okun bi ariyanjiyan. Fun apẹẹrẹ, okun-okun ("ọrọ mi", 2, 4) da pada "y t". substring-ṣaaju da apa okun pada ṣaaju okun miiran. Fun apẹẹrẹ, ifisilẹ-ṣaaju ("ọrọ mi", "") da pada "mi". Bakanna, substring-ṣaaju ("hi","bye") da okun sofo pada. substring-lẹhin Da apa okun pada lẹhin okun miiran. Fun apẹẹrẹ, ifibọ-lẹhin ("ọrọ mi", "") da "ọrọ" pada. Bakanna,-okun-lẹhin("hi","bye") da okun sofo pada. normalize-space Pada okun ariyanjiyan pada pẹlu aaye funfun ti o ṣe deede nipasẹ yiyọ asiwaju ati itọpa aaye funfun ati rirọpo awọn ilana ti awọn ohun kikọ aaye funfun nipasẹ aaye kan. not da dodo bolianu pada ti ariyanjiyan ba jẹ eke, bibẹẹkọ eke. otitọ Pada boolean otitọ. falseReturns bolian èké. concatThe ohun kanna bi JavaScript concat, ayafi ti o ko ba ṣiṣe awọn ti o bi ọna kan lori okun. Dipo, o fi gbogbo awọn okun ti o fẹ lati concatenate sinu. okun-ipariEyi kii ṣe kanna bii gigun okun JavaScript, ṣugbọn kuku da ipari okun ti a fun ni bi ariyanjiyan. Itumọ eyi gba okun ati yi ariyanjiyan keji pada si ariyanjiyan kẹta. Fun apẹẹrẹ, tumọ ("abcdef", "abc", "XYZ") ṣejade XYZdef.
Yato si awọn iṣẹ XPath pato wọnyi, nọmba kan ti awọn iṣẹ miiran wa ti o ṣiṣẹ kanna bi awọn ẹlẹgbẹ JavaScript wọn - tabi awọn ẹlẹgbẹ ni ipilẹ eyikeyi ede siseto - ti o ṣee ṣe yoo tun wulo, gẹgẹbi ilẹ, aja, yika, apao, ati bẹbẹ lọ. demo atẹle yii ṣe afihan ọkọọkan awọn iṣẹ wọnyi: Wo awọn iṣẹ nọmba Pen XPath [forked] nipasẹ Bryan Rasmussen. Ṣe akiyesi pe, bii pupọ julọ awọn iṣẹ ifọwọyi okun, ọpọlọpọ awọn nọmba ti o gba titẹ sii kan. Eyi jẹ, nitorinaa, nitori wọn yẹ ki o lo fun ibeere, bi ninu apẹẹrẹ XPath ti o kẹhin: // li [pakà (ọrọ ())> 250]/@val
Ti o ba lo wọn, gẹgẹ bi ọpọlọpọ awọn apẹẹrẹ ṣe, iwọ yoo pari ṣiṣe ni ori ipade akọkọ ti o baamu ọna naa. Awọn iṣẹ iyipada oriṣi tun wa ti o yẹ ki o yago fun nitori JavaScript ti ni awọn iṣoro iyipada iru tirẹ. Ṣugbọn awọn akoko le wa nigbati o ba fẹ yi okun pada si nọmba kan lati ṣayẹwo rẹ lodi si nọmba miiran. Awọn iṣẹ ti o ṣeto iru nkan jẹ boolean, nọmba, okun, ati ipade. Iwọnyi jẹ awọn iru data XPath pataki. Ati bi o ṣe le fojuinu, pupọ julọ awọn iṣẹ wọnyi le ṣee lo lori awọn iru data ti kii ṣe awọn apa DOM. Fun apẹẹrẹ, okun-lẹhin ti o gba okun bi a ti bo tẹlẹ, ṣugbọn o le jẹ okun lati ẹya href kan. O tun le kan jẹ okun:
const testSubstringAfter = document.queryXPaths("substring-after('hello world','')");
O han ni, apẹẹrẹ yii yoo fun wa ni akojọpọ awọn abajade bi [“aye”]. Lati ṣafihan eyi ni iṣe, Mo ti ṣe oju-iwe demo kan nipa lilo awọn iṣẹ lodi si awọn ohun ti kii ṣe awọn apa DOM: Wo Pen queryXPath [forked] nipasẹ Bryan Rasmussen. O yẹ ki o ṣe akiyesi abala iyalẹnu ti iṣẹ itumọ, eyiti o jẹ pe ti o ba ni ohun kikọ kan ninu ariyanjiyan keji (ie, atokọ ti awọn kikọ ti o fẹ tumọ) ati pe ko si ohun kikọ ti o baamu lati tumọ si, ohun kikọ naa yoo yọ kuro ninu iṣelọpọ. Nitorinaa, eyi:
translate('Hello, Oruko Mi ni Inigo Montoya, o pa baba mi, mura lati ku','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
…awọn esi ninu okun, pẹlu awọn alafo: ["****]
Eyi tumọ si pe lẹta “a” ti wa ni itumọ si aami akiyesi (*), ṣugbọn gbogbo ohun kikọ miiran ti ko ni itumọ ti a fun ni okun ibi-afẹde ni a yọkuro patapata. Aaye funfun ni gbogbo ohun ti a ti kùlaarin awọn ohun kikọ “a” ti a tumọ. Lẹhinna lẹẹkansi, ibeere yii:
translate('Hello, Oruko Mi ni Inigo Montoya, o pa baba mi, mura lati ku','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','******************************************)))
ko ni iṣoro naa o si ṣe abajade abajade ti o dabi eyi:
"***** ** **** ** ***** ******* *** ****** ** ****** ******* ** ***
O le kọlu ọ pe ko si ọna ti o rọrun ni JavaScript lati ṣe deede ohun ti iṣẹ itumọ XPath ṣe, botilẹjẹpe fun ọpọlọpọ awọn ọran lilo, rọpoGbogbo pẹlu awọn ikosile deede le mu. O le lo ọna kanna ti Mo ti ṣafihan, ṣugbọn iyẹn jẹ aipe ti gbogbo nkan ti o fẹ ni lati tumọ awọn gbolohun ọrọ naa. demo ti o tẹle yii ṣe ipari iṣẹ itumọ XPath lati pese ẹya JavaScript kan: Wo iṣẹ itumọ Pen [forked] nipasẹ Bryan Rasmussen. Nibo ni o le lo iru nkan bayi? Wo fifi ẹnọ kọ nkan Kesari Cipher pẹlu aiṣedeede aaye mẹta (fun apẹẹrẹ, fifi ẹnọ kọ nkan oke-ti-ila lati 48 B.C.):
tumọ ("Kesari n gbero lati sọdá Rubicon!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
Ọrọ titẹ sii “Kesari n gbero lati sọdá Rubicon!” àbájáde ni “Zxbpxo fp mixkkfkd ql zolp qeb Oryfzlk!” Lati fun apẹẹrẹ iyara miiran ti awọn iṣeeṣe oriṣiriṣi, Mo ṣe iṣẹ irin kan ti o gba titẹ sii okun ati lilo iṣẹ itumọ lati da ọrọ pada, pẹlu gbogbo awọn kikọ ti o mu umlauts. Wo Pen irin iṣẹ [forked] nipa Bryan Rasmussen.
const irin = (str) => { da itumọ pada (str, "AOUaou", "ÄÖÜäöü"); }
Ati pe, ti o ba fun ni ọrọ naa “Awọn ofin Motley Crue, rọọkì lori awọn dudes!”, dapadabọ “Mötley Crüe rüles, röck ön düdes!” O han ni, ọkan le ni gbogbo iru awọn lilo parody ti iṣẹ yii. Ti iyẹn ba jẹ iwọ, lẹhinna nkan TVTropes yii yẹ lati fun ọ ni imisi pupọ. Lilo CSS Pẹlu XPath Ranti idi akọkọ wa fun lilo awọn yiyan CSS papọ pẹlu XPath: CSS loye pupọ kini kilasi kan jẹ, lakoko ti o dara julọ ti o le ṣe pẹlu XPath ni awọn afiwe okun ti ẹya kilasi. Iyẹn yoo ṣiṣẹ ni ọpọlọpọ awọn ọran. Ṣugbọn ti o ba wa ni ipo kan nibiti, sọ, ẹnikan ṣẹda awọn kilasi ti a npè ni .primaryLinks ati .primaryLinks2 ati pe o nlo XPath lati gba kilasi .primaryLinks, lẹhinna o ṣee ṣe ki o lọ sinu awọn iṣoro. Niwọn igba ti ko si ohun aimọgbọnwa bi iyẹn, o ṣee ṣe ki o lo XPath. Àmọ́ ó dùn mí láti ròyìn pé mo ti ṣiṣẹ́ láwọn ibi táwọn èèyàn ti ń ṣe irú àwọn nǹkan òmùgọ̀ yẹn. Eyi ni demo miiran nipa lilo CSS ati XPath papọ. O fihan ohun ti o ṣẹlẹ nigbati a ba lo koodu lati ṣiṣẹ XPath kan lori aaye ti o tọ ti kii ṣe oju-iwe ti iwe. Wo Pen css ati xpath papọ [forked] nipasẹ Bryan Rasmussen. Ibeere CSS naa jẹ .awọn nkan ti o jọmọ a, eyiti o fa awọn eroja meji wa ni div ti a yàn fun kilasi .relatedarticles. Lẹhin iyẹn ni awọn ibeere “buburu” mẹta, iyẹn ni lati sọ, awọn ibeere ti ko ṣe ohun ti a fẹ ki wọn ṣe nigbati wọn nṣiṣẹ pẹlu awọn eroja wọnyi bi oju-ọna ayika. Mo le ṣe alaye idi ti wọn fi n huwa yatọ ju ti o le nireti lọ. Awọn ibeere buburu mẹta ni ibeere ni:
// ọrọ (): Pada gbogbo ọrọ inu iwe. //a/text(): Pada gbogbo ọrọ inu awọn ọna asopọ ninu iwe naa. ./a/text(): Ko si esi pada.
Idi fun awọn abajade wọnyi ni pe lakoko ti ọrọ-ọrọ rẹ jẹ awọn eroja ti o pada lati ibeere CSS, // lọ lodi si gbogbo iwe. Eyi ni agbara XPath; CSS ko le lọ lati ipade kan si baba-nla ati lẹhinna si aburo ti baba-nla naa, ki o si rin sọkalẹ lọ si iru-ọmọ ti arakunrin naa. Ṣugbọn XPath le. Nibayi, ./ ibeere awọn ọmọ ti awọn ti isiyi ipade, ibi ti awọn aami (.) duro awọn ti isiyi ipade, ati awọn siwaju slash (/) duro lilọ si diẹ ninu awọn ọmọ ipade — boya o jẹ ẹya eroja, ano, tabi ọrọ ti wa ni ṣiṣe nipasẹ awọn nigbamii ti apa ti awọn ona. Ṣugbọn ko si ọmọ kan ti a yan nipasẹ ibeere CSS, nitorinaa ibeere naa ko da nkankan pada. Awọn ibeere to dara mẹta wa ninu demo ti o kẹhin yẹn:
.//ọrọ (), ./ọrọ (), normalize-space (./ọrọ ()).
Ibeere aaye deede ṣe afihan lilo iṣẹ XPath, ṣugbọn tun ṣe atunṣe iṣoro kan ti o wa ninu awọn ibeere miiran. HTML ti wa ni igbekale bi eleyi:
Ṣiṣẹda Idanwo Ẹya Rẹ Pẹlu Selenium WebDriver
Ibeere naa da ifunni laini pada ni ibẹrẹ ati opin ipade ọrọ,ati normalize-aaye yọ eyi kuro. Lilo eyikeyi iṣẹ XPath ti o da ohun miiran pada ju boolean kan pẹlu XPath titẹ sii kan si awọn iṣẹ miiran. demo atẹle yii fihan nọmba awọn apẹẹrẹ: Wo awọn apẹẹrẹ awọn iṣẹ Pen xpath [forked] nipasẹ Bryan Rasmussen. Apẹẹrẹ akọkọ fihan iṣoro kan ti o yẹ ki o ṣọra fun. Ni pato, koodu atẹle:
document.queryXPaths ("substring-lẹhin (//a/@href,'https: //')");
… dapada okun kan:
"www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/"
O jẹ oye, otun? Awọn iṣẹ wọnyi ko da awọn akojọpọ pada ṣugbọn dipo awọn gbolohun ọrọ kan tabi awọn nọmba ẹyọkan. Ṣiṣe iṣẹ naa nibikibi pẹlu awọn abajade pupọ nikan da esi akọkọ pada. Abajade keji fihan ohun ti a fẹ gaan:
document.queryCSSSelectors ("a") .queryXPaths ("substring-lẹhin (./@href,'https: //')");
Eyi ti o da ọpọlọpọ awọn okun meji pada:
["www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/", www.smashingmagazine.com/2022/11/automated-test-results-improve-accessibility/"]
Awọn iṣẹ XPath le jẹ itẹ-ẹiyẹ gẹgẹbi awọn iṣẹ ni JavaScript. Nitorinaa, ti a ba mọ eto URL Iwe irohin Smashing, a le ṣe atẹle yii (lilo awọn itumọ ọrọ gangan awoṣe jẹ iṣeduro): `tumọ okùn okun ( substring-lẹhin (./@href, 'www.smashingmagazine.com/') ,9), '/','')'
Eyi n ni idiju diẹ si iye ti o nilo awọn asọye ti n ṣalaye ohun ti o ṣe: mu gbogbo URL naa lati abuda href lẹhin www.smashingmagazine.com/, yọ awọn ohun kikọ mẹsan akọkọ kuro, lẹhinna tumọ ohun kikọ siwaju slash (/) si nkankan ki o le yọkuro slash ti o pari. Ilana Abajade:
["ẹya-igbeyewo-selenium-webdriver","aṣeyọri-idanwo-aṣeyọri-imudara-wiwọle"]
Diẹ sii Awọn ọran Lilo XPath XPath le tàn gaan ni idanwo. Idi naa ko nira lati rii, bi XPath ṣe le lo lati gba gbogbo nkan ni DOM, lati eyikeyi ipo ni DOM, lakoko ti CSS ko le. O ko le gbẹkẹle awọn kilasi CSS ti o wa ni ibamu ni ọpọlọpọ awọn ọna ṣiṣe kikọ ode oni, ṣugbọn pẹlu XPath, a ni anfani lati ṣe awọn ibaamu ti o lagbara diẹ sii bi ohun ti akoonu ọrọ ti eroja jẹ, laibikita ẹya iyipada DOM. Iwadi ti wa lori awọn ilana ti o gba ọ laaye lati ṣe awọn idanwo XPath resilient. Ko si ohun ti o buru ju nini awọn idanwo jade ki o kuna nitori pe oluyan CSS ko ṣiṣẹ mọ nitori ohun kan ti ni lorukọmii tabi yọkuro. XPath tun jẹ nla gaan ni isediwon olupilẹṣẹ lọpọlọpọ. Ọ̀nà tó ju ẹyọ kan lọ ló wà láti lo àwọn ìbéèrè XPath láti bá ohun kan mu. Bakan naa ni otitọ pẹlu CSS. Ṣugbọn awọn ibeere XPath le lu sinu awọn nkan ni ọna ifọkansi diẹ sii ti o fi opin si ohun ti o pada, gbigba ọ laaye lati wa ibaamu kan pato nibiti o le jẹ ọpọlọpọ awọn ere-kere ti o ṣeeṣe. Fun apẹẹrẹ, a le lo XPath lati pada sipo h2 kan pato ti o wa ninu div ti o tẹle div arakunrin kan lẹsẹkẹsẹ ti, lapapọ, ni eroja aworan ọmọ kan pẹlu ẹda data-testID = "olori" lori rẹ:
ma gba akọle yii
Maṣe gba akọle yii boya
Akọsori fun aworan adari
Eyi ni ibeere: document.queryXPaths (` //div[ tegbotaburo:: div[1] /img[@data-testID='olori'] ] /h2/ ọrọ() `);
Jẹ ki a ju sinu demo kan lati rii bii iyẹn ṣe pe gbogbo rẹ papọ: Wo Ibeere Pen Complex H2 [forked] nipasẹ Bryan Rasmussen. Nitorina, bẹẹni. Ọpọlọpọ awọn ọna ti o ṣee ṣe si eyikeyi nkan ninu idanwo kan nipa lilo XPath. XSLT 1.0 Idinku Mo mẹnuba ni kutukutu pe ẹgbẹ Chrome ngbero lori yiyọ atilẹyin XSLT 1.0 lati ẹrọ aṣawakiri naa. Iyẹn ṣe pataki nitori XSLT 1.0 nlo siseto idojukọ XML fun iyipada iwe, eyiti o da lori XPath 1.0, eyiti o jẹ ohun ti o rii ni ọpọlọpọ awọn aṣawakiri. Nigbati iyẹn ba ṣẹlẹ, a yoo padanu paati bọtini kan ti XPath. Ṣugbọn fun otitọ pe XPath jẹ nla gaan fun awọn idanwo kikọ, Mo rii pe ko ṣeeṣe pe XPath lapapọ yoo parẹ nigbakugba laipẹ. Iyẹn ti sọ, Mo ti ṣe akiyesi pe awọn eniyan nifẹ si ẹya kan nigbati o ba ya. Ati pe dajudaju iyẹn jẹ otitọ ninu ọran ti XSLT 1.0 ti a ti parẹ. Gbogbo ijiroro wa ti n ṣẹlẹ lori Awọn iroyin Hacker ti o kun fun awọn ariyanjiyan lodi si idinku. Ifiweranṣẹ funrararẹ jẹ apẹẹrẹ nla ti ṣiṣẹda ilana bulọọgi pẹlu XSLT. Iwọle ka ijiroro naa fun ara rẹ, ṣugbọn o wọle si bii JavaScript ṣe le ṣee lo bi shim fun XLST lati mu iru awọn ọran yẹn. Mo tun ti rii awọn imọran pe awọn aṣawakiri yẹ ki o lo SaxonJS, eyiti o jẹ ibudo si JavaScript Saxon XSLT, XQUERY, ati awọn ẹrọ XPath. Iyẹn jẹ imọran ti o nifẹ, paapaa bi Saxon-JS ṣe imuse ẹya lọwọlọwọ ti awọn pato wọnyi, lakoko ti ko si aṣawakiri ti o ṣe eyikeyi ẹya XPath tabi XSLT kọja 1.0, ati pe ko si ọkan ti o ṣe XQuery. Mo de Norm Tovey-Walsh ni Saxonica, ile-iṣẹ ti o wa lẹhin SaxonJS ati awọn ẹya miiran ti ẹrọ Saxon. O sọ pe: “Ti olutaja aṣawakiri eyikeyi ba nifẹ lati mu SaxonJS bi aaye ibẹrẹ fun sisọpọ awọn imọ-ẹrọ XML ode oni sinu ẹrọ aṣawakiri, a yoo ni inudidun lati jiroro pẹlu wọn.” Norm Tovey-Walsh
Ṣugbọn tun fi kun: "Emi yoo jẹ ohun iyanu ti ẹnikẹni ba ro pe gbigbe SaxonJS ni ọna ti o wa lọwọlọwọ ati sisọ sinu ẹrọ aṣawakiri ti ko yipada yoo jẹ ọna ti o dara julọ. Olutaja ẹrọ aṣawakiri kan, nipa iseda ti o daju pe wọn kọ ẹrọ aṣawakiri naa, le sunmọ iṣọkan ni ipele ti o jinlẹ ju ti a le 'lati ita'." Norm Tovey-Walsh.
O ṣe akiyesi pe awọn asọye Tovey-Walsh wa nipa ọsẹ kan ṣaaju ikede idinku XSLT. Ipari Mo le lọ siwaju ati siwaju. Ṣugbọn Mo nireti pe eyi ti ṣe afihan agbara XPath ati fun ọ ni ọpọlọpọ awọn apẹẹrẹ ti n ṣafihan bi o ṣe le lo fun iyọrisi awọn ohun nla. O jẹ apẹẹrẹ pipe ti imọ-ẹrọ agbalagba ninu akopọ ẹrọ aṣawakiri ti o tun ni ọpọlọpọ awọn iwulo loni, paapaa ti o ko ba mọ pe o wa tabi ko gbero lati de ọdọ rẹ. Siwaju kika
"Imudara Imudara ti Awọn Idanwo Wẹẹbu Aifọwọyi pẹlu Ede Adayeba” (ACM Digital Library) nipasẹ Maroun Ayli, Youssef Bakouny, Nader Jalloul, ati Rima KilanyNkan yii n pese ọpọlọpọ awọn apẹẹrẹ XPath fun kikọ awọn idanwo resilient. XPath (MDN) Eyi jẹ aye ti o dara julọ lati bẹrẹ ti o ba fẹ alaye imọ-ẹrọ ti n ṣalaye bi XPath ṣe n ṣiṣẹ. Ikẹkọ XPath (ZVON) Mo ti rii ikẹkọ yii lati jẹ iranlọwọ julọ ninu ẹkọ ti ara mi, o ṣeun si ọpọlọpọ awọn apẹẹrẹ ati awọn alaye ti o han gbangba. XPatherỌpa ibaraenisepo yii jẹ ki o ṣiṣẹ taara pẹlu koodu naa.
