Lesson 6 — Real QA HTML Analysis

Title: Read a real login page and plan locators like QA

Description: Walk through production-style login markup, map elements to test goals, and compare Selenium-style locators: By ID, CSS, data-testid, and XPath.

Why it matters for QA: Lessons 1–5 come together here. You practice the skill you use daily: inspect HTML, choose the best locator, and know the trade-offs before writing the first line of test code.

1. Real Login Page Example

<div class="login-page">

    <form id="login-form">

        <h1>
            Login
        </h1>

        <input
            id="email"
            type="email"
            placeholder="Enter email"
        >

        <input
            id="password"
            type="password"
        >

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

    </form>

</div>

2. QA Analysis

Important Elements

3. Possible Selenium Locators

By ID

By.ID, "email"

By CSS

#password

By data-testid

[data-testid='login-btn']

By XPath

//button[text()='Login']