Playwright TypeScript Testing Environment
Enterprise E2E testing with Playwright, TypeScript, cross-browser support, visual regression, and accessibility audits.
Demo Video:https://youtu.be/FQTDtIXKy6E
What's Inside
| Tool |
Version |
Purpose |
| Node.js |
20 LTS |
JavaScript runtime |
| TypeScript |
Latest |
Type-safe test scripting |
| Playwright |
Latest |
Cross-browser E2E testing framework |
| Chromium |
Pre-installed |
Google Chrome browser engine |
| Firefox |
Pre-installed |
Mozilla browser engine |
| WebKit |
Pre-installed |
Safari browser engine |
| Axe-core |
Latest |
Accessibility testing (WCAG 2.1) |
| Allure CLI |
Latest |
Test reporting |
| noVNC |
Latest |
Watch tests run in a real browser via GUI |
Quick Start
# Show all commands
pw-help
Helper Commands
Testing & Reports
| Command |
What it does |
pw-run [file\|dir] |
Run tests + HTML report |
pw-headed [file\|dir] |
Run tests in noVNC browser (visible) |
pw-ui |
Playwright UI test runner |
| running |
pw-perf |
Tests + trace + video + timing |
pw-parallel N |
Run with N parallel workers |
pw-allure |
Run tests + Allure report |
pw-open-report |
Serve existing report on port 9323 |
pw-junit |
Run tests + JUnit XML output |
Debugging
| Command |
What it does |
pw-debug <file> |
Step-through debugger |
pw-trace |
View trace from failed tests |
Code Generation
| Command |
What it does |
pw-codegen <url> |
Record browser actions → generate test code |
pw-pom <PageName> |
Generate Page Object Model class |
pw-fixture <name> |
Generate custom test fixture |
pw-api |
Generate API test scaffold |
Cross-Browser
| Command |
What it does |
pw-cross |
Run on Chromium + Firefox + WebKit |
pw-browser <name> |
Run on a specific browser |
Visual Regression
| Command |
What it does |
pw-visual |
Run visual snapshot tests |
pw-visual-update |
Update visual baselines |
Accessibility
| Command |
What it does |
pw-a11y |
Run WCAG accessibility audit with Axe |
| Command |
What it does |
pw-tag <tag> |
Run tests matching @tag |
pw-smoke |
Run @smoke tests |
pw-regression |
Run @regression tests |
Network Simulation
| Command |
What it does |
pw-slow |
Test with slow 3G simulation |
pw-offline |
Test with network disabled |
Environment
| Command |
What it does |
pw-env <env> |
Run with .env.<env> config (dev, staging, prod) |
Project Setup
| Command |
What it does |
pw-app |
Start demo e-commerce app on port 3000 |
pw-init <name> |
Scaffold new Playwright project |
pw-ci |
Generate GitHub Actions CI config |
pw-help |
Show all available commands |
Demo App — TechMart E-Commerce Store
The workspace includes a built-in demo app for testing:
pw-app
Use this app to practice locators, form testing, cart flows, and more — without needing an external website.
Mastery Framework
Each workspace includes a Mastery.md file with:
- Engineering standards — No XPath/CSS when user-facing locators exist, no hard waits, web-first assertions only
- AI assistant rules — OpenCode acts as a Principal SDET, enforces best practices, gives code-first answers
- Prompt templates — Examples of effective vs wasteful prompts for the AI assistant
- Lab checklist — Concrete tasks to prove mastery (e.g., implement a test using only
getByRole locators, mock an API with page.route(), run cross-browser on mobile and desktop)
Open Mastery.md in your workspace to see the full framework.
Watching Tests Run (noVNC)
To see tests execute in a real browser:
- Run
pw-headed
- Open the noVNC URL (port 10000)
- Watch Chromium execute your tests in real-time
Tips
pw-codegen records your browser actions and generates test code — great for learning locatorspw-pom scaffolds a Page Object Model class — use it for maintainable tests- Playwright auto-waits for elements — no need for
sleep() calls
PLAYWRIGHT_BROWSERS_PATH is set globally — browsers are shared across projectsCtrl+Shift+B runs tests and opens the report
Security
- Root access is restricted. Use
sudo apt install <package> for system packages.
- npm, npx, and yarn are whitelisted for sudo access.
- Node.js memory is capped at 4GB (
NODE_OPTIONS="--max-old-space-size=4096").