Melakukan Front-End Testing Dengan Codeception


Pada artikel Melakukan Front-End Testing Dengan Selenium Tanpa “Mengotori” Database, saya mencoba melakukan pengujian halaman web secara otomatis. Pengujian dilakukan dengan mengisi database dengan data yang konsisten lalu mensimulasikan akses pada browser dan memastikan hasilnya sesuai harapan. Pada artikel ini, saya akan melakukan hal yang sama tetapi dengan menggunakan Codeception. Codeception adalah sebuah ‘framework’ pengujian yang mempermudah menulis kode program pengujian. Dukungan yang dimiliki oleh Codeception ditawarkan dalam bentuk module seperti Selenium2, Webdriver, PhpBrowser, dan lainnya.

Sebagai latihan, saya akan menguji sebuah web sederhana dimana terdapat sebuah halaman yang hanya bisa ditampilkan setelah pengguna login. Proyek web tersebut dibuat dengan menggunakan fasilitas Auth yang disediakan oleh Laravel.

Untuk men-install Codeception pada proyek Laravel, saya akan menggunakan perintah Composer berikut ini:

C:\proyek> composer require "codeception/codeception:*"

Composer akan men-download Codeception pada folder vendor/codeception.

Langkah pertama untuk memakai Codeception adalah menghasilkan file konfigurasi dengan memberikan perintah seperti berikut ini:

C:\proyek> vendor\bin\codecept bootstrap app

Perintah di atas akan menyebabkan Codeception membuat beberapa file baru yang dibutuhkan oleh Codeception di folder app\tests. Folder acceptance, functional dan unit masing-masing mewakili jenis pengujian. Istilah yang dipakai untuk front-end testing disini adalah acceptance testing. Ini yang akan saya pakai nantinya.

Sebelumnya, saya perlu mencari file file acceptance.suite.yml dan mengubah nilai url agar sesuai dengan lokasi URL aplikasi yang hendak diuji. Ini adalah salah satu konfigurasi yang dibutuhkan oleh PHPBrowser. Secara default, Codeception akan memakai module PHPBrowser untuk front-end testing. Karena aplikasi yang saya uji tidak mengandung JavaScript, maka ini adalah pilihan yang masuk akal. Bila hendak menguji interaksi melalui JavaScript pada aplikasi, saya harus memakai module Selenium2.

Untuk membuat sebuah file pengujian baru, saya akan memberikan perintah berikut ini:

C:\proyek> vendor\bin\codecept generate:cept acceptance Login -c app

Perintah di atas akan membuat sebuah file baru bernama LoginCept.php di folder app\tests\acceptance. Saya dapat membuat kode program yang mewakili pengujian di file ini. Sebagai contoh, saya dapat mengubah isinya menjadi seperti berikut ini:

<?php
$I = new WebGuy($scenario);

$I->wantTo('display home page');
$I->amOnPage('home/welcome');
$I->dontSee('Selamat datang');
$I->see('Login');

$I->wantTo('login');
$I->fillField('nama', 'snake');
$I->fillField('password', '12345');
$I->click('Login');
$I->amOnPage('home/welcome');
$I->see('Selamat datang, snake');
$I->seeLink('logout');

Kode program di atas sangat mudah dipahami, bukan? Untuk menjalankannya, saya akan memberikan perintah berikut ini:

C:\proyek> vendor\bin\codecept run

Saya akan memperoleh hasil seperti berikut ini:

Codeception PHP Testing Framework v1.8.5
Powered by PHPUnit 3.7.37 by Sebastian Bergmann.

Acceptance Tests (1) ------------------------
Trying to login (LoginCept.php)         Ok
---------------------------------------------

Functional Tests (0) ------------------------
---------------------------------------------

Unit Tests (0) ------------------------------
---------------------------------------------


Time: 858 ms, Memory: 6.50Mb

OK (1 test, 4 assertions)

Salah masalah dengan pendekatan skenario seperti di atas adalah saya harus memiliki 1 file PHP per skenario. Sebagai contoh, walaupun pada kode program pengujian, saya memiliki 2 buah wantTo(), hasil pengujian hanya menampilkan yang terakhir kali saja (Trying to login). Untuk mengatasi hal seperti ini, saya dapat mendeklarasi pegujian dalam bentuk class. Untuk itu, saya membuat skenario baru dengan memberikan perintah seperti berikut ini:

C:\proyek> vendor\bin\codecept generate:cest acceptance Auth -c app

Perhatikan bahwa pada perintah di atas, saya memakai generate:cest sementara pada perintah sebelumnya, saya memakai generate:cept. Perintah tersebut akan menghasilkan sebuah file baru bernama AuthCest.php di folder acceptance. File tersebut berisi class AuthenticationCest yang akan saya ubah menjadi seperti berikut ini:

<?php
use WebGuy;

class AuthCest
{

    public function visit(WebGuy $I) {
        $I->wantTo('display home page as guest');
        $I->amOnPage('home/welcome');
        $I->dontSee('Selamat datang');
        $I->see('Login');
    }

    /**     
     * @before login
     */
    public function wrongLogin(WebGuy $I) {
        $I->wantTo('login with wrong password');
        $I->lookForwardTo('see error when entering wrong password');
        $I->amOnPage('login/show');
        $I->fillField('nama', 'snake');
        $I->fillField('password', 'wrong password');
        $I->click('Login');                
        $I->seeInField('Nama', 'snake');
        $I->see('Terjadi kegagalan');      
    }

    public function login(WebGuy $I) {
        $I->wantTo('login');
        $I->amOnPage('login/show');
        $I->fillField('nama', 'snake');
        $I->fillField('password', '12345');
        $I->click('Login');
        $I->amOnPage('home/welcome');
        $I->see('Selamat datang, snake');
        $I->seeLink('logout');
    }

    /**     
     * @after login
     */
    public function logout(WebGuy $I) {
        $I->wantTo('logout');
        $I->seeLink('logout');
        $I->click('logout');
        $I->dontSee('Selamat datang');
        $I->see('Nama');
        $I->see('Password');
        $I->see('Login');
    }

}

Bila saya menjalankan pengujian, kali ini saya akan memperoleh hasil seperti:

Codeception PHP Testing Framework v1.8.5
Powered by PHPUnit 3.7.37 by Sebastian Bergmann.

Acceptance Tests (4) ------------------------------------------------
Trying to display home page as guest (AuthCest.visit)           Ok
Trying to login with wrong password (AuthCest.wrongLogin)       Ok
Trying to login (AuthCest.login)                                Ok
Trying to logout (AuthCest.logout)                              Ok
---------------------------------------------------------------------

Functional Tests (0) ------------------------
---------------------------------------------

Unit Tests (0) ------------------------------
---------------------------------------------


Time: 1.59 seconds, Memory: 6.75Mb

OK (4 tests, 15 assertions)

Selain menjalankan pengujian, saya juga bisa mengubah kode program pengujian menjadi sesuatu yang lebih mudah dibaca (oleh mereka yang bukan developer) dengan memberikan perintah berikut ini:

C:\proyek> vendor\bin\codecept generate:scenarios acceptance -c app

Hasilnya dapat dilihat pada folder app/tests/_data/scenarios/acceptance. Saya akan menemukan file seperti Auth_Cest.login.txt, Auth_Cest.logout.txt, dan sebagainya. Sebagai contoh, bila saya melihat isi file Auth_Cest.login.txt, saya akan menemukan hasil seperti berikut ini:

I WANT TO LOGIN

I am on page "login/show"
I fill field "nama","snake"
I fill field "password","12345"
I click "Login"
I am on page "home/welcome"
I see "Selamat datang, snake"
I see link "logout"

Perihal Solid Snake
I'm nothing...

Apa komentar Anda?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: