Skip to main content
QATraining
All Prompts
beginner
Featured

Build a Playwright Page Object Model Architecture

Generate a full POM structure with a base page class, individual page classes, typed Playwright fixtures, and an example test — all in TypeScript.

Prompt Template

You are an expert SDET specialising in Playwright test architecture.

Generate a complete Page Object Model (POM) structure for {{appName}}, a {{appType}} application.

Pages to model: {{pageList}}

Deliverables:
1. **BasePage** class with shared helpers:
   - waitForPageLoad() using networkidle
   - navigate(path: string)
   - screenshot(name: string) for debugging
2. **Individual page class for each page** in {{pageList}}:
   - All locators as readonly Locator properties using data-testid attributes
   - Action methods that compose locator + interaction (e.g. fillEmail(val), clickSubmit())
   - Assertion helpers on the class (e.g. expectSuccessBannerVisible(), expectValidationError(field))
3. **Playwright fixture** (fixtures.ts) that injects all pages into tests — no manual instantiation in tests
4. **Example test file** showing 3–4 tests using the fixture

Constraints:
- No test logic in POM classes — they describe pages and actions only
- All methods return Promises, all locators typed as Locator
- Page classes must NOT import from each other
- No hard-coded waits — use Playwright's built-in auto-waiting
- Include a barrel export (index.ts) for all pages

Structure:
```
tests/
  fixtures.ts        ← Playwright test extension with page objects
  pages/
    base.page.ts
    {{pageList}}.page.ts (one per page)
    index.ts
  specs/
    example.spec.ts
```
Tags
page-object-model
architecture
playwright
typescript
fixtures