Core Test Writing in Playwright

Core Test Writing is the second chapter of the free Playwright tutorial. It covers the three things every test does: find elements, act on them, and check the result.

What each lesson covers:

  • Locators: Lazy and strict locators, the built-in getBy... locators, CSS and XPath, narrowing with filter(), nth(), and(), or() and within(), and choosing resilient locators, with a practice locator picker.
  • Actions and Auto-Waiting: Navigation, clicks, typing, forms and scrolling, and the actionability checks that make every action wait for the page.
  • Assertions: Web-first assertions that retry, locator and page assertions, generic and asymmetric matchers, soft assertions, expect.poll(), toPass() and custom matchers.

A locator describes how to find an element, such as a button by its role and name, and Playwright looks for it again each time you use it. The first lesson shows the built-in locators, when CSS or XPath make sense, and how to narrow a locator to the one element you mean. The second lesson acts on the page: going to a URL, clicking, typing, filling forms and scrolling, while Playwright waits for each element to be ready. The third lesson checks the result with assertions that retry until they pass or time out, so tests stay stable without fixed waits.

Every test box runs in the Playwright lab in your browser, in TypeScript or JavaScript. Each lesson ends with graded exercises.

Lessons in this section

  1. Locators

    What a locator is, why locators are lazy and strict, the built-in getBy locators (role, text, label, placeholder, alt text, title, test id), CSS and XPath, narrowing with chaining, filter, nth, and, or and within, choosing resilient locators from the accessibility tree, and naming locators with describe().

    • Explain why locators are lazy and strict
    • Find elements with getByRole, getByLabel, getByText and getByTestId
    • Narrow a locator with filter, chaining, nth and within
    • Fix a strict mode violation
  2. Actions and Auto-Waiting

    Navigation (goto options, reload, back and forward, waitForURL, waitForLoadState), mouse actions (click options, double-click, right-click, hover), typing (fill, clear, pressSequentially, press, focus, blur), form actions (check, selectOption, radio buttons), scrolling, and how auto-waiting works: actionability checks, retries, waitFor, why fixed sleeps fail, and the force and trial options.

    • Navigate with goto, reload, goBack and waitForURL
    • Click, double-click, right-click and hover with the right options
    • Type with fill, pressSequentially and press, and fill in forms
    • Explain the actionability checks behind auto-waiting
  3. Assertions

    expect() and web-first assertions that retry, why assertions must be awaited, locator assertions for state, content, attributes and count, page assertions, generic and asymmetric matchers, .not, custom messages and timeouts, soft assertions, expect.poll and toPass, and custom matchers with expect.configure and expect.extend.

    • Explain how web-first assertions retry until they pass
    • Check state, text, values, attributes and counts of elements
    • Use generic and asymmetric matchers for plain values
    • Use .not, custom messages, timeouts and soft assertions