Saya telah berada dalam pembangunan bahagian hadapan cukup lama untuk melihat trend selama ini: pembangun yang lebih muda bekerja dengan paradigma pengaturcaraan baharu tanpa memahami konteks sejarahnya. Sudah tentu, sangat difahami untuk tidak mengetahui sesuatu. Web ialah tempat yang sangat besar dengan set kemahiran dan kepakaran yang pelbagai, dan kami tidak selalu tahu perkara yang kami tidak tahu. Pembelajaran dalam bidang ini adalah perjalanan yang berterusan dan bukannya sesuatu yang berlaku sekali dan berakhir. Contoh kes: Seseorang dalam pasukan saya bertanya sama ada mungkin untuk mengetahui sama ada pengguna menavigasi keluar dari tab tertentu dalam UI. Saya menunjukkan acara sebelum pemuatan JavaScript. Tetapi mereka yang pernah menangani perkara ini sebelum ini tahu perkara ini mungkin berlaku kerana mereka telah menerima makluman tentang data yang tidak disimpan di tapak lain, yang mana sebelum pemuatan adalah kes penggunaan biasa. Saya juga menunjukkan acara pageHide dan visibilityChange kepada rakan sekerja saya untuk langkah yang baik. Bagaimana saya tahu tentang itu? Kerana ia muncul dalam projek lain, bukan kerana saya mempelajarinya semasa mula-mula mempelajari JavaScript. Hakikatnya ialah rangka kerja bahagian hadapan moden berdiri di atas bahu gergasi teknologi yang mendahului mereka. Ia merupakan amalan pembangunan abstrak, selalunya untuk pengalaman pembangun yang lebih baik yang mengurangkan, atau bahkan menghapuskan, keperluan untuk mengetahui atau menyentuh perkara yang secara tradisinya menjadi konsep bahagian hadapan yang penting yang mungkin semua orang perlu tahu. Pertimbangkan Model Objek CSS (CSSOM). Anda mungkin menjangkakan bahawa sesiapa yang bekerja dalam CSS dan JavaScript mempunyai banyak pengalaman CSSOM secara langsung, tetapi itu tidak selalu akan berlaku. Terdapat projek React untuk tapak e-dagang yang saya kerjakan di mana kami perlu memuatkan helaian gaya untuk penyedia pembayaran yang dipilih pada masa ini. Masalahnya ialah lembaran gaya dimuatkan pada setiap halaman apabila ia hanya benar-benar diperlukan pada halaman tertentu. Pembangun yang ditugaskan untuk melaksanakan perkara ini tidak pernah memuatkan lembaran gaya secara dinamik. Sekali lagi, ini benar-benar boleh difahami apabila React mengasingkan pendekatan tradisional yang mungkin anda capai. CSSOM mungkin bukan sesuatu yang anda perlukan dalam kerja harian anda. Tetapi kemungkinan besar anda perlu berinteraksi dengannya pada satu ketika, walaupun dalam keadaan sekali sahaja. Pengalaman ini memberi inspirasi kepada saya untuk menulis artikel ini. Terdapat banyak ciri dan teknologi web sedia ada di alam liar yang anda mungkin tidak pernah sentuh secara langsung dalam kerja seharian anda. Mungkin anda agak baru dalam pembangunan web dan langsung tidak menyedarinya kerana anda terjebak dalam abstraksi rangka kerja tertentu yang tidak memerlukan anda mengetahuinya secara mendalam, malah sama sekali. Saya bercakap secara khusus tentang XML, yang kebanyakan kita tahu adalah bahasa purba yang tidak sama sekali berbeza dengan HTML. Saya membawa perkara ini kerana perbincangan WHATWG baru-baru ini mencadangkan bahawa sebahagian besar timbunan XML yang dikenali sebagai pengaturcaraan XSLT harus dialih keluar daripada penyemak imbas. Ini betul-betul jenis teknologi yang lebih lama dan sedia ada yang kami miliki selama bertahun-tahun yang boleh digunakan untuk sesuatu yang praktikal seperti situasi CSSOM yang dialami oleh pasukan saya. Pernahkah anda bekerja dengan XSLT sebelum ini? Mari lihat jika kita sangat bergantung pada teknologi lama ini dan memanfaatkan cirinya di luar konteks XML untuk menangani masalah dunia sebenar hari ini. XPath: API Pusat Teknologi XML yang paling penting yang mungkin paling berguna di luar perspektif XML lurus ialah XPath, bahasa pertanyaan yang membolehkan anda mencari sebarang nod atau atribut dalam pepohon penanda dengan satu elemen akar. Saya mempunyai kasih sayang peribadi untuk XSLT, tetapi itu juga bergantung pada XPath, dan kasih sayang peribadi mesti diketepikan dalam kepentingan kedudukan. Hujah untuk mengalih keluar XSLT tidak menyebut XPath, jadi saya rasa ia masih dibenarkan. Itu bagus kerana XPath ialah API pusat dan paling penting dalam rangkaian teknologi ini, terutamanya apabila cuba mencari sesuatu untuk digunakan di luar penggunaan XML biasa. Ini penting kerana, walaupun pemilih CSS boleh digunakan untuk mencari kebanyakan elemen dalam halaman anda, mereka tidak dapat mencari kesemuanya. Tambahan pula, pemilih CSS tidak boleh digunakan untuk mencari elemen berdasarkan kedudukan semasanya dalam DOM. XPath boleh. Sekarang, sesetengah daripada anda yang membaca ini mungkin tahu XPath, dan ada yang mungkin tidak. XPath ialah bidang teknologi yang agak besar, dan saya tidak boleh benar-benar mengajar semua asas dan juga menunjukkan kepada anda perkara yang menarik untuk dilakukan dengannya dalam satu artikel seperti ini. Saya sebenarnya cuba menulis artikel itu, tetapi purata penerbitan Smashing Magazine tidak melebihi 5,000 patah perkataan. Saya sudah berada di lebih daripada2,000 patah perkataan manakala hanya separuh daripada asas. Jadi, saya akan mula melakukan perkara yang menarik dengan XPath dan memberi anda beberapa pautan yang boleh anda gunakan untuk asas jika anda mendapati perkara ini menarik. Menggabungkan XPath & CSS XPath boleh melakukan banyak perkara yang tidak boleh dilakukan oleh pemilih CSS semasa menanyakan elemen. Tetapi pemilih CSS juga boleh melakukan beberapa perkara yang XPath tidak boleh, iaitu elemen pertanyaan mengikut nama kelas.
CSS XPath .myClass /*[mengandungi(@class, "myClass")]
Dalam contoh ini, CSS menanyakan elemen yang mengandungi nama kelas .myClass. Sementara itu, contoh XPath menanyakan elemen yang mengandungi kelas atribut dengan rentetan "myClass". Dalam erti kata lain, ia memilih elemen dengan myClass dalam mana-mana atribut, termasuk elemen dengan nama kelas .myClass — serta elemen dengan "myClass" dalam rentetan, seperti .myClass2. XPath lebih luas dalam erti kata itu. Jadi, tidak. Saya tidak mencadangkan bahawa kita harus membuang CSS dan mula memilih semua elemen melalui XPath. Bukan itu maksudnya. Intinya ialah XPath boleh melakukan perkara yang CSS tidak boleh dan masih boleh menjadi sangat berguna, walaupun ia adalah teknologi lama dalam timbunan penyemak imbas dan mungkin tidak kelihatan jelas pada pandangan pertama. Mari kita gunakan kedua-dua teknologi itu bersama-sama bukan sahaja kerana kita boleh, tetapi kerana kita akan mempelajari sesuatu tentang XPath dalam proses, menjadikannya satu lagi alat dalam timbunan anda — satu yang anda mungkin tidak tahu telah wujud selama ini! Masalahnya ialah kaedah document.evaluate JavaScript dan pelbagai kaedah pemilih pertanyaan yang kami gunakan dengan API CSS untuk JavaScript tidak serasi. Saya telah membuat API pertanyaan yang serasi untuk memulakan kami, walaupun diakui, saya tidak banyak memikirkannya kerana ia bertolak dari apa yang kami lakukan di sini. Berikut ialah contoh kerja yang agak mudah bagi pembina pertanyaan boleh guna semula: Lihat Pen queryXPath [bercabang] oleh Bryan Rasmussen. Saya telah menambah dua kaedah pada objek dokumen: queryCSSSelectors (yang pada asasnya querySelectorAll) dan queryXPaths. Kedua-dua ini mengembalikan objek queryResults:
{ Jenis pertanyaan: nod | rentetan | nombor | boolean, keputusan: mana-mana [] // elemen html, elemen xml, rentetan, nombor, boolean, queryCSSSelectors: (query: string, meminda: boolean) => queryResults, queryXpaths: (query: string, meminda: boolean) => queryResults }
Fungsi queryCSSSelectors dan queryXpaths menjalankan pertanyaan yang anda berikan kepada mereka ke atas elemen dalam tatasusunan hasil, selagi tatasusunan hasil adalah daripada jenis nod, sudah tentu. Jika tidak, ia akan mengembalikan queryResult dengan tatasusunan kosong dan jenis nod. Jika sifat pindaan ditetapkan kepada benar, fungsi akan menukar hasil pertanyaan mereka sendiri. Dalam apa jua keadaan, ini tidak boleh digunakan dalam persekitaran pengeluaran. Saya melakukannya dengan cara ini semata-mata untuk menunjukkan pelbagai kesan menggunakan kedua-dua API pertanyaan bersama-sama. Contoh Pertanyaan Saya ingin menunjukkan beberapa contoh pertanyaan XPath berbeza yang menunjukkan beberapa perkara berkuasa yang boleh mereka lakukan dan cara ia boleh digunakan sebagai ganti pendekatan lain. Contoh pertama ialah //li/text(). Ini menanyakan semua elemen li dan mengembalikan nod teksnya. Jadi, jika kita ingin menanyakan HTML berikut:
- satu
- dua
- tiga
…inilah yang dikembalikan:
{"queryType":"xpathEvaluate","results":["one","two","three"],"resultType":"string"}
Dalam erti kata lain, kita mendapat tatasusunan berikut: ["satu","dua","tiga"]. Biasanya, anda akan menanyakan elemen li untuk mendapatkannya, menukar hasil pertanyaan itu menjadi tatasusunan, memetakan tatasusunan dan mengembalikan nod teks setiap elemen. Tetapi kita boleh melakukannya dengan lebih ringkas dengan XPath: document.queryXPaths("//li/text()").hasilnya.
Perhatikan bahawa cara untuk mendapatkan nod teks adalah dengan menggunakan text(), yang kelihatan seperti tandatangan fungsi — dan memang begitu. Ia mengembalikan nod teks sesuatu elemen. Dalam contoh kami, terdapat tiga elemen li dalam penanda, setiap satu mengandungi teks ("satu", "dua", dan "tiga").
Mari lihat satu lagi contoh pertanyaan text(). Anggap ini adalah markup kami:
Mari tulis pertanyaan yang mengembalikan nilai atribut href: document.queryXPaths("//a[text() = 'Log Masuk']/@href").hasilnya.
Ini ialah pertanyaan XPath pada dokumen semasa, sama seperti contoh terakhir, tetapi kali ini kami mengembalikan atribut href pautan (elemen) yang mengandungi teks "Log Masuk". Yang sebenar dikembalikanhasilnya ialah ["/login.html"]. Gambaran Keseluruhan Fungsi XPath Terdapat beberapa fungsi XPath, dan anda mungkin tidak biasa dengannya. Terdapat beberapa, saya fikir, yang patut diketahui, termasuk yang berikut:
bermula-denganJika teks bermula dengan contoh teks lain tertentu, bermula-dengan(@href, 'http:') mengembalikan benar jika atribut href bermula dengan http:. containsJika teks mengandungi contoh teks lain tertentu, contains(text(), "Smashing Magazine") mengembalikan benar jika nod teks mengandungi perkataan "Smashing Magazine" di dalamnya di mana-mana sahaja. countMengembalikan kiraan bilangan padanan yang terdapat pada pertanyaan. Contohnya, count(//*[starts-with(@href, 'http:']) mengembalikan kiraan bilangan pautan dalam nod konteks yang mempunyai elemen dengan atribut href yang mengandungi teks bermula dengan http:. substringWorks seperti substring JavaScript, kecuali anda lulus rentetan sebagai hujah. Sebagai contoh, substring("teks saya", 2, 4) mengembalikan "y t". substring-beforeMengembalikan bahagian rentetan sebelum rentetan lain. Sebagai contoh, substing-before("teks saya", " ") mengembalikan "saya". Begitu juga, substring-before("hai","bye") mengembalikan rentetan kosong. substring-afterMengembalikan bahagian rentetan selepas rentetan lain. Contohnya, substing-after("teks saya", " ") mengembalikan "teks". Begitu juga, substring-after("hai","bye") mengembalikan rentetan kosong. normalize-spaceMengembalikan rentetan hujah dengan ruang putih yang dinormalkan dengan menanggalkan ruang putih di hadapan dan di belakang dan menggantikan jujukan aksara ruang putih dengan satu ruang. notMengembalikan boolean benar jika hujah itu palsu, sebaliknya palsu. trueMengembalikan boolean true. falseMengembalikan boolean false. concatPerkara yang sama seperti JavaScript concat, kecuali anda tidak menjalankannya sebagai kaedah pada rentetan. Sebaliknya, anda memasukkan semua rentetan yang anda ingin gabungkan. panjang rentetanIni tidak sama dengan panjang rentetan JavaScript, sebaliknya mengembalikan panjang rentetan yang diberikan sebagai hujah. translateThis mengambil rentetan dan menukar argumen kedua kepada argumen ketiga. Contohnya, terjemah("abcdef", "abc", "XYZ") mengeluarkan XYZdef.
Selain daripada fungsi XPath tertentu ini, terdapat beberapa fungsi lain yang berfungsi sama seperti rakan JavaScript mereka — atau rakan sejawatannya dalam mana-mana bahasa pengaturcaraan pada asasnya — yang anda mungkin juga akan mendapati berguna, seperti lantai, siling, bulat, jumlah dan sebagainya. Demo berikut menggambarkan setiap fungsi ini: Lihat fungsi Pen XPath Numerical [bercabang] oleh Bryan Rasmussen. Ambil perhatian bahawa, seperti kebanyakan fungsi manipulasi rentetan, kebanyakan fungsi berangka mengambil satu input. Ini, sudah tentu, kerana ia sepatutnya digunakan untuk membuat pertanyaan, seperti dalam contoh XPath terakhir: //li[floor(text()) > 250]/@val
Jika anda menggunakannya, seperti kebanyakan contoh, anda akhirnya akan menjalankannya pada nod pertama yang sepadan dengan laluan. Terdapat juga beberapa fungsi penukaran jenis yang mungkin anda harus elakkan kerana JavaScript sudah mempunyai masalah penukaran jenisnya sendiri. Tetapi ada kalanya anda ingin menukar rentetan kepada nombor untuk menyemaknya dengan nombor lain. Fungsi yang menetapkan jenis sesuatu ialah boolean, nombor, rentetan dan nod. Ini ialah jenis data XPath yang penting. Dan seperti yang anda bayangkan, kebanyakan fungsi ini boleh digunakan pada jenis data yang bukan nod DOM. Sebagai contoh, substring-after mengambil rentetan seperti yang telah kami bincangkan, tetapi ia mungkin rentetan daripada atribut href. Ia juga boleh menjadi rentetan:
const testSubstringAfter = document.queryXPaths("substring-after('hello world',' ')");
Jelas sekali, contoh ini akan memberikan kami kembali tatasusunan hasil sebagai ["dunia"]. Untuk menunjukkan ini dalam tindakan, saya telah membuat halaman demo menggunakan fungsi terhadap perkara yang bukan nod DOM: Lihat Pen queryXPath [bercabang] oleh Bryan Rasmussen. Anda harus ambil perhatian aspek yang mengejutkan bagi fungsi terjemah, iaitu jika anda mempunyai aksara dalam hujah kedua (iaitu, senarai aksara yang anda mahu terjemah) dan tiada aksara yang sepadan untuk diterjemahkan, aksara itu akan dialih keluar daripada output. Oleh itu, ini:
terjemah('Hello, Nama Saya Inigo Montoya, awak bunuh ayah saya, bersedialah untuk mati','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
…hasil dalam rentetan, termasuk ruang: [" * * ** "]
Ini bermakna huruf “a” sedang diterjemahkan kepada asterisk (*), tetapi setiap aksara lain yang tidak mempunyai terjemahan memandangkan rentetan sasaran akan dialih keluar sepenuhnya. Ruang putih sahaja yang kita tinggalkanantara aksara "a" yang diterjemahkan. Kemudian sekali lagi, pertanyaan ini:
terjemah('Hello, Nama Saya Inigo Montoya, awak bunuh ayah saya, bersedialah untuk mati','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','******************************************************')")
…tidak mempunyai masalah dan mengeluarkan hasil yang kelihatan seperti ini:
"***** ** **** ** ***** ******* *** ****** ** ****** ******* ** ***"
Anda mungkin menyedari bahawa tiada cara mudah dalam JavaScript untuk melakukan apa yang dilakukan oleh fungsi terjemahan XPath, walaupun untuk banyak kes penggunaan, replaceAll dengan ungkapan biasa boleh mengendalikannya. Anda boleh menggunakan pendekatan yang sama yang telah saya tunjukkan, tetapi itu adalah suboptimum jika anda mahu menterjemah rentetan. Demo berikut membungkus fungsi terjemahan XPath untuk menyediakan versi JavaScript: Lihat fungsi terjemah Pen [bercabang] oleh Bryan Rasmussen. Di manakah anda boleh menggunakan sesuatu seperti ini? Pertimbangkan penyulitan Caesar Cipher dengan offset tiga tempat (cth., penyulitan teratas dari 48 B.C.):
translate("Caesar merancang untuk menyeberangi Rubicon!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
Teks input "Caesar merancang untuk menyeberangi Rubicon!" menghasilkan “Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!” Untuk memberikan satu lagi contoh pantas kemungkinan berbeza, saya membuat fungsi logam yang mengambil input rentetan dan menggunakan fungsi terjemah untuk mengembalikan teks, termasuk semua aksara yang mengambil umlaut. Lihat fungsi logam Pen [bercabang] oleh Bryan Rasmussen.
logam const = (str) => { return translate(str, "AOUaou","ÄÖÜäöü"); }
Dan, jika diberi teks "Peraturan Motley Crue, rock on dudes!", mengembalikan "Mötley Crüe rüles, röck ön düdes!" Jelas sekali, seseorang mungkin mempunyai pelbagai jenis penggunaan parodi bagi fungsi ini. Jika itu anda, maka artikel TVTropes ini sepatutnya memberi anda banyak inspirasi. Menggunakan CSS Dengan XPath Ingat sebab utama kami menggunakan pemilih CSS bersama-sama dengan XPath: CSS cukup memahami apa itu kelas, manakala yang terbaik yang boleh anda lakukan dengan XPath ialah perbandingan rentetan atribut kelas. Itu akan berfungsi dalam kebanyakan kes. Tetapi jika anda pernah menghadapi situasi di mana, katakan, seseorang mencipta kelas bernama .primaryLinks dan .primaryLinks2 dan anda menggunakan XPath untuk mendapatkan kelas .primaryLinks, maka anda mungkin akan menghadapi masalah. Selagi tiada perkara bodoh seperti itu, anda mungkin akan menggunakan XPath. Tetapi saya sedih untuk melaporkan bahawa saya telah bekerja di tempat di mana orang melakukan jenis perkara bodoh itu. Berikut ialah satu lagi demo menggunakan CSS dan XPath bersama-sama. Ia menunjukkan perkara yang berlaku apabila kami menggunakan kod untuk menjalankan XPath pada nod konteks yang bukan nod dokumen. Lihat Pen css dan xpath bersama-sama [bercabang] oleh Bryan Rasmussen. Pertanyaan CSS ialah .relatedarticles a, yang mengambil dua elemen a dalam div yang diberikan kelas .relatedarticles. Selepas itu ialah tiga pertanyaan "buruk", iaitu, pertanyaan yang tidak melakukan perkara yang kita mahu mereka lakukan apabila berjalan dengan elemen ini sebagai nod konteks. Saya boleh menerangkan sebab mereka berkelakuan berbeza daripada yang anda jangkakan. Tiga pertanyaan buruk yang dimaksudkan ialah:
//text(): Mengembalikan semua teks dalam dokumen. //a/text(): Mengembalikan semua teks di dalam pautan dalam dokumen. ./a/text(): Tidak mengembalikan hasil.
Sebab keputusan ini ialah walaupun konteks anda adalah elemen yang dikembalikan daripada pertanyaan CSS, // bertentangan dengan keseluruhan dokumen. Ini adalah kekuatan XPath; CSS tidak boleh pergi dari nod ke nenek moyang dan kemudian ke adik beradik moyang itu, dan berjalan ke keturunan adik beradik itu. Tetapi XPath boleh. Sementara itu, ./ menanyakan anak-anak nod semasa, dengan titik (.) mewakili nod semasa, dan garis miring ke hadapan (/) mewakili pergi ke beberapa nod kanak-kanak — sama ada ia atribut, elemen atau teks ditentukan oleh bahagian laluan seterusnya. Tetapi tidak ada anak elemen yang dipilih oleh pertanyaan CSS, oleh itu pertanyaan itu juga tidak mengembalikan apa-apa. Terdapat tiga pertanyaan yang baik dalam demo terakhir itu:
.//text(), ./text(), normalize-space(./text()).
Pertanyaan normalize-space menunjukkan penggunaan fungsi XPath, tetapi juga membetulkan masalah yang disertakan dalam pertanyaan lain. HTML berstruktur seperti ini:
Mengautomasikan Ujian Ciri Anda Dengan Selenium WebDriver
Pertanyaan mengembalikan suapan baris pada permulaan dan akhir nod teks,dan normalize-space mengalih keluar ini. Menggunakan mana-mana fungsi XPath yang mengembalikan sesuatu selain boolean dengan input XPath digunakan untuk fungsi lain. Demo berikut menunjukkan beberapa contoh: Lihat contoh fungsi Pen xpath [bercabang] oleh Bryan Rasmussen. Contoh pertama menunjukkan masalah yang perlu anda perhatikan. Secara khusus, kod berikut:
document.queryXPaths("substring-after(//a/@href,'https://')");
…mengembalikan satu rentetan:
"www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/"
Ia masuk akal, bukan? Fungsi ini tidak mengembalikan tatasusunan melainkan rentetan tunggal atau nombor tunggal. Menjalankan fungsi di mana-mana sahaja dengan berbilang hasil hanya mengembalikan hasil pertama. Keputusan kedua menunjukkan apa yang kita inginkan:
document.queryCSSSelectors("a").queryXPaths("substring-after(./@href,'https://')");
Yang mengembalikan tatasusunan dua rentetan:
["www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/","www.smashingmagazine.com/2022/11/automated-test-results-improve-accessibility/"]
Fungsi XPath boleh bersarang seperti fungsi dalam JavaScript. Jadi, jika kita mengetahui struktur URL Majalah Smashing, kita boleh melakukan perkara berikut (menggunakan literal templat disyorkan): `terjemah( subrentetan( substring-after(./@href, ‘www.smashingmagazine.com/') ,9), '/','')`
Ini menjadi terlalu rumit sehingga memerlukan ulasan yang menerangkan perkara yang dilakukan: ambil semua URL daripada atribut href selepas www.smashingmagazine.com/, alih keluar sembilan aksara pertama, kemudian terjemahkan aksara miring ke hadapan (/) kepada tiada apa-apa untuk menyingkirkan garis miring ke hadapan yang berakhir. Tatasusunan yang terhasil:
["feature-testing-selenium-webdriver","automated-test-results-improve-accessibility"]
Lebih Banyak Kes Penggunaan XPath XPath benar-benar boleh bersinar dalam ujian. Sebabnya tidak sukar untuk dilihat, kerana XPath boleh digunakan untuk mendapatkan setiap elemen dalam DOM, dari mana-mana kedudukan dalam DOM, sedangkan CSS tidak boleh. Anda tidak boleh mengharapkan kelas CSS kekal konsisten dalam banyak sistem binaan moden, tetapi dengan XPath, kami dapat membuat padanan yang lebih mantap tentang kandungan teks sesuatu elemen, tanpa mengira struktur DOM yang berubah. Terdapat penyelidikan mengenai teknik yang membolehkan anda membuat ujian XPath yang berdaya tahan. Tiada yang lebih buruk daripada ujian gagal dan gagal hanya kerana pemilih CSS tidak lagi berfungsi kerana sesuatu telah dinamakan semula atau dialih keluar. XPath juga sangat hebat dalam pengekstrakan berbilang pencari. Terdapat lebih daripada satu cara untuk menggunakan pertanyaan XPath untuk memadankan elemen. Perkara yang sama berlaku dengan CSS. Tetapi pertanyaan XPath boleh menelusuri perkara dengan cara yang lebih disasarkan yang mengehadkan perkara yang dikembalikan, membolehkan anda mencari padanan tertentu yang mungkin terdapat beberapa kemungkinan padanan. Sebagai contoh, kita boleh menggunakan XPath untuk mengembalikan elemen h2 tertentu yang terkandung di dalam div yang serta-merta mengikuti div adik-beradik yang, seterusnya, mengandungi elemen imej kanak-kanak dengan atribut data-testID="leader" padanya:
tidak mendapat tajuk ini
Jangan dapatkan tajuk ini juga
Pengepala untuk imej pemimpin
Ini adalah pertanyaannya: document.queryXPaths(` //div[ adik beradik berikut::div[1] /img[@data-testID='leader'] ] /h2/ teks() `);
Mari turun dalam tunjuk cara untuk melihat bagaimana semuanya disatukan: Lihat Pertanyaan H2 Kompleks Pen [bercabang] oleh Bryan Rasmussen. Jadi, ya. Terdapat banyak laluan yang mungkin ke mana-mana elemen dalam ujian menggunakan XPath. Penamatan XSLT 1.0 Saya menyebut awal-awal lagi bahawa pasukan Chrome merancang untuk mengalih keluar sokongan XSLT 1.0 daripada penyemak imbas. Itu penting kerana XSLT 1.0 menggunakan pengaturcaraan tertumpu XML untuk transformasi dokumen yang, seterusnya, bergantung pada XPath 1.0, iaitu apa yang terdapat dalam kebanyakan penyemak imbas. Apabila itu berlaku, kita akan kehilangan komponen utama XPath. Tetapi memandangkan hakikat bahawa XPath benar-benar hebat untuk ujian menulis, saya mendapati tidak mungkin XPath secara keseluruhannya akan hilang dalam masa terdekat. Walaupun begitu, saya dapati bahawa orang ramai berminat dengan ciri apabila ciri itu dialih keluar. Dan itu sememangnya benar dalam kes XSLT 1.0 ditamatkan. Terdapat keseluruhan perbincangan yang berlaku di Berita Hacker yang dipenuhi dengan hujah menentang penamatan itu. Siaran itu sendiri adalah contoh hebat untuk mencipta rangka kerja blog dengan XSLT. awakboleh membaca perbincangan untuk diri sendiri, tetapi ia masuk ke dalam cara JavaScript boleh digunakan sebagai shim untuk XLST untuk mengendalikan jenis kes tersebut. Saya juga telah melihat cadangan bahawa pelayar harus menggunakan SaxonJS, yang merupakan port ke enjin Saxon XSLT, XQUERY dan XPath JavaScript. Itu idea yang menarik, terutamanya apabila Saxon-JS melaksanakan versi semasa spesifikasi ini, sedangkan tiada penyemak imbas yang melaksanakan mana-mana versi XPath atau XSLT melebihi 1.0, dan tiada yang melaksanakan XQuery. Saya menghubungi Norm Tovey-Walsh di Saxonica, syarikat di belakang SaxonJS dan versi lain enjin Saxon. Dia berkata: "Jika mana-mana vendor penyemak imbas berminat untuk mengambil SaxonJS sebagai titik permulaan untuk menyepadukan teknologi XML moden ke dalam penyemak imbas, kami akan teruja untuk membincangkannya dengan mereka." - Norm Tovey-Walsh
Tetapi juga menambah: "Saya akan sangat terkejut jika sesiapa berfikir bahawa mengambil SaxonJS dalam bentuk semasa dan meletakkannya ke dalam binaan penyemak imbas tidak berubah akan menjadi pendekatan yang ideal. Vendor penyemak imbas, berdasarkan hakikat bahawa mereka membina penyemak imbas, boleh mendekati integrasi pada tahap yang lebih mendalam daripada yang kita boleh 'dari luar'." - Norm Tovey-Walsh
Perlu diingat bahawa komen Tovey-Walsh datang kira-kira seminggu sebelum pengumuman penamatan XSLT. Kesimpulan Saya boleh teruskan. Tetapi saya harap ini telah menunjukkan kuasa XPath dan memberi anda banyak contoh yang menunjukkan cara menggunakannya untuk mencapai perkara yang hebat. Ia merupakan contoh sempurna teknologi lama dalam timbunan penyemak imbas yang masih mempunyai banyak utiliti hari ini, walaupun anda tidak pernah mengetahui ia wujud atau tidak pernah mempertimbangkan untuk mendapatkannya. Bacaan Selanjutnya
"Meningkatkan Ketahanan Ujian Web Automatik dengan Bahasa Semula Jadi" (Perpustakaan Digital ACM) oleh Maroun Ayli, Youssef Bakouny, Nader Jalloul dan Rima KilanyArtikel ini menyediakan banyak contoh XPath untuk menulis ujian berdaya tahan. XPath (MDN)Ini adalah tempat terbaik untuk bermula jika anda mahukan penjelasan teknikal yang memperincikan cara XPath berfungsi. Tutorial XPath (ZVON)Saya mendapati tutorial ini paling membantu dalam pembelajaran saya sendiri, terima kasih kepada banyak contoh dan penjelasan yang jelas. XPatherAlat interaktif ini membolehkan anda bekerja secara langsung dengan kod.
