Berkenalan dengan Cypress

Halo teman-teman, ini kali pertama saya menulis sekaligus eksplorasi dalam proses development sebuah aplikasi, eksplorasi kali ini saya rasa penting pada proses development, yaitu fase pengujian aplikasi atau biasa kita sebut fase testing.

Di Aruna, setiap individu diwajibkan untuk melengkapi diri dengan peralatan tempur yang terukur, dalam hal ini saya yang diamanahkan pada lini fullstack developer diharuskan memiliki kemampuan untuk dapat mengetes aplikasi sebelum aplikasi masuk pengujian selanjutnya oleh tim QA.

Yang menarik pada tahap eksplorasi saya menjumpai tools bernama Cypress. Dimana tools ini dapat memudahkan QA dalam melakukan pekerjaannya.

Apa itu Cypress ?

Cypress merupakan alat bantu / tool untuk melakukan automation testing, dimana Cypress memiliki fitur yang sangat lengkap diantaranya sebagai alat untuk melakukan unit testing, integration testing (API), hingga end-to-end testing. Pada situs resminya, Cypress mengklaim dapat mengetes apapun yang berjalan di browser. Cypress sering juga dibandingkan dengan Selenium, yaitu tool automation testing yang sudah lebih dikenal sebelumnya. Namun pada prakteknya akan sangat berbeda.

Keunggulan dan Kekurangan

Pada saat penggunaan, kita akan sangat terbantu dengan kemudahan saat instalasi karena tergolong mudah. Inilah yang membuat Cypress sebagai tools pengenalan awal untuk developer belajar automation test.

Ada pula beberapa fitur yang saya suka antara lain :

1. Time Travel
   Saat pengujian, Cypress menyimpan setiap action yang dapat kita cari tahu dengan mengarahkan kursor ke setiap event. sehingga kita dapat mengetahui setiap kejadian yang terjadi pada action tertentu.
2. Real Time Reloads
   Secara otomatis Cypress akan mengulangi test setiap ada perubahan pada script test yang telah disimpan.
3. Debuggability
   Cypress dapat melakukan debugging aplikasi melalui chrome devTools, sehingga kita dapat mengetahui error dengan tepat.
4. Untuk fitur lainnya dapat dilihat di dokumentasi resmi https://www.cypress.io/features/

Setiap produk memiliki keunggulan dan kekurangan, kekurangan Cypress yang sangat disayangkan adalah Cypress hanya mendukung bahasa pemrograman Javascript. Berbeda dengan saingannya Selenium yang mendukung beberapa bahasa pemrograman antara lain Java, Python, Ruby, C#, Php, dll.

Cara penggunaan

Tak kenal maka tak sayang, maka dari itu mari kita sedikit mencicipi Cypress secara dasar. Pada tulisan kali ini, saya merekomendasikan untuk memulai project menggunakan framework NextJs, text editor VSCode dan Yarn.

Oke, let’s get started..

Pertama, mari kita buat project NextJs dengan nama next-cypress dengan menuliskan perintah :

yarn create next-app next-cypress

Setelah project berhasil dibuat, kita dapat masuk dan membuka root direktori project dengan perintah :

cd next-cypress && code .

Apabila project NextJS berhasil dibuat, perintah diatas akan membuka text editor dengan menampilkan struktur direktori seperti gambar dibawah ini :

Struktur direktori create-next-app

Untuk melihat apakah aplikasi sudah dapat dijalankan, kita dapat menjalankan perintah :

yarn dev

Setelah beberapa saat, browser akan membuka halaman dengan tujuan http://localhost:3000 seperti dibawah ini :

Halaman utama project NextJS

Tahap selanjutnya, kita akan memasang Cypress sebagai alat pengujian project NextJS kita dengan menuliskan perintah :

yarn add cypress --dev

Ketika berhasil menginstall Cypress, akan ada tambahan folder baru pada root folder bernama Cypress. Untuk pengujian lebih lanjut, ada baiknya kita menaruh command untuk membuka cypress pada scripts yang berada pada file package.json sebagai berikut :

Penambahan script pada package.json

Setelah menambahkan perintah pada scripts, kita dapat membuka jendela pengetesan Cypress dengan menuliskan perintah pada terminal sbb :

yarn cypress:open

Halaman utama Cypress.

Jika sudah sampai tahap ini, kita sudah berhasil menggunakan Cypress. Untuk tahap selanjutnya, kita akan tes beberapa komponen yang ada pada halaman utama NextJS.

Maka dari itu kita dapat memilih menu E2E Testing, dan akan muncul pilihan browser untuk melakukan tes.

Pilihan browser untuk testing.

Langkah pertama, kita buat sebuah file dengan ekstensi cypress Home.cy.js di dalam direktori cypress > e2e.

Buat file Home.cy.js pada folder e2e

Lalu masukkan script pengujian pada file Home.cy.js sbb :

it("Test Homepage", () => {
  cy.visit('http://localhost:3000/');
  cy.get('h1').contains(/welcome to next/i);
  cy.get('p').contains(/get started/i);
  cy.get('[href="https://nextjs.org/docs"] > h2').should('have.text', 'Documentation →');
  cy.get('[href="https://nextjs.org/docs"] > p').should('have.text', 'Find in-depth information about Next.js features and API.');
});

Setelahnya itu kita kembali ke jendela Cypress dan menekan tombol Start E2E Testing, Maka kita akan melihat Cypress membuka jendela baru dengan file yang baru saja kita buat di text editor.

Daftar file yang akan di testing.

Langkah terakhir, kita dapat mengklik file Home.cy.js dan jendela akan berganti dengan jendela testing dan secara otomatis melakukan serangkaian tes yang kita tuliskan sebelumnya.

Jendela pengujian Cypress

Jika layar kalian sudah seperti gambar diatas, selamat kita akhirnya berhasil melakukan automation testing pertama kita menggunakan Cypress 🎉 bagaimana? cukup mudah bukan?

Semoga artikel ini dapat membantu kalian dalam proses testing aplikasi, untuk lebih lengkapnya bisa langsung membaca dokumentasi Cypress disini. Terima kasih, sampai jumpa di artikel selanjutnya 😀.