Stop 07 · Web Automation TestingTopics · 3/10

Handling Web Elements

In short

Clicking buttons is easy. Real forms have dropdowns, checkboxes, radio buttons, file uploads and pop-up alerts, and each one needs its own little trick.

Interacting with different element types — dropdowns, checkboxes, radio buttons, file uploads — each requiring slightly different automation handling beyond simple clicks and text input.

The purple blob turns a gas stove knob and presses a mixer button in a home kitchen.

Think of it like this

Every kitchen appliance works differently

You turn the gas knob, press the mixer button, lift the tap lever and flip the light switch. All are 'controls', but you'd never press a gas knob like a button. Web elements are the same: each type has its own handle.

Watch it happen

Filling a tricky form

Script

Web page

select 'Option 2'

1/6For a native select dropdown, use the Select helper instead of clicking options.

The big ideas

What you need to know

Select for dropdowns

Select(element).select_by_visible_text('India') works on native select tags. Custom dropdowns need clicks.

Check state first

Use is_selected() on checkboxes and radios so your click does what you intend.

Uploads by path

Send the absolute file path to the input type=file element. The OS dialog never opens.

Frames and alerts

Elements inside an iframe need switch_to.frame first. Alerts need switch_to.alert.

See it in code

Walk through the code

python

1from selenium import webdriver2from selenium.webdriver.common.by import By3from selenium.webdriver.support.ui import Select4 5driver = webdriver.Chrome()6driver.get("https://the-internet.herokuapp.com/dropdown")7Select(driver.find_element(By.ID, "dropdown")).select_by_visible_text("Option 2")8 9driver.get("https://the-internet.herokuapp.com/checkboxes")10box = driver.find_elements(By.CSS_SELECTOR, "#checkboxes input")[0]11if not box.is_selected():12    box.click()13 14driver.get("https://the-internet.herokuapp.com/upload")15driver.find_element(By.ID, "file-upload").send_keys("/full/path/to/photo.png")16driver.find_element(By.ID, "file-submit").click()

1/3Select wraps the dropdown and picks an option by the text a user sees.

Three element types on a free practice site. Replace the file path with a real file on your machine.

Save yourself the pain

Common mistakes

Oops

Clicking a checkbox without checking its state first.

Do this instead

Read is_selected() and click only when the state needs to change.

Oops

Trying to click the OS file picker window with Selenium.

Do this instead

Selenium can't touch OS dialogs. Send the file path to the input element directly.

Your mission

Element tour

~35 min

Quick check

Why use is_selected() before clicking a checkbox?

Go deeper

1Write automation scripts interacting with at least 4 different element types.
2Learn the specific method needed for handling a dropdown versus a standard button click.
3Practice automating a file upload interaction, a commonly tricky element type.