Menguji Halaman Web Secara Otomatis


Salah satu bagian yang cukup ribet dalam pengujian sebuah aplikasi adalah pengujian tampilan. Yup! Kita mungkin sudah menguji setiap class yang ada dengan JUnit, tapi bagaimana bila kesalahannya terletak di halaman web? Kita harus memastikan satu per satu, setiap halaman yang ada dapat berfungsi sebagaimana mestinya.  Kalau ada banyak halaman, selain repot juga membutuhkan ketelitian.  Oleh sebab itu, Selenium menyediakan sebuah cara otomatis untuk melakukan pengujian halaman web.

Sebagai contoh, saya memiliki sebuah halaman web dengan tampilan seperti berikut ini:

Halaman Web Yang Akan Diuji

Halaman Web Yang Akan Diuji

Bila pengguna mengisi nama user dan password dengan benar, maka halaman baru akan muncul. Tetapi bila pengguna mengisi nama user dan password dengan salah, maka akan muncul sebuah tulisan User atau password salah!.

Untuk melakukan pengujian secara otomatis, saya menggunakan IDE NetBeans 7.1.2, Firefox 13, dan Selenium yang baru di-checkout (repository URL SVN anonymous http://selenium.googlecode.com/svn/trunk/). Jangan lupa menambahkan dependencies secara manual ke NetBeans (termasuk file JAR yang dibutuhkan!). Bila memakai Maven, dapat juga langsung menambahkan dependency ke versi terbaru Selenium dengan Group Id: org.seleniumh.selenium, Artifact Id: selenium-java, dan Version: 2.24.1.

Cara yang paling gampang  untuk menguji halaman web adalah dengan memakai Selenium IDE terlebih dahulu. Selenium IDE adalah sebuah plugin untuk Firefox yang dapat di-download di http://seleniumhq.org/download/. Dengan plugin ini, saya dapat merekam aktifitas yang saya lakukan di sebuah halaman dan menerjemahkannya menjadi kode program. Sebagai contoh, saya akan merekam aktifitas mulai dari saat saya mengisi field Nama User, mengisi Password, hingga akhirnya menekan tombol Login. Lalu, sebagai penanda, saya men-select sebuah tulisan yang hanya akan muncul di halaman berikutnya bila login sukses. Saat men-klik kanan selection, saya akan memilih menu verifyTextPresent.

Untuk menghentikan perekaman, saya men-klik tombol lingkaran merah yang ada di kanan atas. Berikut ini contoh tampilan Selenium IDE yang berisi perintah yang mewakili aktifitas yang telah saya lakukan:

Tampilan Selenium IDE

Tampilan Selenium IDE

Berikutnya, masih di Selenium IDE, saya memilih menu File, Export Test Case As, lalu saya memilih JUnit 4 (WebDriver Backed). Saya akan meletakkan file baru ini di folder test/co/id/jocki/ui (saya memakai folder test bukan src).   Kemudian, saya memberikan nama LoginUITest sebelum men-klik tombol Save.

Berikut ini adalah  kode program yang dihasilkan beserta beberapa perubahan yang saya buat:

package co.id.jocki.ui;

import com.thoughtworks.selenium.SeleneseTestBase;
import org.junit.After;
import org.junit.Before;
import org.junit.Test;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebDriverBackedSelenium;
import org.openqa.selenium.firefox.FirefoxDriver;

public class LoginUITest extends SeleneseTestBase {

  @Before
  public void setUp() throws Exception {
    WebDriver driver = new FirefoxDriver();
    String baseUrl = "http://localhost:8080/";
    selenium = new WebDriverBackedSelenium(driver, baseUrl);
  }

  @Test
  public void testLoginSukses() throws Exception {
    selenium.open("/Test/login.jsp");
    selenium.type("id=namaUser", "user");
    selenium.type("id=password", "12345");
    selenium.click("//button[@type='button']");
    selenium.waitForPageToLoad("30000");
    verifyTrue(selenium.isTextPresent("Halaman Pengguna"));
  }

  @Test
  public void testLoginGagal() throws Exception {
    selenium.open("/Test/login.jsp");
    selenium.type("id=namaUser", "sembarangan");
    selenium.type("id=password", "sembarangan");
    selenium.click("//button[@type='button']");
    verifyTrue(selenium.isTextPresent("User atau password salah!"));
  }

  @After
  public void tearDown() throws Exception {
    selenium.stop();
  }
}

Pada kode program di atas, saya menambahkan dua buah pengujian (test case), yaitu pengujian login sukses dan pengujian login gagal. Pada pengujian login sukses, harus ada loading ke halaman baru, dimana pada halaman baru tersebut terdapat tulisan Halaman Pengguna. Pada pengujian login gagal, di halaman yang sama harus terdapat tulisan User atau password salah!. Bila perilaku yang terjadi berbeda seperti yang diharapkan, maka besar kemungkinan terdapat kesalahan di halaman web saya.

Untuk melakukan pengujian, saya men-klik kanan di editor NetBeans, kemudian saya memilih Test File (CTRL+F6).  Selama pengujian, Selenium akan membuka sebuah instance Firefox.  Selenium akan mengisi textbox yang ada dan men-klik tombol yang ada secara otomatis.  Saya tinggal menyaksikan hingga proses pengujian berakhir.  Btw, bila ingin menggunakan browser lain, FirefoxDriver di kode program di atas dapat diganti dengan class lain seperti InternetExplorerDriver atau ChromeDriver.  Juga ada driver untuk Opera, iPhone dan Android.

Di window Test Results, saya bisa melihat hasil pengujian, seperti yang terlihat di gambar berikut ini:

Window Test Results Di NetBeans

Window Test Results Di NetBeans

Kenapa harus repot-repot membuat skenario pengujian untuk halaman ini dan puluhan halaman lainnya? Memang repot untuk sekali ini, tapi bila pada suatu hari nanti saya melakukan modifikasi kode program (perubahan selalu ada!), saya tidak perlu lagi membuka  halaman yang ada satu per satu.  JUnit akan memberikan laporannya, dan saya tinggal mencari test case mana yang gagal (bila ada).  Sebuah kesalahan kecil kadang-kadang dapat berakar ke tempat tak terduga;  pengujian otomatis membantu mendeteksinya karena diterapkan pada keseluruhan kode program.

Perihal Solid Snake
I'm nothing...

One Response to Menguji Halaman Web Secara Otomatis

  1. Ping-balik: Melakukan Front-End Testing « The Solid Snake

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: