Automasi Pengujian pada Web dengan Cypress

Dimas Rizky
DOT Intern
Published in
3 min readNov 7, 2019
Cypress.io

Halo semuanya, pada artikel sebelumnya telah dijelaskan mengenai Quality Assurance(QA) dan jenis-jenis pengujian pada software. Kali ini saya akan membagikan artikel tentang cara melakukan automated test dengan menggunakan Cypress.

Cypress merupakan software yang digunakan untuk pengujian secara otomatis pada web dengan menggunakan platform node.js dan javascript . Dalam melakukan pengujian dengan menggunakan Cypress, kita menggunakan script code. Script code yang dituliskan diproses untuk menjalankan sistem atau software. Cypress memudahkan kita dalam menjalankan test agar menjadi lebih cepat, mudah, dan handal.

Sebelum dapat melakukan pengujian dengan Cypress kita harus menyiapkan hal-hal yang dibutuhkan untuk menjalankan Cypress seperti.

  1. Text Editor
    Cypress dalam melakukan pengujiannya menggunakan script code, untuk itu kita perlu menggunakan text editor untuk mempermudah dalam menuliskan script code tersebut. Untuk saya sendiri menggunakan text editor Visual Studio Code versi 1.40, kalian bisa mendownload di https://code.visualstudio.com/.
  2. Node Js
    Kita perlu menginstal node.js agar Cypress dapat dijalankan. Di sini saya menggunakan node.js dengan versi 13.1.0 yang merupakan versi terbarunya saat ini.Untuk mendownloadnya dapat klik disini.

Jika hal di atas sudah dipersiapkan, selanjutnya akan dijelaskan langkah-langkah dalam melakukan pengujian menggunakan Cypress.

Instalasi Cypress

Untuk menginstal Cypress, buat folder pada direktori lokal. Di sini saya membuat folder dengan nama “testing”

Buat Folder untuk Cypress

Kemudian buka Command Prompt, lalu masuk ke dalam folder yang telah dibuat

cd C:/xampp/htdocs/testing

Selanjutnya ketikkan perintah untuk melakukan instalasi Cypress seperti

npm install cypress --save dev

Jika Cypress sudah berhasil diinstal, kita bisa membukanya dengan mengetikkan perintah

./node_modules/.bin/cypress open

Setelah perintah di atas diketikkan maka secara otomatis Cypress akan terbuka.

Tampilan Awal Cypress

Pada Cypress kita perlu membuat script code agar pengujian dapat dilakukan. Dalam kesempatan ini saya melakukan automasi pengujian pada web yang sedang saya uji pada fitur register.

Script Code Cypress

Di atas adalah contoh script code yang saya buat untuk fitur registrasi. Pada script code tersebut, kita dapat mengatur alur pengujian berdasarkan script code yang kita buat sesuai urutan atau strukturnya. Lebih lengkapnya lagi tentang script code silahkan dibaca disini

Untuk data pengujian pada script code registrasi di atas, saya menggunakan faker. Sebelum menggunakannya kita perlu menginstalnya terlebih dahulu.

Untuk penginstalannya , pertama buka Command Prompt lalu masuk folder tempat Cypress diinstal.

Selanjutnya ketikkan perintah berikut untuk instal faker.

npm i faker

Jika berhasil maka faker dapat digunakan dalam pengujian menggunakan Cypress. Berikut adalah contoh variabel yang digunakan untuk memanggil data faker.

Data Faker

Data faker masih ada banyak lagi , untuk lebih lengkapnya silahkan baca di https://www.npmjs.com/package/faker.

Jika script code sudah dibuat, maka kita bisa menjalankannya untuk melihat hasil pengujian otomatis yang dilakukan berhasil atau gagal. Status pengujian dikatakan berhasil jika Cypress menunjukkan warna hijau dan dinyatakan gagal jika menunjukkan warna merah.

Untuk melihat hasilnya kita hanya perlu klik file dengan script code pengujian yang ingin dijalankan. Berikut adalah hasil dari script code untuk pengujian pada fitur registrasi.

Hasil Pengujian yang Dijalankan

Jadi kesimpulannya, pengujian menggunakan Cypress akan lebih mudah, cepat dan menghemat waktu dibandingkan pengujian secara manual. Hal ini karena script code pengujian yang dijalankan bersifat reusable, sehingga dapat digunakan secara berulang ulang.

Referensi

--

--