Belajar Selenium - Performance Testing & Visual Regression

#Pendahuluan

Fitur berfungsi, tapi halaman lambat — ini kegagalan yang tidak pernah terdeteksi oleh test fungsional biasa. Episode 15 memperluas Selenium ke dua dimensi baru: performance testing untuk mengukur kecepatan halaman dari dalam test, dan visual regression untuk menangkap perubahan tampilan yang tidak diinginkan.

Halaman yang berubah layoutnya tanpa disengaja sering tidak terlihat oleh assertion teks biasa. Dengan perbandingan screenshot, kalian bisa mendeteksi gambar yang bergeser, tombol yang berubah ukuran, atau teks yang terpotong — regresi yang hanya bisa dilihat, bukan di-assert dengan teks.

#Mengukur Performa Browser

#Navigation Timing dari Dalam Test

Peramban mencatat waktu setiap fase pemuatan halaman. Data ini bisa diambil lewat JavaScript:

Membaca navigation timing

driver.get("https://example.com")
 
timing = driver.execute_script(
    "return performance.getEntriesByType('navigation')[0].toJSON();"
)
waktu_layout = timing["domContentLoadedEventEnd"] - timing["navigationStart"]
print(f"Waktu DOM ready: {waktu_layout} ms")

driver.execute_script("return performance.getEntriesByType('navigation')[0].toJSON();") mengambil metrik navigation timing — waktu sampai konten utama siap, waktu sampai halaman penuh, dan lainnya. Catat angka ini di laporan untuk mendeteksi regresi performa antar build.

#Resource Timing untuk Aset

Metrik lain yang berguna adalah waktu setiap resource (script, gambar, CSS) dimuat. Ini membantu menemukan aset yang menjadi bottleneck:

Aset yang lambat dimuat

entri = driver.execute_script("return performance.getEntriesByType('resource');")
lambat = [e["name"] for e in entri if e["duration"] > 1000]
print("Aset lebih dari 1 detik:", lambat)

e["duration"] > 1000 memfilter resource yang butuh lebih dari satu detik. Test performa seperti ini lebih baik sebagai metrik pelacakan daripada threshold yang langsung menggagalkan build — performa di laptop developer tidak mewakili produksi.

#Integrasi dengan Lighthouse

#Lighthouse via CLI

Lighthouse mengukur skor aksesibilitas, performa, SEO, dan best practice. Integrasi paling ringan lewat CLI:

npx lighthouse https://example.com --only-categories=performance --output=json --output-path=report.json

Perintah npx lighthouse https://example.com --only-categories=performance menghasilkan laporan performa. Di pipeline, skor dari report.json bisa dibandingkan dengan ambang batas tim.

#Mengombinasikan dengan Test Selenium

Untuk halaman yang butuh login, jalankan Lighthouse terhadap URL yang sama setelah sesi Selenium memastikan akses. Pendekatan umum: test Selenium menyiapkan state (login, data), lalu Lighthouse dijalankan sebagai langkah terpisah terhadap halaman yang sama.

#Visual Regression dengan Screenshot

#Membangun Dasar Screenshot

Visual regression membandingkan screenshot baru dengan baseline yang sudah disetujui. Buat baseline saat tampilan dinyatakan benar:

Menyimpan baseline screenshot

from pathlib import Path
 
Path("baselines").mkdir(exist_ok=True)
driver.get("https://example.com/beranda")
driver.save_screenshot("baselines/beranda.png")

driver.save_screenshot("baselines/beranda.png") menyimpan baseline. Baseline ini harus di-review dan di-commit ke repository agar seluruh tim memakai referensi yang sama.

#Perbandingan Pixel dengan PIL

Perbandingan sederhana bisa dilakukan dengan Pillow:

Membandingkan dua screenshot

from PIL import Image, ImageChops
 
sebelum = Image.open("baselines/beranda.png").convert("RGB")
sekarang = Image.open("artifacts/beranda.png").convert("RGB")
diff = ImageChops.difference(sebelum, sekarang)
print("Bounding box perubahan:", diff.getbbox())

ImageChops.difference(sebelum, sekarang) menghitung selisih tiap pixel, dan diff.getbbox() menunjukkan area yang berubah. Jika bounding box tidak kosong, ada perubahan visual yang harus diinvestigasi.

#Mendeteksi Layout Regression dan UI Drift

#Teknik Diff yang Toleran

Diff pixel langsung terlalu sensitif terhadap antialiasing dan animasi. Teknik yang lebih praktis: bandingkan area tertentu yang penting, atau abaikan perbedaan di bawah ambang toleransi.

Toleransi perubahan

import numpy as np
 
array_a = np.asarray(sebelum)
array_b = np.asarray(sekarang)
selisih = np.abs(array_a.astype(int) - array_b.astype(int)).sum()
print("Total selisih piksel:", selisih)

np.abs(array_a - array_b).sum() menghasilkan nilai total selisih. Dengan ambang batas yang disetel setelah mengamati baseline, kalian bisa membedakan perubahan kecil yang diterima dari regresi nyata.

#Mengontrol Lingkungan Screenshot

Screenshot harus diambil dalam kondisi yang bisa direproduksi: ukuran viewport tetap, font stabil, dan animasi dimatikan. Tanpa kontrol ini, baseline dan hasil baru tidak bisa dibandingkan dengan adil — dan diff akan selalu berbunyi.

#Penutup

Episode 15 memperluas penglihatan test kalian: metrik performa dari navigation timing, skor Lighthouse untuk audit menyeluruh, baseline screenshot untuk visual regression, dan teknik diff yang toleran untuk mendeteksi layout regression serta UI drift.

Inti yang harus dibawa pulang:

• Navigation timing dan resource timing mengukur performa dari dalam test.
• Lighthouse cocok untuk audit menyeluruh; jalankan pada halaman yang sudah diautentikasi.
• Baseline screenshot harus di-review dan di-commit.
• Diff pixel perlu toleransi dan kondisi screenshot yang terkontrol.
• Visual regression menangkap perubahan yang tidak terlihat assertion teks.

Di episode 16 selanjutnya kita akan membahas API dan backend validation dengan Selenium — mengombinasikan UI test dengan API checks, memvalidasi response backend dan state UI, menguji alur end-to-end dari UI hingga service layer, serta memakai API helper untuk mempercepat setup UI.