HTML Basics for Selenium & Playwright | Understanding Tags, Attributes, and Locators

When you start writing test automation with Selenium or Playwright, a common frustration is “I can’t find the element” or “I have no idea what locator to use.” In most cases, the root cause is simply not knowing how to read HTML. This guide covers the HTML fundamentals every QA engineer needs for test automation — with real code examples throughout.

📌 Who This Article Is For

Every test automation script involves one thing above all: finding elements. In Selenium, that looks like driver.find_element(By.ID, "email"). In Playwright, it might be page.get_by_test_id("login-btn"). But where do the values "email" and "login-btn" actually come from?

The answer is the HTML. Test automation tools find elements using the attributes defined in HTML. That’s why being able to read HTML is one of the most direct shortcuts to becoming faster at test automation — and you don’t need a web development background to do it.

HTML Structure: What Are Tags and Attributes?

HTML is the language that defines the structure of a web page. When a test automation tool “clicks a button” or “types into an input field,” it finds those elements using the attributes written in HTML. For a guide on how to inspect those attributes in practice, see Chrome DevTools for QA Engineers.

The Basics of Tags

HTML is made up of tags (written as <tagname>). Most tags come in pairs — an opening tag and a closing tag.

<button>Log In</button>

<p>This is a paragraph of text.</p>


<input type="text">

What Are Attributes?

Tags can carry attributes — additional information written inside the opening tag in the format attribute-name="value".

<input type="email" id="user-email" name="email" placeholder="Email address">

These attribute values are exactly what you use as the basis for writing locators in your test code.

5 Attributes That Matter Most for Test Automation

HTML has dozens of attributes, but test automation relies on just a handful. Master these five and you can write locators for nearly any element.

① id: The Most Reliable Identifier

The id attribute must be unique within the page — only one element can have a given id at a time. That uniqueness makes it the most stable locator.

<input id="login-email" type="email">
<button id="login-btn">Log In</button>

# Selenium
driver.find_element(By.ID, "login-email")
driver.find_element(By.CSS_SELECTOR, "#login-btn")

# Playwright
page.locator("#login-email")
page.locator("#login-btn")

② data-testid: The Gold Standard for Test Locators

data-testid is an attribute that developers add specifically for testing purposes. Because it’s not tied to styling or business logic, it’s resilient to design changes and refactoring — making it the most stable locator option in test automation.

<button data-testid="submit-button" class="btn btn-primary btn-lg">
  Submit
</button>

# Selenium (using CSS selector)
driver.find_element(By.CSS_SELECTOR, "[data-testid='submit-button']")

# Playwright (dedicated method)
page.get_by_test_id("submit-button")

③ class: Convenient, but Fragile

class is a grouping attribute used to apply CSS styles. Multiple elements can share the same class name, which makes it an unreliable choice for locators.

<button class="btn btn-primary btn-lg disabled">Submit</button>
                         ↑ Changes with design updates or state changes


<button class="MuiButton-root css-1abcde">Submit</button>   <!-- Material UI -->
<button class="chakra-button">Submit</button>               <!-- Chakra UI -->
<button class="Button_btn__abc123">Submit</button>          <!-- CSS Modules -->
                                     ↑ May change with every build

Form Elements You’ll Use in Almost Every Test

Form elements show up constantly in web app testing. Logins, registrations, searches — nearly every key user flow involves a form.

Form Element to Locator Reference Table

Practice: Reading a Login Form and Writing Locators

Let’s walk through a real HTML example and write locators from it.

<form id="login-form">
  <label for="email">Email address</label>
  <input type="email"
         id="email"
         name="email"
         data-testid="login-email"
         placeholder="e.g. user@example.com">

  <label for="password">Password</label>
  <input type="password"
         id="password"
         name="password"
         data-testid="login-password">

  <button type="submit"
          id="login-btn"
          data-testid="login-submit">
    Log In
  </button>
</form>

Here’s how you’d write the locators from this HTML:

# Selenium — id first
email_input    = driver.find_element(By.ID, "email")
password_input = driver.find_element(By.ID, "password")
login_button   = driver.find_element(By.ID, "login-btn")

email_input.send_keys("test@example.com")    # sample URL
password_input.send_keys("password123")
login_button.click()

# Playwright option ① — get_by_test_id (data-testid available)
page.get_by_test_id("login-email").fill("test@example.com")    # sample URL
page.get_by_test_id("login-password").fill("password123")
page.get_by_test_id("login-submit").click()

# Playwright option ② — semantic locators (get_by_label / get_by_role)
page.get_by_label("Email address").fill("test@example.com")    # sample URL
page.get_by_label("Password").fill("password123")
page.get_by_role("button", name="Log In").click()

Locator Priority: What to Look for First

Selenium: Prefer Stable Attribute-Based Locators

More stable on the left → more fragile on the right

Playwright: Match the Locator to the Element Type

Playwright’s approach isn’t a fixed ranking — it’s about choosing the right locator for each element type. The right choice depends on context.

Common Pitfalls When Reading HTML

Frequently Asked Questions

Summary

You don’t need to memorize all of HTML. Knowing “look for id and data-testid” and “recognize common form elements” is enough to clear the first big obstacle in test automation. Once you’re comfortable reading HTML, the next step is using Chrome DevTools to inspect real pages and validate your selectors on the spot.