Belajar Selenium - Locating Elements & Interacting with DOM

#Pendahuluan

Setelah WebDriver berjalan, pertanyaan berikutnya adalah: bagaimana menemukan elemen di halaman dan berinteraksi dengannya? Episode 4 membahas locating elements dan interaksi dengan DOM — keterampilan yang paling sering dipakai dalam seluruh pekerjaan automasi.

Tanpa kemampuan menemukan elemen yang tepat dan stabil, test akan gagal di tempat yang tidak terduga. Episode ini membekali kalian dengan lima teknik locator, cara berinteraksi dengan berbagai kontrol form, dan pengenalan masalah elemen dinamis yang akan dituntaskan di episode 5.

#Teknik Locator: id, name, class, CSS Selector, XPath

#Locator Dasar

Selenium menyediakan class By untuk memilih strategi locator. Lima strategi paling dasar:

Lima strategi locator dasar

from selenium.webdriver.common.by import By
 
driver.find_element(By.ID, "submit")
driver.find_element(By.NAME, "email")
driver.find_element(By.CLASS_NAME, "btn-primary")
driver.find_element(By.CSS_SELECTOR, "#login input[type='email']")
driver.find_element(By.XPATH, "//button[text()='Kirim']")

Urutan prioritas yang disarankan: id dulu, lalu name dan class, lalu CSS selector, dan xpath sebagai pilihan terakhir. Semakin unik dan pendek locator, semakin tahan terhadap perubahan layout.

#Memilih Antara CSS Selector dan XPath

CSS selector lebih cepat dibaca browser dan lebih ringkas untuk navigasi berdasarkan struktur. XPath lebih ekspresif untuk kondisi berbasis teks dan navigasi ke atas (parent), seperti //button[text()='Kirim']. Aturan praktisnya: pakai CSS untuk atribut dan struktur, pakai XPath ketika kondisi teks diperlukan.

#Mengambil Element, Klik, Kirim Teks, dan Submit Form

#Interaksi Dasar

Setelah elemen ditemukan, ada tiga aksi inti:

Klik, kirim teks, submit

email = driver.find_element(By.ID, "email")
email.send_keys("user@example.com")
 
password = driver.find_element(By.ID, "password")
password.send_keys("rahasia123")
 
driver.find_element(By.ID, "submit").click()

send_keys("user@example.com") mengetik teks ke input, dan click() menekan elemen. Untuk form yang menangani submit secara native, panggil submit() pada elemen form daripada menekan tombol secara manual.

#Membaca Nilai Elemen

Selain menulis, kalian sering perlu membaca state elemen:

Membaca nilai elemen

isi = driver.find_element(By.ID, "email").get_attribute("value")
label = driver.find_element(By.ID, "submit").text
tampil = driver.find_element(By.ID, "submit").is_displayed()

get_attribute("value") mengambil isi input, text membaca teks elemen, dan is_displayed() mengecek visibilitas. Ketiga pembacaan ini menjadi bahan assertion di episode 7.

#Interaksi dengan Dropdown, Checkbox, dan Radio Button

#Dropdown dengan Class Select

Dropdown HTML (select) punya perlakuan khusus lewat class Select:

Memilih opsi dropdown

from selenium.webdriver.support.ui import Select
 
dropdown = Select(driver.find_element(By.NAME, "negara"))
dropdown.select_by_visible_text("Indonesia")
dropdown.select_by_value("id")
dropdown.select_by_index(0)

Select(...) membungkus elemen select dan menyediakan pemilihan berdasarkan teks tampil, nilai atribut, atau urutan index. Pastikan elemennya benar-benar tag select; jika bukan, gunakan klik biasa.

#Checkbox dan Radio Button

Checkbox dan radio button adalah elemen input biasa — cukup klik untuk mengubah state:

Checkbox dan radio button

checkbox = driver.find_element(By.ID, "setuju")
if not checkbox.is_selected():
    checkbox.click()
 
radio = driver.find_element(By.ID, "pria")
radio.click()
print("radio terpilih:", radio.is_selected())

is_selected() mengecek apakah elemen sudah dipilih. Pola if not ... is_selected() menghindari klik ganda yang bisa membatalkan pilihan.

#Handling Dynamic Elements dan Synchronization

#Masalah Elemen yang Muncul Belakangan

Halaman modern sering memuat konten secara async: tombol muncul setelah request selesai, spinner menghilang, dan elemen berubah. Jika kalian mencari elemen terlalu cepat, Selenium melempar NoSuchElementException.

Menghindari NoSuchElementException

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
 
WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.ID, "submit"))
).click()

Cuplikan di atas menunggu elemen submit siap diklik sebelum berinteraksi. WebDriverWait(...).until(...) adalah inti dari synchronization — mekanisme penuh dengan berbagai expected condition akan dibahas mendalam di episode 5.

#Penutup

Episode 4 melatih keterampilan paling fundamental: menemukan elemen dengan lima teknik locator, berinteraksi melalui klik, ketik, dan submit, menangani dropdown, checkbox, dan radio button, serta menyadari bahwa elemen dinamis butuh sinkronisasi memakai wait.

Inti yang harus dibawa pulang:

• Prioritas locator: id, name, class, CSS selector, lalu XPath.
• CSS untuk struktur, XPath untuk kondisi berbasis teks.
• Dropdown asli memakai class Select; checkbox dan radio cukup diklik.
• Selalu cek state dengan is_selected() dan is_displayed().
• Elemen dinamis butuh WebDriverWait agar tidak NoSuchElementException.

Di episode 5 selanjutnya kita akan membahas synchronization dan waits — perbedaan implicit dan explicit wait, WebDriverWait dengan ExpectedConditions, penanganan stale element exception dan timing issues, serta best practice agar eksekusi test reliable. Ini adalah pembeda antara test yang stabil dan test yang flaky.