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