Memaksimumkan pencari ujian depan anda

Ujian depan automatik adalah hebat. Kami boleh menulis ujian dengan kod untuk melawat halaman - atau memuatkan hanya satu komponen - dan mempunyai kod ujian klik pada perkara atau jenis teks seperti pengguna akan, kemudian membuat pernyataan mengenai keadaan aplikasi selepas interaksi. Ini membolehkan kami mengesahkan bahawa segala -galanya yang diterangkan dalam ujian berfungsi seperti yang diharapkan dalam permohonan.

Oleh kerana jawatan ini adalah kira -kira salah satu blok bangunan mana -mana ujian UI automatik, saya tidak menganggap terlalu banyak pengetahuan terdahulu. Jangan ragu untuk melangkau beberapa bahagian pertama jika anda sudah biasa dengan asas -asas.

Struktur ujian depan

Terdapat corak klasik yang berguna untuk mengetahui ketika menulis ujian: mengatur , bertindak , menegaskan . Dalam ujian front-end, ini diterjemahkan ke fail ujian yang melakukan yang berikut:

1. Susun: Dapatkan perkara yang bersedia untuk ujian. Lawati halaman tertentu, atau pasangkan komponen tertentu dengan alat peraga yang betul, mengejek beberapa negeri, apa sahaja.
2. Akta: Lakukan sesuatu untuk permohonan. Klik butang, isi borang, dan lain-lain atau tidak, untuk pemeriksaan keadaan mudah, kita boleh melangkau ini.
3. Menegaskan: Periksa beberapa perkara. Adakah menghantar borang menunjukkan mesej terima kasih? Adakah ia menghantar data yang betul ke hujung belakang dengan jawatan?

Dalam menentukan apa yang perlu diinterakkan dan kemudian apa yang perlu diperiksa pada halaman , kita boleh menggunakan pelbagai locator elemen untuk menargetkan bahagian -bahagian DOM yang perlu kita gunakan.

Pencari boleh menjadi sesuatu seperti id elemen, kandungan teks elemen, atau pemilih CSS, seperti .blog-post atau artikel> div.container> div> p: nth-child (12). Apa -apa sahaja mengenai elemen yang dapat mengenal pasti elemen itu kepada pelari ujian anda boleh menjadi pencari. Seperti yang anda mungkin sudah memberitahu dari pemilih CSS yang terakhir, pencari datang dalam pelbagai jenis.

Kami sering menilai pencari dari segi rapuh atau stabil. Secara umum, kami mahu pencari elemen yang paling stabil mungkin supaya ujian kami sentiasa dapat mencari elemen yang diperlukan, walaupun kod di sekeliling elemen berubah dari masa ke masa. Yang mengatakan, memaksimumkan kestabilan di semua kos boleh menyebabkan penulisan ujian pertahanan yang sebenarnya melemahkan ujian. Kami mendapat nilai yang paling tinggi dengan mempunyai gabungan keburukan dan kestabilan yang sejajar dengan apa yang kami mahukan ujian kami untuk dijaga.

Dengan cara ini, pencari elemen seperti pita saluran. Mereka harus benar -benar kuat dalam satu arah, dan merobek dengan mudah ke arah yang lain. Ujian kami harus bersatu dan terus lulus apabila perubahan yang tidak penting dibuat kepada permohonan, tetapi mereka harus mudah gagal apabila perubahan penting berlaku yang bertentangan dengan apa yang telah kami tentukan dalam ujian.

Panduan Pemula untuk Pencari Unsur dalam Ujian Front-End

Pertama, mari kita berpura -pura menulis arahan untuk orang sebenar untuk melakukan tugas mereka. Seorang pemeriksa pintu baru baru saja diupah di Gate Inspectors, Inc. Anda adalah bos mereka, dan selepas semua orang diperkenalkan, anda sepatutnya memberi mereka arahan untuk memeriksa pintu pertama mereka. Jika anda mahu mereka berjaya, anda mungkin tidak akan menulis nota seperti ini:

Pergi melepasi rumah kuning, teruskan 'sehingga anda memukul padang di mana kambing rakan ibu Mike hilang masa itu, kemudian belok kiri dan beritahu saya jika pintu di depan rumah di seberang jalan dari anda membuka atau tidak.

Arahan tersebut seperti menggunakan pemilih CSS panjang atau XPath sebagai pencari. Ia rapuh - dan ia adalah "jenis buruk yang rapuh". Sekiranya Rumah Kuning dicat semula dan anda mengulangi langkah -langkah, anda tidak dapat mencari pintu lagi, dan mungkin memutuskan untuk menyerah (atau dalam kes ini, ujian gagal).

Begitu juga, jika anda tidak tahu mengenai situasi kambing rakan ibu Mike, anda tidak boleh berhenti di titik rujukan yang betul untuk mengetahui pintu masuk apa yang hendak diperiksa. Inilah yang membuat "jenis buruk yang rapuh" buruk - ujian boleh pecah untuk semua jenis sebab, dan tidak ada alasan yang ada kaitan dengan kebolehgunaan pintu gerbang.

Oleh itu mari kita buat ujian front-end yang berbeza, yang lebih stabil. Lagipun, secara sah di kawasan ini, semua pintu di jalan tertentu sepatutnya mempunyai nombor siri yang unik dari pembuat:

Pergi ke pintu gerbang dengan nombor siri 1234 dan periksa sama ada ia dibuka.

Ini lebih seperti mencari elemen oleh IDnya. Ia lebih stabil dan hanya satu langkah. Semua titik kegagalan dari ujian terakhir telah dikeluarkan. Ujian ini hanya akan gagal jika pintu dengan ID itu tidak dibuka seperti yang diharapkan.

Sekarang, ternyata, walaupun tidak ada dua pintu yang harus mempunyai ID yang sama di jalan yang sama, itu sebenarnya tidak dikuatkuasakan di mana -mana dan satu hari, pintu lain di jalan berakhir dengan ID yang sama.

Jadi pada masa yang akan datang, Inspektor Gate yang baru disewa pergi untuk menguji "Gate 1234," mereka mendapati yang lain terlebih dahulu, dan kini melawat rumah yang salah dan memeriksa perkara yang salah. Ujian mungkin gagal, atau lebih teruk: jika pintu itu berfungsi seperti yang diharapkan, ujian masih berlalu tetapi ia tidak menguji subjek yang dimaksudkan. Ia memberikan keyakinan palsu. Ia akan terus berlalu walaupun pintu sasaran asal kami dicuri di tengah malam, oleh pencuri pintu.

Selepas kejadian seperti ini, jelas bahawa ID tidak stabil seperti yang kita fikirkan. Oleh itu, kami melakukan pemikiran peringkat seterusnya dan memutuskan bahawa, di bahagian dalam pintu, kami ingin ID khas hanya untuk ujian. Kami akan menghantar teknologi untuk meletakkan ID khas di hanya satu pintu ini. Arahan ujian baru kelihatan seperti ini:

Pergi ke pintu gerbang dengan id ujian "My Favorite-Gate" dan periksa sama ada ia dibuka.

Yang satu ini seperti menggunakan atribut testol data yang popular. Atribut seperti ini sangat bagus kerana jelas dalam kod yang dimaksudkan untuk digunakan oleh ujian automatik dan tidak boleh diubah atau dikeluarkan. Selagi pintu gerbang mempunyai atribut itu, anda akan sentiasa mencari pintu. Sama seperti ID, keunikan masih tidak dikuatkuasakan, tetapi ia lebih cenderung.

Ini adalah sejauh jauh dari rapuh seperti yang anda boleh dapatkan, dan ia mengesahkan fungsi pintu gerbang. Kami tidak bergantung kepada apa -apa kecuali atribut yang kami sengaja ditambah untuk ujian. Tetapi ada sedikit masalah bersembunyi di sini ...

Ini adalah ujian antara muka pengguna untuk pintu gerbang, tetapi pencari adalah sesuatu yang tidak pernah digunakan oleh pengguna untuk mencari pintu gerbang.

Ia adalah peluang yang tidak dijawab kerana, di daerah khayalan ini, ternyata pintu -pintu perlu mempunyai nombor rumah yang dicetak pada mereka supaya orang dapat melihat alamatnya. Oleh itu, semua pintu harus mempunyai label yang dihadapi manusia yang unik, dan jika mereka tidak, itu masalah dalam dan dari dirinya sendiri.

Apabila mencari pintu dengan ID ujian, jika ternyata pintu telah dicat semula dan nombor rumah ditutup, ujian kami masih lulus. Tetapi keseluruhan pintu pintu adalah untuk orang ramai mengakses rumah. Dalam erti kata lain, pintu kerja yang tidak dapat dijumpai oleh pengguna masih harus menjadi kegagalan ujian, dan kami mahu pencari yang mampu mendedahkan masalah ini.

Berikut adalah satu lagi lulus di arahan ujian ini untuk pemeriksa pintu pada hari pertama mereka:

Pergi ke pintu masuk untuk nombor rumah 40 dan periksa sama ada ia dibuka.

Ini menggunakan pencari yang menambah nilai kepada ujian: ia bergantung kepada sesuatu pengguna juga bergantung kepada, yang merupakan label untuk pintu gerbang. Ia menambah sebab yang berpotensi untuk ujian gagal sebelum mencapai interaksi yang kita mahu benar -benar menguji, yang mungkin kelihatan buruk pada pandangan pertama. Tetapi dalam kes ini, kerana pencari itu bermakna dari perspektif pengguna, kita tidak boleh mengangkatnya sebagai "rapuh." Sekiranya pintu tidak dapat dijumpai oleh labelnya, tidak kira jika ia dibuka atau tidak - ini adalah "jenis rapuh yang baik".

Perkara Dom

Banyak nasihat ujian front-end memberitahu kami untuk mengelakkan penulisan locator yang bergantung kepada struktur DOM. Ini bermakna pemaju boleh refactor komponen dan halaman dari masa ke masa dan membiarkan ujian mengesahkan bahawa aliran kerja yang dihadapi pengguna tidak pecah, tanpa perlu mengemas kini ujian untuk mengejar struktur baru. Prinsip ini berguna, tetapi saya akan tweak sedikit untuk mengatakan bahawa kita sepatutnya mengelakkan menulis locators yang bergantung kepada struktur DOM yang tidak relevan dalam ujian front-end kami.

Untuk aplikasi berfungsi dengan betul, DOM harus mencerminkan sifat dan struktur kandungan yang ada pada skrin pada bila -bila masa. Salah satu sebab untuk ini adalah aksesibiliti. Dom yang betul dalam pengertian ini lebih mudah bagi teknologi bantuan untuk menghuraikan dengan betul dan menerangkan kepada pengguna yang tidak melihat kandungan yang diberikan oleh penyemak imbas. Struktur DOM dan HTML lama biasa membuat perbezaan besar kepada kemerdekaan pengguna yang bergantung kepada teknologi bantuan.

Mari kita putar ujian front-end untuk menyerahkan sesuatu kepada borang hubungan aplikasi kami. Kami akan menggunakan Cypress untuk ini, tetapi prinsip-prinsip memilih pencari secara strategik memohon kepada semua kerangka ujian front-end yang menggunakan DOM untuk mencari unsur-unsur. Di sini kita dapati unsur -unsur, masukkan beberapa ujian, serahkan borang, dan sahkan keadaan "terima kasih" dicapai:

 //? Tidak disyorkan
cy.get ('#nama'). Jenis ('Mark')
cy.get ('#Comment'). Jenis ('Ujian Ujian')
cy.get ('. hantar-btn'). Klik ()
cy.get ('. Terima kasih'). Harus ('Be.visible')

Terdapat semua jenis pernyataan tersirat yang berlaku dalam empat baris ini. cy.get () menyemak bahawa elemen wujud di DOM. Ujian ini akan gagal jika elemen tidak wujud selepas masa tertentu, sementara tindakan seperti jenis dan klik Sahkan bahawa unsur -unsur dapat dilihat, didayakan, dan tidak terhalang oleh sesuatu yang lain sebelum mengambil tindakan.

Oleh itu, kami mendapat banyak "secara percuma" walaupun dalam ujian mudah seperti ini, tetapi kami juga memperkenalkan beberapa kebergantungan terhadap perkara yang kami (dan pengguna kami) tidak begitu peduli. ID dan kelas khusus yang kami periksa kelihatan cukup stabil, terutamanya berbanding pemilih seperti div.main> p: nth-child (3)> span.is-a-button atau apa sahaja. Pemilih yang panjang ini sangat spesifik bahawa perubahan kecil ke DOM boleh menyebabkan ujian gagal kerana ia tidak dapat mencari elemen , bukan kerana fungsi itu dipecahkan.

Tetapi pemilih pendek kami, seperti #name, datang dengan tiga masalah:

1. ID boleh diubah atau dikeluarkan dalam kod, menyebabkan elemen itu diabaikan, terutamanya jika borang itu mungkin muncul lebih daripada sekali pada halaman. ID yang unik mungkin perlu dijana untuk setiap contoh, dan itu bukan sesuatu yang kita dapat dengan mudah untuk menguji ke dalam ujian.
2. Sekiranya terdapat lebih daripada satu contoh borang di halaman dan mereka mempunyai ID yang sama, kita perlu memutuskan borang yang hendak diisi.
3. Kami tidak benar-benar peduli apa ID dari perspektif pengguna, jadi semua pernyataan terbina dalam adalah jenis ... tidak dimanfaatkan sepenuhnya?

Untuk masalah satu dan dua, penyelesaian yang disyorkan sering menggunakan atribut data khusus dalam HTML kami yang ditambah secara eksklusif untuk ujian. Ini lebih baik kerana ujian kami tidak lagi bergantung kepada struktur DOM, dan sebagai pemaju mengubah kod di sekitar komponen, ujian akan terus lulus tanpa memerlukan kemas kini, selagi mereka menyimpan ujian data = "medan nama" yang dilampirkan pada elemen input yang betul.

Ini tidak menangani masalah tiga walaupun-kita masih mempunyai ujian interaksi front-end yang bergantung kepada sesuatu yang tidak bermakna kepada pengguna.

Pencari yang bermakna untuk elemen interaktif

Pencari elemen bermakna apabila mereka bergantung kepada sesuatu yang sebenarnya kita mahu bergantung kepada kerana sesuatu tentang pencari adalah penting untuk pengalaman pengguna. Dalam kes elemen interaktif, saya akan berhujah bahawa pemilih terbaik untuk digunakan adalah nama yang boleh diakses oleh elemen. Sesuatu seperti ini sesuai:

 //? Disyorkan
cy.getByLabeltext ('Nama'). Jenis ('Mark')

Contoh ini menggunakan pembantu bylabeltext dari perpustakaan ujian Cypress. (Sebenarnya, jika anda menggunakan perpustakaan ujian dalam apa jua bentuk, ia mungkin sudah membantu anda menulis pencari yang boleh diakses seperti ini.)

Ini berguna kerana sekarang cek terbina dalam (yang kita dapatkan secara percuma melalui perintah cy.type ()) termasuk aksesibilitas medan borang. Semua elemen interaktif harus mempunyai nama yang boleh diakses yang terdedah kepada teknologi bantuan. Ini adalah bagaimana, sebagai contoh, pengguna pembaca skrin akan tahu apa bidang borang yang mereka taipkan dipanggil untuk memasukkan maklumat yang diperlukan.

Cara untuk menyediakan nama yang boleh diakses ini untuk medan borang biasanya melalui elemen label yang berkaitan dengan medan oleh ID. Perintah GetByLabeltext dari Perpustakaan Ujian Cypress mengesahkan bahawa medan itu dilabelkan dengan sewajarnya, tetapi juga bidang itu sendiri adalah elemen yang dibenarkan untuk memiliki label. Jadi, sebagai contoh, HTML berikut akan gagal dengan betul sebelum perintah jenis () dicuba, kerana walaupun label hadir, pelabelan div tidak sah HTML:

 
<label for="my-custom-input"> elemen div yang boleh diedit: </label>
<div contentedable="true"></div>

Kerana ini tidak sah HTML, perisian ScreenReader tidak dapat mengaitkan label ini dengan medan ini dengan betul. Untuk membetulkannya, kami akan mengemas kini markup untuk menggunakan elemen input sebenar:

 
<label for="my-real-input"> input sebenar: </label>
<input type="text">

Ini hebat. Sekarang jika ujian gagal pada ketika ini selepas pengeditan dibuat kepada DOM, ia bukan kerana struktur yang tidak relevan berubah bagaimana unsur-unsur diatur, tetapi kerana suntingan kami melakukan sesuatu untuk memecahkan sebahagian daripada DOM bahawa ujian depan kami secara jelas peduli, itu sebenarnya akan menjadi penting kepada pengguna.

Pencari yang bermakna untuk elemen yang tidak interaktif

Untuk unsur-unsur yang tidak interaktif, kita harus memakai topi pemikiran kita. Mari kita gunakan sedikit penghakiman sebelum jatuh ke atas atribut data-CY atau data ujian yang akan sentiasa ada untuk kita jika DOM tidak penting sama sekali.

Sebelum kita mencelupkan pencari generik, ingatlah: Keadaan DOM adalah keseluruhannya ™ sebagai pemaju web (sekurang -kurangnya, saya fikir ia). Dan DOM memacu UX untuk semua orang yang tidak mengalami halaman secara visual. Jadi banyak masa, mungkin terdapat beberapa elemen bermakna yang kita boleh atau harus digunakan dalam kod yang boleh kita sertakan dalam pencari ujian.

Dan jika tidak ada, kerana. Katakanlah, kod aplikasi adalah semua bekas generik seperti Div dan Span, kita harus mempertimbangkan untuk memperbaiki kod aplikasi terlebih dahulu, sambil menambah ujian. Jika tidak ada risiko ujian kami sebenarnya menyatakan bahawa bekas generik dijangka dan dikehendaki, menjadikannya sedikit lebih sukar bagi seseorang untuk mengubahsuai komponen tersebut untuk lebih mudah diakses.

Topik ini membuka cacing tentang bagaimana kebolehcapaian berfungsi dalam organisasi. Sering kali, jika tiada siapa yang bercakap mengenainya dan ia bukan sebahagian daripada amalan di syarikat kami, kami tidak mengambil aksesibiliti dengan serius sebagai pemaju front-end. Tetapi pada penghujung hari, kita sepatutnya menjadi pakar dalam apa yang "markup tepat" untuk reka bentuk, dan apa yang perlu dipertimbangkan dalam menentukannya. Saya membincangkan perkara ini lebih banyak dalam ceramah saya dari Connect.Tech 2021, yang dipanggil "Menyelidik dan Menulis Vue yang boleh diakses ... perkara".

Seperti yang kita lihat di atas, dengan unsur-unsur yang kita fikirkan secara tradisional sebagai interaktif, terdapat peraturan yang cukup baik yang mudah dibina ke dalam ujian front-end kita: unsur-unsur interaktif harus mempunyai label yang dapat dilihat dengan betul dikaitkan dengan elemen. Jadi apa -apa interaktif, apabila kita mengujinya, harus dipilih dari DOM menggunakan label yang diperlukan.

Untuk unsur-unsur yang kita tidak fikirkan sebagai interaktif-seperti kebanyakan unsur-unsur pengubahsuaian kandungan yang memaparkan kepingan teks apa sahaja, selain daripada beberapa mercu tanda asas seperti Main-kita tidak akan mencetuskan kegagalan audit rumah api jika kita meletakkan sebahagian besar kandungan bukan interaktif kita ke dalam div generik atau span. Tetapi markup tidak akan sangat bermaklumat atau membantu teknologi bantuan kerana ia tidak menggambarkan sifat dan struktur kandungan kepada seseorang yang tidak dapat melihatnya. (Untuk melihat ini dibawa ke postingan blog yang sangat melampau, lihatlah laman blog Manuel Matuzovic yang sangat baik, "Membina tapak yang paling tidak boleh diakses dengan skor rumah api yang sempurna.")

HTML yang kami berikan adalah di mana kami menyampaikan maklumat kontekstual penting kepada sesiapa sahaja yang tidak melihat kandungan secara visual. HTML digunakan untuk membina DOM, DOM digunakan untuk mewujudkan pokok kebolehaksesan penyemak imbas, dan pokok aksesibiliti adalah API yang teknologi bantuan semua jenis boleh digunakan untuk menyatakan kandungan dan tindakan yang boleh diambil kepada orang kurang upaya menggunakan perisian kami. Pembaca skrin sering merupakan contoh pertama yang kita fikirkan, tetapi pokok aksesibiliti juga boleh digunakan oleh teknologi lain, seperti memaparkan yang menjadikan halaman web menjadi Braille, antara lain.

Pemeriksaan kebolehaksesan automatik tidak akan memberitahu kami jika kami benar -benar membuat HTML yang betul untuk kandungannya. "Kebenaran" HTML Panggilan penghakiman Kami membuat pemaju tentang maklumat yang kita fikir perlu disampaikan dalam pokok aksesibiliti.

Sebaik sahaja kami membuat panggilan itu, kami boleh menentukan berapa banyak yang sesuai untuk membakar ke dalam ujian front-end automatik.

Katakan bahawa kami telah memutuskan bahawa bekas dengan peranan Aria status akan memegang "terima kasih" dan pemesejan ralat untuk borang hubungan. Ini mungkin bagus supaya maklum balas untuk kejayaan atau kegagalan borang dapat diumumkan oleh pembaca skrin. Kelas-kelas CSS dari .thank-you dan .error boleh digunakan untuk mengawal keadaan visual.

Jika kami menambah elemen ini dan ingin menulis ujian UI untuknya, kami mungkin menulis pernyataan seperti ini selepas ujian mengisi borang dan mengemukakannya:

 //? Tidak disyorkan
cy.get ('. Terima kasih'). Harus ('Be.visible')

Atau bahkan ujian yang menggunakan pemilih yang tidak rapuh tetapi masih tidak bermakna seperti ini:

 //? Tidak disyorkan
cy.get ('[ujian data]'). harus ('be.visible')

Kedua -duanya boleh ditulis semula menggunakan cy.contains ():

 //? Disyorkan
cy.contains ('[role = "status"]', 'Terima kasih, kami telah menerima mesej anda')
  .sea ('be.visible')

Ini akan mengesahkan bahawa teks yang diharapkan muncul dan berada di dalam bekas yang betul. Berbanding dengan ujian sebelumnya, ini mempunyai lebih banyak nilai dari segi mengesahkan fungsi sebenar. Jika mana -mana bahagian ujian ini gagal, kami ingin tahu, kerana kedua -dua mesej dan pemilih elemen adalah penting kepada kami dan tidak boleh diubah secara remeh.

Kami pasti mendapat liputan di sini tanpa banyak kod tambahan, tetapi kami juga memperkenalkan pelbagai jenis kelembutan. Kami mempunyai rentetan bahasa Inggeris yang jelas dalam ujian kami, dan ini bermakna jika mesej "terima kasih" berubah kepada sesuatu seperti "Terima kasih kerana menjangkau!" Ujian ini tiba -tiba gagal. Sama dengan semua ujian lain. Perubahan kecil bagaimana label ditulis memerlukan mengemas kini sebarang ujian yang mensasarkan elemen menggunakan label itu.

Kita boleh memperbaiki ini dengan menggunakan sumber kebenaran yang sama untuk rentetan ini dalam ujian front-end seperti yang kita lakukan dalam kod kita. Dan jika kita kini mempunyai ayat-ayat yang boleh dibaca manusia yang tertanam di sana di HTML komponen kita ... Nah sekarang kita mempunyai alasan untuk menarik barang-barang itu dari sana.

Rentetan yang boleh dibaca manusia mungkin nombor sihir kod UI

Nombor sihir (atau kurang menarik, "pemalar berangka yang tidak dinamakan") adalah nilai super khusus yang kadang-kadang anda lihat dalam kod yang penting untuk hasil akhir pengiraan, seperti 1.023033 lama yang baik. Tetapi kerana jumlah itu tidak dilabel, kepentingannya tidak jelas, dan oleh itu tidak jelas apa yang dilakukannya. Mungkin ia dikenakan cukai. Mungkin ia mengimbangi beberapa pepijat yang kita tidak tahu. Siapa tahu?

Sama ada cara, perkara yang sama berlaku untuk ujian front-end dan nasihat umum adalah untuk mengelakkan nombor sihir kerana kekurangan kejelasan mereka. Kajian kod sering akan menangkap mereka dan bertanya apa nombornya. Bolehkah kita menggerakkannya ke dalam yang tetap? Kami juga melakukan perkara yang sama jika nilai akan digunakan semula. Daripada mengulangi nilai di mana -mana, kita boleh menyimpannya dalam pembolehubah dan menggunakan pembolehubah yang diperlukan.

Menulis antara muka pengguna selama bertahun -tahun, saya telah melihat kandungan teks dalam fail HTML atau templat yang sangat mirip dengan nombor sihir dalam konteks lain. Kami meletakkan nilai mutlak semua melalui kod kami, tetapi pada hakikatnya ia mungkin lebih berguna untuk menyimpan nilai -nilai tersebut di tempat lain dan membawa mereka ke dalam masa membina (atau bahkan melalui API bergantung kepada keadaan).

Terdapat beberapa sebab untuk ini:

1. Saya pernah bekerjasama dengan pelanggan yang ingin memandu segala -galanya dari sistem pengurusan kandungan. Kandungan, bahkan membentuk label dan mesej status, yang tidak hidup di CMS harus dielakkan. Pelanggan mahu kawalan penuh supaya perubahan kandungan tidak memerlukan kod penyuntingan dan menggunakan semula laman web ini. Itu masuk akal; Kod dan kandungan adalah konsep yang berbeza.
2. Saya telah bekerja di banyak kod berbilang bahasa di mana semua teks perlu ditarik melalui beberapa rangka kerja pengantarabangsaan, seperti ini:

 <label untuk="nama">
  
  {{content [currentLanguage] .contactform.name}}
</label>

3. Setakat ujian front-end berjalan, ujian UI kami jauh lebih mantap jika, bukannya menyemak mesej "terima kasih" khusus yang kami harganya ke dalam ujian, kami melakukan sesuatu seperti ini:

 const text = content.en.contactfrom // kami akan melakukan ini sekali dan semua ujian dalam fail boleh dibaca daripadanya

cy.contains (text.namelabel, '[role = "status"]). harus (' be.visible ')

Setiap situasi berbeza, tetapi mempunyai beberapa sistem pemalar untuk rentetan adalah aset besar ketika menulis ujian UI yang mantap, dan saya akan mengesyorkannya. Kemudian, jika dan apabila terjemahan atau kandungan dinamik menjadi perlu untuk keadaan kita, kita lebih bersedia untuknya.

Saya pernah mendengar hujah -hujah yang baik terhadap mengimport rentetan teks dalam ujian juga. Sebagai contoh, sesetengah ujian mencari lebih mudah dibaca dan secara amnya lebih baik jika ujian itu sendiri menentukan kandungan yang diharapkan secara bebas dari sumber kandungan.

Ini adalah titik yang adil. Saya kurang dibujuk oleh ini kerana saya fikir kandungan harus dikawal melalui lebih banyak model kajian/penerbitan editorial, dan saya mahu ujian untuk memeriksa sama ada kandungan yang diharapkan dari sumber itu diberikan, bukan beberapa rentetan tertentu yang betul apabila ujian ditulis. Tetapi banyak orang tidak bersetuju dengan saya mengenai perkara ini, dan saya katakan selagi dalam pasukan tradeoff difahami, sama ada pilihan boleh diterima.

Yang mengatakan, ia masih merupakan idea yang baik untuk mengasingkan kod dari kandungan di bahagian depan lebih umum. Dan kadang-kadang ia mungkin sah untuk mencampur dan memadankan-seperti mengimport rentetan dalam ujian komponen kami dan tidak mengimportnya dalam ujian akhir-ke-akhir kami. Dengan cara ini, kami menyimpan beberapa pertindihan dan mendapat keyakinan bahawa komponen kami memaparkan kandungan yang betul, sementara masih mempunyai ujian front-end yang secara bebas menegaskan teks yang diharapkan, dalam editorial, pengertian yang dihadapi pengguna.

Bila Menggunakan Pencari Ujian Data

Pemilih CSS seperti [Data-Test = "Success-message"] masih berguna dan boleh sangat membantu apabila digunakan dengan cara yang disengajakan, bukannya digunakan sepanjang masa. Sekiranya penghakiman kami adalah bahawa tidak ada cara yang bermakna dan mudah untuk menargetkan elemen, atribut ujian data masih merupakan pilihan terbaik. Mereka jauh lebih baik daripada, katakan, bergantung pada kebetulan seperti apa jua struktur DOM berlaku pada hari anda menulis ujian, dan jatuh kembali ke "senarai senarai kedua di Div Ketiga dengan gaya kelas Kad".

Terdapat juga masa apabila kandungan dijangka dinamik dan tidak ada cara untuk merebut rentetan dari beberapa sumber kebenaran yang biasa digunakan dalam ujian kami. Dalam situasi tersebut, atribut ujian data membantu kita mencapai elemen tertentu yang kita sayangi. Ia masih boleh digabungkan dengan pernyataan mesra aksesibiliti, sebagai contoh:

 cy.get ('H2 [data-ujian = "intro-subheading"]')

Di sini kita ingin mencari apa yang mempunyai atribut ujian data intro-subheading, tetapi masih membenarkan ujian kita untuk menegaskan bahawa ia harus menjadi elemen H2 jika itulah yang kita harapkan. Atribut ujian data digunakan untuk memastikan kami mendapat H2 spesifik yang kami berminat, bukan beberapa H2 lain yang mungkin berada di halaman, jika atas sebab tertentu kandungan H2 itu tidak dapat diketahui pada masa ujian.

Walaupun dalam kes di mana kita tahu kandungannya, kita mungkin masih menggunakan atribut data untuk memastikan aplikasi memberikan kandungan di tempat yang betul:

 cy.contains ('H2 [data-ujian = "intro-subheading"]', 'Selamat datang untuk menguji!')

Pemilih ujian data juga boleh menjadi kemudahan untuk turun ke bahagian tertentu halaman dan kemudian membuat pernyataan dalamnya. Ini boleh kelihatan seperti berikut:

 cy.get ('artikel [data-ujian = "ablum-card-blur-great-escape"]'). dalam (() => {
  Cy.Contains ('H2', 'The Great Escape'). Harus ('Be.visible')
  cy.contains ('p', '1995 album by blur'). harus ('be.visible')
  cy.get ('[Data-test = "Stars"]'). Harus ('Have.length', 5)
})

Pada ketika itu kita masuk ke dalam beberapa nuansa kerana mungkin ada cara yang baik untuk menargetkan kandungan ini, itu hanya satu contoh. Tetapi pada penghujung hari, ia adalah baik jika bimbang tentang butiran seperti itu adalah di mana kita adalah kerana sekurang -kurangnya kita mempunyai pemahaman tentang ciri -ciri kebolehcapaian yang tertanam dalam HTML yang kita sedang menguji, dan kita mahu memasukkan mereka dalam ujian kita.

Apabila Dom penting, ujangnya

Ujian front-end membawa lebih banyak nilai kepada kami jika kami bijaksana tentang bagaimana kami memberitahu ujian apa unsur-unsur untuk berinteraksi, dan apa yang hendak diharapkan. Kita harus lebih suka nama-nama yang boleh diakses untuk menargetkan komponen interaktif, dan kita harus memasukkan nama elemen tertentu, peranan aria, dan lain-lain, untuk kandungan yang tidak interaktif-jika perkara-perkara itu relevan dengan fungsi. Pencari ini, apabila praktikal, mencipta gabungan kekuatan dan kelembutan yang betul.

Dan tentu saja, untuk segala-galanya, ada ujian data.

Atas ialah kandungan terperinci Memaksimumkan pencari ujian depan anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!