Memulai Automation Test Selenium + Python (bagian 1)

Hi Kawan,

Sesuai dengan post sebelumnya, pada kesempatan kali ini saya akan berbagi resep tentang membuat automation test framework dengan menggunakan bahasa pemrograman python + selenium, jadi di akhir sesi kamu pasti bisa membuat otomatisasi pengujian pada browser Google Chrome ya (kalau setup nya benar) 😅

Kenapa membuat tutorial automation test dengan python?

Tujuannya saya buat tutorial kali ini adalah untuk memperkaya khasanah tutorial bahasa Indonesia pada automation test menggunakan bahasa pemrograman python, dimana mayoritas hasil penelusuran yang ada di gugle menggunakan bahasa pemrograman java ataupun javascript.

Post ini merupakan rangkaian post mengenai membuat automationt test dengan python

Daftar isinya:

1. Belajar Python dari dasar
2. Memahami cara kerja Pytest (bagian 1) 
3. Mulai membuat automation test dengan Selenium  <== Sekarang disini
4. Menemukan Element dengan locator strategi yang baik 

Yuk kita mulai!!!

Sebentar.. sebentar.. bentuk tutorial yang akan saya share adalah perpaduan dari video tutorial dan blog post, jadi kedua medium pembelajaran ini akan saling melengkapi, untuk video bisa diakses disini:

Lalu catatan pada video akan merujuk pada postingan disini

Tools yang digunakan

Hal pertama yang kita perlukan adalah interpreter kode python sudah terinstall di laptop/komputer kamu, terlepas dari sistem operasi apapun (windows/macOS/linux) saya asumsikan command `python atau python3` bisa dijalankan di terminal/command line kamu ya, jika belum, silahkan merujuk ke post pendahuluan python saya sebelumnya disini

Kode Editor

Editor python ada banyak, dimulai dari yang ada di terminal seperti vim, kode editor ringan dan lengkap seperti:

1. sublime
2. visual code
3. atom
4. ataupun IDE yang kumplit seperti PyCharm Edu.

Sebagai pendamping dalam menulis kode python saya biasanya akan menginstal pula Kite sebagai tambahan autocomplete dan documentation di local tapi ini opsional sih, ga di install juga gapapa (ukuran file nya gede sih ahaha)

Chromedriver

Bisa diunduh di : https://chromedriver.chromium.org/downloads 

Lalu tambahkan directory binary chromedriver ke sistem path kamu, (windows bisa taruh chromedriver.exe di folder c:\windows\System32 klo linux bisa tambahkan di path via ~/.bash_profile atau ~/.zshrc kamu. Atau klo macOS bisa lebih mudah tinggal jalankan perintah berikut di terminal brew cask install chromedriver

 Python Packaging Tools

Salah satu best practice pemrograman python adalah memiliki packaging tools yang menjadi depedency management library python agar tidak saling bertabrakan, jadi diperlukan virtual environment, kita akan menggunakan `pipenv` untuk itu, jalankan perintah berikut di terminal

$ pip install pipenv

atau klo gagal karena km menggunakan python3 bisa menggunakan command `pip3 install pipenv` 

Nah yuk kita mulai kodingnya.. Silahkan liat videonya ya

Skenario test yang dijalankan

Scenario: Search Profile in Google
Given I am in google home page
When I search for "Fachrul Choliluddin"
Then I should see search result of "Fachrul Choliluddin"

Apa itu Selector?

Selector adalah sebuah format yang digunakan oleh library seperti Selenium dan Capybara untuk menemukan elemen pada web seperti gambar, tulisan, tombol, dan sebagainya. Untuk bisa menggunakan Selector akan lebih baik jika anda mengenal HTML terlebih dahulu. Kamu bisa lihat materinya disini.

Apa itu CSS Selector?

CSS adalah sebuah notasi (selector) yang digunakan untuk menemukan elemen tertentu pada halaman web. CSS sendiri digunakan oleh web developer untuk memberikan style pada halaman web seperti warna, besar dan lebar gambar, bentuk tombol, dan berbagai fungsi lainnya. Properti-properti pada CSS ini bisa kita manfaatkan untuk mendeteksi sebuah elemen pada web.

Cara Menggunakan CSS selector

Sebenarnya kita sudah menggunakan syntax CSS pada lesson sebelumnya. Yaitu #login_link. Dimana kita memanfaatkan elemen id pada tombol login untuk mendeteksi keberadaan tombol login.

Materi mengenai CSS sendiri sangat luas, sehingga kamu bisa baca mengenai CSS lebih lanjut disini.

Apa itu XPath?

XPath adalah sebuah notasi (selector) yang digunakan untuk menemukan elemen tertentu pada halaman web. Xpath memiliki bentuk syntax yang lebih fleksibel jika dibandingkan dengan CSS. Sehingga lebih umum digunakan untuk mencari elemen web yang tidak bisa dicari oleh selector CSS.

Mengapa Memakai XPath?

Misalkan saya punya halaman web dengan format HTML seperti ini ...

<div class="parent">
    <h2>Ayam</h2>
    <p>Ayam adalah salah satu unggas yang bisa dimakan</p>
    <div class="child">
        <h3>Gambar Ayam</h3>
        <img id="ayam_image" src="ayam.jpg" alt="Smiley face" height="42" width="42">
        <p>Ini adalah gambar ayam</p>
    </div>
</div>

Anda bisa menggunakan selector CSS untuk mengambil elemen image dengan cara seperti ini.

driver.find_element_by_css_selector('#ayam_image')

Atau menggunakan XPath dengan cara berikut

driver.find_element_xpath('//img')

Atau

driver.find_element(by=By.XPATH, value='//*[@id="ayam_image"]')

Dan sebagainya ...

Intinya, XPath menawarkan banyak metode alternatif untuk mencari suatu elemen pada halaman web.

Materi mengenai XPath sendiri sangat luas, sehingga kamu bisa baca mengenai CSS lebih lanjut disini.

Perbandingan CSS vs xPath

Command yang dijalankan:

 Link terkait: