Kalau dari judul sih, udah bisa jadi bahan skripsi, tapi belum tau juga nanti mau ngambil skripsi temanya apa ( :D ). Jadi tujuannya adalah, mempermudah saya yang sebenarnya sudah terlalu malas buat nulis username sama password di Sistem Informasi Akademik waktu pengisian KRS. Jadi isi dari tulisan ini hanya sampai pada selesainya proses login, bisa dikembangkan lagi test case nya sampai ke pengisian KRS dll.

Persiapan

Di sini, kita akan menggunakan add-on Selenium IDE untuk Firefox, lebih gampang daripada yang CLI. Download add-on Selenium IDE di https://addons.mozilla.org/en-US/firefox/addon/selenium-ide/

Interface Selenium IDE

[caption id="attachment_4137" align="alignnone" width="700"]Tampilan Selenium IDE Tampilan Selenium IDE[/caption]

  1. Kolom Base URL, adalah kolom untuk menempatkan URL aplikasi web yang akan kita test
    Screen Shot 2016-02-04 at 04.28.48
  2. Action Bar, adalah kumpulan menu untuk menjalankan testing
    Action Bar
  3. Kolom Test Case, adalah kumpulan dari test case atau kasus pengujian
    Screen Shot 2016-02-04 at 04.30.56
  4. Kolom Command, adalah tempat untuk menyimpan semua perintah-perintah yang akan dieksekusi selama pengujian
    Screen Shot 2016-02-04 at 04.32.11
  5. Kolom Informasi yang berisi log, referensi, UI-element dan rollup
    Screen Shot 2016-02-04 at 04.33.37

Test Case

Membuat test case caranya gampang-gampang-susah, gampang karena kita hanya mengikuti arus, atau mengikuti flow diagram dari aplikasi web, susah karena kita harus sudah terbiasa dengan DOM (Data Object Manipulation), harus terbiasa dengan element inspector, susah kalau belum terbiasa. Misal, ini adalah contoh test case untuk login ke Sistem Informasi Akademik Universitas Islam Negeri Sunan Kalijaga:

  1. Buka http://akademik.uin-suka.ac.id
  2. Masukan username
  3. Masukan password
  4. Klik tombol Login
  5. Tunggu halaman http://akademik.uin-suka.ac.id/open_login selesai dimuat
  6. Tunggu halaman http://akademik.uin-suka.ac.id/mahasiswa dimuat

Ada yang unik, karena kita harus menunggu halaman /open_login selesai, karena proses login dikerjakan di halaman tersebut. Dalam kasus saya, saya pengen langsung log out, tapi di contoh ini, cukup sampai halaman /mahasiswa dimuat

Membuat Test Case Login

  1. Gunakan Test Case yang sudah ada atau buat test case baru dengan klik kanan di kolom Test Case, pilih "New Test Case"
  2. Double click test case tersebut untuk mengaktifkan
  3. Masukan http://akademik.uin-suka.ac.id di kolom Base URL
    Karena kita sudah memiliki Base URL, untuk membuka halaman, cukup gunakan simbol / di depan sub-halaman yang akan dibuka, contoh /mahasiswa untuk http://akademik.uin-suka.ac.id/mahasiswa
  4. Membuka halaman login
    1. Klik kolom Command atau Klik kanan kolom Command lalu pilih Insert New Command
      1. Isikan perintah open di isian Command
      2. Isikan / di isian Target
      3. Biarkan Value tetap kosong
  5. Mengisi username
    Dalam test case ini dan selanjutnya, kita mulai menggunakan DOM untuk memilih elemen yang terdapat di halaman web, untuk mencari id element bisa menggunakan element inspector yang terdapat di Firefox.

    1. Klik kanan kolom Command, pilih Insert New Command
      1. Isikan type di isian Command, type adalah perintah untuk mengetikan value yang telah ditentukan
      2. Isikan username sebagai id elemen yang akan kita pilih / isi di isian Target
      3. Isikan NIM / username di isian Value
  6. Mengisi password
    1. Klik kanan kolom Command, pilih Insert New Command
      1. Isikan type di isian Command
      2. Isikan password sebagai id elemen yang akan diisi di isian Target
      3. Isikan password kita di isian Value
  7. Klik tombol Login
    Masalah di sini adalah, tombol Login pada halaman SIA tidak disertai id, kita bisa menggunakan JavaScript DOM atau CSS Selector, di sini saya menggunakan CSS Selector karena lebih mudah. Untuk referensi CSS Selector, silakan menuju http://www.w3schools.com/cssref/css_selectors.asp
    Saya mendapati bahwa tombol login memilik markup sebagai berikut <button type="submit" class="btn-uin btn btn-inverse btn btn-small" style="float:right;">Login</button> dan yang akan kita gunakan adalah type dari tombol tersebut, yaitu submit.

    1. Klik kanan kolom Command, pilih Insert New Command
      1. Isikan clickAndWait di isian Command, artinya kita klik sebuah elemen lalu tunggu hingga proses berikutnya selesai
      2. Isikan css=button[type='submit'] di isian Target
      3. Biarkan isian Value tetap kosong
  8. Menunggu proses login selesai
    1. Klik kanan kolom Command, pilih Insert New Command
      1. Isikan waitForLocation di isian Command
      2. Isikan /open_login pada isian target
      3. Biarkan Value tetap kosong
  9. Menunggu halaman mahasiswa ditampilkan
    1. Klik kanan kolom Command, pilih Insert New Command
      1. Isikan waitForLocation di isian Command
      2. Isikan /mahasiswa pada isian target
      3. Biarkan Value tetap kosong

Contoh dari Test Case yang saya buat:

Screen Shot 2016-02-04 at 05.04.32

Menjalankan Test Case

Jalankan Test Case yang telah dibuat dengan klik tombol Screen Shot 2016-02-04 at 05.01.14 untuk menjalankan semua test case yang ada jika kita memiliki lebih dari 1 (satu) test case atau tombol Screen Shot 2016-02-04 at 05.11.27 untuk menjalankan test case yang sedang aktif. Tunggu hingga proses pengujian selesai.

Buka Log untuk evaluasi pengujian.

Screen Shot 2016-02-04 at 05.13.16

Penutup

Seperti itu kira-kira membuat automated testing untuk aplikasi web dengan Selenium IDE.

Selamat mencoba dan selamat mengembangkan. Boleh lho ini diajukan buat bahan skripsi :D