Implementasi End-to-End Automatic Testing dengan Cypress di Warung Pintar

Muhammad Syarif
Grow at Warung Pintar
6 min readApr 27, 2020

Jika Anda adalah seorang Software Engineer, tidak sah rasanya bila Anda belum mengenal testing aplikasi atau pengujian sistem. Pada dasarnya, pengujian sistem adalah suatu proses yang dilakukan untuk menilai apakah suatu produk yang dirancang telah sesuai dengan apa yang diharapkan. Perangkat lunak, atau yang sering dikenal dengan sebutan software, hanyalah satuan elemen dari sistem berbasis komputer yang lebih besar. Biasanya, perangkat lunak tersebut terhubung dengan perangkat lunak dan perangkat keras lainnya.

Berdasarkan buku Marketing Management (15th Edition) oleh Philip Kotler dan Kevin Lane Keller yang pernah saya baca, terdapat tiga jenis testing yang dapat digunakan ketika sebuah produk baru, atau prototype, siap dipasarkan secara komersial.

1. Alpha testing.

Pengujian Alpha adalah salah satu strategi pengujian yang dilakukan oleh tim di internal perusahaan untuk mengukur serta meningkatkan kinerja, keandalan, rancangan, dan biaya operasi produk.

2. Beta testing.

Apabila pengujian Alpha berjalan dengan baik, maka perusahaan akan melangsungkan pengujian Beta dengan mengundang para pengguna potensial agar dapat melakukan pengujian secara rahasia di tempat mereka sendiri. Tidak hanya itu, produk baru industri dapat juga diuji di tempat distributor dan dealer.

3. Market testing.

Cara lain yang juga dapat ditempuh adalah uji pemasaran, di mana perusahaan menghasilkan pasokan produk dalam jumlah terbatas dan menyerahkannya kepada wiraniaga untuk menjual di daerah geografis yang terbatas dengan dukungan promosi, katalog produk, dan sebagainya. Melalui cara ini, manajemen dapat mempelajari apa yang mungkin terjadi dalam pemasaran berskala penuh dan menyajikan informasi yang lebih lengkap untuk memutuskan komersialisasi produk tersebut.

Nah, dari tiga macam prototype testing dalam pengembangan sebuah produk, dapat ditarik kesimpulan bahwa testing aplikasi termasuk ke dalam kategori yang pertama, yaitu alpha testing.

Ada berbagai macam testing yang dapat dimanfaatkan untuk meningkatkan kualitas kode aplikasi yang dibuat. Yang paling umum adalah unit-test. Unit-test merupakan metode verifikasi perangkat lunak, di mana programmer menguji suatu unit program layak untuk tidaknya dipakai. Unit-test memvalidasi alur atau logika program dalam unit yang paling kecil, yaitu function. Tidak hanya itu, ada pula end-to-end testing, atau yang biasanya disingkat sebagai e2e.

Agar kalian memperoleh gambaran langsung mengenai bagaimana implementasinya, kali ini, kita akan membahas langsung implementasi e2e di Warung Pintar dengan menggunakan Cypress.

Cypress merupakan salah satu aplikasi gratis yang dapat dimanfaatkan dalam pengujian otomatis. Sebenarnya, tidak hanya end-to-end test, Cypress juga dapat melakukan beberapa jenis pengujian, seperti integration test hingga unit test. Cypress memudahkan user dalam mengatur tes, menulis tes, serta menjalankan tes dengan lebih cepat, mudah, dan handal. Untuk mengetahui lebih lanjut tentang Cypress, kalian bisa mengakses pranala berikut: https://www.cypress.io/.

https://www.cypress.io/

Cukup sampai situ untuk teori, selanjutnya, mari kita bahas penggunaan Cypress di aplikasi Odoo ERP! Bagi kalian yang masih belum mengenal apa itu Odoo ERP, silakan simak Video Pengenalan Tentang Odoo ERP di YouTube atau baca ulasan berikut, Berkenalan dengan Odoo ERP.

Kembali ke penggunaan Cypress di aplikasi Odoo ERP, langkah-langkahnya adalah seperti berikut,

1. Unduh Cypress

User dapat mengunduh Cypress melalui dua cara, yaitu dengan unduh secara langsung dari web https://www.cypress.io/ atau melalui terminal.

Docker:

Anda bisa membaca lebih lanjut mengenai penggunaan Cypress di Docker di pranala berikut, run-cypress-with-a-single-docker-command/.

npm:

$ cd /your/project/path
╭─syarif@muhammad /opt/odoo/e2e
╰─$ npm install cypress

Dalam hal ini, kita akan menggunakan npm. Setelah berhasil di-install, akan muncul folder seperti berikut,

╭─syarif@muhammad /opt/odoo/e2e 
╰─$ tree -L 1

.
├── node_modules
└── package-lock.json

Setelahnya, kita dapat membuka Cypress dengan menuliskan perintah ini,

╭─syarif@muhammad /opt/odoo/e2e 
╰─$ node_modules/.bin/cypress open

Kemudian, Cypress akan terbuka secara otomatis…

…dan ada folder baru yang dihasilkan.

╭─syarif@muhammad /opt/odoo/e2e 
╰─$ tree -L 2
.
├── cypress
│ ├── fixtures
│ ├── integration
│ ├── plugins
│ └── support

├── cypress.json
├── node_modules
│ ├── ajv
│ ├── ansi-escapes
│ ├── ansi-regex
│ ├── ansi-styles
│ ├── any-observable
...

2. Membuat Test Case Sales Order

Setelah proses pengunduhan selesai, sekarang saatnya kita melakukan program test-case dalam pembuatan Sales Order di Odoo ERP. Satu hal yang perlu diingat, di sini saya menggunakan Odoo CE terbaru, yaitu ver. 13.0. (Jangan lupa juga install aplikasi Sales!)

BaseURL dan Login.

Untuk langkah, pertama kita dapat memanfaatkan environment variable saat menuliskan baseURL pada halaman yang ingin dikunjungi sesuai file cypress.json. Environment variable tersebut dapat mempemudah kita dalam melakukan perubahan ketika terdapat variable yang bersifat dinamis pada setiap environment (i.e. dev, staging, prod.) maupun developer.

Lalu, buka file cypress/cypress.json,

╭─syarif@muhammad /opt/odoo/e2e 
╰─$ tree -L 1
.
├── cypress
├── cypress.json
├── node_modules
└── package-lock.json

…dan ubah agar tampilannya seperti ini,

Baris kedua menandai alamat aplikasi yang kita gunakan, sementara baris ketiga sampai kelima merupakan data user berupa e-mail dan password yang digunakan untuk login.

Support file yang terdiri dari index.js & commands.js.

index.js

Secara default, Cypress akan secara otomatis memasukkan file dukungan cypress/support/index.js. File ini dijalankan sebelum file lain dipanggil.

Anda bisa menulis kode program sesuai arahan berikut,

Custom command.

Custom command dapat digunakan untuk mendefinisikan script yang sama tanpa perlu ditulis secara berulang. Anda dapat membuka file cypress/support/commands.js, dan tulis beberapa kode program seperti ini,

Login & logout, digunakan untuk memanggil halaman login & logout.

Menu, digunakan untuk membuka tampilan menu.

Untuk melihat commands.js secara lengkap, Anda bisa memasukkan kode seperti berikut,

Sales Order.

Setelah kita buat kode program di atas, sekarang, saatnya kita membuat kode program untuk mengubah Quotation menjadi Sales Order. Pertama-tama, Anda dapat membuat file baru di dalam folder cypress/integration bernama sales_order_spec.js.

Baris 5–8 digunakan untuk memanggil sales menu, sementara baris 10–11 untuk klik tombol Create yang ada di Sales menu. Untuk memahami tiap kode program yang telah dibuat, Anda bisa melihat tiap komentar.

3. Menjalankan Hasil Test Case

Setelah kode program selesai dibuat, Anda dapat menjalankan hasil pengujian test case dengan memilih test case yang akan dijalankan pada Cypress. Kemudian, Cypress akan menjalankan pengujian secara otomatis melalui web browser atau melalui terminal.

Berikut adalah dua cara yang bisa Anda lakukan untuk menjalankan hasil test,

Web browser.

╭─syarif@muhammad /opt/odoo/e2e 
╰─$ node_modules/.bin/cypress open

Tulis perintah seperti di atas dan tekan enter, maka akan muncul tampilan seperti ini

Klik sales_order_spec.js, lalu, akan muncul halaman seperti ini,

Terminal.

╭─syarif@muhammad /opt/odoo/e2e 
╰─$ node_modules/.bin/cypress run “cypress/integration/sales_order_spec.js”

Selang beberapa waktu, akan muncul hasil seperti ini,

Hasil pengujian dapat diketahui setelah pengujian selesai atau berhenti. Status pengujian dikatakan berhasil jika Cypress menunjukkan warna hijau dan dinyatakan gagal jika menunjukkan warna merah.

Untuk pemahaman lebih detail, simak video di bawah ini,

Dari pengujian yang telah dilakukan di Odoo ERP, dapat disimpulkan bahwa salah satu kelebihan end-to-end test menggunakan Cypress adalah kemampuan untuk dapat melihat record log perintah pengujian pada setiap langkah, baik perintah yang sukses maupun yang gagal. Tidak hanya itu, Anda pun dapat merekam hasilnya dalam bentuk video dan screenshot.

Tertarik untuk mencoba? Kunjungi github Warung Pintar di pranala berikut ya: e2e-odoo!

--

--

Muhammad Syarif
Grow at Warung Pintar

Software Engineer, ERP Specialist (Odoo), Supply Chain Management & Data Enthusiast | mhdsyarif.com