UI Test Automation dengan Protractor

Tidak ada test tool yang sempurna karena kesempurnaan hanya milik Tuhan semata, untuk UI automation dengan web berbasis Angular  maka diperlukan juga test tool khusus untuk menginspect element dari web Angular tersebut. Ada banyak tools sih yang bisa dipake, dari sekian banyak yang populer adalah Protractor.

Kali ini sedikit post tentang bagaimana membuat UI test automation dengan protractor dan apa saja environment pendukungnya,  berikut listnya;

  1. Tentukan web apps yang akan di test atau AUT
  2. Download dan setup Protractor
  3. Text Editor
  4. Test Scenario
  5. Create Test Case dengan pendekatan Page Object
  6. Run Test

Yuk, kita mulai.

1). Tentukan web apps yang akan ditest, untuk mengetahui apakah sebuah web menggunakan Angular, saya menggunakan browser extension Wappalyzer.

Saya menggunakan web sandisk sebagai AUT, karena udah banyak yang make contoh web angular.org

2) Protractor di donwload via npm install (pastikan NodeJs sudah terinstall di komputer), cara download dan install bisa di cek disini https://www.protractortest.org/#/protractor-setup. Cek apakah sudah terinstall dengan sempurna via cmd,

3). Text editor bisa apa saja yang cocok dan sesuai selera, untuk yang saya contohkanmenggukana Visual Studio Code, bisa di download disini https://code.visualstudio.com/download, lanjutkan dengan installasinya.

4. Test scenario nya simple saja sebagai berikut

Given Saya websitenya Sandisk

And Saya arahkan ke Search section

When Saya mencari kata kunci tertentu

And Saya tekan tombol Search

Then Saya akan diarahkan ke halaman dengan search URL tertentu

5). Buka visual studio code (vsc) dan buat folder pada installasi Protractor dan buat project folder. Dalam contoh ini saya buat project folder dengan nama “sanDisk”

“C:\Users\gdhadi\AppData\Roaming\npm\node_modules\protractor\sanDisk”

5.1. Buat 2 folder baru di dalam project folder, dengan nama Page dan Test.

5.2. Buat JS file letakkan masing-masing folder dengan nama, search_PO.js (folder Page) dan sandisk_SPEC.js (folder Test) dan juga file conf.js ( folder Test)

5.3. Untuk file search_PO.js, details sebagai berikut

5.4 Untuk file search_SPEC.js, details sebagai berikut

5.5 Untuk file conf.js, details sebagai berikut

6). Run testnya bisa langsung dari visual studio code terminal atau bisa dari cmd (musti diarahkan dahulu ke folder project, khususnya pada file conf.js). Nah untuk test kali ini saya run langsunda dari terminal visual studio code, sebagai berikut

Nah sukses run testnya, test simple yang bisa dilakukan untuk pengenalan awal. Untuk locating element protractor yang lebih lengkap bisa di cek di http://www.protractortest.org/#/locators.

Untuk sample diatas bisa clone di https://github.com/GdHadi/Protractor_sandisk

Terima kasih, semoga ada manfaat.

 

Leave a Reply

Your email address will not be published. Required fields are marked *