Otomatisasi Web Testing dengan Selenium WebDriver + Python

Posted on | by admin | Leave a Comment on Otomatisasi Web Testing dengan Selenium WebDriver + Python

Aplikasi yang baik adalah aplikasi yang sudah diuji fungsionalitasnya secara ketat untuk memastikan semua fungsionalitasnya berjalan dengan baik. Ada berbagai jenis metode pengujian di dalam pengujian perangkat lunak: unit-testing digunakan untuk menguji ketepatan output/luaran dari suatu fungsi atau model di dalam aplikasi secara internal, integration-testing digunakan untuk menguji kepaduan antara setiap komponen aplikasi, dan masih banyak jenis pengujian lainnya.

Untuk menguji aplikasi berbasis Web, ada beberapa macam pendekatan untuk melakukan pengujian baik unit testing maupun integration testing. Untuk aplikasi yang hanya mengandalkan REST API berbasis JSON, mungkin melakukan pengujian melalui masing-masing endpoint sudah cukup. Namun, untuk aplikasi Web interaktif yang memerlukan interaksi dari pengguna (isi teks, klik tombol), maka satu-satunya cara paling efektif untuk memastikan fungsionalitas dari interaksi berjalan lancar adalah dengan menguji langsung elemen-elemen interaktif dari aplikasi Web. Pengujian interaktifitas aplikasi Web bisa dilakukan melalui medium tester oleh manusia. Namun akan lebih baik jika proses pengujian ini bisa diotomatisasi sehingga bisa dilakukan berulang-ulang dengan cepat. Salah satu kakas/tool yang bisa Anda gunakan untuk melakukan otomatisasi interaksi aplikasi Web adalah Selenium WebDriver (SWD).

SWD menyediakan fasilitas untuk mengontrol suatu peramban Web (web browser) melalui otomatisasi dengan bahasa pemrograman. Pada saat program otomatisasi dijalankan, SWD akan membuka aplikasi peramban Web pilihan pengguna dan melakukan kontrol pada peramban Web tersebut seperti misalnya:

  • Membuka suatu halaman Web di bar alamat/address bar
  • Memilih suatu elemen di halaman menggunakan id, class, name, XPath.
  • Mengisi input pada elemen
  • Melakukan klik pada elemen
  • Menjalankan kode JavaScript (JS) pada halaman Web (termasuk mendapatkan nilai dari variabel JS)
  • Menunggu suatu state (misal, apakah data yang diambil secara AJAX sudah diambil nilainya).

Bahasa pemrograman yang didukung secara resmi oleh Selenium antara lain Java, Python, C#, Perl, JavaScript, Ruby, dan PHP. Sedangkan peramban Web yang bisa digunakan untuk proses otomatisasi antara lain Chrome, Firefox, Opera, Safari dan IE.

Pemasangan SWD untuk Python

CATATAN: Saya asumsikan Anda sudah memahami Python dan seluk beluknya sebelum lanjut

Untuk memasang SWD dengan Bahasa Pemrograman Python, Anda bisa menggunakan pengelola paket PIP untuk memasang paket bernama selenium melalui perintah baris berikut :

$ pip install selenium

Jika Anda ingin menggunakan bahasa pemrograman lain, silahkan merujuk ke pranala berikut.

Pemasangan WebDriver

Sebelum Anda dapat menggunakan SWD, Anda diharuskan untuk memasang WebDriver (WD) yang berfungsi sebagai penghubung antar SWD dengan peramban Web sehingga bisa dikontrol melalui bahasa pemrograman. WD untuk masing-masing peramban Web bisa diunduh melalui pranala lini (di bagian Third Party, Bindings, and Plugins). Tempatkan berkas biner/EXE dari WD ke dalam direktori yang bisa diakses melalui environment variable PATH.

Hello World

Untuk memulai menggunakan SWD dengan Python, silahkan membuka Python Interpreter (melalui perintah python atau ipython di baris perintah) dan mengimpor modul webdriver.

from selenium import webdriver

Kemudian, untuk memulai suatu WD, gunakan perintah berikut:

browser = webdriver.Chrome() # Untuk WD berbasis Chrome
browser = webdriver.Firefox() # Untuk WD berbasis Firefox

Seketika juga, Anda akan melihat aplikasi peramban Web muncul di layar. Anda sekarang bisa mengendalikan interaksi ke peramban Web baik secara langsung melalui peramban Web tersebut ATAU melalui kode program di melalui interpreter Python yang Anda gunakan.

Untuk membuka suatu halaman Web melalui interpreter Python, gunakan kode berikut (misal, jika Anda ingin membuka situs Google):

browser.get("https://google.com")

Maka peramban Web akan diarahkan ke situs yang dituju. Interpreter akan menunggu sampai halaman benar-benar dimuat secara penuh (document ready) sehingga Anda tidak perlu membuat kode untuk menunggu secara eksplisit.

Memilih suatu elemen

Untuk melakukan interaksi pada suatu elemen halaman Web, SWD menyediakan fungsi pencarian elemen (dan elemen jamak) menggunakan beberapa kueri: id dari elemen, class dari elemen, name dari elemen dan masih banyak lagi. Anda dapat menggunakan bantuan fitur Inspect Element (dengan menekan tombol F12 pada peramban Web) di Google Chrome atau Developer Tools di Mozilla Firefox untuk melakukan pengecekan nama id, class, name dari suatu elemen halaman Web.

Untuk melakukan pencarian sebuah elemen, Anda dapat menggunakan contoh perintah kode berikut:

kotak_cari = browser.find_element_by_name("q")  # Kotak pencarian
tombol_cari = browser.find_element_by_name("btnK") # Tombol "Penelusuran Google"
semua_input = browser.find_elements_by_tag_name("input") # Semua elemen dengan tag <input>
bahasa_google = browser.find_element_by_class_name("Q8LRLc") # Penunjuk nama bahasa di pojok kiri bawah

PERHATIAN: Jika Anda menggunakan fungsi dengan awalan find_element_* (element tanpa akhiran s), Anda harus memastikan bahwa id, class, atau properti elemen yang dicari memang ADA di halaman yang dibuka. Jika tidak, SWD akan melempar sebuah Exception.

Anda kemudian bisa menggunakan variabel luaran dari masing-masing fungsi find_element* (kita sebut variabel ini sebagai variabel elemen) untuk melihat properti DOM elemennya dengan menggunakan contoh kode berikut:

tombol_cari.get_attribute("value") # Hasil: "Penelusuran Google"

Anda juga bisa melakukan pencarian elemen kembali secara rekursif melalui suatu variabel elemen jika memang dibutuhkan:

body = browser.find_element_by_id("main").find_element_by_name("body")

Hanya saja, Anda tidak bisa melakukan manipulasi nilai DOM melalui fungsi bawaan SWD. Anda hanya bisa melakukan manipulasi nilai DOM dengan mengeksekusi suatu kode Javascript. Penjelasan mengenai eksekusi kode Javascript dijelaskan pada sub-bagian bawah.

Interaksi pada elemen

Anda dapat melakukan entri input dengan mensimulasikan entri tombol papan ketik ke suatu variabel elemen melalui perintah .send_keys seperti contoh penggunaan berikut:

kotak_cari.send_keys("Selenium Web Driver xx")

Anda juga bisa mensimulasikan tombol papan ketik khusus seperti berikut:

from selenium.webdriver.common.keys import Keys
kotak_cari.send_keys(Keys.BACKSPACE + Keys.BACKSPACE)

Untuk melakukan klik tombol, gunakan perintah .click atau .submit pada suatu variabel elemen seperti berikut:

tombol_cari.click() # Simulasi klik tombol "Penelusuran Google"
kotak_cari.submit() # Simulasi proses Submit

JavaScript

SWD menyediakan suatu fitur untuk mengeksekusi suatu JavaScript pada halaman yang sedang dibuka. Untuk melakukan hal ini, Anda dapat memanggil fungsi .execute_script melalui Web Driver dan mencantumkan snippet kode Javascript yang Anda ingin eksekusi. Anda dapat memasukkan lebih dari satu baris perintah JavaScript dengan membatasi tiap baris dengan tanda ;. Anda juga dapat mengambil nilai variabel dari Javascript ke dalam Python dengan menambahkan penanda return di sebelah kiri perintah/nama variabel.

Berikut adalah contoh penggunaan eksekusi skrip:

browser.execute_script("alert(0)")  # Menampilkan alert
browser.execute_script("document.getElementsByName('q')[0].setAttribute('value','Selenium Web Driver'") # Set value dari kotak pencarian
isi_pencarian = browser.execute_script("return document.getElementsByName('q')[0].getAttribute('value')") # Ambil value dari kotak pencarian

Agar proses pengujian bisa dilakukan secara terprediksi, Anda dapat melakukan proses penungguan suatu state (bisa berupa state di DOM atau Javascript) melalui fitur Explicit Wait yang ada di SWD. Untuk membuat suatu Explicit Wait, Anda bisa membuat sebuah fungsi lambda di Python yang menghasilkan nilai true jika keadaan yang diharapkan tercapai, dan nilai false jika keadaan yang diharapkan belum tercapai dan program harus melakukan penungguan. Berikut adalah contoh kode-nya (untuk timeout 10 detik):

from selenium.webdriver.support.ui import WebDriverWait

## Tunggu sampai kotak pencarian berisi tulisan "Sesuatu"
## Jika lebih dari 10 detik tidak tercapai, lembar Exception
WebDriverWait(browser, 10).until(lambda x: return browser.execute_script("return document.getElementsByName('q')[0].getAttribute('value')") == "Sesuatu")

Penutup

Di atas sudah dibahas mengenai cara dan contoh penggunaan Selenium Web Driver (SWD) untuk melakukan otomatisasi pengujian dan interaksi aplikasi Web menggunakan Python. Sebenarnya ada beberapa fitur Selenium yang sangat mumpuni namun belum dibahas di artikel ini.

Selain menawarkan otomatisasi melalui skrip, Anda juga bisa menggunakan Selenium IDE untuk membuat skrip otomatisasi langsung melalui peramban Web tanpa melalui coding. Selenium IDE mungkin akan saya di artikel blog saya selanjutnya.

Akhir kata, semoga artikel ini bermanfaat bagi Anda semua.

Kabar gembira untuk kita semua: Youtube sekarang ada Dark Mode nya

Posted on | by admin | Leave a Comment on Kabar gembira untuk kita semua: Youtube sekarang ada Dark Mode nya

Dark Mode itu keren lo, benar-benar fitur yang dibutuhkan banget.

-- Wira di saat berbaring gelap gelapan sambil Youtube an

Coba Anda rasakan ketika Anda menggunakan komputer dengan aplikasi yang kebanyakan menggunakan latar belakang berwarna putih. Tentu saja menyilaukan dan melelahkan mata jika digunakan dalam waktu yang lama.

Sistem operasi modern baik di komputer dan mobile mulai menawarkan fitur yang membuat pengguna nyaman melihat layar. Salah satu fitur tersebut adalah night light yang menguningkan sedikit layar sehingga tetap enak. Namun fitur yang benar-benar ditunggu-tunggu sebenarnya adalah dark mode yang mengubah latar belakang aplikasi yang umumnya putih menjadi hitam bak High Contrast Mode. Walaupun fitur ini sangat dibutuhkan di berbagai aplikasi, kebanyakan OS atau aplikasi belum menyediakannya karena alasan sederhana: mengubah warna dari putih ke hitam atau abu-abu gelap tidak sesederhana menginversi warna layar, tetapi juga harus membuat UI tetapi terbaca dengan palet warna yang tetap pas. Windows baru menyediakan fitur ini untuk aplikasi Modern UI saja, Android baru menyediakan beberapa aplikasi yang mendukung dark mode secara sporadis, macOS baru-baru ini menyediakan fitur gelap yang near universal melalui versi Mojave.

Dan akhirnya, kembali ke topik artikel ini yaitu Youtube yang akhirnya (walaupun sangat telat) menyediakan dark mode di versi 13.35.51. Anda dapat mengaktifkannya melalui Setelan Umum / General.

Sayangnya, fitur dark mode ini harus dihidupkan/dimatikan secara manual. Tidak ada mekanisme untuk mengubah tema gelap/terang secara otomatis berdasarkan jam. Setahu saya baru Nova Launcher dan 9GAG Pro yang menyediakan fitur tersebut. Akhir kata, semoga dark mode ini bisa diadopsi secara universal, demi mata yang sehat.

Beberapa jenis orang yang tidak suka dengan Microsoft Word (dan pengolah kata WYSIWYG lainnya)

Posted on | by admin | Leave a Comment on Beberapa jenis orang yang tidak suka dengan Microsoft Word (dan pengolah kata WYSIWYG lainnya)

Jaman dahulu kala, ketika Anda harus membuat dokumen di komputer menggunakan aplikasi WordStar yang berjalan di atas DOS, Anda harus membayang-bayangkan dan mereka-reka seperti apa bentuk dokumen yang dibuat ketika nantinya dicetak menggunakan printer dot matrix yang suaranya menyakitkan telinga itu. Pasalnya, teknologi komputer saat itu hanya mampu menampilkan sekumpulan teks di dalam matriks sebesar 25 baris x 80 kolom dengan jumlah warna yang bisa dihitung jari. Zaman itu komputer mainstream (komputer berbasis IBM PC berbasis DOS, tidak termasuk Macintosh yang kala itu sudah canggih) kebanyakan belum memiliki kemampuan me-render grafik berbasis raster (warna pada titik piksel dengan resolusi VGA/SVGA), sehingga bentuk font, ketebalan, miring, warna, dsb tidak bisa direpresentasikan ke layar.

WordStar zaman DOS

Sekian dekade kemudian dan kita sudah tidak asing dengan Microsoft Word dan aplikasi sejenis lainnya, yang mana melalui konsep WYSIWYG (What You See Is What You Get)-nya bisa menampilkan isi dokumen apa adanya seperti bentuk cetaknya. Tidak perlu lagi pusing dengan tanda markup semacam ^B, ^S, dan ^Y, segala tulisan, tabel, gambar ditampilkan apa adanya berkat kemampuan grafis raster yang ada di komputer modern.

Untuk mayoritas orang, aplikasi pengolah dokumen modern sudah cukup untuk memenuhi kebutuhan mereka (misalnya) dalam aktivitas membuat laporan, tugas sekolah, dan aktivitas lainnya. Pengguna hanya cukup mengetik, memberi format, menempelkan tabel dan gambar dan yang lebih canggih lagi bisa menggambar objek ilustrasi di dalamnya.

Namun taukah Anda, ada beberapa pihak yang tidak sreg dengan konsep penulisan secara WYSIWYG seperti misalnya akademisi (yang keukeuh menggunakan LaTeX dan variannya), penulis Wiki (yang punya bahasa penulisan sendiri) dan pengembang perangkat lunak (yang entah kenapa kebanyakan benci menulis laporan dengan MS Word). Mereka justru lebih sreg untuk menulis dengan teks editor (semacam Notepad), dan menulis segala bentuk formatting dalam bentuk Markup seperti layaknya zaman WordStar yang saya ceritakan di awal. Apakah mereka terlalu kolot untuk tetap mempertahankan "tradisi" sehingga mereka konservatif dalam teknologi, atau apakah ada alasan praktis dibalik keengganan mereka untuk menggunakan MS Word? Ternyata ada. Menurut saya, ada beberapa alasan praktis mereka dibalik itu semua:

  • Dibalik kemudahan penggunaannya, MS Word menggunakan format yang sangat ribet berbasis XML yang membuat penggunanya mau tidak mau harus lock-in menggunakan aplikasi MS Word atau aplikasi lain yang mendukung format ini (semoga saja Anda sukses membuka dokumen MS Word di LibreOffice dan sebaliknya tanpa formatnya berantakan /s)
  • Akademisi, Penulis Wiki dan Pengembang Perangkat Lunak membutuhkan KONSISTENSI baik dari segi struktur dan format dalam penulisan dokumen. Aplikasi pengolah kata WYSIWYG memungkinkan pengguna untuk menulis dengan format sesukanya sehingga aspek konsistensi ini susah untuk ditegakkan.
  • PLUS: Mereka-mereka ini umumnya tidak mau ribet masalah formatting. Mereka hanya ingin menulis tanpa memikirkan bagaimana tulisannya ditampilkan. Yang penting rapi dan konsisten.

Kadangkala, ada saatnya dimana menggunakan MS Word dan aplikasi pengolah kata WYSIWYG lainnya cenderung kontra-produktif. Misalnya ketika Anda menulis skripsi, ada beberapa kala ketika Anda harus mencurahkan sebagian besar waktu Anda untuk melakukan formating manual beberapa bagian teks karena misalnya: penggalan kata yang tidak pas, posisi gambar yang tidak cocok, penulisan paragraf tidak konsisten, dan masih banyak lagi. Mungkin saja hal-hal tersebut bisa dihindari dengan memanfaatkan fitur styling yang baik sejak awal. Namun masalahnya, tidak semua orang menggunakan fitur ini dengan baik karena tidak ada pengetatan sejak awal.

Saya sendiri termasuk mereka-mereka yang lumayan sering menggunakan MS Word dan LibreOffice Writer untuk menulis laporan ke stakeholder. Namun, untuk kebutuhan lainnya seperti menulis blog, menulis diari, catatan kuliah, thesis, skripsi, menulis dokumentasi perangkat lunak, dsb saya benar-benar menghindari penggunaan aplikasi berbasis WYSIWYG karena alasan sederhana: ingin fokus menulis tanpa terdistraksi oleh formating. Untuk penulisan dokumen ilmiah, saya tidak pernah meragukan LaTeX yang membuat dokumen saya rapi dan konsisten. Pada saat saya skripsi S1, saya menyempatkan membuat templat LaTeX skripsi sesuai dengan format dari kampus (https://github.com/initrunlevel0/buku-ta-its-xelatex) sehingga bisa digunakan oleh angkatan bawah. Untuk menulis tulisan lainnya, saya mempercayakan Markdown yang fiturnya semakin canggih berkat dukungan di berbagai platform seperti Worpress (blogging) dan Github/Gitlab (pengembangan perangkat lunak). Saya juga menulis segala catatan dan diari terkait keseharian saya melalui Markdown menggunakan IDE bernama Typora (https://typora.io/) dan disinkronisasikan melalui Dropbox (bye bye OneNote~).

Akhir kata, tidak ada salahnya untuk belajar hal baru. Ada kalanya sesuatu yang terkesan old lebih efisien karena sederhana.

Halo Dunia

Posted on | by admin | Leave a Comment on Halo Dunia

Selamat datang di blog saya yang sudah berkali-kali dihapus dan di-install ulang ini. Mohon maaf karena ketidakkonsistenan saya, sehingga artikel-artikel di blog lama menjadi hilang tak berbekas.

Dengan dunia baru dan karir baru yang saya alami sekarang, saya akan memulai sering menulis lagi tentang segala hal, yang saya senangi.

Sekian dari saya.