Lesson 4 — class, id, and HTML Attributes

Title: id, class, data-*, and attributes that become locators

Description: See how attributes decorate elements — unique id, reusable class, name, custom data-*, data-testid, and accessibility labels like aria-label.

Why it matters for QA: Locator quality starts in the markup. Stable id and data-testid beat brittle XPath; knowing which attributes change with each deploy saves flaky suites.

1. What Are Attributes?

Attributes give extra information to HTML elements.

Example:

<input
    id="email"
    class="input-field"
    type="email"
>

2. id Attribute

Unique identifier.

<input id="email">

Important for:

• Selenium
• Playwright
• JavaScript

3. Rules for id

Good practice:

• unique
• readable
• stable

Bad examples:

• random generated ids
• changing ids

4. class Attribute

Used for groups of elements.

<button class="btn">

Multiple elements can share one class.

5. Multiple Classes

<button class="btn primary large">

Element has:

• btn
• primary
• large

6. name Attribute

<input name="password">

Often used in forms.

7. data-* Attributes

Custom frontend attributes.

Example:

<div data-user-id="15">

8. data-testid

Very important for QA Automation.

<button data-testid="login-button">
    Login
</button>

9. Why data-testid Is Important

Advantages:

• stable
• readable
• independent from UI styles
• safe for automation

10. Accessibility Attributes

Example:

<input aria-label="Email">

Useful for:

• screen readers
• accessibility testing
• automation

11. QA Best Practices for Attributes

Prefer: -id

• data-testid
• stable CSS selectors

Avoid:

• dynamic classes
• long XPath
• fragile locators