v3.6.0
Cypress-style dashboard · built for Playwright
IMCseian
PW Insights
The Cypress-style dashboard for Playwright. Built by Ram Pothuraju. Inline error panels, source viewer, AI root cause, step replay, screenshot diff and 30-day analytics — in 2 lines of config.
$
npm install imcseian-pw-insights
PASS RATE
75%
TOTAL
4
FAILED
1
AVG DURATION
11.25s
tests/login.spec.ts
1 failed
2 tests · 12.3s
Error · TimeoutError
locator.click: Timeout 5000ms exceeded.
Call log:
- waiting for getByRole('button', { name: 'Sign in' })
- locator resolved to <button>Sign up</button>
- attempting click action
↑ at tests/login.spec.ts:14:23
› should log in with valid credentials
3.91s
why-i-built-this
One dashboard.
One dashboard.
Everything inline.
I was tired of debugging Playwright failures across 5 different tabs — terminal, trace viewer, DevTools, source code, and console. One dashboard, everything inline. 2 lines of config, that's it.
5 context switches per failure
Jumping between terminal, trace viewer, DevTools, source code and console just to triage a single broken test.
No visual context
A red stack trace alone isn't enough. You need the screenshot, the DOM, the network and the console — all together.
Hard to share failures
Pasting screenshots into Slack loses the stack trace. Pasting the trace.zip loses the screenshot. One shareable link, please.
feature-showcase
Six things Playwright's default report
Six things Playwright's default report
doesn't give you.
Every feature is built around the same idea — keep the engineer inside the dashboard, not chasing context across five tabs.
01
Inline Error Panels
Failed tests expand in place with the full error stack and call log — no modal hopping, no losing your place in the list.
✕ should reject invalid credentials 8.42s
┌─ Error · TimeoutError
│ locator.click: Timeout 5000ms
│ Call log:
│ - waiting for getByRole('button')
└─ at login.spec.ts:14:23
02
Source Viewer
Click Source on any failed step — a modal opens with the exact failing line highlighted in red, with surrounding context.
tests/login.spec.ts
12await page.fill('#email', email)
13await page.fill('#password', pwd)
14await page.click('button:has-text("Sign in")')
15await expect(page).toHaveURL('/dash')
03
AI Root Cause Analysis
Click Root Cause — AI examines error + steps + network + console, returns structured root cause with confidence %, evidence, likely fix and follow-up chat.
Root Cause Analysis
Confidence
92%
Cause: selector mismatch — button text is 'Sign up', not 'Sign in'.
Fix: name: 'Sign up' · or use type='submit'.
Fix: name: 'Sign up' · or use type='submit'.
04
Step-by-Step Replay
Vertical timeline of every test step with status circles, screenshot thumbnails and a playback bar — scrub through the test like a video.
navigate → /login320ms
fill #email48ms
fill #password42ms
click 'Sign in'5000ms
expect URL (skipped)—
05
Screenshot Diff
Three modes — Filmstrip, Side-by-Side (current vs baseline with a VS badge), and Overlay Diff with bounding boxes around pixel changes.
BASE
CURR
06
30-Day Analytics
Seven interactive charts: Slowest Actions, Slowest API, Longest Waits, Page Load Times, Action Durations, Execution Heatmap and Resource Timeline.
Slowest Actions
Page Load (ms)
interactive-demo
The full dashboard, end-to-end.
Sidebar, glassmorphic top bar, run metabar, four KPI cards with sparklines, filter chips and one failed test expanded inline with the full error stack.
PASS RATE
75%
TOTAL
4
FAILED
1
AVG DURATION
11.25s
tests/login.spec.ts
1 failed
2 tests · 12.3s
Error · TimeoutError · 5000ms exceeded
locator.click: Timeout 5000ms exceeded.
Call log:
- waiting for getByRole('button', { name: 'Sign in' })
- locator resolved to <button>Sign up</button>
- attempting click action
- <button>Sign up</button> intercepts pointer events
↑ at tests/login.spec.ts:14:23
› should log in with valid credentials
3.91s
tests/checkout.spec.ts
2 passed
2 tests · 22.1s
› should complete checkout
14.6s
› should handle declined card
7.5s
six-pages
Six sidebar pages, one mental model.
Each page is a focused lens on the same test run. Same shell, same keyboard shortcuts, same share URL.
Tests
Suite list, expandable failures, inline errors
✕
should reject invalid credentials
8.42s
locator.click: Timeout 5000ms
✓
should log in with valid credentials
3.91s
Analytics
7 interactive charts across 30 days
Slowest Actions↑
Slowest API↑
Longest Waits↑
Page Load↑
Action Dur.↑
Heatmap30d
Resource Timeline↓
Trend↗
Network
Request table with method + status badges
MethodURLStatusTime
GET/api/session — fetch20042ms
POST/api/auth/login — json201318ms
GET/dashboard — doc200128ms
DEL/api/cart/42 — xhr40496ms
PUT/api/user/profile — json5001.2s
GET/assets/app.js — script20062ms
Console Logs
Live log stream with level badges
00:00.142INFOnavigating to /login
00:00.480INFOpage loaded · 338ms
00:00.540DBGfill #email → 'ram@imcseian.com'
00:00.592DBGfill #password → '••••••••'
00:00.640WARNbutton text mismatch: 'Sign up' vs 'Sign in'
00:05.642ERRTimeoutError: locator.click 5000ms
00:05.643ERRat login.spec.ts:14:23
AI Insights
Analyze Run button → structured response cards
Analyze Run
Root cause · 92% confidence
selector mismatch — button resolves to 'Sign up'
Likely fix
name: 'Sign up' · or type:'submit'
Evidence · 3 signals
call-log · dom-snapshot · console-warn
Settings
6 config cards · theme, port, retention
Theme
Linear dark (default)
Server Port
9320
Retention
30 days
API Key
••••••••3f2a
AI Provider
default
Auto-Save
on failure
two-lines-of-config
Two lines. That's the whole setup.
Drop the reporter into your playwright.config.ts and run your tests. The dashboard boots on localhost:9320.
playwright.config.ts — TypeScript
1import { defineConfig } from '@playwright/test';
2import { imcseianPwInsightsReporter } from 'imcseian-pw-insights'; ← line 1
3export default defineConfig({
4 reporter: imcseianPwInsightsReporter(), ← line 2
5 use: {
6 trace: 'on-first-retry',
7 screenshot: 'only-on-failure',
8 video: 'on-first-retry',
9 },
10});
1
Install the package —
npm install imcseian-pw-insights adds exactly 2 npm dependencies to your project.2
Import the reporter on line 2 — the named export is the only thing you need from the package.
3
Replace your
reporter: line — that's the whole config change. The dashboard boots on localhost:9320 automatically.4
Keep trace / screenshot / video on — the dashboard uses these to build the step replay, screenshot diff and resource timeline. Recommended defaults are shown above.
1,500
tests handled without crashing
<5ms
response time
2
npm dependencies only
MIT
licensed
JS·TS·PY
works with all three
Copied!
