End-to-end test suite for Swag Labs built with Playwright and TypeScript.
Covers login, inventory, cart, checkout, product details, and mobile smoke tests across Chrome, Firefox, and Safari.
This framework was built with the assistance of Playwright MCP (for browser automation and element extraction during development) and Playwright CLI (for test generation, debugging, and inspector workflows). See Tooling Notes at the bottom for observations on both.
- Page Object Model with a shared
BasePage - Custom fixtures for authenticated page state
- Multi-browser: Chromium, Firefox, WebKit (desktop + mobile emulation)
- Zero hardcoded timeouts — ESLint enforces state-based waits
- AAA pattern (Arrange, Act, Assert) validated across all specs
- Three CI workflows: desktop, mobile, smoke (GitHub Actions)
- JUnit + HTML + Allure reporting
.github/workflows/ CI pipelines (desktop, mobile, smoke)
config/ Playwright configs per platform
fixtures/ Custom Playwright fixtures (authenticated pages)
pages/ Page Object Model
BasePage.ts
saucedemo/
tests/
web/specs/ Desktop browser specs
web-mobile/specs/ Mobile emulation specs
utils/
helpers/ env-manager, data-generator
patterns/ AAA validator, timeout guard, assertion builder
reporters/ Failure classifier
ai/ Agent orchestration (generator, healer, analyzer)
playwright.config.ts Default config entry point (re-exports config/playwright.web.config.ts)
tsconfig.json TypeScript config (must stay at root)
eslint.config.js ESLint rules (must stay at root)
npm install
npm run install:browsersNo .env setup needed — this framework targets Swag Labs exclusively and all defaults are pre-configured.
| Command | Description |
|---|---|
npm run test:web |
Desktop tests (Chromium, Firefox, WebKit) |
npm run test:web-mobile |
Mobile emulation (Pixel 5, iPhone 13, Galaxy S24) |
npm run test:all |
Desktop + mobile |
npm run test:smoke |
Smoke tests only (@smoke tag) |
npm run test:web:headed |
Desktop tests in headed mode |
npm run test:web:debug |
Desktop tests in debug mode |
npm run report:serve # Open Playwright HTML report
npm run report:allure # Generate and open Allure reportnpm run lint # ESLint
npm run format # Prettier
npm run type-check # TypeScript (no emit)
npm run validate:aaa # Check AAA structure in all specs
npm run validate:timeouts # Detect hardcoded waitsThree GitHub Actions workflows run on push and pull requests to main:
web-tests.yml— desktop browsers, matrix across Chromium, Firefox, WebKitweb-mobile-tests.yml— mobile device emulation (Pixel 5, iPhone 13, Galaxy S24)smoke-tests.yml— fast smoke pass, posts results as a PR comment
Artifacts (JUnit XML, HTML report, traces, and failure videos) are uploaded per run. On CI retries, Playwright keeps traces for the failed attempt and its retry so flakes are easier to compare.
Used during development for:
npx playwright codegen— generates test code by recording browser interactionsnpx playwright test --debug/--ui— step-through debugging with the Inspectornpx playwright show-report— reviewing traces and failure screenshots locally
Pros: Zero setup, ships with Playwright, great for quick exploration and trace review.
Cons: Codegen produces fragile selectors (CSS/XPath) that need manual cleanup to data-test attributes. The Inspector is headful only, so not usable in CI.
Used during development for programmatic browser control from an AI agent context:
- Extracting elements and their accessible roles/attributes to inform selector choices
- Navigating and interacting with pages to verify selectors before writing specs
- Reproducing failures in a controlled session without running the full suite
Pros: Allows AI-assisted element discovery with real browser context; respects the selector priority hierarchy (data-test → role → text) when querying. Useful for validating selectors against the live DOM before committing them to page objects.
Cons: Requires the MCP server running locally (.mcp/servers.json). Not a replacement for the test runner — used only for authoring assistance, not execution.