13. Enterprise Project Architecture & Folder Standards

The Standard Playwright Project Blueprint

A chaotic test repository with tests, locators, and configs mixed together in the root directory quickly collapses under maintenance debt. Here is the industry standard structure:

playwright-project/
├── playwright.config.ts    # Central Playwright runner settings
├── tsconfig.json           # TypeScript compilation and path aliases
├── package.json            # Dependencies and npm scripts
│
├── tests/                  # Spec files (.spec.ts) organized by feature/domain
│   ├── auth/
│   │   ├── login.spec.ts
│   │   └── reset-password.spec.ts
│   └── checkout/
│       └── checkout-flow.spec.ts
│
├── pages/                  # Page Object Model classes (business workflows)
│   ├── BasePage.ts
│   ├── LoginPage.ts
│   └── DashboardPage.ts
│
├── components/             # Reusable UI fragments (Navigation, Modals, Tables)
│   ├── HeaderComponent.ts
│   └── NotificationToast.ts
│
├── fixtures/               # Custom test fixtures (injected page objects, states)
│   └── test-base.ts
│
├── utils/                  # Non-browser utilities (date formatting, string helpers)
│   └── string-utils.ts
│
├── data/                   # Test fixtures, mock payloads, JSON files
│   ├── users.json
│   └── orders.json
│
├── types/                  # Shared TypeScript interfaces and type definitions
│   ├── user.types.ts
│   └── api.types.ts
│
└── config/                 # Environment endpoints and credentials
    └── environment.config.ts

---

Folder Roles Explained

1. tests/: Contains only the test specifications (*.spec.ts). Tests should read like plain English user stories and contain minimal raw locators. 2. pages/: Represents entire screens or routes. Encapsulates locators and user actions. 3. components/: UI widgets that appear across multiple pages (e.g. Header bar, Sidebar menu, Confirmation dialog). 4. fixtures/: Playwright's powerful dependency injection setup. Exposes pre-authenticated pages or initialized POMs directly into test function arguments. 5. utils/: Pure functions for data manipulation, mathematical operations, or date calculations. 6. data/: Raw static fixtures, sample CSV files, or test data mocks. 7. types/: Strict TypeScript interfaces for API responses and test models. 8. config/: URLs, credentials, and feature flags.