Interacting with Web Elements in Selenium

Learn the mental model of interactions and the 5 basic commands: click, sendKeys, clear, submit, and Select.

Concept

Finding an element is only half the battle. To automate a real user flow, you need to interact with elements—typing, clicking, and selecting.

1. The Core Mental Model

Locator finds it. WebElement does it.

Always keep this distinction clear. You use a Locator (like By.id) to find the element, and then you call methods on the resulting WebElement to interact with it.

2. The 5 Basic Interaction Commands

click()

Simulates a mouse click. Used for buttons, links, checkboxes, and radio buttons.

sendKeys(...)

Types text into an input field. Can also send special keys like Keys.ENTER.

clear()

Erases text from an input. Crucial before typing to ensure no old data remains.

submit()

Submits the form an element belongs to. (Prefer clicking the submit button usually).

Select Class

Helper for <select> dropdowns. Provides selectByVisibleText, etc.

3. How WebDriver Interacts

When you call an interaction method, WebDriver tries to act like a real user. It checks if the element is:

Visible: Not hidden by CSS.
Enabled: Not disabled.
Unobscured: No other element is covering it.

If any of these fail, you'll get an exception (e.g., ElementNotInteractableException).

Step-by-Step Guide

Step 1: From Locator to WebElement

Think in two lines: one for finding, one for doing.

Step 1

By usernameLocator = By.id("username-input");
WebElement usernameInput = driver.findElement(usernameLocator);
usernameInput.sendKeys("testuser123");

Step 2: Typing and Resetting

Always clear before typing in form fields to avoid flakiness.

Step 2

usernameInput.clear();
usernameInput.sendKeys("new-value");

Step 3: Using Select for Dropdowns

Wrap standard <select> elements with the Select class.

Step 3

WebElement roleDropdown = driver.findElement(By.id("role-select"));
Select roleSelect = new Select(roleDropdown);
roleSelect.selectByVisibleText("Tester");

Java Code Example

BasicInteractions.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
WebElement usernameInput = driver.findElement(By.id("username-input"));
usernameInput.clear();
usernameInput.sendKeys("testuser123");

WebElement roleDropdown = driver.findElement(By.id("role-select"));
Select roleSelect = new Select(roleDropdown);
roleSelect.selectByVisibleText("Tester");

WebElement submitButton = driver.findElement(By.id("submit-btn"));
submitButton.click();

// Verification
String currentUsername = usernameInput.getAttribute("value");
String selectedRole  = roleSelect.getFirstSelectedOption().getText();

Code Breakdown

usernameInput.clear(): Ensures the field is empty before typing.
new Select(roleDropdown): Wraps the element to provide dropdown-specific methods.
getAttribute("value"): Reads the current text inside an input field (essential for verification).

Pro Tips & Common Mistakes

✅ Pro Tips

Clear Naming: Use usernameInput, not elem1.
Helper Methods: Group interactions into methods like fillLoginForm().
Verify: Don't just click; check what changed on the page.

❌ Common Mistakes

Direct Interaction: Trying to call click() on a By locator.
Forgetting Clear: Typing into a field that already has text.
Ignoring Exceptions: Adding sleeps instead of fixing ElementNotInteractableException.