Jayakumar-lab/Enterprise-Playwright-Framework-TypeScript-

# Enterprise Playwright Framework (TypeScript) Production-grade, CI-friendly Playwright Test framework scaffold with UI E2E, API testing, component testing (where applicable), accessibility checks (axe-core), and visual regression examples. ## Features - **Multi-project Playwright config**: Chromium/Firefox/WebKit, parallel workers - **Reliability**: - resilient locators + deterministic navigation - traces/screenshot/video on failure - retry strategy (CI-friendly) - global setup hooks - **Framework layers**: - `src/config` — env loading + typed config - `src/core` — fixtures, logging, correlation id, global setup/teardown - `src/pages` — POM abstractions - `src/api` — typed API client wrappers + schema validation - `src/assertions`, `src/utils` — reusable helpers (where present) - **Test categories** (via tags like `@smoke`, `@api`, etc.) - **Observability artifacts**: - `playwright-report/` - `test-results/` - trace/video/screenshot artifacts per test run - **MCP integration**: - `/.vscode/mcp.json` registers the Playwright MCP server for Copilot Agent Mode ## Prerequisites - Node.js (LTS recommended) - Playwright browsers - (Optional) Docker for grid-like execution ### Install browsers npx playwright install --with-deps ## Quickstart ### 1) Install dependencies npm ci ### 2) Run UI smoke test (Chromium) npx playwright test src/ui/automationExercise.spec.ts --project=chromium ### 3) Run full suite (all tests in all projects) npx playwright test ### 4) Open HTML report npx playwright show-report ## Configuration ### Environment variables Environment is loaded by `src/config/env.ts` / `src/config/app.ts`. Common variables: - `BASE_URL` — overrides the default base URL used by sample tests. If `BASE_URL` is not set, the framework defaults to: - `https://automationexercise.com/test_cases` ### Secrets handling (security-friendly) - Secrets must be provided via environment variables. - No secrets should be committed to the repo. ## Repository layout Key directories: - `playwright.config.ts` — Playwright projects + reporters + artifact rules - `src/core` — fixtures, global hooks, logging/correlation - `src/config` — env config + typed config loader - `src/pages` — page object model (selectors/actions/assertions separation) - `src/api` — request-context client wrappers + schema validation - `src/ui` — UI E2E examples - `src/api` — API examples - `src/component` — component testing examples (isolation harness) - `src/accessibility` — axe-core checks - `src/visual` — visual snapshot example - `/.vscode/mcp.json` — Playwright MCP registration ## Running subsets ### List tests npx playwright test --list ### Run only Chromium npx playwright test --project=chromium ### Sharding (example) npx playwright test --shard=1/3 ## Artifacts & Debugging On failure, the framework is configured to emit: - **HTML report**: `playwright-report/` - **JUnit**: `test-results/junit/results.xml` - **Per-test artifacts**: - screenshots - videos - traces ### Artifact locations - `playwright-report/` - `test-results/` - `playwright-artifacts/` ## Adding new tests ### 1) UI E2E test (POM) Pattern: - Create/extend a page object under `src/pages/**` - Add a test under `src/ui/**` - Use tags: - `@smoke`, `@regression`, `@ui`, etc. ### 2) API test Use the Playwright `request` fixture (provided via framework fixtures) and keep: - endpoint wrappers in `src/api/**` - response validation via schema validation in `src/api/schemas.ts` ### 3) Accessibility test Add a test under `src/accessibility/**` and run axe-core checks. ### 4) Visual snapshot test Add a test under `src/visual/**` using snapshot matchers. ## Troubleshooting ### Common issues **1) Navigation timeout / wrong base URL** - Confirm `BASE_URL` is set correctly. - Default base URL is `https://automationexercise.com/test_cases`. **2) Missing storage state** - The framework guards storageState usage so that fresh environments won’t fail if auth state is not present. **3) Flaky locators** - Prefer stable attributes (`data-testid`, semantic roles) - Avoid brittle XPath where possible - If dynamic content exists, use deterministic waits from Playwright (e.g., `locator.waitFor()`) ### Debug workflow - Re-run failing tests with trace: npx playwright test --project=chromium --trace on - Open trace from the test output via Playwright report. ## CI/CD This repo includes CI configuration examples: - **GitHub Actions**: `/.github/workflows/ci.yml` - **Azure DevOps**: `/.azure-pipelines/` (if present) - **Jenkins**: `./jenkins/` (if present) ### Expected CI behavior - use `npm ci` - cache `~/.cache/ms-playwright` (or Playwright cache equivalents) - upload `test-results/` and `playwright-report/` ## MCP: Playwright MCP server (VS Code Copilot Agent Mode) The repo includes a VS Code MCP registration file: - `/.vscode/mcp.json` It registers Playwright MCP using `@playwright/mcp` for agent workflows. ### How to use Copilot Agent Mode with Playwright MCP Example agent prompts: 1. **User journey → generate Playwright test** - “Navigate to , login with , create entity , verify , generate Playwright test code.” 2. **Accessibility-driven locator improvements** - “Use MCP tools to inspect accessibility tree and propose stable locators.” 3. **Smoke suite generation from checklist** - “Generate smoke suite from a user journey checklist.” ## Compliance / Security notes - Never commit secrets. - If you add logging of requests/responses, ensure you mask sensitive values (e.g., Authorization headers, cookies). ## Commands reference - Run: `npx playwright test` - List: `npx playwright test --list` - Report: `npx playwright show-report` - Open JUnit: `test-results/junit/results.xml`

标签：后端开发