Би олон жилийн туршид шинэ чиг хандлагыг олж харахын тулд урд талын хөгжүүлэлтэд хангалттай удаан ажилласан: залуу хөгжүүлэгчид програмчлалын түүхэн нөхцөл байдлыг ойлгохгүйгээр програмчлалын шинэ парадигм дээр ажиллаж байна. Мэдээжийн хэрэг, ямар нэг зүйлийг мэдэхгүй байх нь ойлгомжтой. Вэб бол олон төрлийн ур чадвар, мэргэжилтэй маш том газар бөгөөд бид мэдэхгүй зүйлээ тэр бүр мэддэггүй. Энэ чиглэлээр суралцах нь нэг удаа болж, дуусдаг зүйл биш харин үргэлжилсэн аялал юм. Тохиолдол: Манай багийн хэн нэгэн хэрэглэгчид UI дээрх тодорхой табаас холдож байгаа эсэхийг мэдэх боломжтой эсэхийг асуусан. Би JavaScript-г буулгахаас өмнөх үйл явдлыг онцолсон. Гэхдээ үүнийг өмнө нь шийдэж байсан хүмүүс бусад сайтууд дээр хадгалагдаагүй өгөгдлийн талаар анхааруулга авсан тул үүнийг хийх боломжтой гэдгийг мэддэг бөгөөд үүнийг буулгахаас өмнө ашиглах нь ердийн тохиолдол юм. Би бас сайн хэмжүүр авахын тулд хуудасны нуугдмал болон харагдах байдлыг өөрчлөх үйл явдлуудыг хамтран ажиллагсаддаа зааж өгсөн. Би энэ талаар яаж мэдсэн юм бэ? Учир нь энэ нь би JavaScript-г анх сурч байхдаа судалж байснаас биш өөр төсөл дээр гарч ирсэн юм. Баримт нь орчин үеийн урд талын хүрээ нь тэднээс өмнөх технологийн аваргуудын мөрөн дээр зогсож байна. Эдгээр нь хөгжүүлэгчийн илүү сайн туршлагыг бүрдүүлдэг хийсвэр хөгжүүлэлтийн туршлагыг бий болгодог бөгөөд энэ нь хүн бүрийн мэдэж байх ёстой уламжлалт үндсэн ойлголтуудыг мэдэх, хөндөх хэрэгцээг багасгаж, бүр үгүй болгодог. CSS объектын загварыг (CSSOM) авч үзье. Та CSS болон JavaScript дээр ажилладаг хүн бүр CSSOM-ийн олон туршлага эзэмшсэн гэж найдаж болох ч энэ нь үргэлж тийм биш байх болно. Одоо сонгогдсон төлбөрийн үйлчилгээ үзүүлэгчийн загварын хүснэгтийг ачаалах шаардлагатай цахим худалдааны сайтын React төсөл байсан. Асуудал нь зөвхөн тодорхой хуудсанд шаардлагатай үед загварын хүснэгтийг хуудас бүр дээр ачаалж байсан явдал байв. Үүнийг хийх үүрэгтэй хөгжүүлэгч хэзээ ч загварын хүснэгтийг динамикаар ачаалж байгаагүй. Дахин хэлэхэд, React нь таны хүссэн уламжлалт арга барилыг хийсвэрээр авч үзвэл энэ нь бүрэн ойлгомжтой юм. CSSOM нь таны өдөр тутмын ажилд хэрэгтэй зүйл биш байх магадлалтай. Гэхдээ та хэзээ нэгэн цагт, тэр ч байтугай нэг удаагийн тохиолдолд ч гэсэн түүнтэй харилцах хэрэгтэй болно. Эдгээр туршлага надад энэ нийтлэлийг бичихэд урам зориг өгсөн. Зэрлэг байгальд байгаа олон вэб функцууд, технологиуд байдаг бөгөөд та өдөр тутмын ажилдаа хэзээ ч шууд хүрч чадахгүй. Магадгүй та вэб хөгжүүлэлтэд нэлээд шинэ хүн бөгөөд та үүнийг гүн гүнзгий, бүр огт мэдэхийг шаарддаггүй тодорхой хүрээний хийсвэрлэлд автсан тул тэдгээрийг мэдэхгүй байж магадгүй юм. Би XML-ийн талаар тусгайлан ярьж байна, бидний олонхи нь HTML хэлнээс огт өөр биш эртний хэл гэдгийг мэддэг. XSLT програмчлал гэж нэрлэгддэг XML стекийн нэлээд хэсгийг хөтчөөс устгах ёстой гэсэн сүүлийн үеийн WHATWG хэлэлцүүлгээс болж би үүнийг гаргаж ирж байна. Энэ бол яг л миний баг байсан 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 /*[ агуулсан(@анги, "миний анги")]
Энэ жишээнд CSS нь .myClass ангийн нэрийг агуулсан элементүүдээс асуудаг. Үүний зэрэгцээ, XPath жишээ нь "myClass" мөр бүхий атрибутын анги агуулсан элементүүдийг асууж байна. Өөрөөр хэлбэл, энэ нь .myClass ангийн нэр бүхий элементүүд болон .myClass2 зэрэг мөрөнд "myClass"-тай элементүүдийг оруулаад дурын атрибут дахь myClass-тай элементүүдийг сонгоно. XPath энэ утгаараа илүү өргөн хүрээтэй. Тэгэхээр, үгүй. Би CSS-ийг устгаад XPath-ээр дамжуулан бүх элементүүдийг сонгож эхлэх ёстой гэж би хэлэхгүй байна. Энэ нь гол зүйл биш юм. Хамгийн гол нь XPath нь хөтчийн стек дэх хуучирсан технологи бөгөөд эхлээд харахад тийм ч тодорхой биш мэт санагдаж болох ч CSS-ийн боломжгүй зүйлсийг хийж, маш их хэрэгтэй байж болох юм. Зөвхөн боломжтой учраас биш, харин XPath-ийн талаар ямар нэг зүйл сурч мэдэх тул энэ нь таны стек дэх өөр нэг хэрэгсэл болох тул та урьд өмнө хэзээ ч мэдэхгүй байж магадгүй гэсэн хоёр технологийг хамтдаа ашиглацгаая! Асуудал нь JavaScript-н document.evaluate арга болон бидний JavaScript-д зориулсан CSS API-д ашигладаг асуулга сонгогч янз бүрийн аргууд хоорондоо нийцэхгүй байгаа явдал юм. Биднийг эхлүүлэхийн тулд би тохирох хайлтын API-г хийсэн боловч энэ нь бидний энд хийж байгаа зүйлээс холдсон тул би энэ талаар нэг их бодсонгүй. Дахин ашиглах боломжтой асуулга үүсгэгчийн маш энгийн жишээ энд байна: Брайан Расмуссений бичсэн Pen queryXPath [салаатай]-г үзнэ үү. Би баримт бичгийн объект дээр хоёр аргыг нэмсэн: queryCSSSelectors (энэ нь үндсэндээ querySelectorAll) болон queryXPaths. Эдгээр хоёулаа queryResults объектыг буцаана:
{ queryType: зангилаа | мөр | тоо | логик, үр дүн: дурын[] // html элементүүд, xml элементүүд, мөрүүд, тоонууд, логикууд, queryCSSSelectors: (асуулга: мөр, засвар: boolean) => queryResults, queryXpaths: (асуулга: мөр, нэмэлт өөрчлөлт: boolean) => queryResults }
QueryCSSSelectors болон queryXpaths функцууд нь мэдээжийн хэрэг үр дүнгийн массив нь зангилаа төрлийн байвал таны өгсөн асуулгыг үр дүнгийн массивын элементүүд дээр ажиллуулдаг. Үгүй бол энэ нь хоосон массив болон зангилааны төрөл бүхий queryResult-г буцаана. Хэрэв засварлах шинж чанарыг үнэн гэж тохируулсан бол функцүүд өөрсдийн queryResults-ийг өөрчилнө. Ямар ч тохиолдолд үүнийг үйлдвэрлэлийн орчинд ашиглаж болохгүй. Хоёр хайлтын API-г хамтад нь ашиглах янз бүрийн үр нөлөөг харуулахын тулд би үүнийг хийж байна. Жишээ асуулга Би тэдний хийж чадах зарим хүчирхэг зүйлс болон тэдгээрийг бусад аргын оронд хэрхэн ашиглаж болохыг харуулсан өөр өөр XPath асуулгын цөөн хэдэн жишээг харуулахыг хүсч байна. Эхний жишээ нь //li/text(). Энэ нь бүх li элементүүдийг асууж, тэдгээрийн текстийн зангилааг буцаана. Тиймээс, хэрэв бид дараах HTML-г асуувал:
- нэг
- хоёр
- гурван
… Энэ бол буцаж ирсэн зүйл юм:
{"queryType":"xpathEvaluate","results":["нэг","хоёр","гурван"],"resultType":"string"}
Өөрөөр хэлбэл, бид дараах массивыг авна: ["нэг", "хоёр", "гурван"]. Ер нь та үүнийг авахын тулд li элементүүдээс асууж, уг асуулгын үр дүнг массив болгон хувиргаж, массивыг зураглаж, элемент бүрийн текстийн зангилааг буцаана. Гэхдээ бид үүнийг XPath-тай илүү товчоор хийж чадна: document.queryXPaths("//li/text()").үр дүн.
Текстийн зангилаа авах арга бол функцийн гарын үсэг шиг харагддаг text()-г ашиглах явдал гэдгийг анхаарна уу. Энэ нь элементийн текстийн зангилааг буцаана. Бидний жишээн дээр тэмдэглэгээнд гурван li элемент байгаа бөгөөд тус бүр нь текст агуулсан ("нэг", "хоёр", "гурван").
Текст() асуулгын өөр нэг жишээг харцгаая. Энэ бол бидний тэмдэглэгээ гэж бодъё:
href атрибутын утгыг буцаадаг асуулга бичье: document.queryXPaths("//a[text() = 'Нэвтрэх']/@href").үр дүн.
Энэ нь сүүлийн жишээ шиг одоогийн баримт бичиг дээрх XPath асуулга боловч энэ удаад бид "Нэвтрэх" текстийг агуулсан холбоосын (элемент) href шинж чанарыг буцаана. Бодит нь буцаж ирэвүр дүн нь ["/login.html"]. XPath функцуудын тойм XPath-ийн хэд хэдэн функц байдаг бөгөөд та тэдгээрийг мэдэхгүй байх магадлалтай. Миний бодлоор хэд хэдэн зүйлийг мэдэх нь зүйтэй бөгөөд үүнд дараахь зүйлс орно.
starts-withХэрэв текст нь өөр нэг текстийн жишээгээр эхэлсэн бол href шинж чанар http:-ээр эхэлсэн бол starts-with(@href, 'http:') нь үнэнийг буцаана. Хэрэв текст нь өөр тодорхой текстийн жишээг агуулж байвал, хэрэв текстийн зангилаа хаана ч байсан "Smashing Magazine" гэсэн үгсийг агуулж байвал (text(), "Smashing Magazine") үнэнийг буцаана. count Асуулгад хэдэн таарч байгаагийн тоог буцаана. Жишээлбэл, count(//*[starts-with(@href, 'http:']) нь контекст зангилааны хэдэн холбоос http:-ээр эхэлсэн текстийг агуулсан href шинж чанартай элементүүдтэй болохыг харуулна. 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", " ") нь "текст"-ийг буцаана. Үүний нэгэн адил substring-after("hi","bye") нь хоосон мөрийг буцаана. normalize-space Аргументын мөрийг эхний болон хойно байгаа хоосон зайг арилгаж, хоосон зайны тэмдэгтүүдийн дарааллыг нэг хоосон зайгаар солих замаар хэвийн болгосон хоосон зайтай аргументийн мөрийг буцаана. notАргумент худал бол логикийн үнэнийг буцаана, үгүй бол худал. true Боолийн үнэнийг буцаана. false Boolean худал буцаана. concat JavaScript concat-тай ижил зүйл, гэхдээ та үүнийг мөр дээр арга болгон ажиллуулдаггүй. Үүний оронд та холбохыг хүссэн бүх мөрийг оруулна. string-lengthЭнэ нь JavaScript-н мөрийн урттай адил биш, харин аргумент болгон өгсөн мөрийн уртыг буцаана. translateThis нь мөр авч, хоёр дахь аргументыг гурав дахь аргумент болгон өөрчилдөг. Жишээ нь translate("abcdef", "abc", "XYZ") нь XYZdef-ийг гаргана.
Эдгээр XPath функцүүдээс гадна JavaScript-н ижил төстэй буюу үндсэндээ ямар ч програмчлалын хэл дээрх ижил төстэй хэд хэдэн функцүүд байдаг бөгөөд тэдгээр нь шал, тааз, дугуй, нийлбэр гэх мэт танд хэрэгтэй байж магадгүй юм. Дараах демо нь эдгээр функц бүрийг харуулж байна: Брайан Расмуссений бичсэн Pen XPath тоон функцуудыг үзнэ үү. Ихэнх стринг боловсруулах функцүүдийн нэгэн адил олон тооны тоон функцууд нь нэг оролтыг авдаг гэдгийг анхаарна уу. Энэ нь мэдээжийн хэрэг, сүүлчийн XPath жишээн дээрх шиг тэдгээрийг асуулгад ашиглах ёстой учраас тэр юм: //li[шал(текст()) > 250]/@val
Хэрэв та эдгээрийг ашиглавал ихэнх жишээнүүдийн адил замд таарах эхний зангилаа дээр ажиллуулж дуусна. JavaScript-д төрөл хөрвүүлэх асуудал аль хэдийн байгаа тул та зайлсхийх ёстой зарим төрлийн хөрвүүлэх функцүүд байдаг. Гэхдээ та мөрийг өөр тоотой харьцуулахын тулд тоо руу хөрвүүлэхийг хүсэх тохиолдол гардаг. Аливаа зүйлийн төрлийг тохируулах функцууд нь логик, тоо, мөр, зангилаа юм. Эдгээр нь XPath-ийн чухал өгөгдлийн төрлүүд юм. Таны төсөөлж байгаачлан эдгээр функцүүдийн ихэнхийг DOM зангилаа биш өгөгдлийн төрөлд ашиглаж болно. Жишээ нь, substring-after нь бидний өмнө дурдсан шиг мөрийг авдаг, гэхдээ энэ нь href атрибутын мөр байж болно. Энэ нь бас зүгээр л мөр байж болно:
const testSubstringAfter = document.queryXPaths("substring-after('Сайн уу ертөнц',' ')");
Мэдээжийн хэрэг, энэ жишээ бидэнд үр дүнгийн массивыг ["дэлхий"] гэж буцааж өгөх болно. Үүнийг бодитоор харуулахын тулд би DOM зангилаа биш зүйлсийн эсрэг функцуудыг ашиглан демо хуудас хийсэн: Брайан Расмуссений бичсэн Pen queryXPath [салаатай]-г үзнэ үү. Орчуулах функцийн гайхалтай талыг та анхаарах хэрэгтэй бөгөөд хэрэв танд хоёрдахь аргумент дахь тэмдэгт (өөрөөр хэлбэл орчуулахыг хүссэн тэмдэгтүүдийн жагсаалт) байгаа бөгөөд орчуулах тохирох тэмдэгт байхгүй бол уг тэмдэгт гаралтаас хасагдах болно. Тиймээс энэ нь:
translate('Сайн уу, намайг Иниго Монтоя гэдэг, чи аавыг минь алсан, үхэхэд бэлдээрэй','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
… мөрийн үр дүн, түүний дотор хоосон зай: [" * * ** "]
Энэ нь "а" үсгийг одоор (*) руу орчуулж байгаа боловч зорилтот мөрөнд орчуулагдаагүй бусад тэмдэгт бүрийг устгасан гэсэн үг юм. Хоосон зай бол бидэнд үлдсэн зүйл юморчуулагдсан "а" тэмдэгтүүдийн хооронд. Дараа нь дахин энэ асуулга:
translate('Сайн уу, Намайг Иниго Монтоя гэдэг, чи аавыг минь алсан, үхэхэд бэлдээрэй','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','********************************************************)")
... асуудалгүй бөгөөд дараах үр дүнг гаргана:
"***** ** **** ** ***** ******* *** ****** ** ******** ******* ** ***"
JavaScript-д XPath орчуулах функцийг яг хийх хялбар арга байхгүй гэж та гайхаж магадгүй, гэхдээ олон тохиолдолд ердийн илэрхийллүүдээр бүх зүйлийг солих боломжтой. Та миний үзүүлсэн арга барилыг ашиглаж болно, гэхдээ хэрэв та мөрүүдийг орчуулахыг хүсч байвал энэ нь оновчтой биш юм. Дараах үзүүлэн нь JavaScript хувилбарыг өгөхийн тулд XPath-ийн орчуулгын функцийг багцалсан: Брайан Расмуссений үзэг орчуулах функцийг [салаатай] үзнэ үү. Та ийм зүйлийг хаана ашиглаж болох вэ? Гурван байрлалтай Цезарь шифрийн шифрлэлтийг авч үзье (жишээ нь, МЭӨ 48 оны хамгийн шилдэг шифрлэлт):
translate("Цезарь Рубиконыг гатлахаар төлөвлөж байна!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
Оруулсан текст "Цезарь Рубиконыг гатлахаар төлөвлөж байна!" үр дүнд нь "Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!" Төрөл бүрийн боломжуудын өөр нэг жишээг өгөхийн тулд би утсан оролтыг авч, текстийг буцаахын тулд орчуулах функцийг ашигладаг металл функц хийсэн, үүнд umlauts авсан бүх тэмдэгтүүд орно. Брайан Расмуссений бичсэн Pen металл функцийг [салаатай] үзнэ үү.
const metal = (str) => { буцаах translate(str, "AOUaou","ÄÖÜäöü"); }
Хэрэв "Motley Crue rule, rock on dudes!" гэсэн бичвэр өгвөл "Motley Crue rüles, röck on dudes!" Мэдээжийн хэрэг, хэн нэгэнд энэ функцийг элэглэх янз бүрийн хэрэглээ байж болох юм. Хэрэв энэ нь та мөн бол TVTropes-ийн энэхүү нийтлэл танд маш их урам зориг өгөх ёстой. XPath-тай CSS ашиглах CSS сонгогчийг XPath-тай хамт ашиглах гол шалтгааныг санаарай: CSS нь анги гэж юу байдгийг маш сайн ойлгодог бол XPath-тай таны хийж чадах хамгийн сайн зүйл бол классын шинж чанарын string харьцуулалт юм. Энэ нь ихэнх тохиолдолд ажиллах болно. Гэхдээ хэрэв та хэн нэгэн .primaryLinks болон .primaryLinks2 нэртэй анги үүсгэсэн, мөн та .primaryLinks ангийг авахын тулд XPath ашиглаж байсан нөхцөл байдалтай тулгарвал асуудалтай тулгарах магадлалтай. Ийм тэнэг зүйл байхгүй л бол та XPath ашиглах байх. Гэхдээ би ийм тэнэг зүйл хийдэг газар ажиллаж байсандаа харамсалтай байна. CSS болон XPath-ийг хамтад нь ашигладаг өөр нэг үзүүлбэр энд байна. Энэ нь бид баримтын зангилаа биш контекст зангилаа дээр XPath ажиллуулахын тулд кодыг ашиглахад юу болохыг харуулдаг. Брайан Расмуссений бичсэн Pen css болон xpath-ийг [салаатай] хамт үзнэ үү. CSS асуулга нь .relatedarticles a бөгөөд энэ нь .relatedarticles ангид хуваарилагдсан div доторх хоёр a элементийг татаж авдаг. Үүний дараа гурван "муу" асуулга, өөрөөр хэлбэл эдгээр элементүүдийг контекст зангилаа болгон ажиллуулахад бидний хүссэн зүйлийг хийхгүй асуулга байна. Тэд яагаад таны бодож байснаас өөрөөр аашлаад байгааг би тайлбарлаж чадна. Асуудалтай гурван муу асуултууд нь:
//text(): Баримт бичигт байгаа бүх текстийг буцаана. //a/text(): Баримт бичигт байгаа холбоосуудын доторх бүх текстийг буцаана. ./a/text(): Үр дүн гарахгүй.
Эдгээр үр дүнгийн шалтгаан нь таны контекст нь CSS асуулгаас буцаасан элементүүд боловч // бүх баримт бичигтэй зөрчилддөг. Энэ бол XPath-ийн хүч юм; CSS нь зангилаанаас өвөг дээдэс рүү, дараа нь тэр өвөг дээдсийн ах эгч рүү явж, тэр эгчийнхээ удам руу явж чадахгүй. Гэхдээ XPath чадна. Үүний зэрэгцээ, ./ нь одоогийн зангилааны хүүхдүүдээс асуудаг бөгөөд цэг (.) нь одоогийн зангилаа, налуу зураас (/) нь зарим хүүхэд зангилаа руу шилжихийг илэрхийлдэг - энэ нь шинж чанар, элемент эсвэл текст мөн эсэх нь замын дараагийн хэсгээс тодорхойлогддог. Гэхдээ CSS асуулгад сонгосон элемент байхгүй тул уг асуулга нь юу ч буцаадаггүй. Сүүлийн үзүүлбэрт гурван сайн асуулт байна:
.//текст(), ./текст(), normalize-space(./text()).
Normalize-space асуулга нь XPath функцийн хэрэглээг харуулдаг боловч бусад асуулгад багтсан асуудлыг засдаг. HTML нь дараах бүтэцтэй байна:
Selenium WebDriver ашиглан өөрийн онцлог шинж чанарыг автоматжуулах
Асуулга нь текстийн зангилааны эхэн ба төгсгөлд мөрийн тэжээлийг буцаана.болон normalize-space нь үүнийг арилгадаг. XPath оролттой логикоос өөр зүйлийг буцаадаг XPath функцийг ашиглах нь бусад функцэд хамаарна. Дараах демо нь хэд хэдэн жишээг харуулж байна: Брайан Расмуссений бичсэн Pen xpath функцуудын жишээг үзнэ үү. Эхний жишээ нь таны анхаарах ёстой асуудлыг харуулж байна. Тодруулбал, дараах код:
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-ийн бүтцийг мэддэг бол бид дараахь зүйлийг хийж болно (загвар текстийг ашиглахыг зөвлөж байна): `орчуулах( дэд мөр( дэд тэмдэгтийн дараа(./@href, 'www.smashingmagazine.com/') ,9), '/','')`
Энэ нь юу хийдгийг тайлбарлах тайлбар хийх шаардлагатай тул арай дэндүү төвөгтэй болж байна: www.smashingmagazine.com/-ын дараах href шинж чанараас URL-г бүгдийг нь авч, эхний есөн тэмдэгтийг хасаад, дараа нь налуу зураас (/) тэмдэгтийг юу ч болгон орчуулж, төгсгөлийн налуу зураасыг арилгах хэрэгтэй. Үүссэн массив:
["онцлогын-туршилтын-селений-вэб драйвер","автоматжуулсан-туршилтын-үр дүн-хүртээмжийг сайжруулах"]
XPath ашиглах бусад тохиолдлууд XPath туршилтанд үнэхээр гялалздаг. Учир нь XPath-ыг DOM-ын аль ч байрлалаас DOM-ийн элемент бүрийг авах боломжтой, харин CSS-ээр авах боломжгүй тул шалтгааныг харахад хэцүү биш юм. Та орчин үеийн олон бүтээх системд CSS ангиуд тогтвортой хэвээр байгаа гэдэгт найдаж болохгүй, гэхдээ XPath-ийн тусламжтайгаар бид өөрчлөгдөж буй DOM бүтэцээс үл хамааран элементийн текстийн агуулга ямар байхыг илүү баттай тааруулах боломжтой. Танд тэсвэртэй XPath тест хийх боломжийг олгодог техникүүдийн талаар судалгаа хийсэн. Ямар нэг зүйлийн нэрийг өөрчилсөн эсвэл устгаснаас болж CSS сонгогч ажиллахаа больсон учраас тестүүд хагарч, бүтэлгүйтэх шиг муу зүйл байхгүй. XPath нь олон байршил тогтоогч олборлолтод үнэхээр гайхалтай юм. Элементтэй тааруулахын тулд XPath асуулга ашиглах нэгээс олон арга бий. CSS-ийн хувьд ч мөн адил. Гэхдээ XPath асуулга нь буцаах зүйлийг хязгаарлах замаар аливаа зүйлийг илүү зорилтот аргаар өрөмдөж, хэд хэдэн таарах боломжтой тодорхой тохирохыг олох боломжийг танд олгоно. Жишээ нь, бид XPath-ыг ашиглан div дотор агуулагдах, дагах div-ийг шууд дагаж байгаа тодорхой h2 элементийг буцаах боломжтой бөгөөд энэ нь эргээд data-testID="leader" шинж чанар бүхий хүүхдийн зургийн элементийг агуулна.
энэ гарчиг бүү ав
Энэ гарчигийг бас битгий аваарай
Удирдагчийн зургийн толгой хэсэг
Энэ бол асуулга: document.queryXPaths(` //див[ дараах ах дүү ::div[1] /img[@data-testID='leader'] ] /h2/ текст() `);
Энэ бүхэн хэрхэн нэгдэж байгааг харахын тулд демо-г оруулцгаая: Брайан Расмуссений бичсэн Pen Complex H2 Query-г үзнэ үү. Тийм ээ. XPath ашиглан тестийн аль ч элемент рүү олон боломжит зам байдаг. XSLT 1.0 хуучирсан Chrome-ын баг XSLT 1.0-ийн дэмжлэгийг хөтчөөс устгахаар төлөвлөж байгаа талаар би дээр дурдсан. XSLT 1.0 нь баримт бичгийг хувиргахад XML төвлөрсөн програмчлалыг ашигладаг бөгөөд энэ нь эргээд ихэнх хөтөч дээр байдаг XPath 1.0 дээр тулгуурладаг тул энэ нь чухал юм. Ийм зүйл тохиолдвол бид XPath-ийн гол бүрэлдэхүүн хэсгийг алдах болно. Гэхдээ XPath нь тест бичихэд үнэхээр гайхалтай гэдгийг харгалзан үзвэл XPath бүхэлдээ удахгүй алга болно гэж би бодож байна. Ингэж хэлэхэд хүмүүс ямар нэг онцлог шинж чанарыг нь авч хаяхаар сонирхож байгааг би анзаарсан. XSLT 1.0 хуучирсан тохиолдолд энэ нь мэдээж үнэн юм. Хакерын мэдээнд хаагдсаны эсрэг аргументуудаар дүүрэн бүхэл бүтэн хэлэлцүүлэг өрнөж байна. Нийтлэл нь XSLT-тэй блог хөтлөх хүрээг бий болгох гайхалтай жишээ юм. ТаХэлэлцүүлгийг өөрөө уншиж болно, гэхдээ энэ нь JavaScript-ийг XLST-д ийм төрлийн тохиолдлуудыг шийдвэрлэхийн тулд хэрхэн ашиглаж болох талаар авч үзэх болно. Би хөтчүүд JavaScript-ийн Saxon XSLT, XQUERY, XPath хөдөлгүүрүүдийн порт болох SaxonJS-ийг ашиглах хэрэгтэй гэсэн зөвлөмжийг би бас харсан. Энэ бол сонирхолтой санаа, ялангуяа Saxon-JS эдгээр техникийн үзүүлэлтүүдийн одоогийн хувилбарыг хэрэгжүүлдэг бол XPath эсвэл XSLT-ийн 1.0-аас дээш хувилбарыг хэрэгжүүлдэг хөтөч байхгүй ба XQuery-г хэрэгжүүлдэггүй. Би SaxonJS болон Саксон хөдөлгүүрийн бусад хувилбаруудын ард ажилладаг Саксоника дахь Норм Товей-Вальштай холбоо барив. Тэрээр хэлэхдээ: "Хэрэв ямар нэгэн хөтөч үйлдвэрлэгч SaxonJS-ийг орчин үеийн XML технологийг хөтөчдөө нэгтгэх эхлэл болгон авахыг сонирхож байвал бид тэдэнтэй ярилцахдаа баяртай байх болно." - Норм Товей-Валш
Гэхдээ бас нэмж хэлэв: "Хэрэв хэн нэгэн нь SaxonJS-ийг одоогийн хэлбэрээр нь авч, хөтчийн бүтээгдхүүнд оруулахгүй байх нь хамгийн тохиромжтой арга гэж бодож байвал би маш их гайхах болно. Хөтөч үйлдвэрлэгч нь хөтчөө бүтээдэг байдгаараа бидний "гаднаас" интеграцид ойртож чадна." - Норм Товей-Валш
Товей-Уолшийн тайлбар нь XSLT-ийг цуцалсныг зарлахаас долоо хоногийн өмнө ирсэн гэдгийг тэмдэглэх нь зүйтэй. Дүгнэлт Би цааш нь үргэлжлүүлж болно. Гэхдээ энэ нь XPath-ийн хүчийг харуулж, агуу зүйлд хүрэхийн тулд үүнийг хэрхэн ашиглахыг харуулсан олон жишээг танд өгсөн гэж найдаж байна. Энэ бол хөтчийн стек дэх хуучин технологийн төгс жишээ бөгөөд та үүнийг хэзээ ч мэдэхгүй эсвэл хэзээ ч үүнийг ашиглах талаар бодож үзээгүй байсан ч өнөөг хүртэл маш их хэрэглүүртэй хэвээр байна. Цааш унших
Maroun Ayli, Youssef Bakouny, Nader Jalloul, Rima Kilany нарын "Байгалийн хэлээр автоматжуулсан вэб тестийн уян хатан чанарыг сайжруулах нь" (ACM дижитал номын сан) Энэ нийтлэлд уян хатан тест бичих XPath жишээг өгсөн болно. XPath (MDN) Хэрэв та XPath хэрхэн ажилладаг талаар техникийн тайлбар авахыг хүсвэл энэ нь эхлэхэд тохиромжтой газар юм. XPath заавар (ZVON) Би энэ заавар нь олон жишээ, тодорхой тайлбаруудын ачаар миний сурахад хамгийн хэрэгтэй зүйл болохыг олж мэдсэн. XPather Энэхүү интерактив хэрэгсэл нь танд кодтой шууд ажиллах боломжийг олгоно.
