Setup

Playwright Project Structure

Understand the generated Playwright project structure, config file, tests folder, reports, traces, and where real automation code should live.

Generated Files

  • playwright.config file controls projects, retries, reporter, baseURL, and trace settings.
  • tests folder stores spec files.
  • playwright-report stores HTML report output.
  • test-results stores artifacts such as traces and screenshots.

Where Tests Go

Keep test files grouped by feature or journey. Use names that explain behavior, such as login.spec.ts or checkout.spec.ts.

Where Helpers Go

Reusable helpers, fixtures, page objects, and test data builders should live outside spec files when duplication becomes real.

Common Structure Mistakes

  • Putting every test in one large file.
  • Creating page objects before understanding repeated behavior.
  • Hiding assertions inside helpers.
  • Committing generated report folders unnecessarily.
☰