IMCseian PW Insights

Playwright dashboard. One install. Two lines in config. Works on Mac, Windows, Linux. Supports JavaScript, TypeScript, and Python.

Adds a live dashboard with trace player + video sync, command log, network inspector, console panel, and AI fix suggestions — powered by a single reporter.

Language support

| Language | How to set up | See | |---|---|---| | JavaScript / TypeScript (Node.js) | 2-line reporter in playwright.config.ts | Setup below | | Python (pytest-playwright) | Drop-in conftest.py plugin | python/README.md |

Install

npm install --save-dev imcseian-pw-insights

Setup — 2 lines in playwright.config.ts

import { defineConfig } from '@playwright/test';
import { imcseianPwInsightsReporter } from 'imcseian-pw-insights';   // ← line 1

export default defineConfig({
  reporter: imcseianPwInsightsReporter(),                              // ← line 2
});

Run your tests normally:

npx playwright test

The dashboard opens automatically in your browser when tests fail.

Recommended config

Enable traces, screenshots and video so the dashboard shows full replay:

import { defineConfig } from '@playwright/test';
import { imcseianPwInsightsReporter } from 'imcseian-pw-insights';

export default defineConfig({
  reporter: imcseianPwInsightsReporter(),

  use: {
    trace:      'on-first-retry',       // enables trace player
    screenshot: 'only-on-failure',      // shows screenshot in dashboard
    video:      'on-first-retry',       // enables video replay synced to trace steps
  },
});

What you get

| Feature | Details | |---|---| | Cypress-style Runner | Command log + step inspector side-by-side | | Trace player | Play / Pause / Scrub / Step through every action | | Video replay | Video syncs to trace step — scrubs to exact moment as you step through | | Console panel | Browser logs, warnings and errors per test — always visible in Runner tab | | Network panel | Every request with status, duration, size — click to expand | | AI Fix Suggestions | Ask Claude why it failed and how to fix it | | Download tab | One-click download for trace.zip, screenshot, video, full report | | Live reload | Dashboard auto-refreshes when results file changes | | CI support | Writes results file in CI, open locally after downloading artifact |

Options

reporter: imcseianPwInsightsReporter({
  open:         'on-failure',                       // 'always' | 'on-failure' | 'never'
  port:         3333,                               // dashboard port
  outputFile:   'imcseian-pw-insights-results.json',
  anthropicKey: process.env.ANTHROPIC_API_KEY,      // for AI Fix Suggestions
})

AI Fix Suggestions

Set your Anthropic API key to enable the AI tab:

# .env or CI environment
ANTHROPIC_API_KEY=sk-ant-...

Or pass it in the config:

reporter: imcseianPwInsightsReporter({
  anthropicKey: process.env.ANTHROPIC_API_KEY,
})

The key is used server-side only — never sent to the browser.

Open the dashboard manually

# After running tests:
npx imcseian-pw-insights

# Specific results file:
npx imcseian-pw-insights --file imcseian-pw-insights-results.json

# Custom port:
npx imcseian-pw-insights --port 4000

# Don't auto-open browser:
npx imcseian-pw-insights --no-open

Optional: richer network + console data

For deeper per-test capture, swap one import in your spec files:

// Before
import { test, expect } from '@playwright/test';

// After — same API, richer data in the dashboard
import { test, expect } from 'imcseian-pw-insights/test';

No other changes needed. Everything else in your spec files stays the same.

CI/CD

GitHub Actions

- name: Run Playwright tests
  run: npx playwright test
  continue-on-error: true

- name: Upload results
  uses: actions/upload-artifact@v4
  if: always()
  with:
    name: imcseian-pw-insights-results
    path: |
      imcseian-pw-insights-results.json
      test-results/
    retention-days: 30

Download the artifact, then open locally:

npx imcseian-pw-insights --file imcseian-pw-insights-results.json

GitLab CI

playwright:
  script:
    - npm ci
    - npx playwright test
  allow_failure: true
  artifacts:
    when: always
    paths:
      - imcseian-pw-insights-results.json
      - test-results/
    expire_in: 30 days
  variables:
    CI: "true"

Add to .gitignore

imcseian-pw-insights-results.json
test-results/

Platform support

| Platform | Status | |---|---| | macOS 12+ (Intel + Apple Silicon) | ✅ Supported | | Windows 10 / 11 | ✅ Supported | | Linux (Ubuntu, Debian, RHEL, Alpine) | ✅ Supported | | Node.js 18.x, 20.x, 22.x | ✅ Supported | | Playwright 1.40.0+ | ✅ Supported | | Chrome, Firefox, Safari, Edge | ✅ Dashboard works in all |

Python support (pytest-playwright)

The same dashboard works for Python pytest-playwright projects. The Python plugin produces a JSON file with the exact same shape as the Node.js reporter, so the dashboard renders identically.

Setup (Python) — pip install (recommended)

pip install imcseian-pw-insights
playwright install chromium

When pip-installed, the plugin auto-loads via the pytest11 entry point. No conftest.py change is needed — just run pytest and the plugin is active.

Setup (Python) — drop-in alternative

Copy python/src/imcseian_pw_insights.py into your test directory, then add a single line to conftest.py:

# conftest.py
pytest_plugins = ["imcseian_pw_insights"]

Build the wheel from source

cd python
pip install build
python -m build
pip install dist/imcseian_pw_insights-1.1.0-py3-none-any.whl

Run Python tests

pytest

A imcseian-pw-insights-results.json file is written at the end of the session. Open it with the same Node.js dashboard:

npx imcseian-pw-insights --file imcseian-pw-insights-results.json

What gets captured in Python

| Feature | Status | |---|---| | Test status (passed / failed / skipped) | ✅ | | Test duration, file, line | ✅ | | Browser console logs (per test) | ✅ | | Network requests (per test, with status / size / duration) | ✅ | | Page errors (uncaught exceptions) | ✅ | | Error message + failing line | ✅ | | CI metadata (branch, commit, actor, CI provider) | ✅ | | Screenshot on failure (--screenshot only-on-failure) | ✅ auto-detected | | Trace.zip link (--tracing on) | ✅ auto-detected | | Step-by-step command log animation | ❌ (pytest-playwright doesn't expose Playwright step events) | | Synced video scrubbing | ❌ (depends on step capture) |

See python/README.md for full setup details and configuration options.

License

MIT — IMCseian