Real-time Playwright test dashboard with rerun capabilities and comprehensive test reporting
npm install playwright-dashboard-reporterOfficial Playwright reporter for YShvydak Test Dashboard - a full-stack testing dashboard with real-time monitoring, one-click reruns, and comprehensive test reporting.
- π Real-time test execution monitoring via WebSocket
- β‘ NEW in v1.0.1: Live progress tracking with currently running tests
- π Comprehensive test result tracking with execution history
- π Automatic attachment management (videos, screenshots, traces)
- π Enhanced error reporting with code context and line highlighting
- π― Stable test ID generation for reliable test tracking
- β±οΈ NEW in v1.0.1: Time estimates (elapsed and remaining)
- ποΈ Built-in diagnostics and health checks
- π Zero configuration - works out of the box
``bash`
npm install --save-dev playwright-dashboard-reporter
`bash`.env
DASHBOARD_API_URL=http://localhost:3001
`bashClone dashboard repository
git clone https://github.com/shvydak/yshvydak-test-dashboard.git
cd yshvydak-test-dashboard
The dashboard will be available at:
- π Web UI: http://localhost:3000
- π API: http://localhost:3001
Results will appear in your Dashboard automatically! π
Configuration Options
`typescript
interface ReporterOptions {
apiBaseUrl?: string // Dashboard API URL (default: http://localhost:3001)
silent?: boolean // Suppress console output (default: false)
timeout?: number // API request timeout in ms (default: 30000)
}
`Environment Variables
The reporter supports the following environment variables:
``bash
Required: Dashboard API endpoint
DASHBOARD_API_URL=http://localhost:3001Dashboard Features
When using this reporter, you get access to:
- β
Real-time Test Monitoring - Watch tests execute live
- β‘ Live Progress Tracking (v1.0.1+) - See which tests are running right now with time estimates
- π One-Click Reruns - Rerun failed tests instantly
- π Flaky Test Detection - Identify unstable tests automatically
- π Timeline Visualization - View execution trends over time
- π₯ Attachment Viewer - Watch videos, view screenshots, analyze traces
- π Execution History - Track all test runs with complete data
- π Test Discovery - Automatically detect all available tests
- π― Detailed Reporting - Enhanced error messages with code context
$3
The reporter now sends real-time progress updates to the dashboard:
`
π§ͺ Running Tests β β
βββββββββββββββββββββββββββ 43%
6 of 14 tests 43%β
Passed: 5 β Failed: 0
βοΈ Skipped: 1 βΈοΈ Pending: 8
Currently Running:
π API - Link Budget Item
e2e/tests/api/api.test.ts
π API - Create Contract
e2e/tests/api/api.test.ts
β±οΈ Elapsed: 3s Est. remaining: ~4s
`Features:
- See exactly which tests are running
- Track passed/failed/skipped/pending counts in real-time
- Get time estimates for test completion
- Floating panel that can be minimized
- Auto-hides after test completion
How it works:
The reporter uses Playwright's
onTestBegin() and onTestEnd() lifecycle hooks to send progress updates to the dashboard via WebSocket. No configuration needed - it works automatically!Troubleshooting
$3
Symptom: Tests run but no data appears in Dashboard
Solution:
1. Verify Dashboard server is running:
`bash
curl http://localhost:3001/api/health
`
2. Check DASHBOARD_API_URL environment variable:
`bash
echo $DASHBOARD_API_URL
`
3. Run diagnostics:
`bash
curl http://localhost:3001/api/tests/diagnostics
`API Compatibility
This reporter is compatible with:
- Dashboard API version: 1.x and above
- Playwright version: 1.40.0 and above
- Node.js version: 18.0.0 and above
Changelog
$3
New Features:
- β‘ Real-time progress tracking with currently running tests
- β±οΈ Time estimates (elapsed and remaining)
- π Live statistics (passed/failed/skipped/pending)
- π¨ FloatingProgressPanel UI component
Technical Changes:
- Added
onTestBegin() lifecycle hook
- New API endpoint: POST /api/tests/test-start
- Enhanced WebSocket event: test:progress
- Improved error handling for network failuresDocumentation:
- Added Progress Tracking Guide
- Updated API documentation
$3
Initial release with core features:
- Real-time test execution monitoring
- Comprehensive test result tracking
- Automatic attachment management
- Enhanced error reporting
- Stable test ID generation
Development
For Dashboard developers working on the reporter package:
`bash
cd packages/reporter
npm run build # Build distribution
npm run dev # Watch mode (auto-rebuild)
npm run type-check # TypeScript validation
`Support
- π Documentation
- π Report Issues
- π¬ Discussions
License
MIT Β© YShvydak
---
Made with β€οΈ for the Playwright community
```