Belajar Selenium - Konsep Dasar & Arsitektur Selenium

#Pendahuluan

Setelah memahami mengapa Selenium ada, episode 2 ini membawa kalian ke dalam mesinnya: konsep dasar dan arsitektur Selenium. Ini adalah episode paling penting untuk dipahami sebelum mulai menulis banyak kode, karena hampir semua script test di series ini dibangun di atas pemahaman bagaimana komponen Selenium saling terhubung.

Kita akan membahas komponen utama (WebDriver, browser driver, Selenium Grid), bagaimana Selenium mengendalikan browser lewat protokol W3C, test lifecycle yang menjadi kerangka setiap test, serta struktur project automated test yang sehat. Jika episode ini dipahami dengan baik, episode 3 sampai 20 akan terasa seperti variasi dari satu tema besar.

#Komponen Utama Selenium

#WebDriver, Browser Driver, dan Selenium Grid

Ekosistem Selenium berdiri di atas tiga komponen besar:

• Selenium WebDriver: library client yang kalian panggil dari kode (Python, Java, dan lainnya). WebDriver menyediakan API seperti find_element, click, dan send_keys.
• Browser driver: program kecil (ChromeDriver, GeckoDriver) yang menerjemahkan perintah WebDriver menjadi aksi nyata di dalam browser. Browser driver yang berbicara langsung ke browser.
• Selenium Grid: server yang mengelola banyak browser jarak jauh, memungkinkan test dijalankan paralel di berbagai browser dan mesin. Detail Grid ada di episode 10.

Selain itu, ada Selenium IDE — ekstensi browser untuk record dan playback cepat — yang akan kita bahas di episode 21.

#Alur Satu Perintah

Ketika kalian menjalankan driver.find_element(...), apa yang terjadi di belakang layar?

kode test -> WebDriver client -> HTTP/JSON (W3C) -> browser driver -> browser

Setiap perintah dikirim dari WebDriver client ke browser driver sebagai request HTTP, lalu driver menerjemahkannya menjadi aksi native di browser. Hasilnya dikembalikan melalui jalur yang sama. Memahami jalur ini penting: setiap hop menambah latensi, dan di sinilah akar dari banyak masalah timing yang akan kita bahas di episode 5.

#Bagaimana Selenium Mengendalikan Browser

#Protokol W3C WebDriver

Sejak Selenium 3 dan 4, komunikasi mengikuti standard W3C WebDriver — spesifikasi resmi yang disetujui World Wide Web Consortium. Browser modern (Chrome, Firefox, Edge, Safari) mengimplementasikan protokol ini secara native, sehingga tidak diperlukan lagi server perantara seperti di era Selenium RC.

Protokol W3C mendefinisikan endpoint HTTP standar. Contoh perintah yang dikirim ke browser driver:

POST /session        -> membuat sesi browser baru
POST /session/:id/url -> navigasi ke URL
POST /session/:id/element -> mencari elemen

Melalui POST /session sebuah sesi browser dibuat, lalu sesi tersebut dipakai untuk semua perintah berikutnya. Sesi inilah yang dipegang oleh objek driver di kode kalian.

#Memahami Objek driver

Objek driver adalah representasi satu sesi browser. Semua interaksi — navigasi, pencarian elemen, eksekusi JavaScript — lewat objek ini. Ketika kalian memanggil driver.quit(), sesi dihapus dan browser ditutup. Kebocoran sesi (tidak di-quit) adalah penyebab utama proses browser menumpuk di CI — kita akan lihat solusinya di bagian test lifecycle.

#Test Lifecycle: Setup, Exercise, Assert, Teardown

Setiap test E2E yang baik mengikuti empat fase. Ini adalah kerangka universal di semua framework testing:

1. Setup: menyiapkan kondisi awal — membuka browser, login, atau mengarahkan ke halaman tertentu.
2. Exercise: melakukan aksi yang diuji — klik, isi form, submit.
3. Assert: memvalidasi hasil — teks muncul, URL berubah, elemen tampil.
4. Teardown: membersihkan — menutup browser, menghapus data test.

Di pytest, lifecycle ini diwujudkan dengan fixture:

Test lifecycle dengan fixture pytest

import pytest
from selenium import webdriver
 
@pytest.fixture
def driver():
    d = webdriver.Chrome()
    yield d
    d.quit()
 
def test_buka_halaman(driver):
    driver.get("https://example.com")
    assert "Example" in driver.title

Pada contoh di atas, fixture driver menjalankan setup (membuka Chrome), yield d menyerahkan driver ke test, dan d.quit() menjadi teardown yang selalu dieksekusi. Pola fixture driver ini akan menemani kita di hampir semua episode berikutnya.

#Struktur Project Automated Test Dasar

Project test yang sehat punya pemisahan yang jelas. Struktur yang kita gunakan sepanjang series:

belajar-selenium/
├── conftest.py          -> fixture bersama
├── pages/               -> Page Object (episode 6)
├── tests/               -> file test pytest
├── utils/               -> helper dan wrapper (episode 18)
├── data/                -> data test (episode 9)
└── requirements.txt     -> dependency

Setiap folder punya tanggung jawab: pages menyimpan representasi halaman, tests menyimpan test case, utils menyimpan kode yang dipakai ulang, dan data menyimpan input test. Memisahkan folder sejak awal jauh lebih murah daripada merombak project besar di kemudian hari.

#Penutup

Episode 2 memberi kalian peta arsitektur Selenium: tiga komponen besar (WebDriver, browser driver, Grid), alur komunikasi HTTP/JSON berbasis standard W3C, test lifecycle setup-exercise-assert-teardown yang diwujudkan sebagai fixture pytest, dan struktur project test yang rapi.

Inti yang harus dibawa pulang:

• WebDriver adalah library client; browser driver menerjemahkan perintah ke browser.
• Komunikasi mengikuti standard W3C WebDriver melalui HTTP/JSON.
• Sesi browser diwakili objek driver; selalu tutup lewat teardown.
• Test lifecycle: setup, exercise, assert, teardown.
• Pisahkan folder pages, tests, utils, dan data sejak awal.

Di episode 3 selanjutnya kita akan mulai menulis kode sungguhan: instalasi dan setup WebDriver — menambahkan dependency Selenium, memahami Selenium Manager dan browser driver, menjalankan browser otomatis pertama, serta mencocokkan versi driver dengan versi browser. Siapkan environment kalian dari episode 0.