Learn Selenium - Locating Elements & Interacting with the DOM

#Introduction

Once WebDriver is running, the next question is: how do you find elements on the page and interact with them? Episode 4 covers locating elements and interacting with the DOM — the skill used most frequently across all automation work.

Without the ability to find the right elements reliably, tests will fail in unexpected places. This episode equips you with five locator techniques, how to interact with various form controls, and an introduction to dynamic element issues that will be fully solved in episode 5.

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

#Basic Locators

Selenium provides the By class to choose a locator strategy. The five most basic strategies:

Five basic locator strategies

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']")

Recommended priority order: id first, then name and class, then CSS selector, and xpath as the last resort. The more unique and shorter the locator, the more resilient it is to layout changes.

#Choosing Between CSS Selector and XPath

CSS selector is read faster by the browser and is more concise for structure-based navigation. XPath is more expressive for text-based conditions and upward navigation (parent), such as //button[text()='Kirim']. The rule of thumb: use CSS for attributes and structure, use XPath when text conditions are required.

#Grabbing Elements, Clicking, Sending Text, and Submitting Forms

#Basic Interactions

Once an element is found, there are three core actions:

Click, send text, 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") types text into the input, and click() presses the element. For forms that handle submission natively, call submit() on the form element rather than pressing the button manually.

#Reading Element Values

Besides writing, you'll often need to read element state:

Reading element values

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") retrieves the input's content, text reads the element's text, and is_displayed() checks visibility. These three reads become the material for assertions in episode 7.

#Interacting with Dropdowns, Checkboxes, and Radio Buttons

#Dropdowns with the Select Class

HTML dropdowns (select) get special handling through the Select class:

Selecting dropdown options

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(...) wraps the select element and provides selection by visible text, attribute value, or index order. Make sure the element is really a select tag; if not, use a normal click.

#Checkboxes and Radio Buttons

Checkboxes and radio buttons are ordinary input elements — just click to change state:

Checkbox and 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() checks whether the element is already selected. The if not ... is_selected() pattern avoids double clicks that could undo the selection.

#Handling Dynamic Elements and Synchronization

#The Problem of Late-appearing Elements

Modern pages often load content asynchronously: buttons appear after a request completes, spinners disappear, and elements change. If you look for an element too early, Selenium throws NoSuchElementException.

Avoiding 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()

The snippet above waits for the submit element to be clickable before interacting. WebDriverWait(...).until(...) is the core of synchronization — the full mechanism with various expected conditions will be covered in depth in episode 5.

#Conclusion

Episode 4 trains the most fundamental skill: finding elements with five locator techniques, interacting through click, type, and submit, handling dropdowns, checkboxes, and radio buttons, and realizing that dynamic elements need synchronization using waits.

Key takeaways:

• Locator priority: id, name, class, CSS selector, then XPath.
• CSS for structure, XPath for text-based conditions.
• Native dropdowns use the Select class; checkboxes and radio buttons just need a click.
• Always check state with is_selected() and is_displayed().
• Dynamic elements need WebDriverWait to avoid NoSuchElementException.

In episode 5 next, we'll cover synchronization and waits — the difference between implicit and explicit wait, WebDriverWait with ExpectedConditions, handling stale element exceptions and timing issues, and best practices for reliable test execution. This is what separates stable tests from flaky ones.