CasperJS: Front End Testing Lebih Menyenangkan

Saya banyak bermain di back-end, tapi kadang harus melakukan testing front-end juga. Testing itu dilakukan untuk memastikan komunikasi antara back-end dan front-end berjalan dengan baik. Masalah muncul saat saya melakuan testing pada single web application yang pakai AJAX dan manipulasi DOM dimana-mana. Saya harus mengulangi langkah dari awal apabila error terjadi ditengah jalan.

Sebagai tukang ketik yang kadang malas saya pikir mengapa tidak dilakukan otomatis testingnya, ya macem pakai capybara di rails gitu. Tenyata hal itu dapat dilakukan dengan menggunakan headless browser. Headless browser adalah web browser yang tidak memiliki GUI. Nah karena tidak memiliki GUI, headless browser ini memiliki API yang dapat kita kendalikan dengan program tertentu. Dan enaknya lagi kita dapat dengan mudah menentukan lebar layar dari browser, ini penting saat membuat tampilan yang responsive.

Contoh dari headless browser diantaranya adalah Selenium dan PhantomJS. Pilihan saya jatuh pada PhantomJS, alasannya simple dependensinya sedikit dan lebih ringan. Untuk memudahkan testing dengan PhantomJS saya pakai CasperJS. CasperJS merupakan tool command line yang berjalan diatas PhantomJS dan difokuskan untuk navigation scripting dan testing tool. CasperJS menyediakan module tester untuk digunakan sebagai tool testing yang mirip seperti PHPUnit atau JUnit yang pake asert-asert itu lho.

Instalasi

Saya lebih suka pakai paket manager untuk instalasi tool-tool ini, kalau mau install manual juga boleh kok, panduanya ada di github repo Phantomjs dan CasperJS . Saya pakai npm untuk instalasinya

$ npm install pathomjs
$ npm install casperjs

Setelah instalasi selesai casperjs siap digunakan. Oh ya, kalau install-nya tidak global seperti contoh diatas, pastikan ./node_modules/.bin dimasukkan di PATH ya. Caranya bisa pakai ini:

$ export PATH=$PATH:$(pwd)/node_modules/.bin

Test hasil instalasinya:

$ casperjs 
CasperJS version 1.1.0-beta3 at ~/casperJS/node_modules/casperjs, 
using phantomjs version 1.9.7

Simple testing

Contoh untuk testing sederhana, buat file bernama simpleTest.js dan isi dengan kode berikut:

/* simpleTest.js */
var jumlahTest = 1;
/* ini test suit nya */
casper.test.begin('Mencoba testing', jumlahTest, function suite(test){
  // dimatiin dulu biar fokus
  casper.options.verbose = false; 
  casper.options.logLevel = 'debug';
  // kalau mau ganti lebar layar disini
  casper.options.viewportSize = {width: 1280, height: 800}; 

  // buka halaman web
  casper.start('http://a.anton.web.id/');

  casper.then(function(){
    /* kalau mau capture halaman pakai ini */
    //var imagePath = './homepage.png';
    //this.capture(imagePath);

    /* memastikan text di tag title benar */
    test.assertTitle('anton we', 'tag title = anton we');
  });
  
  // testing selesai
  casper.run(function(){
    test.done();
  });
});

Jalankan test:

$ casperjs test simpleTest.js

AJAX testing

Bagaimana dengan tombol atau link yang memanggil AJAX ketika diklik? Karena CasperJS ini berjalan di atas PanthomJS, kita dapat menggunakan .evaluate() untuk mengeksekusi javascript di dalam browser (dalam hal ini adalah PanthomJS). Lebih jelasnya bisa lihat gambar disini. Contoh untuk testing AJAX bisa dilihat dibawah ini, asumsinya kode ini ada didalam test suite nya CasperJS ya.

casper.then(function(){
  this.evaluate(function(){
    /* ini akan dieksekusi di browser */
    document.getElementById('tombolAjax').onclick();
  });
});

/* tunggu 5 detik, kadang ajax agak lama */
casper.wait(5000, function(){
  // melakukan sesuatu setelah 5 detik disini
});

/* atau bisa juga menunggu sampai resource siap */
casper.waitForResource('http://localhos/test-ajax', function(){
  // melakukan sesuatu saat resource test-ajax siap
});

Autocomplete testing

Testing autocomplete hampir sama dengan testing AJAX hanya sedikit lebih tricky. Bisa dilihat langsung dikode berikut:

casper.then(function(){
  var fieldAutocomplete = '#negara',
      isiDengan = 'ind';
      autocompleteSuggestContainer = '.ui-autocomplete';
  this.sendKeys(fieldAutocomplete, isiDengan, {keepFocus: true});
  this.waitUntilVisible(autocompleteSuggestContainer, function(){
    /* periksa autocomplete berjalan degan baik, ini opsional */
    this.capture('./cekAutocomplete.png');
    /* lakukan sesuatu setelah autocomplete berjalan,
       contoh klik link pertama: */
    this.click(autocompleteSuggestContainer + ' a:nth-of-type(0)'); 
  });
});

Lebih jauh tetang testing dengan CasperJS dapat dilihat pada dokumentasi tester module.Masih banyak lagi yang bisa dilakukan dengan CasperJS seperti scraping, mengisi form, mengirim form (post), mengirim form dengan AJAX dan lain-lain. Lebih detailnya bisa membaca dokumentasi dari CasperJS, tinggal disesuaikan dengan kebutuhan.

*Gambar dari https://plus.google.com/+CasperjsOrg