Design a Playwright + TypeScript Test Framework Architecture
Generate a production-ready Playwright TypeScript framework architecture covering folder structure, configuration, Page Object Model, data strategy, auth, reporting, CI integration, and anti-patterns to avoid.
You are a senior QA architect with deep expertise in Playwright and TypeScript. Design a production-ready Playwright TypeScript test framework architecture for the application described below. Application type: {{APPLICATION_TYPE}} Application URL(s): {{APP_URLS}} Team size and skill level: {{TEAM_SKILL}} Test scope (e2e, component, visual, API): {{TEST_SCOPE}} CI/CD platform: {{CI_PLATFORM}} Environments to support: {{ENVIRONMENTS}} Reporting requirements: {{REPORTING_REQUIREMENTS}} Produce a detailed architecture covering all of the following: 1. **Folder structure** — annotated directory tree showing where tests, fixtures, page objects, helpers, test data, and config live. 2. **Configuration** — playwright.config.ts settings: browsers, base URL per environment, retries, timeout strategy, parallelism, and how environment-specific values are injected (dotenv, process.env, CI secrets — never hardcode URLs or tokens). 3. **Page Object Model** — how page objects are structured, what they expose, and what belongs in a page object vs a helper vs a fixture. 4. **Test data strategy** — how test data is created, isolated, and cleaned up. Note builder patterns, factories, or API-driven setup. Real credentials, PII, and production data must never appear in the framework. 5. **Authentication strategy** — storageState approach, fixture-based auth, and how to handle multiple user roles without repeating login steps. 6. **Reporting** — Playwright HTML report, CI artefact upload, and optional Allure integration. 7. **CI/CD integration** — {{CI_PLATFORM}} workflow snippet for running tests in parallel, caching node_modules, and uploading the report as an artefact. 8. **Anti-patterns to avoid** — at least 5 specific anti-patterns (e.g., hardcoded waits, brittle CSS selectors, shared state between tests) with a one-line explanation of each. Format each section with a heading. State all assumptions explicitly. This is a design document for human review — the team must validate every decision against their actual constraints before implementing.
{{APPLICATION_TYPE}}requiredType of application being tested
e.g. React SPA with REST API backend
{{APP_URLS}}requiredURL(s) of the app — use staging/test URLs only, never production credentials
e.g. https://staging.example.com
{{TEAM_SKILL}}requiredTeam size and Playwright/TypeScript experience level
e.g. 3 SDETs, intermediate TypeScript, familiar with Cypress but new to Playwright
{{TEST_SCOPE}}requiredWhat test types this framework will cover
e.g. E2E UI tests and API integration tests
{{CI_PLATFORM}}requiredCI/CD platform the team uses
e.g. GitHub Actions
{{ENVIRONMENTS}}requiredEnvironments the framework must support
e.g. local, staging, UAT
{{REPORTING_REQUIREMENTS}}Reporting format and where reports are consumed
e.g. HTML report uploaded as CI artefact; Slack notification on failure
- Validate the folder structure against your existing monorepo or project layout — the AI assumes a greenfield project.
- Check the authentication strategy works with your actual auth mechanism (SSO, OAuth, session cookies).
- Confirm the CI workflow snippet uses your actual runner labels, Node version, and secret names.
- Verify the test data strategy aligns with your isolation requirements for shared staging environments.
- Review the anti-patterns list with your team and add any project-specific ones before sharing as standards.
- This is a design document — build a proof-of-concept against a real page before adopting the architecture.
AI output requires human review before use. These checks are your responsibility.
- The AI makes assumptions about your auth mechanism, project structure, and CI secrets — all must be verified.
- Framework designs look thorough on paper but often miss environment-specific constraints (VPNs, firewalls, shared accounts).
- CI workflow snippets reference placeholder secret names — using the wrong name causes silent failures.
- Page Object Model structures often need iteration against a real application before they fit well.