Finding Web Elements in Selenium – From DOM to WebElement

Understand the mental model: DOM → HTML Element → Locator → WebElement.

What You'll Learn

• What "finding elements" means in Selenium WebDriver.
• The mental model: DOM → HTML Element → Locator → WebElement.
• How Selenium uses locators to search the DOM.
• The difference between findElement and findElements.
• Why almost every Selenium test starts with "find element → interact → verify".

Why This Lab Matters

Before you can click, type, or read anything in Selenium, you must find the correct element.

If you don't fully understand how Selenium sees the page:

• Your tests will be flaky and hard to debug.
• You may click the wrong element or fail to find anything.
• Small DOM changes will break a lot of tests.

A solid mental model of how Selenium goes from locator → WebElement will make all later topics (locators, waits, page objects, etc.) much easier.

Prerequisites

Before starting this lab, you should:

• Know basic HTML tags (<button>, <input>, <a>, <div>, etc.).
• Understand at a high level what Selenium WebDriver is and that it controls the browser.
• Have basic Java knowledge (variables, objects, methods).
• Already know that a locator is something like By.id("login-button") (even if you're not comfortable with all types yet).

Core Concepts

DOM (Document Object Model):

The browser's internal tree representation of your HTML page. Selenium never "sees" pixels, only this DOM tree.

HTML Elements:

Nodes in that tree: buttons, inputs, paragraphs, links… They are the "real things" on the page.

Locator:

A description of how to find a specific element (or group of elements) inside the DOM. Examples: by id, name, class, CSS selector, XPath, etc.

Finding Methods:

• findElement(locator) → returns one WebElement (or fails if none found).
• findElements(locator) → returns a list of WebElements (can be empty).

WebElement:

A Java object that represents one real element in the DOM. Through it, you can:

• Click it
• Type into it
• Read its text
• Read its attributes (like value, href, etc.)

Core Pattern:

Locator → findElement / findElements → WebElement(s) → Interactions

Pro Tips (From Real Projects)

• Treat locators like API contracts: if they are clear and stable, your tests will be stable.
• Reuse locators by centralizing them (e.g., Page Object pattern) instead of scattering By.* everywhere.
• Prefer simple, robust locators (id, name, stable CSS) over complex, fragile XPath when possible.
• Always double-check in DevTools that your locator matches exactly one element (when you expect a single match).
• When debugging, think through the chain:DOM changed? → locator still valid? → findElement still matching? → WebElement still interactable?

Common Mistakes to Avoid