Cara menguji React-Native WebViews Anda dengan Detox

Anda akhirnya dapat menulis tes end-to-end untuk WebViews Anda menggunakan Detox!

… yah, di Android sih.

Saat ini, iOS tidak didukung. Namun, itu kemungkinan akan berubah di masa depan. Selain itu, meskipun ada fungsionalitas untuk pengujian di android, dokumen Detox belum diperbarui secara resmi untuk menyertakan pengujian tampilan web. Ini menunjukkan bahwa pekerjaan mungkin sedang berlangsung dan cukup diam .

Terlepas dari itu, kemampuan untuk menguji tampilan web di Android tetap merupakan lompatan besar untuk jenis pengembang!

Cara menambahkan WebView ke aplikasi Anda

Untuk menyertakan WebView, tambahkan react-native-webviewpaket sebagai dependensi ke file package.json. Impor WebViewkomponen, dan berikan sumber seperti yang ditunjukkan di bawah ini.

Pastikan untuk menyertakan a testIDke WebView Anda sehingga dapat ditemukan dengan detoksifikasi saat Anda menjalankan pengujian.

Cara menulis tes untuk tampilan web

Untuk contoh ini, kami menggunakan halaman Login Twitter. Kami ingin mengizinkan pengguna untuk:

• Masukkan nama pengguna
• Masukkan kata sandi
• Dan klik tombol Masuk

Terkadang, tampilan web perlu beberapa saat untuk dimuat, jadi mungkin berguna untuk menambahkan penundaan untuk memastikannya selesai memuat sebelum menjalankan pengujian.

Seperti yang terlihat di bawah, kita dapat menggunakan objek web Detox untuk berinteraksi dengan tampilan dan membuat pernyataan pada elemen yang terletak.

Menemukan elemen DOM:

Detox ini web dibangun di atas Android Expresso-Web dan menyediakan daftar fungsi untuk memilih elemen DOM.

• id — menemukan elemen pada pohon DOM dengan id-nya
• text —menemukan elemen pada pohon DOM oleh kelas CSS-nya
• cssSelector —menemukan elemen pada pohon DOM yang cocok dengan pemilih CSS yang diberikan
• name —menemukan elemen pada pohon DOM dengan atribut "nama"-nya
• xpath —menemukan elemen pada pohon DOM dengan XPath-nya
• href—menemukan <a>elemen pada pohon DOM dengan teks tautannya
• hrefContent—menemukan <a>elemen pada pohon DOM dengan teks tautan parsialnya
• tag —menemukan elemen pada pohon DOM dengan nama tagnya

Setelah menemukan elemen Anda, Anda dapat mensimulasikan interaksi pengguna dengan metode penjelasan mandiri berikut:

• tap
• typeText
• getText
• clearText
• replaceText
• scrollToView
• getCurrentUrl
• getTitle
• runScript
• runScriptWithArgs

Web Detox juga dilengkapi dengan seperangkat pencocokan yang menyenangkan:

• toExist()
• toNotExist()
• toHaveText()
• toNotHaveText()

Kemungkinannya tidak terbatas!