Belajar Selenium - API & Backend Validation with Selenium

#Pendahuluan

Test UI hanya melihat permukaan. Ketika kalian meng-assert bahwa teks muncul di halaman, kalian tidak tahu apakah data itu datang dari backend yang benar atau dari mock yang tersembunyi. Episode 16 menghubungkan dua dunia: UI testing dengan Selenium dan API validation — sehingga test membuktikan bahwa seluruh lapisan bekerja sama.

Pendekatan ini menghasilkan dua keuntungan besar. Pertama, cakupan yang lebih utuh: error di service layer yang tidak tercermin jelas di UI tetap tertangkap. Kedua, efisiensi: banyak setup yang lambat dilakukan lewat UI bisa digantikan panggilan API langsung, membuat suite jauh lebih cepat.

#Kombinasi UI Test dengan API Checks

#Kapan Menggabungkan

Kombinasi UI dan API masuk akal ketika UI menampilkan data yang berasal dari backend. Alih-alih hanya meng-assert teks di halaman, validasi juga data mentah dari API yang memberi makan teks tersebut:

Validasi UI dan API sekaligus

import requests
 
halaman = DashboardPage(driver)
driver.get("https://app.example.com/dashboard")
assert "Pendapatan" in halaman.ambil_tabel()
 
resp = requests.get("https://app.example.com/api/dashboard", timeout=5)
resp.raise_for_status()
data = resp.json()
assert data["status"] == "ok"
assert len(data["items"]) == len(halaman.baris_tabel())

resp.json() memvalidasi bahwa API merespons dengan benar, dan len(data["items"]) == len(halaman.baris_tabel()) membuktikan bahwa jumlah item di API sesuai dengan yang dirender UI. Dua validasi ini bersama-sama jauh lebih kuat daripada salah satunya saja.

#Validating Backend Response dan UI State

#Memeriksa Konsistensi

Pola penting adalah memvalidasi bahwa apa yang ditampilkan UI benar-benar berasal dari data yang dikirim backend:

UI state sesuai data backend

data = requests.get("https://app.example.com/api/profil", timeout=5).json()
nama_ui = driver.find_element("id", "nama-pengguna").text
assert nama_ui == data["nama"], f"UI menampilkan {nama_ui}, API mengirim {data['nama']}"

assert nama_ui == data["nama"] menyatukan dua sumber: tampilan dan data. Perbedaan antara keduanya menunjukkan bug di lapisan rendering atau mapping — bug yang tidak pernah terlihat jika test hanya memeriksa salah satu sisi.

#Memvalidasi Error Handling

API yang gagal harus ditampilkan UI dengan benar. Simulasikan kondisi error lewat API yang tidak valid:

API error dan respons UI

resp = requests.get(
    "https://app.example.com/api/item/999999",
    timeout=5,
)
assert resp.status_code == 404
assert "Tidak ditemukan" in driver.find_element("id", "pesan-error").text

resp.status_code == 404 memastikan backend menjawab dengan benar, dan assertion kedua memastikan UI menampilkan pesan yang sesuai. Test seperti ini melindungi pengalaman pengguna saat service layer gagal.

#E2E Flow dari UI ke Service Layer

#Membuktikan Efek Samping

Untuk alur seperti pemesanan, validasi efek samping di service layer setelah aksi UI:

E2E dengan verifikasi service layer

halaman = CheckoutPage(driver)
halaman.lanjutkan_pembayaran()
 
# Verifikasi di service layer
pesanan = requests.get(
    f"https://app.example.com/api/pesanan/{id_pesanan}",
    timeout=5,
).json()
assert pesanan["status"] == "PAID"
assert "Terima kasih" in driver.find_element("id", "konfirmasi").text

Setelah aksi UI selesai, pesanan["status"] == "PAID" membuktikan bahwa transaksi benar-benar tercatat di service layer — bukan sekadar tampilan yang berubah. Kombinasi ini memberi kepercayaan penuh terhadap alur end-to-end.

#Mempercepat Setup dengan API Helper

#Login via API, Lanjut dengan UI

Setup UI yang lambat — terutama login dan persiapan data — bisa dipercepat lewat API. Cara terbaik: ambil cookie dari sesi API lalu pakai di Selenium:

Inject cookie dari sesi API

import requests
from selenium import webdriver
 
s = requests.Session()
s.post(
    "https://app.example.com/api/login",
    json={"email": os.environ["TEST_EMAIL"], "password": os.environ["TEST_PASSWORD"]},
    timeout=5,
)
 
driver = webdriver.Chrome()
driver.get("https://app.example.com/login")
for cookie in s.cookies:
    driver.add_cookie({"name": cookie.name, "value": cookie.value})
driver.get("https://app.example.com/dashboard")

s.post("https://app.example.com/api/login", json={...}) membuat sesi autentikasi lewat API. Cookie dari sesi itu disuntikkan ke Selenium dengan driver.add_cookie(...), sehingga test melompati form login UI yang lambat dan langsung menguji halaman yang menjadi fokus.

#Data Setup via API

Prinsip yang sama berlaku untuk data: buat user, order, atau dokumen lewat API alih-alih mengisi form. Test yang membutuhkan sepuluh item dalam keranjang cukup memanggil API tiga kali daripada mengklik UI tiga puluh kali. Kecepatan ini adalah investasi yang langsung terasa di durasi suite.

#Penutup

Episode 16 menghubungkan dua dunia yang sering dipisah: UI dan backend. Kalian kini bisa mengombinasikan assertion UI dengan validasi API, memeriksa konsistensi antara tampilan dan data, membuktikan efek samping di service layer, dan mempercepat suite dengan setup berbasis API.

Inti yang harus dibawa pulang:

• Validasi UI dan API bersama untuk cakupan lapisan yang utuh.
• Periksa konsistensi antara data API dan yang dirender UI.
• Verifikasi efek samping transaksi di service layer, bukan hanya tampilan.
• Gunakan sesi API untuk login dan setup data agar suite cepat.
• Jangan pernah menulis token atau cookie ke log.

Di episode 17 selanjutnya kita akan membahas mobile web dan hybrid testing — mengautomasi browser mobile dan test desain responsif, memakai emulation mode dan real device, integrasi Appium untuk aplikasi hybrid, serta strategi locator dan gesture yang spesifik untuk mobile.