Ես բավական երկար եմ եղել նախնական մշակման մեջ, որպեսզի տեսնեմ մի միտում տարիների ընթացքում. երիտասարդ ծրագրավորողներ աշխատում են ծրագրավորման նոր պարադիգմի հետ՝ չհասկանալով դրա պատմական համատեքստը: Ինչ-որ բան չիմանալը, իհարկե, միանգամայն հասկանալի է։ Համացանցը շատ մեծ տեղ է տարբեր հմտություններով և մասնագիտություններով, և մենք միշտ չէ, որ գիտենք այն, ինչ չգիտենք: Այս ոլորտում սովորելը ավելի շուտ շարունակական ճանապարհորդություն է, քան մի բան, որը տեղի է ունենում մեկ անգամ և ավարտվում: Օրինակ. Իմ թիմից ինչ-որ մեկը հարցրեց, թե արդյոք հնարավոր է պարզել, թե արդյոք օգտվողները հեռանում են UI-ի որոշակի ներդիրից: Ես մատնանշեցի JavaScript-ի նախքան բեռնաթափման իրադարձությունը: Բայց նրանք, ովքեր նախկինում զբաղվել են դրանով, գիտեն, որ դա հնարավոր է, քանի որ նրանք ստացել են զգուշացումներ այլ կայքերում չպահված տվյալների մասին, որոնց համար նախքան բեռնաթափումը սովորական օգտագործման դեպք է: Ես նաև մատնանշեցի էջի Թաքցնել և տեսանելիությունՓոխել իրադարձությունները իմ գործընկերոջը լավ չափելու համար: Ես որտեղի՞ց իմացա այդ մասին։ Որովհետև այն հայտնվեց մեկ այլ նախագծում, ոչ թե այն պատճառով, որ ես ուսումնասիրել էի այն, երբ սկզբում սովորում էի JavaScript-ը: Փաստն այն է, որ ժամանակակից ճակատային շրջանակները կանգնած են իրենց նախորդած տեխնոլոգիական հսկաների ուսերին: Նրանք վերացական են զարգացման պրակտիկաները, հաճախ ավելի լավ մշակողի փորձի համար, որը նվազեցնում կամ նույնիսկ վերացնում է իմանալու կամ շոշափելու անհրաժեշտությունը, որոնք ավանդաբար եղել են հիմնական հիմնական հասկացությունները, որոնք, հավանաբար, բոլորը պետք է իմանան: Դիտարկենք CSS օբյեկտի մոդելը (CSSOM): Դուք կարող եք ակնկալել, որ CSS-ում և JavaScript-ում աշխատող յուրաքանչյուր ոք ունի մի շարք գործնական CSSOM փորձ, բայց դա միշտ չէ, որ այդպես է լինելու: Կար React նախագիծ էլեկտրոնային առևտրի կայքի համար, որի վրա ես աշխատում էի, որտեղ մենք պետք է բեռնեինք ոճաթերթը ներկայումս ընտրված վճարային մատակարարի համար: Խնդիրն այն էր, որ ոճաթերթը բեռնվում էր յուրաքանչյուր էջում, երբ այն իսկապես անհրաժեշտ էր միայն կոնկրետ էջում: Մշակողը, ում հանձնարարված էր դա իրականացնել, երբևէ դինամիկ կերպով չէր բեռնել ոճի թերթիկը: Կրկին, սա լիովին հասկանալի է, երբ React-ը վերացնում է ավանդական մոտեցումը, որին կարող էիք դիմել: CSSOM-ը, հավանաբար, այն չէ, ինչ ձեզ հարկավոր է ձեր ամենօրյա աշխատանքում: Բայց, ամենայն հավանականությամբ, ձեզ հարկավոր կլինի ինչ-որ պահի շփվել դրա հետ, նույնիսկ միանվագ դեպքում: Այս փորձառությունները ինձ ոգեշնչեցին գրել այս հոդվածը: Բնության մեջ կան բազմաթիվ գոյություն ունեցող վեբ հնարավորություններ և տեխնոլոգիաներ, որոնց դուք երբեք չեք կարող ուղղակիորեն դիպչել ձեր ամենօրյա աշխատանքում: Հավանաբար, դուք բավականին նոր եք վեբ մշակման մեջ և պարզապես տեղյակ չեք դրանց մասին, քանի որ դուք թաթախված եք որոշակի շրջանակի վերացականության մեջ, որը ձեզանից չի պահանջում խորապես կամ նույնիսկ ընդհանրապես իմանալ այն: Ես կոնկրետ խոսում եմ XML-ի մասին, որը մեզանից շատերը գիտեն, որ հնագույն լեզու է, որը բացարձակապես չի տարբերվում HTML-ից: Ես դա բարձրացնում եմ WHATWG-ի վերջին քննարկումների պատճառով, որոնք առաջարկում են, որ XML փաթեթի մի զգալի մասը, որը հայտնի է որպես XSLT ծրագրավորում, պետք է հեռացվի բրաուզերներից: Սա հենց այն հին, գոյություն ունեցող տեխնոլոգիան է, որը մենք ունեցել ենք տարիներ շարունակ, որը կարող է օգտագործվել այնպիսի գործնական բանի համար, ինչպիսին CSSOM իրավիճակն էր, որում գտնվում էր իմ թիմը: Նախկինում աշխատե՞լ եք XSLT-ի հետ: Եկեք տեսնենք, թե արդյոք մենք մեծապես հենվում ենք այս հին տեխնոլոգիայի վրա և օգտագործում ենք դրա առանձնահատկությունները XML-ի համատեքստից դուրս՝ այսօր իրական աշխարհի խնդիրները լուծելու համար: XPath: Կենտրոնական API Ամենակարևոր XML տեխնոլոգիան, որը թերևս ամենաօգտակարն է ուղիղ XML հեռանկարից դուրս, XPath-ն է՝ հարցումների լեզուն, որը թույլ է տալիս գտնել ցանկացած հանգույց կամ հատկանիշ նշագծման ծառում՝ մեկ արմատային տարրով: Ես անձնական ջերմություն ունեմ XSLT-ի նկատմամբ, բայց դա նույնպես հիմնված է XPath-ի վրա, և անձնական սերը պետք է մի կողմ դրվի դասակարգման կարևորության մեջ: XSLT-ի հեռացման փաստարկը ոչ մի հիշատակում չի անում XPath-ի մասին, ուստի ենթադրում եմ, որ այն դեռ թույլատրելի է։ Դա լավ է, քանի որ XPath-ը կենտրոնական և ամենակարևոր API-ն է տեխնոլոգիաների այս փաթեթում, հատկապես երբ փորձում եք գտնել ինչ-որ բան օգտագործելու համար սովորական XML օգտագործումից դուրս: Դա կարևոր է, քանի որ չնայած CSS ընտրիչները կարող են օգտագործվել ձեր էջի տարրերի մեծ մասը գտնելու համար, նրանք չեն կարող գտնել դրանք բոլորը: Ավելին, CSS ընտրիչները չեն կարող օգտագործվել DOM-ում նրա ներկայիս դիրքի հիման վրա տարր գտնելու համար: XPath-ը կարող է. Այժմ ձեզանից ոմանք, ովքեր կարդում են սա, կարող են իմանալ XPath-ը, իսկ ոմանք՝ ոչ: XPath-ը տեխնոլոգիայի բավականին մեծ ոլորտ է, և ես իրականում չեմ կարող սովորեցնել բոլոր հիմունքները, ինչպես նաև ցույց տալ ձեզ դրա հետ կապված հետաքրքիր բաներ նման մեկ հոդվածում: Ես իրականում փորձեցի գրել այդ հոդվածը, բայց Smashing Magazine ամսագրի միջին հրապարակումը չի գերազանցում 5000 բառը: Ես արդեն ավելին էի2000 բառ, մինչդեռ հիմունքների կեսն է: Այսպիսով, ես կսկսեմ հետաքրքիր բաներ անել XPath-ի հետ և ձեզ մի քանի հղումներ կտամ, որոնք կարող եք օգտագործել հիմունքների համար, եթե ձեզ հետաքրքրի այս նյութը: Համատեղելով XPath-ը և CSS-ը XPath-ը կարող է անել շատ բաներ, որոնք չեն կարող անել CSS ընտրիչները տարրերի հարցումներ կատարելիս: Բայց CSS ընտրիչները կարող են նաև մի քանի բան անել, որոնք XPath-ը չի կարող, մասնավորապես՝ հարցումներ կատարել տարրերի դասի անունով:
CSS XPath .myClass /*[պարունակում է(@class, «myClass»)]
Այս օրինակում CSS հարցումների տարրերը, որոնք պարունակում են .myClass դասի անուն: Մինչդեռ XPath-ի օրինակը հարցումներ է կատարում տարրեր, որոնք պարունակում են հատկանիշի դաս «myClass» տողով: Այլ կերպ ասած, այն ընտրում է myClass ունեցող տարրեր ցանկացած հատկանիշում, ներառյալ տարրերը .myClass դասի անվանումով, ինչպես նաև տողի «myClass» ունեցող տարրեր, օրինակ՝ .myClass2: XPath-ն այդ առումով ավելի լայն է: Այսպիսով, ոչ: Ես չեմ առաջարկում, որ մենք պետք է դուրս գցենք CSS-ը և սկսենք ընտրել բոլոր տարրերը XPath-ի միջոցով: Բանը դա չէ: Բանն այն է, որ XPath-ը կարող է անել այնպիսի բաներ, որոնք CSS-ը չի կարող և դեռ կարող է շատ օգտակար լինել, թեև այն ավելի հին տեխնոլոգիա է բրաուզերի փաթեթում և կարող է առաջին հայացքից ակնհայտ չթվալ: Եկեք երկու տեխնոլոգիաները միասին օգտագործենք ոչ միայն այն պատճառով, որ մենք կարող ենք, այլ որովհետև գործընթացում ինչ-որ բան կսովորենք XPath-ի մասին՝ դարձնելով այն ևս մեկ գործիք ձեր փաթեթում. մեկը, որը դուք գուցե չգիտեիք, որ այնտեղ եղել է ամբողջ ժամանակ: Խնդիրն այն է, որ JavaScript-ի document.evaluate մեթոդը և հարցումների ընտրիչի տարբեր մեթոդները, որոնք մենք օգտագործում ենք CSS API-ների հետ JavaScript-ի համար, անհամատեղելի են: Ես ստեղծել եմ հարցումների համատեղելի API՝ մեզ սկսելու համար, չնայած, պետք է խոստովանել, որ ես դրա մասին շատ չեմ մտածել, քանի որ դա շեղում է այն ամենից, ինչ մենք անում ենք այստեղ: Ահա բազմակի օգտագործման հարցումների կառուցման բավականին պարզ աշխատանքային օրինակ. Տես գրիչի հարցումը XPath [forked] by Bryan Rasmussen: Ես փաստաթղթի օբյեկտի վրա ավելացրել եմ երկու մեթոդ՝ queryCSSSelectors (որը հիմնականում querySelectorAll է) և queryXPaths։ Այս երկուսն էլ վերադարձնում են queryResults օբյեկտ.
{ հարցման տեսակը՝ հանգույցներ | լարային | համարը | բուլյան, արդյունքներ՝ ցանկացած[] // html տարրեր, xml տարրեր, տողեր, թվեր, բուլյաններ, queryCSSS ընտրիչներ. (հարցում՝ տող, փոփոխել՝ բուլյան) => queryResults, queryXpaths. (հարցում` տող, փոփոխում` բուլյան) => queryResults }
QueryCSSSelectors և queryXpaths ֆունկցիաները գործարկում են հարցումը, որը դուք տալիս եք նրանց արդյունքների զանգվածի տարրերի վրա, քանի դեռ արդյունքների զանգվածը, իհարկե, տիպի հանգույցներից է: Հակառակ դեպքում, այն կվերադարձնի queryResult դատարկ զանգվածով և հանգույցների տեսակով: Եթե amend-ի հատկությունը սահմանված է true, ֆունկցիաները կփոխեն իրենց սեփական հարցման արդյունքները: Սա ոչ մի դեպքում չպետք է օգտագործվի արտադրական միջավայրում: Ես դա անում եմ այս կերպ զուտ ցույց տալու համար երկու հարցումների API-ները միասին օգտագործելու տարբեր ազդեցությունները: Հարցումների օրինակներ Ես ուզում եմ ցույց տալ տարբեր XPath հարցումների մի քանի օրինակներ, որոնք ցույց են տալիս որոշ հզոր բաներ, որոնք նրանք կարող են անել և ինչպես կարող են դրանք օգտագործվել այլ մոտեցումների փոխարեն: Առաջին օրինակը //li/text(): Սա հարցում է անում բոլոր li տարրերին և վերադարձնում նրանց տեքստային հանգույցները: Այսպիսով, եթե մենք հարցնենք հետևյալ HTML-ին.
- մեկ
- երկու
- երեք
…սա այն է, ինչ վերադարձվում է.
{"queryType":"xpathEvaluate", "results":["մեկ", "երկու", "երեք"],"resultType":"string"}
Այլ կերպ ասած, մենք ստանում ենք հետևյալ զանգվածը՝ [«մեկ», «երկու», «երեք»]։ Սովորաբար, դուք պետք է հարցումներ արեք, որպեսզի li տարրերը ստանան դա, այդ հարցման արդյունքը վերածեք զանգվածի, քարտեզագրեք զանգվածը և վերադարձնեք յուրաքանչյուր տարրի տեքստային հանգույցը: Բայց մենք կարող ենք դա անել ավելի հակիրճ XPath-ի հետ. document.queryXPaths("//li/text()").արդյունքներ:
Ուշադրություն դարձրեք, որ տեքստային հանգույց ստանալու միջոցը տեքստի () օգտագործումն է, որը նման է ֆունկցիայի ստորագրության, և դա այդպես է: Այն վերադարձնում է տարրի տեքստային հանգույցը: Մեր օրինակում նշագրման մեջ կան երեք li տարրեր, որոնցից յուրաքանչյուրը պարունակում է տեքստ («մեկ», «երկու» և «երեք»):
Դիտարկենք տեքստային () հարցման ևս մեկ օրինակ: Ենթադրենք, որ սա մեր նշումն է.
Եկեք գրենք հարցում, որը վերադարձնում է href հատկանիշի արժեքը. document.queryXPaths("//a[text() = 'Մուտք գործեք']/@href"). արդյունքներ:
Սա XPath հարցում է ընթացիկ փաստաթղթում, ինչպես վերջին օրինակը, բայց այս անգամ մենք վերադարձնում ենք հղումի href հատկանիշը (տարր), որը պարունակում է «Մուտք գործել» տեքստը: Փաստացի վերադարձավարդյունքը ["/login.html"] է: XPath գործառույթների ակնարկ Կան մի շարք XPath գործառույթներ, և դուք, հավանաբար, ծանոթ չեք դրանց: Կան մի քանիսը, կարծում եմ, որոնց մասին արժե իմանալ, ներառյալ հետևյալը.
starts-withԵթե տեքստը սկսվում է որոշակի այլ տեքստի օրինակով, starts-with(@href, 'http:') վերադարձնում է true, եթե href հատկանիշը սկսվում է http:-ով: containIf տեքստը պարունակում է որոշակի այլ տեքստի օրինակ, contain(text(), «Smashing Magazine») վերադարձնում է true, եթե տեքստային հանգույցը պարունակում է «Smashing Magazine» բառերը ցանկացած վայրում: count Վերադարձնում է հարցումը, թե քանի համընկնում կա: Օրինակ, count(//*[starts-with(@href, 'http:'])-ը վերադարձնում է այն քանակությունը, թե քանի հղում է համատեքստի հանգույցում ունի href հատկանիշով տարրեր, որոնք պարունակում են http:-ով սկսվող տեքստը: substring Աշխատում է JavaScript-ի ենթատողի պես, բացառությամբ, որ դուք փոխանցում եք տողը որպես արգումենտ: Օրինակ, substring ("my text", 2, 4) վերադարձնում է "y t": substring-beforeՎերադարձնում է տողի մասը մեկ այլ տողի առաջ: Օրինակ, substing-before("my text", " ") վերադարձնում է "my": Նմանապես, substring-before("hi","bye") վերադարձնում է դատարկ տող: substring-afterՎերադարձնում է տողի մի մասը մյուս տողի հետևից: Օրինակ, substing-after("my text", " ") վերադարձնում է "text": Նմանապես, substring-after("hi","bye") վերադարձնում է դատարկ տող: normalize-space Վերադարձնում է արգումենտի տողը բացատով, որը նորմալացված է՝ հեռացնելով առաջատար և հետին բացատները և փոխարինելով բացատների նիշերի հաջորդականությունը մեկ բացատով: notՎերադարձնում է բուլյան ճշմարիտ, եթե արգումենտը կեղծ է, հակառակ դեպքում՝ կեղծ: true Վերադարձնում է բուլյան ճշմարիտ: false Վերադարձնում է բուլյան կեղծ: concat Նույն բանը, ինչ JavaScript concat-ը, բացառությամբ, որ դուք չեք գործարկում այն որպես մեթոդ տողի վրա: Փոխարենը, դուք դնում եք բոլոր տողերը, որոնք ցանկանում եք միացնել: string-lengthՍա նույնը չէ, ինչ JavaScript-ի տողի երկարությունը, այլ վերադարձնում է տողի երկարությունը, որը տրված է որպես արգումենտ: translateThis վերցնում է տող և փոխում երկրորդ արգումենտը երրորդ արգումենտի: Օրինակ, translate ("abcdef", "abc", "XYZ") ելքեր XYZdef:
Բացի XPath-ի այս հատուկ գործառույթներից, կան մի շարք այլ գործառույթներ, որոնք աշխատում են ճիշտ այնպես, ինչպես JavaScript-ի իրենց գործընկերները կամ հիմնականում ցանկացած ծրագրավորման լեզվի նմանակները, որոնք, հավանաբար, նույնպես օգտակար կլինեն, ինչպիսիք են հատակը, առաստաղը, կլորը, գումարը և այլն: Հետևյալ ցուցադրությունը ցույց է տալիս այս գործառույթներից յուրաքանչյուրը. Տես գրիչ XPath թվային ֆունկցիաները [forked] by Bryan Rasmussen: Նկատի ունեցեք, որ, ինչպես լարային մանիպուլյացիայի գործառույթների մեծ մասը, թվայիններից շատերն ընդունում են մեկ մուտք: Սա, իհարկե, այն պատճառով, որ դրանք պետք է օգտագործվեն հարցումների համար, ինչպես վերջին XPath օրինակում. //li[floor(text()) > 250]/@val
Եթե դրանք օգտագործեք, ինչպես օրինակների մեծ մասը, դուք կգործարկեք այն առաջին հանգույցի վրա, որը համապատասխանում է ճանապարհին: Կան նաև տիպի փոխակերպման որոշ գործառույթներ, որոնցից, հավանաբար, պետք է խուսափեք, քանի որ JavaScript-ն արդեն ունի իր տեսակի փոխակերպման խնդիրները: Բայց կարող են լինել դեպքեր, երբ դուք ցանկանում եք փոխարկել տողը թվի, որպեսզի այն ստուգեք այլ թվի հետ: Գործառույթները, որոնք սահմանում են ինչ-որ բանի տեսակը, դրանք են բուլյան, համարը, տողը և հանգույցը: Սրանք կարևոր XPath տվյալների տեսակներն են: Եվ ինչպես կարող եք պատկերացնել, այս գործառույթների մեծ մասը կարող է օգտագործվել տվյալների տեսակների վրա, որոնք DOM հանգույցներ չեն: Օրինակ, substring-after-ը վերցնում է տող, ինչպես մենք արդեն անդրադարձել ենք, բայց դա կարող է լինել href հատկանիշի տողը: Այն կարող է նաև լինել պարզապես տող.
const testSubstringAfter = document.queryXPaths("substring-after('բարև աշխարհ',' ')");
Ակնհայտ է, որ այս օրինակը մեզ կվերադարձնի արդյունքների զանգվածը որպես [«աշխարհ»]: Դա իրականում ցույց տալու համար ես ստեղծել եմ ցուցադրական էջ՝ օգտագործելով գործառույթներ այն բաների դեմ, որոնք DOM հանգույցներ չեն. Տես գրիչի հարցումը XPath [forked] by Bryan Rasmussen: Դուք պետք է նշեք թարգմանության ֆունկցիայի զարմանալի կողմը, այն է, որ եթե դուք ունեք նիշ երկրորդ արգումենտում (այսինքն՝ նիշերի ցանկը, որոնց ցանկանում եք թարգմանել) և չկա համապատասխանող նիշ, որին պետք է թարգմանել, այդ նիշը կհեռացվի ելքից: Այսպիսով, սա.
թարգմանել ('Բարև, իմ անունը Ինիգո Մոնտոյա է, դու սպանեցիր իմ հորը, պատրաստվիր մեռնելու','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
…արդյունքները տողում, ներառյալ բացատները. [" * * ** "]
Սա նշանակում է, որ «a» տառը թարգմանվում է աստղանիշով (*), բայց ցանկացած այլ նիշ, որը չունի թարգմանություն՝ տրված թիրախային տողով, ամբողջությամբ հեռացվում է: Մեզ մնացել է բացատըթարգմանված «a» նիշերի միջև։ Հետո նորից այս հարցումը.
translate('Բարև, իմ անունը Ինիգո Մոնտոյա է, դու սպանեցիր իմ հորը, պատրաստվիր մեռնելու','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','***********************************************')")
…խնդիրը չունի և արդյունք է տալիս, որն ունի հետևյալ տեսքը.
«***** ** **** ** ***** ******** *** ***** ** ***** ******** ** ***»
Կարող է ձեզ ապշել, որ JavaScript-ում հեշտ ճանապարհ չկա անել հենց այն, ինչ անում է XPath translate ֆունկցիան, թեև շատ օգտագործման դեպքերում փոխարինել բոլորը կանոնավոր արտահայտություններով: Դուք կարող եք օգտագործել նույն մոտեցումը, որը ես ցույց տվեցի, բայց դա ոչ օպտիմալ է, եթե այն ամենը, ինչ ցանկանում եք թարգմանել տողերը: Հետևյալ ցուցադրումը պարուրում է XPath-ի թարգմանության գործառույթը՝ JavaScript-ի տարբերակ տրամադրելու համար. Տես Գրիչի թարգմանության գործառույթը [forked] Բրայան Ռասմուսենի կողմից: Որտեղ կարող եք օգտագործել նման բան: Դիտարկենք «Caesar Cipher»-ի գաղտնագրումը երեք տեղով օֆսեթով (օրինակ՝ ամենալավ գաղտնագրումը մ.թ.ա. 48-ից).
թարգմանել («Կեսարը պլանավորում է անցնել Ռուբիկոնը», «ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz», «XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw»)
Մուտքագրված տեքստը «Կեսարը պլանավորում է անցնել Ռուբիկոնը»: արդյունքները «Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!» Տարբեր հնարավորությունների ևս մեկ արագ օրինակ տալու համար ես պատրաստեցի մետաղական ֆունկցիա, որն ընդունում է լարային մուտքագրում և օգտագործում է թարգմանության ֆունկցիա՝ տեքստը վերադարձնելու համար, ներառյալ բոլոր նիշերը, որոնք ընդունում են umlauts: Տես Գրիչի մետաղական ֆունկցիան [պատառաքաղված] Բրայան Ռասմուսենի կողմից:
const metal = (str) => { վերադարձ թարգմանել (փող, «AOUaou», «ÄÖÜäöü»); }
Եվ եթե տրվի «Motley Crue rules, rock on dudes!» տեքստը, կվերադարձնի «Mötley Crüe rüles, röck ön düdes!»: Ակնհայտ է, որ կարելի է ունենալ այս ֆունկցիայի բոլոր տեսակի պարոդիկ օգտագործումը: Եթե դա դուք եք, ապա այս TVTropes հոդվածը պետք է ձեզ շատ ոգեշնչում տա: Օգտագործելով CSS XPath-ով Հիշեք մեր հիմնական պատճառը՝ օգտագործելու CSS ընտրիչները XPath-ի հետ միասին. CSS-ը բավականին հասկանում է, թե ինչ է դասը, մինչդեռ լավագույնը, որ կարող եք անել XPath-ի հետ, դասի հատկանիշի տողերի համեմատությունն է: Դա շատ դեպքերում կաշխատի: Բայց եթե դուք երբևէ հանդիպեիք մի իրավիճակի, երբ, ասենք, ինչ-որ մեկը ստեղծեր դասեր .primaryLinks և .primaryLinks2 անուններով, և դուք օգտագործեիք XPath-ը .primaryLinks դասը ստանալու համար, ապա, հավանաբար, խնդիրներ կունենաք: Քանի դեռ նման հիմար բան չկա, դուք հավանաբար կօգտագործեիք XPath-ը: Բայց ես ցավով եմ հայտնում, որ ես աշխատել եմ այնպիսի վայրերում, որտեղ մարդիկ նման հիմար բաներ են անում: Ահա ևս մեկ ցուցադրություն՝ օգտագործելով CSS-ը և XPath-ը միասին: Այն ցույց է տալիս, թե ինչ է տեղի ունենում, երբ մենք օգտագործում ենք կոդը՝ XPath-ը գործարկելու համար կոնտեքստային հանգույցի վրա, որը փաստաթղթի հանգույց չէ: Տես գրիչը css և xpath միասին [forked] Բրայան Ռասմուսենի կողմից: CSS հարցումը .relatedarticles a է, որը վերցնում է երկու a տարրերը div-ում, որը հատկացված է .relatedarticles դասին: Դրանից հետո երեք «վատ» հարցումներ են, այսինքն՝ հարցումներ, որոնք չեն անում այն, ինչ մենք ուզում ենք, երբ աշխատում են այս տարրերով որպես համատեքստի հանգույց: Ես կարող եմ բացատրել, թե ինչու են նրանք այլ կերպ վարվում, քան դուք կարող եք ակնկալել: Քննարկվող երեք վատ հարցումներն են.
//text(): Վերադարձնում է փաստաթղթի ողջ տեքստը: //a/text(): Վերադարձնում է փաստաթղթի հղումների ամբողջ տեքստը: ./a/text(): Ոչ մի արդյունք չի վերադարձնում:
Այս արդյունքների պատճառն այն է, որ չնայած ձեր համատեքստը CSS հարցումից վերադարձված տարր է, // հակասում է ամբողջ փաստաթղթին: Սա XPath-ի ուժն է. CSS-ը չի կարող հանգույցից անցնել նախնի, այնուհետև այդ նախնիի եղբորը կամ եղբորը, և քայլել դեպի այդ եղբոր կամ եղբոր հետնորդը: Բայց XPath-ը կարող է: Միևնույն ժամանակ, ./-ն հարցնում է ընթացիկ հանգույցի երեխաներին, որտեղ կետը (.) ներկայացնում է ընթացիկ հանգույցը, իսկ առաջ շեղը (/) ներկայացնում է գնում դեպի որևէ երեխա հանգույց. անկախ նրանից՝ դա հատկանիշ, տարր կամ տեքստ է, որը որոշվում է ուղու հաջորդ մասով: Բայց CSS հարցման կողմից ընտրված երեխա չկա, հետևաբար այդ հարցումը նույնպես ոչինչ չի վերադարձնում: Այս վերջին ցուցադրությունում կա երեք լավ հարցում.
.//տեքստ (), ./տեքստ (), normalize-space (./text()).
Normalize-space հարցումը ցույց է տալիս XPath ֆունկցիայի օգտագործումը, բայց նաև շտկում է մյուս հարցումներում ներառված խնդիրը: HTML-ը կառուցված է այսպես.
Ավտոմատացնել ձեր հնարավորությունների փորձարկումը Selenium WebDriver-ով
Հարցումը վերադարձնում է տողերի հոսք տեքստային հանգույցի սկզբում և վերջում,և normalize-space-ը հեռացնում է սա: Ցանկացած XPath ֆունկցիայի օգտագործումը, որը վերադարձնում է որևէ այլ բան, քան բուլյան XPath մուտքագրմամբ, կիրառվում է այլ գործառույթների համար: Հետևյալ ցուցադրումը ցույց է տալիս մի շարք օրինակներ. Տես Գրիչի xpath ֆունկցիաների օրինակները [forked] Բրայան Ռասմուսենի կողմից: Առաջին օրինակը ցույց է տալիս մի խնդիր, որից պետք է ուշադրություն դարձնել: Մասնավորապես, հետևյալ կոդը.
document.queryXPaths ("substring-after(//a/@href,'https://')");
…վերադարձնում է մեկ տող՝
«www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/»
Դա իմաստ ունի, չէ՞: Այս ֆունկցիաները չեն վերադարձնում զանգվածներ, այլ միայն մեկ տողեր կամ առանձին թվեր: Ֆունկցիան ցանկացած վայրում մի քանի արդյունքներով գործարկելը վերադարձնում է միայն առաջին արդյունքը: Երկրորդ արդյունքը ցույց է տալիս, թե ինչ ենք մենք իրականում ուզում.
document.queryCSSSelectors("a").queryXPaths("substring-after(./@href,'https://')");
Որը վերադարձնում է երկու տողերի զանգված.
["www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/","www.smashingmagazine.com/2022/11/automated-test-results-improve-accessibility/"]
XPath գործառույթները կարող են տեղադրվել այնպես, ինչպես գործառույթները JavaScript-ում: Այսպիսով, եթե մենք գիտենք Smashing Magazine URL-ի կառուցվածքը, մենք կարող ենք անել հետևյալը (խորհուրդ է տրվում կաղապարի բառացի օգտագործումը). ՝ թարգմանել ( ենթատող ( substring-after (./@href, «www.smashingmagazine.com/») , 9), '/',')'
Սա մի փոքր չափազանց բարդ է դառնում այնքանով, որ կարիք ունի մեկնաբանությունների, որոնք նկարագրում են այն, ինչ անում է. վերցրեք ամբողջ URL-ը href հատկանիշից www.smashingmagazine.com/-ից հետո, հեռացրեք առաջին ինը նիշերը, այնուհետև թարգմանեք առաջ շեղ (/) նիշը ոչնչի, որպեսզի ձերբազատվեք վերջավոր առաջ կտրվածքից: Ստացված զանգվածը.
["feature-testing-selenium-webdriver","automated-test-results-improve-accessibility"]
XPath-ի օգտագործման ավելի շատ դեպքեր XPath-ը իսկապես կարող է փայլել թեստավորման մեջ: Պատճառը դժվար չէ հասկանալ, քանի որ XPath-ը կարող է օգտագործվել DOM-ում յուրաքանչյուր տարր ստանալու համար՝ DOM-ի ցանկացած դիրքից, մինչդեռ CSS-ը՝ ոչ: Դուք չեք կարող ակնկալել, որ CSS դասերը կմնան հետևողական շատ ժամանակակից կառուցման համակարգերում, սակայն XPath-ի միջոցով մենք կարող ենք ավելի ամուր համընկնել տարրի տեքստի բովանդակության հետ՝ անկախ DOM-ի փոփոխվող կառուցվածքից: Եղել են հետազոտություններ տեխնիկայի վերաբերյալ, որոնք թույլ են տալիս կատարել դիմացկուն XPath թեստեր: Ոչինչ ավելի վատ չէ, քան թեստերը փաթաթվել և ձախողվել միայն այն պատճառով, որ CSS ընտրիչն այլևս չի աշխատում, քանի որ ինչ-որ բան վերանվանվել կամ հեռացվել է: XPath-ը նաև իսկապես հիանալի է բազմակի տեղորոշիչի արդյունահանման համար: Տարրը համապատասխանեցնելու համար XPath հարցումներն օգտագործելու մեկից ավելի եղանակ կա: Նույնը վերաբերում է CSS-ին: Սակայն XPath հարցումները կարող են ավելի նպատակային կերպով ներթափանցել իրերի մեջ, որը սահմանափակում է վերադարձվողը, ինչը թույլ է տալիս գտնել որոշակի համընկնում, որտեղ կարող են լինել մի քանի հնարավոր համընկնումներ: Օրինակ, մենք կարող ենք օգտագործել XPath-ը՝ վերադարձնելու որոշակի h2 տարր, որը պարունակվում է div-ի ներսում, որն անմիջապես հետևում է եղբայրական div-ին, որն իր հերթին պարունակում է երեխայի պատկերի տարր՝ տվյալների testID=«առաջնորդ» հատկանիշով:
չհասկանաք այս վերնագիրը
Այս վերնագիրը նույնպես չհասկանաք
Առաջնորդի պատկերի վերնագիր
Սա է հարցումը. document.queryXPaths(` //div[ հետևյալ եղբայրը::div[1] /img[@data-testID='առաջնորդ'] ] /h2/ տեքստ () `);
Եկեք ցուցադրենք ցուցադրությունը՝ տեսնելու, թե ինչպես է այդ ամենը միավորվում. Տես գրիչի համալիր H2 հարցումը [forked] by Bryan Rasmussen: Այսպիսով, այո: XPath-ի միջոցով թեստի ցանկացած տարր տանող բազմաթիվ հնարավոր ուղիներ կան: XSLT 1.0 հնացում Ես սկզբում նշեցի, որ Chrome-ի թիմը նախատեսում է հեռացնել XSLT 1.0 աջակցությունը դիտարկիչից: Դա կարևոր է, քանի որ XSLT 1.0-ն օգտագործում է XML-ի վրա հիմնված ծրագրավորում՝ փաստաթղթերի փոխակերպման համար, որն իր հերթին հենվում է XPath 1.0-ի վրա, որը գտնվում է բրաուզերների մեծ մասում: Երբ դա տեղի ունենա, մենք կկորցնենք XPath-ի հիմնական բաղադրիչը: Բայց հաշվի առնելով այն փաստը, որ XPath-ը իսկապես հիանալի է թեստեր գրելու համար, ես քիչ հավանական եմ համարում, որ XPath-ն ամբողջությամբ անհետանա շուտով: Այսպես ասած, ես նկատել եմ, որ մարդիկ հետաքրքրվում են որևէ հատկանիշով, երբ այն հանվում է: Եվ դա, անշուշտ, ճիշտ է XSLT 1.0-ի հնացած դեպքում: Hacker News-ում մի ամբողջ քննարկում է տեղի ունենում, որը լցված է անվավեր ճանաչման դեմ փաստարկներով: Գրառումն ինքնին XSLT-ով բլոգային շրջանակ ստեղծելու հիանալի օրինակ է: Դուքկարող եք կարդալ քննարկումը ինքներդ ձեզ համար, բայց այն բացահայտում է, թե ինչպես կարող է JavaScript-ը օգտագործվել որպես XLST-ի՝ նման դեպքերը կարգավորելու համար: Ես նաև տեսել եմ առաջարկներ, որ բրաուզերները պետք է օգտագործեն SaxonJS, որը JavaScript-ի Saxon XSLT, XQUERY և XPath շարժիչների միացք է: Սա հետաքրքիր գաղափար է, հատկապես, քանի որ Saxon-JS-ն իրականացնում է այս բնութագրերի ընթացիկ տարբերակը, մինչդեռ չկա որևէ բրաուզեր, որն իրականացնում է XPath-ի կամ XSLT-ի որևէ տարբերակ 1.0-ից ավելի, և չկա որևէ մեկը, որն իրականացնում է XQuery: Ես դիմեցի Norm Tovey-Walsh-ին Saxonica-ում, SaxonJS-ի և Saxon շարժիչի այլ տարբերակների հետևում գտնվող ընկերությանը: Նա ասաց. «Եթե որևէ բրաուզերի վաճառող շահագրգռված լիներ SaxonJS-ին որպես ելակետ ընդունելու ժամանակակից XML տեխնոլոգիաները բրաուզերում ինտեգրելու համար, մենք ուրախ կլինենք քննարկել դա նրանց հետ»: - Նորմ Թովեյ-Ուոլշ:
Բայց նաև ավելացրեց. «Ես շատ կզարմանայի, եթե որևէ մեկը մտածեր, որ SaxonJS-ն իր ներկայիս ձևով վերցնելը և այն բրաուզերի անփոփոխ թողնելը կլինի իդեալական մոտեցում: Բրաուզերի վաճառողը, ըստ այն փաստի, որ նրանք կառուցում են զննարկիչը, կարող է ինտեգրմանը մոտենալ շատ ավելի խորը մակարդակով, քան մենք կարող ենք «դրսից»»: - Norm Tovey-Walsh:
Հարկ է նշել, որ Tovey-Walsh-ի մեկնաբանությունները հնչել են XSLT-ի չեղյալ հայտարարման հայտարարությունից մոտ մեկ շաբաթ առաջ: Եզրակացություն Ես կարող էի շարունակել ու շարունակել: Բայց ես հուսով եմ, որ սա ցույց է տվել XPath-ի ուժը և ձեզ տվել է բազմաթիվ օրինակներ, որոնք ցույց են տալիս, թե ինչպես օգտագործել այն մեծ բաների հասնելու համար: Դա բրաուզերի կույտում ավելի հին տեխնոլոգիայի կատարյալ օրինակ է, որն այսօր դեռ շատ օգտակար է, նույնիսկ եթե դուք երբեք չեք իմացել դրա գոյության մասին կամ երբեք չեք մտածել դրան հասնելու մասին: Հետագա ընթերցում
«Բնական լեզվով ավտոմատացված վեբ թեստերի ճկունության բարձրացում» (ACM թվային գրադարան) Մարուն Այլիի, Յուսեֆ Բակունիի, Նադեր Ջալուլի և Ռիմա Կիլանի Այս հոդվածը տալիս է XPath-ի բազմաթիվ օրինակներ առաձգական թեստեր գրելու համար: XPath (MDN) Սա հիանալի վայր է սկսելու համար, եթե ցանկանում եք տեխնիկական բացատրություն, որը մանրամասնում է, թե ինչպես է աշխատում XPath-ը: XPath Tutorial (ZVON) Ես գտա, որ այս ձեռնարկը ամենաօգտակարն է իմ սեփական ուսուցման մեջ՝ բազմաթիվ օրինակների և պարզ բացատրությունների շնորհիվ: XPatherԱյս ինտերակտիվ գործիքը թույլ է տալիս ուղղակիորեն աշխատել կոդի հետ:
