Bagaimana untuk menyemak sama ada unsur wujud atau tidak menggunakan Cypress?

Cypress ialah alat yang membantu pembangun web dan penguji untuk memastikan tapak web mereka berfungsi dengan betul. ia boleh menyemak sama ada bahagian tertentu tapak web wujud. Ini berguna kerana ia membantu mengatasi masalah sebelum pengguna melakukannya. Kehadiran elemen ialah salah satu perkara pertama yang perlu anda uji dengan Cypress dalam projek anda. Dalam artikel ini, kita akan melihat bagaimana untuk menguji sama ada unsur wujud atau tidak. Juga, jika ia wujud, bagaimana anda menyemak sama ada ia kelihatan atau tidak?.

Apakah Unsur Cypress?

• Elemen dalam aplikasi web merujuk kepada elemen HTML individu yang membentuk struktur dan kandungan halaman web.
• Contoh elemen termasuk butang, kotak teks, pautan dan imej, masing-masing dengan atribut mereka sendiri seperti id, kelas dan gaya.
• Atribut ini boleh digunakan untuk berinteraksi dengan pemilih CSS atau JavaScript.

Elemen penting kerana ia menentukan struktur dan tingkah laku halaman.
Dengan memilih dan berinteraksi dengan elemen, anda boleh membuat ujian automatik untuk memastikan aplikasi web berkelakuan seperti yang diharapkan untuk semua pengguna.
Dalam Cypress, elemen ialah elemen HTML tapak web anda yang ingin anda berinteraksi atau uji.
Untuk berinteraksi atau menguji elemen ini, cuma pilih elemen tersebut menggunakan pemilih yang serupa dengan CSS.

Mengapa Kewujudan Unsur Penting dalam Cypress?

Tapak web adalah seperti teka-teki dengan kepingan interaktif seperti butang dan borang. Pengujian melibatkan memastikan bahawa kepingan ini berada di tempat yang betul dan berfungsi dengan baik. Menyemak sama ada unsur wujud adalah penting kerana bahagian tapak web yang berbeza boleh berubah berdasarkan tindakan pengguna.

Sebagai contoh, butang "Serah" mungkin muncul selepas mengisi borang, jadi anda perlu menyemak sama ada ia muncul. Ini membantu mengenal pasti isu sebelum pengguna menghadapinya, membolehkan pengalaman yang lebih lancar.

Bagaimana untuk Mengesahkan kewujudan elemen menggunakan Cypress?

Cypress menyediakan beberapa kaedah untuk mengesahkan kewujudan elemen pada halaman web. Mari selami setiap pendekatan dan fahami cara melaksanakannya dengan berkesan.

1. Kaedah cy.get()

cloud-cta-peranti-sebenar.jpg
Kaedah cy.get() dalam Cypress digunakan untuk memilih dan mendapatkan semula elemen pada halaman berdasarkan pelbagai pemilih seperti nama kelas, ID, atribut dan banyak lagi. Untuk mengesahkan sama ada unsur wujud, pembangun boleh menggunakan arahan should() bersama-sama dengan kaedah cy.get().

Menggunakan penegasan .should(‘exist’) dengan cy.get() memastikan elemen yang dipilih hadir pada halaman.

2. cy.contains() Kaedah

Kaedah cy.contains() digunakan untuk mencari elemen berdasarkan kandungan teksnya. Kaedah ini juga boleh digunakan untuk menyemak sama ada unsur dengan teks tertentu wujud pada halaman.

3. Kaedah cy.find()

Kaedah cy.find() berguna apabila berurusan dengan elemen bersarang dalam elemen induk. Ia membolehkan anda mencari elemen dalam konteks elemen lain, memastikan carian lebih fokus.

4. cy.get().should() dengan Penegasan Tersuai

Cypress membolehkan pembangun membuat penegasan tersuai menggunakan kaedah cy.should(). Ini amat berguna apabila anda ingin melaksanakan semakan yang lebih khusus selain daripada kewujudan unsur sahaja.

5. Menggunakan .should() dengan Tamat Masa

Kadangkala, elemen mungkin dimuatkan secara tidak segerak atau dengan sedikit kelewatan. Dalam kes sedemikian, anda boleh menggunakan penegasan .should() dengan tamat masa untuk memastikan Cypress menunggu elemen muncul.

Ujian Bersyarat dengan Cypress:
Ujian bersyarat dalam Cypress ialah tindakan menyepadukan logik bersyarat ke dalam skrip ujian anda untuk membuat keputusan dan melakukan tindakan berdasarkan syarat atau hasil tertentu semasa pelaksanaan ujian. Kaedah ini membolehkan anda mereka bentuk ujian yang lebih fleksibel dan boleh disesuaikan yang boleh mengendalikan pelbagai senario dan bertindak balas dengan sewajarnya. Cypress menawarkan pelbagai arahan dan API yang boleh anda gunakan untuk mencapai ujian bersyarat yang berkesan. Berikut ialah ilustrasi cara Cypress boleh digunakan untuk ujian bersyarat.

Contoh -1

Dalam contoh ini, skrip ujian melawat halaman web dan melakukan ujian bersyarat ke atas kewujudan elemen serta tajuk halaman. Bergantung pada sama ada syarat dipenuhi atau tidak, skrip merekodkan mesej yang sepadan dengan output ujian Cypress.

cloud-cta-peranti-sebenar.jpg
Cypress menyediakan sintaks yang fasih dan intuitif untuk melaksanakan ujian bersyarat dalam skrip ujian anda. Anda boleh menggunakan penegasan, janji dan logik JavaScript biasa untuk membina keadaan dan tindakan yang kompleks berdasarkan keputusan syarat tersebut.

Ujian bersyarat dalam Cypress, serupa dengan rangka kerja ujian lain, membantu anda membuat ujian yang lebih serba boleh dan berkesan yang boleh menyesuaikan diri dengan senario berbeza, menjadikan proses ujian anda lebih teguh dan boleh dipercayai.

Contoh 2:

Dalam coretan kod ini, Cypress terlebih dahulu memastikan kewujudan elemen butang menggunakan .should(‘wujud’). Ia kemudian mendapatkan semula elemen menggunakan .then(), dan semakan bersyarat seterusnya menentukan sama ada butang itu wujud. Jika syarat dipenuhi, menunjukkan kehadiran butang, Cypress mengklik butang menggunakan cy.wrap(button).click(). Jika syarat gagal, blok else memudahkan pelaksanaan tindakan alternatif.

Pemeriksaan Kewujudan Elemen Aplikasi Dunia Sebenar:

Mari kita fikirkan tentang beberapa situasi harian yang memeriksa kewujudan elemen sangat membantu:

1. Mesej Kejayaan Bentuk

Selepas pengguna menyerahkan borang, mesej kejayaan mungkin muncul. Menggunakan Cypress, anda boleh menyemak sama ada mesej itu muncul, memastikan pengguna mengetahui borang mereka telah berjaya diserahkan.

2. Navigasi Menu

Anda mempunyai menu lungsur turun yang muncul apabila pengguna menuding pada butang. Anda ingin mengesahkan bahawa menu muncul apabila pengguna melakukan tindakan tuding itu.

3. Reka Bentuk Responsif

Elemen yang berbeza mungkin muncul atau hilang pada mudah alih berbanding versi desktop tapak anda. Anda boleh menggunakan Cypress untuk memastikan elemen ini muncul atau bersembunyi seperti yang dimaksudkan.

4. Kawalan Akses Pengguna

Butang atau pautan tertentu mungkin hanya kelihatan kepada jenis pengguna tertentu. Cypress membantu anda mengesahkan bahawa elemen ini ditunjukkan kepada orang yang betul.

Baca Juga: Ujian Selari Cypress: Tutorial Langkah demi Langkah dengan Contoh Kod

Kesimpulan

Ujian web bukan lagi tugas yang sukar dan memakan masa, berkat alatan seperti Cypress. Keupayaan "sekiranya elemen wujud" merangkumi intipati ujian bersyarat, membolehkan pembangun dan penguji membuat ujian yang hampir meniru interaksi pengguna sebenar. Kefungsian ini bukan sahaja memudahkan ujian tetapi juga menggalakkan pendekatan yang lebih bijak terhadap tingkah laku aplikasi. Dengan memanfaatkan arahan intuitif Cypress dan penegasan yang berkuasa, pembangun boleh menyelaraskan suite ujian mereka, mengurangkan lebihan dan membina aplikasi web yang lebih mantap. Jadi, terima kuasa Cypress dan mulakan perjalanan untuk meningkatkan kualiti projek pembangunan web anda.

Sumber: Blog ini pada asalnya diterbitkan di testgrid.io

Atas ialah kandungan terperinci Bagaimana untuk menyemak sama ada unsur wujud atau tidak menggunakan Cypress?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!