Belajar Selenium - Mobile Web & Hybrid Testing

#Pendahuluan

Sebagian besar pengguna web hari ini datang dari perangkat mobile. Jika suite test kalian hanya berjalan di viewport desktop, ada risiko besar yang tidak pernah diuji. Episode 17 membahas mobile web dan hybrid testing — mengotomasi browser mobile, memvalidasi desain responsif, dan menjangkau aplikasi hybrid lewat Appium.

Ada dua jalur yang akan kita tempuh: yang pertama murni web — menguji situs di ukuran layar mobile dengan emulation mode yang cepat dan murah; yang kedua native/hybrid — menguji aplikasi yang membungkus web dalam container seperti WebView, yang membutuhkan Appium.

#Automasi Browser Mobile

#Chrome DevTools Mobile Emulation

Chrome DevTools bisa meniru perangkat mobile tertentu — ukuran layar, pixel ratio, dan user agent. Cara paling cepat untuk menguji tampilan mobile tanpa perangkat fisik:

Emulation perangkat mobile

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
 
opsi = Options()
opsi.add_experimental_option(
    "mobileEmulation",
    {"deviceName": "iPhone 12"},
)
driver = webdriver.Chrome(options=opsi)

mobileEmulation dengan deviceName membuat Chrome meniru perangkat tersebut. Setelah aktif, semua perintah berjalan seperti browser mobile — viewport, sentuhan, dan user agent ikut menyesuaikan.

#Meniru Tanpa Nama Perangkat

Untuk kontrol presisi, tentukan dimensi manual alih-alih nama perangkat:

Emulation dengan dimensi manual

opsi.add_experimental_option(
    "mobileEmulation",
    {
        "deviceMetrics": {"width": 375, "height": 812, "pixelRatio": 3.0},
        "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) ...",
    },
)

deviceMetrics dan userAgent memberi kendali penuh terhadap perangkat yang disimulasikan. Ini berguna untuk menguji ukuran layar yang tidak ada di daftar preset.

#Responsive Design Testing

#Validasi di Banyak Viewport

Test desain responsif menjalankan alur yang sama di beberapa ukuran layar dan memvalidasi bahwa elemen penting tetap bisa diakses:

Validasi responsif di beberapa ukuran

def cek_navigasi(driver):
    driver.set_window_size(1440, 900)
    assert driver.find_element("id", "nav-desktop").is_displayed()
 
    driver.set_window_size(375, 812)
    driver.find_element("id", "tombol-menu").click()
    assert driver.find_element("id", "nav-mobile").is_displayed()

set_window_size(375, 812) mensimulasikan layar ponsel. Prinsip penting: setiap ukuran harus di-assert bahwa jalur pengguna utama — menu, pencarian, checkout — tetap bisa diakses, bukan sekadar bahwa halaman "tidak error".

#Breakpoint yang Menentukan

Kenali breakpoint aplikasi dari CSS (misalnya 768px, 1024px) dan uji sedikit di atas dan di bawahnya. Regresi responsif paling sering muncul tepat di batas breakpoint, jadi area inilah yang paling berharga untuk diuji.

#Real Device dan Emulation Mode

#Kapan Memakai Real Device

Emulation mode murah dan cepat, tapi bukan reproduksi sempurna: kinerja, sentuhan, dan rendering nyata berbeda. Gunakan real device ketika:

• Aplikasi bergantung pada gesture atau orientasi layar.
• Perilaku browser mobile nyata penting, seperti scroll inertia.
• Butuh validasi di perangkat tertentu milik pengguna.

#Cloud Device Farms

Perangkat nyata bisa diakses lewat layanan cloud seperti BrowserStack dan Sauce Labs — kombinasi dengan strategi dari episode 14. Real device dikenai biaya, jadi alokasikan untuk suite kritis dan matriks release.

#Appium untuk Hybrid Apps

#Desired Capabilities Appium

Aplikasi hybrid membungkus web dalam WebView. Appium memperluas WebDriver ke perangkat mobile dan bisa beralih ke konteks WebView untuk mengotomasi halaman web di dalamnya:

Koneksi ke Appium

caps = {
    "platformName": "Android",
    "appium:deviceName": "Pixel 7",
    "appium:app": "/app/build.apk",
    "appium:automationName": "UiAutomator2",
}
 
driver = webdriver.Remote(
    command_executor="http://localhost:4723/wd/hub",
    desired_capabilities=caps,
)

desired_capabilities Appium menargetkan perangkat dan aplikasi. Setelah sesi terbuka, berpindahlah ke konteks WebView untuk mengotomasi konten web:

Beralih ke konteks WebView

for ctx in driver.contexts:
    if "WEBVIEW" in ctx:
        driver.switch_to.context(ctx)
        break

driver.switch_to.context(ctx) memindahkan kendali ke WebView, tempat elemen web biasa ditemukan. Kemampuan mengotomasi hybrid apps inilah yang membuat Selenium dan Appium saling melengkapi.

#Locator dan Gestures Spesifik Mobile

Layar sentuh memperkenalkan gesture yang tidak ada di desktop. Appium menangani swipe dan tap melalui action chain:

Swipe dengan W3C actions

from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.common.actions.pointer_input import PointerInput
from selenium.webdriver.common.actions import interaction
 
tindakan = ActionChains(driver)
gesek = tindakan.w3c_actions.pointer_inputs[0]
gesek.create_pointer_move(duration=200, origin="viewport", x=200, y=800)
gesek.create_pointer_down()
gesek.create_pointer_move(duration=300, origin="viewport", x=200, y=300)
gesek.create_pointer_up()
tindakan.perform()

Sequence di atas melakukan swipe dari bawah ke atas — pola umum untuk feed dan menu mobile. Untuk aplikasi yang sederhana, mobile emulation di Chrome sudah cukup; gesture level ini baru relevan saat masuk ke Appium.

#Penutup

Episode 17 memperluas cakupan test kalian ke layar kecil: emulation mobile yang cepat untuk web responsif, real device untuk validasi nyata, Appium untuk aplikasi hybrid, serta locator dan gesture yang khas perangkat sentuh.

Inti yang harus dibawa pulang:

• Chrome DevTools mobile emulation adalah cara termurah menguji tampilan mobile.
• Uji jalur pengguna utama di setiap breakpoint, bukan sekadar "tidak error".
• Real device diperlukan untuk gesture dan perilaku nyata; cloud farm sebagai sumber.
• Appium membuka WebDriver ke Android dan iOS, termasuk WebView.
• Swipe dan gesture ditangani dengan W3C actions chain.

Di episode 18 selanjutnya kita akan membahas custom utilities dan tooling — membuat test utilities dan wrapper yang bisa dipakai ulang, custom logs, screenshot, dan reporting utilities, integrasi dengan framework test seperti pytest, serta berbagi utilitas antar test suite.