Test Structure and Configuration in Playwright

Test Structure and Configuration is the third chapter of the free Playwright tutorial. It shows how to organize a growing test suite and control how it runs.

What each lesson covers:

  • Organizing Tests: test.describe(), hooks and their order, test.step(), annotations, tags with --grep, and tests generated from data.
  • Fixtures: Built-in fixtures, testInfo, custom fixtures with setup and teardown, worker scope, automatic and option fixtures, and sharing fixtures with mergeTests().
  • Playwright Configuration: defineConfig(), use options, projects and dependencies, webServer, timeouts, workers, retries, environment variables and command-line overrides, with an editable config in every lab.

The first lesson groups tests with test.describe(), runs setup and cleanup with hooks, splits long tests into named steps, marks tests with annotations and tags, and runs the same test for many inputs. The second lesson covers fixtures, Playwright's way to give each test what it needs, such as a page, a logged-in user or test data, and to clean up afterwards. The third lesson controls the whole run from playwright.config: browsers as projects, starting your app with webServer, timeouts, parallel workers, retries and settings you can change from the command line.

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. Organizing Tests

    Grouping tests with test.describe, keeping tests independent, the four hooks and their order, test.step with boxed steps and return values, annotations (skip, fixme, fail, slow, conditional, only, custom), tags, picking tests with --grep, --only-changed and --last-failed, and generating tests from data.

    • Group tests with test.describe and keep each test independent
    • Use beforeEach, afterEach, beforeAll and afterAll in the right order
    • Split a long test into readable steps with test.step
    • Skip, mark and tag tests, and run only the tests you need
  2. Fixtures

    What fixtures are and why they beat hooks, the built-in fixtures (page, context, browser, browserName, request), the testInfo object, custom fixtures with test.extend and use(), fixtures that depend on others, overriding built-ins, test and worker scope, automatic fixtures, timeouts, option fixtures, and sharing fixtures with mergeTests and types.

    • Explain what a fixture is and why fixtures beat hooks
    • Use the built-in page, context, browser and browserName fixtures
    • Write a custom fixture with setup, use() and teardown
    • Choose test or worker scope, and make fixtures automatic or configurable
  3. Playwright Configuration

    playwright.config.ts and defineConfig, core options (testDir, testMatch, outputDir, forbidOnly, shared use options, test.use), projects for browsers, branded channels, dependencies and setup projects, the webServer option, every kind of timeout, workers and parallel mode, retries and flaky tests, environment variables with dotenv, command-line overrides, and global setup.

    • Read and edit playwright.config.ts with defineConfig
    • Set shared use options and override them with test.use
    • Set up projects for browsers, devices and setup steps
    • Choose the right timeout, retry and parallel settings