Test Design and Quality in Playwright

Test Design and Quality is the sixth chapter of the free Playwright tutorial. It is about tests that stay easy to change, and checks that go beyond text and clicks.

What each lesson covers:

  • Page Object Model: Put each page's locators and actions in one class. Page classes, pages that lead to other pages, component objects, page objects as fixtures, where assertions go, and the anti-patterns to avoid.
  • Visual, Snapshot, and Accessibility Testing: Catch visual bugs with toHaveScreenshot(), keep screenshots stable with masks, check page structure with ARIA snapshots, and scan for accessibility problems with axe-core.

As a test suite grows, the same locators and steps appear in many tests. A page object puts them in one class per page, so a change to the page means one change in the tests. The first lesson builds page objects step by step, connects pages that lead to other pages, and offers them to tests as fixtures. The second lesson checks what text-based tests miss. You compare screenshots with toHaveScreenshot(), mask parts that change on every run, check the page structure with ARIA snapshots, and scan for accessibility problems with axe-core.

Every test box runs in the Playwright lab in your browser, in TypeScript or JavaScript. Screenshot boxes keep their baselines between runs, so you can see the first-run and second-run behaviour.

Lessons in this section

  1. Page Object Model

    Why repeated locators make tests hard to change, what a page object is, writing a page class with locators and actions, using it in tests, pages that lead to other pages, component objects for repeated parts, page objects as fixtures, where assertions belong, folder structure, and common anti-patterns.

    • Explain the problem the Page Object Model solves
    • Write a page class with locators and action methods
    • Model repeated parts of a page as components
    • Provide page objects to tests as fixtures
  2. Visual, Snapshot, and Accessibility Testing

    Visual regression testing with toHaveScreenshot, baselines and --update-snapshots, masking dynamic content, thresholds and platforms, snapshot testing values with toMatchSnapshot, ARIA snapshots with ariaSnapshot and toMatchAriaSnapshot, automated accessibility scans with @axe-core/playwright, and keyboard checks axe cannot do.

    • Catch visual regressions with toHaveScreenshot and baselines
    • Make screenshots stable with masks and thresholds
    • Check page structure with ARIA snapshots
    • Scan pages for accessibility problems with axe-core