⏳ Wait Mechanisms

Wait Mechanisms: Playwright's waiting system works like a modern smart traffic light: it doesn't open on a fixed timer — it opens dynamically based on sensor-detected conditions;

Playwright's waiting system works like a modern smart traffic light: it doesn't open on a fixed timer — it opens dynamically based on sensor-detected conditions; when the condition is met, you go; when it isn't, you wait. Why did Selenium require so much manual wait code? Selenium acts like an old-fashioned mechanical timer: when the time runs out, it stops waiting, whether the element is ready or not; if it is ready but time hasn't elapsed, you still wait. That's why in Java you had to write WebDriverWait(driver, Duration.ofSeconds(10)).until(ExpectedConditions.elementToBeClickable(By.id("btn"))) — for every element, repeated in every test. In Playwright, page.locator("#btn").click() carries that waiting logic internally: it automatically waits until the element is visible, enabled, in the viewport, and in a stable position; if maximum timeout is exceeded it fails with a clear error message. The QA reality: tests with hardcoded wait durations produce the classic "works on my machine" failure — green in the local dev environment but red on a slower CI runner. Playwright's event-driven waiting system eliminates that gap entirely.

Auto-Wait — Playwright's Superpower

Before ALL actions like click(), fill(), check(), Playwright checks: Is the element in the DOM? Is it visible? Is it clickable? Is it stable? Only when all conditions are met does it perform the action. If timeout is exceeded, it throws TimeoutError.

Micro Lab: Playwright — Locator selection

Replace the TODO line with the critical line from the expected solution. This is not a real runtime; the goal is to reinforce writing the correct structure in a controlled way.

Step by Step: Playwright — Locator selection

Try semantic locators first: getByRole, getByLabel, getByPlaceholder

If not semantic, use getByText or getByTestId

If CSS/XPath needed, write page.locator("css") or page.locator("xpath=...")

Verify locator works with await expect(locator).toBeVisible()

Narrow with filter()

If multiple elements match, narrow with .first() / .nth() / .filter()

What is the Playwright locator selection and verification order?

🎬 Smart Traffic Light vs a Fixed Timer