Automasi browser dengan Node, Selenium The Origin

Hai Geeks, di series ke-4 dan terakhir dari Automasi browser dengan Node, kita akan membahas automasi browser yang paling tua dan menginspirasi automasi lain, Selenium. Casper, Zombie, Nightmare lahir setelah adanya Node, sedangkan Selenium telah ada sebelum Node. Selenium di bahasa pemrograman lain pun sudah sering digunakan sebagai standar untuk testing

Selenium adalah framework automasi web browser untuk cross browser testing. Selenium membutuhkan driver spesifik untuk setiap browser. Setelah setting driver, selenium akan men-drive browser tersebut untuk menjalankan automasi. Untuk download driver sudah disediakan di npm selenium-webdriver

Untuk demo pertama, kita akan mencoba cek harga terkini dari bitcoin

npm i selenium-webdriver


Lalu demo kedua seperti biasa, cek instagram Adi Trioka muncul pertama di Google


Kelebihan dan kekurangan selenium sebagai berikut

Pro :

• Untuk penggunaan sehari-hari lebih mudah karena dari browser
• Browser menyimpan cookies

Kontra :

• Kode Panjang
• Cukup berat saat membuka browser

Sumber
Selenium

Automasi browser dengan Node, Casper the new Phantom

Hai Geeks, di series ke 3 dari Automasi browser dengan Node dan posting ke 5 ini, kita akan membahas mengenai salah satu headless browser yang sudah lama dikenal, PhantomJS. Uniknya, PhantomJS adalah buatan salah seorang developer Indonesia bernama Ariya Hidayat, dan PhantomJS ini sudah ada sejak tahun  2010

Sayangnya PhantomJS hanyalah sebuah browser, jadi untuk navigasi dan testingnya sulit. Untuk mempermudah maka bisa menggunakan CasperJS. Duet Casper dan Phantom yang saling melengkapi

Untuk menjalankan CasperJS, harus dengan mendownload PhantomJS terlebih dahulu di download PhantomJS. Lalu atur environtment variabel. Untuk macOS maka arahkan ke phantomJS, contohnya

export PHANTOMJS_EXECUTABLE=/User/phantomjs/bin/phantomjs phantomjs

Setelah ini lalu install casperJS secara global dengan

npm i casperjs -g

Demo pertama akan kita coba untuk list semua blog terbaru di blog nostratech

Berbeda dengan yang lain, cara menjalankan file ini dengan

casperjs list_blog.js

Lalu untuk demo kedua seperti biasa, cek instagram aditrioka muncul pertama, namun kali ini tidak menggunakan mocha, tapi casper itu sendiri

Untuk menjalankannya dengan

casperjs test casper-test.js

Kelebihan dan kekurangan casper-phantom yang terasa sebagai berikut
Pro:

• Made by Indonesian
• Sudah langsung support assert untuk testing
• Pemrosesan cepat

Con:

• Setting cukup membingungkan dengan banyaknya requirement
• Dokumentasi Phantom dan version sangat membingungkan
• Untuk penggemar mocha, beda feeling
• Proses hanya bisa dipantau dengan command line
• Kode panjang

Selamat mencoba casper-phantom. Creativity is the limit


Sumber

Phantom
Casper

Automasi browser dengan Node, Zombie Apocalypse

Hai Geeks, di postingan ke 4 ini, saya akan melanjutkan series Automasi browser dengan Node, selanjutnya adalah ZombieJS

Zombie adalah framework untuk automasi browser buatan developer Assaf Arkin. Proses zombie sangat cepat, dan headless, karena itulah diibaratkan zombie. Zombie dibuat untuk testing dan sudah support assert.

Awalnya saya ingin mendemokan search di Google, namun setelah dicoba ada error dari javascript. Ternyata, Google memiliki sistem yang menangkal tools otomatis seperti zombie, berikut kutipan dari Stackoverflow

Karena keterbatasan ini maka saya akan mendemokan dengan Search Engine DuckDuckGo

Demo pertama untuk lihat postingan terbaru blog Nostra

npm install zombie

Lalu demo kedua untuk testing menggunakan Mocha, di test ini sama seperti di Nightmare, akan membuka search engine dan memeriksa apakah instagram aditrioka muncul pertama

untuk menjalakan, run command diawali dengan mocha

Kelebihan dan kekurangan Nightmare sebagai berikut
Pro :

• Ringan dan cepat
• Sudah langsung support assert untuk testing

Con:

• Proses hanya bisa dipantau dengan command line
• Terdeteksi sebagai automatic tools

Selamat mencoba zombie. Creativity is the limit

Sumber
ZombieJS

Automasi browser dengan Node, Face the NightmareJS

Hai Geeks, di posting bulanan ke 3 ini, saya akan membahas tentang Nightmare

Nightmare adalah salah satu npm untuk automasi browser high-level buatan segment, tujuannya adalah meniru perilaku user di browser, seperti goto, click, type, check dan lain-lain. Pada awal pengembangan sebenarnya digunakan untuk automasi task di web yang tidak memberikan API secara publik, lalu berkembang dan sering digunakan untuk UI testing dan crawling

Nightmare mudah digunakan dengan memberikan pengalaman yang synchronous untuk setiap script block dibandingkan dengan callback. Nightmare dibangun dengan Electron, sama dengan PhantomJS, tapi Nightmare mengklaim 2x lebih cepat dibanding PhantomJS dan lebih modern. Dari kode yang saya lihat, memang kode yang digunakan Nightmare lebih simple dengan feel yang didapat seperti Promise, sedangkan PhantomJS dengan feel Callback

Di posting ini, mari kita demo untuk stalking instagram Yuki Buwana. Pertama, cari instagram atas nama Yuki Buwana, lalu klik posting terbarunya, terakhir, print statusnya

npm install nightmare


Di line ke-2 option bisa diatur untuk menampilkan browser
Idealnya elemen didapat dari id nya, tapi karena tidak ada maka diambil dari class

Untuk demo kedua, nightmare digunakan sebagai Tester sederhana untuk load home page google dan memastikan instagram Adi Trioka muncul sebagai pencarian pertama dengan Mocha

npm install mocha -g
npm install assert

untuk menjalakan, run command diawali dengan mocha

Kelebihan dan kekurangan Nightmare sebagai berikut
Pro :

• Mudah digunakan pemula
• Dapat berjalan di background process ataupun windows hanya dengan merubah option
• Dapat diinterupsi di tengah proses, contoh kebutuhan multi factor authentication

Con:

• Load time lama karena load javascript

Selamat menikmati nightmare. Creativity is the limit

Sumber
Nightmare
Testing Nightmare

JMeter dengan Data Dinamis

Pada saat menggunakan JMeter atau melakukan concurrent test ada kebutuhan untuk mensimulasikan data yang berbeda-beda antara pada HTTP Request. JMeter bisa memfasilitasi kebutuhan ini dengan menggunakan CSV Data Set Config. Sesuai dengan namanya configurasi ini hanya bisa membaca file yang berjenis CSV saja.

Kita akan melanjutkan Test Plan dari postingan sebelum nya (Concurrent Test menggunakan JMeter).

CSV Data Set Config

Tambahkan CSV Data Set pada Sampler HTTP Request

Terdapat field-field yang perlu di setting untuk menggunakan sebuah CSV Data Set, diantaranya adalah:

• Filename adalah path file csv yang akan digunakan.
• Delimiter (use '\t' for tab) adalah settingan untuk simbol pemisah kolom data. Untuk csv biasanya kita menggunakan koma ',' sebagai pemisah kolom data.
• Allow quoted data? Kita set False karena pada file csv kita bagian data tidak di quote. 
• Recycle on EOF Kita set False agar proses berhenti jika row data pada file csv sudah habis, dan tidak melakukan looping ke bagian data pertama lagi. 
• Stop thread on EOF Kita set True agar apabila jumlah data pada csv lebih banyak dari pada concurrent user yang kita setting pada Thread Group proses JMeter akan berhenti karena sudah mencapai jumlah concurrent user yang sudah kita setting di Thread Group. 
• Sharing mode set All Thread jika menginginkan csv bisa di baca oleh Thread Group lain. Set Current Thread Group jika menginginkan csv hanya bisa di baca oleh Sampler lain yang berada pada Thread Group yg sama. Set Current Thread jika menginginkan csv hanya bisa di baca oleh Sampler dimana CSV Data Set Config ini berada saja. Direkomendasikan untuk menggunakan Current Thread Group.

Untuk bisa menggunakan data dari file csv yang sudah dipilih perlu dilakukan perubahan pada Body Data di Sampler HTTP Request. Berikut adalah isi file csv yang digunakan:

Pada file csv terdapat 2 header kolom yaitu username dan password. Cara pemasangan data csv ke dalam Body Data adalah seperti berikut ${username} dan ${password}.

Test

Selanjutnya kita bisa menjalankan tes dengan klik button Start pada bagian toolbar. Hasil nya bisa dilihat pada View Result Tree.

Karena kita setting concurrent user pada Thread Group adalah 5 maka pada View Result Tree hanya muncul 5 HTTP Request meskipun kita menyediakan 10 data pada file csv.
Kita cek bagian Request dari masing-masing HTTP Request dan akan terlihat bahwa masing-masing request menggunakan username yang berbeda-beda.

Skenario testing concurrent menggunakan data dinamis atau file csv ini lebih menggambarkan kondisi nyata karena benar-benar mensimulasikan banyak user yang berbeda id atau username mengakses REST API secara bersamaan.

Concurrent Test menggunakan JMeter

Pada kali ini kita akan membahas cara menggunakan JMeter untuk melakukan simulasi concurrent user mengakses sebuah REST API. Pengenalan JMeter sudah di bahas pada postingan berikut: Menggunakan JMeter untuk test service REST.

Thread Group

Pertama kita tambahkan Thread Group terlebih dahulu. Thread Group ini yang nanti bisa kita setting untuk keperluan concurrent test. Apabila sudah di tambahkan ke dalam Test Plan kita bisa melihat terdapat Thread Properties yang berisi Number of Thread (User) dan Ramp-Up Period (in seconds).

Number of Thread (User) merupakan jumlah user yang akan kita simulasikan. Jadi jika kita mau mensimulasikan 100 user maka field ini di isi 100. Pada skenario kali ini akan kita simulasikan 5 user concurrent.

Ramp-Up Period (in seconds) merupakan scope atau range waktu untuk concurent user memulai eksekusi thread group. Jadi misal kita memiliki 5 concurent user dan mengisi Ramp-up dengan 1, maka artinya adalah waktu 1 second akan di bagi 5, jadi setiap concurrent user akan memiliki jeda 0.2 second.
user 1 start pada detik 0
user 2 start pada detik 0.2
user 3 start pada detik 0.4
dan seterusnya...

Bila menginginkan simulasi concurrent user berjalan secara serentak pada detik 0, maka tinggal isi bagian Ramp-Up dengan 0. Ramp-Up 0 second ini akan berefek menambah beban pada PC/Laptop yang merunning JMeter karena akan menggenerate banyak HTTP Request pada waktu yg sama.

Sampler HTTP Request

Selanjutnya kita masukan sebuah Sampler HTTP Request pada Thread Group yg ada.

Pada Sampler HTTP Request ada beberapa yang perlu dilengkapi isinya, diantaranya adalah Server Name or IP, Port Number, Implementation, Protocol, Method, Path, dan Body Data. Request Body untuk API Login kali ini adalah username dan password seperti berikut:

HTTP Header Manager

Jangan lupa tambahkan HTTP Header Manager pada Sampler HTTP Request agar kita bisa menambahkan properties pada header HTTP request. 

Pada skenario kali ini yang di perlukan hanya Content-Type application/json saja.

Listener

Bagian akhir adalah menambahkan Listener View Result pada Thread Group agar kita bisa melihat hasil proses. Listener yang paling biasanya dipakai adalah View Result Tree.

Kita bisa menjalankan concurrent test dengan klik button Start pada bagian toolbar. Hasil nya bisa dilihat pada View Result Tree.

Terdapat 5 buah HTTP Request, kita bisa melihat detail Request dan Response dari masing-masing HTTP Response. Simbol pada HTTP Request berwarna hijau merupakan tanda jika respon yang di dapat adalah bukan HTTP Response error. Apabila response yang di terima adalah 401, 503, dll maka simbol pada HTTP Request akan berwarna merah.

Dengan di lakukan nya Concurrent Test ini kita bisa mengetahui apakah sistem/aplikasi yang kita develop bisa menghandle jumlah concurrent user seberapa banyak dalam satu detik.

Menggunakan JMeter untuk test service REST

Ada banyak tools untuk melakukan test service REST misalnya Poster plugin, Postman plugin atau bisa juga menggunakan curl dari linux terminal.

Pada kesempatan ini saya ingin membagikan pengalaman menggunakan JMeter untuk test service REST, untuk dapat menggunakan JMeter sebaiknya download dulu di-sini. Bila sudah jalankan JMeter.

Selanjutnya save test plan terlebih dahulu

 

Isi nama file test plan, misalnya Rest Test Plan.jmx

Kemudian tambahkan elemen Thread Group pada elemen Test Plan, elemen Thread Group berguna untuk men-simulasi-kan jumlah user yang akan melakukan test.

Selanjutnya tambahkan elemen HTTP Request Defaults pada elemen Thread Group yang tadi kita buat, elemen HTTP Request Defaults berguna untuk meng-konfigurasi nilai default untuk setiap pemanggilan HTTP, kenapa pemanggilan HTTP ? karena service REST bekerja menggunakan protokol HTTP.

Isi nilai-nilai default yang mungkin pada elemen HTTP Request Defaults, seperti Server Name or IP dan Port Number

Kemudian tambahkan elemen HTTP Header Manager pada elemen Thread Group yang tadi kita buat, elemen HTTP Header Manager berguna untuk menambahkan header HTTP pada setiap request HTTP seperti Content-Type=application/xml jika data yang dikirim melalui body HTTP berupa dokumen XML.

Karena data yang dikirim melalui body HTTP menggunakan format JSON, maka tambahkan header HTTP yang baru dengan Name = Content-Type, dan Value = application/json

Kemudian tambahkan elemen HTTP Request pada elemen Thread Group yang tadi kita buat, elemen HTTP Request merupakan representasi dari pemanggilan service REST.

Misalkan ingin melakukan pemanggilan service REST pada endpoint URI http://localhost:8089/service/customer/list dengan method HTTP GET, maka konfigurasi pada elemen HTTP Request cukup dengan mengisi Path = service/customer/list dan Method = GET. Sedangkan untuk Server Name or IP dan Port Number sudah dikonfigurasi pada elemen HTTP Request Defaults.

Dan untuk melihat data request dan response dari setiap pemanggilan service REST maka perlu ditambahkan elemen View Result Tree pada elemen Thread Group yang tadi kita buat.

Untuk menambahkan pemanggilan service REST ke endpoint URI yang lain dapat dengan menambahkan elemen HTTP Request lagi pada elemen Thread Group yang sama.

Untuk mulai melakukan test lakukan dengan menekan tombol

Untuk menghapus hasil test pada elemen View Result Tree lakukan dengan menekan tombol

Berikut contoh hasil pemanggilan yang dapat kita lihat pada View Result Tree

Berikut contoh request HTTP yang dikirim ke endpoint URI http://localhost:8089/service/customer/list dengan method HTTP GET

Berikut contoh response HTTP yang didapat dari request HTTP ke endpoint URI http://localhost:8089/service/customer/list dengan method HTTP GET

Sekian blog sederhana penggunaan JMeter untuk test service REST. Semoga bermanfaat.

Selamat Lebaran, mohon maaf lahir batin. :)