Repositori Github: Tautan

Pengujian aplikasi telah terbukti menjadi aspek yang sangat penting dalam proses pengembangan perangkat lunak modern. Kami ingin memastikan bahwa kami mengirimkan perangkat lunak berkualitas tinggi dan tidak akan rusak dalam produksi.

Menangkap bug bisa menjadi kerja keras dan percayalah Anda tidak ingin pengguna Anda mendapatkan pengalaman buruk saat menggunakan aplikasi Anda.

Pengujian end-to-end memastikan bahwa seseorang menemukan bug di sekitar interaksi pengguna sebelum menerapkan aplikasi ke produksi.

Saya telah bermain dengan banyak alat untuk pengujian ujung ke ujung. Menurut saya TestCafe cukup mudah dan efisien, saya lebih suka menggunakan ini sebagai alat pilihan untuk pengujian end-to-end.

Artikel ini tidak ditujukan untuk membandingkan berbagai alat yang dapat Anda gunakan untuk pengujian menyeluruh. Sebaliknya, ini bertujuan untuk menunjukkan kepada Anda bagaimana Anda bisa mendapatkan informasi terbaru dengan menggunakan TestCafe.

Apa yang akan kami bangun?

Pada artikel ini, saya akan menguji aplikasi node.js yang dirender di server, aplikasi ini dibuat menggunakan Node.js di sisi server dan disajikan panas di front-end menggunakan setang.
Ini hanyalah masalah preferensi karena saya tahu banyak teknisi yang mengajukan pertanyaan tentang bagaimana mereka dapat menguji aplikasi Node.js yang dirender di server.
Mohon dicatat bahwa TestCafe dapat digunakan untuk mesin templating apa pun yang Anda gunakan, ini juga akan berfungsi terlepas dari kerangka front-end yang mendukung aplikasi Anda seperti React, Angular, jQuery, dll. ini akan berfungsi pada front-end mana pun yang didukung dengan atribut JavaScript atau HTML.

Menginstal Testcafe

TestCafe sangat mudah dipasang, Anda tidak perlu melakukan hal gila apa pun.
Jika Anda telah menginstal node.js di mesin lokal Anda, yang perlu Anda lakukan hanyalah menjalankan:

npm install -g testcafe

Selesai, Anda baru saja menyiapkan test cafe untuk Anda gunakan karena perintah tersebut akan menginstal TestCafe secara global di mesin Anda.

Menyiapkan TestCafe di aplikasi Node.js kami
Lihat Repositori di sini:https://github.com/seunzone/node -testcafe
Juga, perhatikan bahwa saya telah menyiapkan server ekspres Node.js dengan setang, Anda dapat menggunakan lingkungan apa pun yang cocok untuk Anda.

Saya akan mulai dengan menginstal testcafe sebagai ketergantungan dengan menjalankan: yarn add testcafe , Anda dapat menginstalnya sebagai ketergantungan dev.

Selanjutnya, saya akan membuat skrip pengujian di file package.json saya dan memerintahkannya untuk menjalankan pengujian untuk saya.

"dev": "nodemon --exec babel-node src/app.js",
"test": "testcafe chrome src/tests/index.js --app 'yarn dev' -s screenshots",

Untuk pengaturan lingkungan saya, yarn run dev biasanya akan memulai aplikasi saya dalam mode pengembangan, maka commandyarn dev yang Anda lihat dalam skrip pengujian saya.
Anda juga akan melihat bahwa kita telah testcafe chrome memulai skrip pengujian, perintah ini hanya menginstruksikan TestCafe untuk menjalankan pengujian di browser chrome, lalu perintah selanjutnya menentukan jalur ke mana kita akan menulis pengujian.

Saya telah membuat aplikasi rencana sederhana dan kami akan mengujinya menggunakan TestCafe.

Dasar-dasar TestCafe

Dokumentasi T"estCafe" cukup membantu, bahkan, saya mempelajari sebagian besar hal yang saya ketahui hanya dengan mengikuti dokumen.
Metode yang sangat membantu yang sering Anda gunakan saat berinteraksi dengan testcafe adalah metode Selector. Metode ini memastikan untuk memilih elemen dalam DOM yang ingin Anda uji.
Di file src/tests/index.js, saya akan menulis kode berikut:

Baris 1 mengimpor metode Selector dari paket testcafe.
Baris 3 hanyalah sebuah variabel yang saya buat untuk memilih elemen h4 pada DOM.
Pada baris 6, kita akan memasukkan URL yang ingin kita uji, URL yang ingin Anda uji tidak harus didukung oleh server lokal Anda, bisa saja berupa tautan dari server langsung. Sebagian besar tim pengembangan biasanya menggunakan lingkungan pementasan mereka untuk pengujian end-to-end dan saya sangat merekomendasikan praktik tersebut.
Di baris 10 adalah tempat kami menulis pengujian kami yang sebenarnya.

Untuk menjalankan pengujian, cukup jalankan yarn run test di terminal, ini akan menjalankan browser Chrome untuk menjalankan pengujian yang telah kami tulis.
Catatan: Jangan pernah menyesuaikan browser yang dibuka TestCafe untuk Anda saat menjalankan pengujian.

Mensimulasikan aktivitas pengguna di TestCafe

Dengan TestCafe, Anda dapat menyimulasikan aktivitas pengguna di DOM dan menulis skrip pengujian untuk mendapatkan hasil yang diharapkan.

Kami akan menguji apa yang harus terjadi ketika pengguna mencoba memasukkan tugas baru.
Di baris 3, kami mengklik tombol tertentu di halaman kami.
Di baris 5, kami menyatakan bahwa kami mengharapkan yang baru halaman untuk mencocokkan rute /new
pada browser.
Baris 8 dan 9 akan mengetikkan beberapa huruf ke dalam kotak input halaman baru sementara baris 10 akan mengklik tombol di halaman tersebut.

Metode lain yang ada dalam simulasi aktivitas pengguna di browser adalah metode pressKey().

pressKey('down up down down enter') akan menekan tombol bawah pada keyboard satu kali, lalu tombol atas satu kali, lalu menekan tombol bawah dua kali dan terakhir tombol enter. Anda juga dapat menyimulasikan pengguliran halaman di TestCafe.

Berbagai cara untuk menulis tes Anda

Menulis aplikasi berukuran besar bisa menjadi hal yang sulit, oleh karena itu beberapa pengembang lebih memilih untuk menyalin kode pemilih langsung dari DOM.
Kode di atas juga dapat ditulis seperti ini:

Untuk mengetahui lokasi suatu elemen langsung di DOM:
- Klik kanan pada halaman web.
- Klik inspeksi.
- Klik tanda panah untuk memeriksa elemen.

-Klik elemen yang ingin Anda targetkan di DOM.
- Terakhir, Salin pemilih.

Anda kemudian dapat menempelkan kode yang dihasilkan dalam metode pemilih dalam pengujian Anda. Ini akan terlihat seperti:

Selector('body > div > div.row.area > div.col-md-8 > div > a')

Men-debug pengujian Anda

Metode JavaScript .debug() bawaan cukup membantu saat melakukan debug pengujian.
Untuk masuk ke mode debug, yang perlu Anda lakukan hanyalah memanggil metode dalam kode Anda dan pengujian akan dijeda pada saat itu.

Pengujian akan dijeda pada pernyataan .debug(), Anda kemudian dapat resume pengujian atau unlock page menguji elemen secara manual langsung di DOM.

Anda juga dapat melewati pengujian dengan memanggil metode .skip() atau Anda dapat menjalankan .only() untuk menjalankan pengujian tunggal.
Anda dapat memeriksa dokumentasi untuk melihat berbagai metode yang tersedia untuk tujuan pengembangan.

Saya harap artikel ini dapat membantu dalam memperkenalkan Anda tentang cara mempercepat TestCafe.

Sumber Daya Bermanfaat Lainnya

Dokumentasi adalah tempat yang bagus untuk checkout
Saya juga menemukan artikel yang sangat bagus dari Michael Herman di sini