A ready-to-use Playwright testing framework with best practices and useful utilities/configuration already set up. Use this as a starter template for UI automation, accessibility checks, visual regression, and performance testing — all out of the box.
- Preconfigured Playwright setup (major browsers, CI-ready)
- ESLint with TypeScript & Playwright rules
- Axe Core integration for accessibility testing
- Global setup/teardown hooks
- Page Object Model (POM) structure
- Parameterized tests, test steps examples
- Visual testing examples
- Multi-tab & multi-browser windows support
- UI performance testing capabilities with Lighthouse
- GitHub Actions Workflow example
git clone https://github.com/your-org/playwright-boxed.git
cd playwright-boxed
npm ci
npx playwright install --with-deps
Alternatively, select the "Use this template" option
Use either the provided npm scripts e.g. npm run test
Alternatively, use the playwright CLI:
npx playwright test path-to-file.spec.ts --project=chromium
--headed- run tests in headed mode--workers <number>- overwrite number of workers--grep <regex>- run tests matching the provided regex e.g. tags like@smoke--ui- open UI Mode--debug- run in debug mode and open the inspector
Many other options available in the playwright docs
You can use await page.pause() as a debugger and pause test execution at that point. Tests must be run in headed mode and will also open the inspector window.
Traces can be turned on in the playwright configuration, either globally or per project (same for screenshots and videos) e.g:
use: {
trace: "retain-on-failure",
video: "retain-on-failure",
screenshot: "only-on-failure",
},
You can then open the trace viewer with: npx playwright show-trace trace-path/trace.zip
- API requests
- Request mocking
- Device emulation tests
- Locale switching
- Geolocation switching
- Data factory - faker
- Popups/new windows
- MCP prompts