From devpowers
Run the project's existing Playwright tests and bundle their screenshots into a single self-contained `index.html`. Use when the user asks for an e2e screenshot report, a visual record of UI flows, a PR-ready visual of the running app, or invokes `/e2e-screenshots-report`. Playwright-only.
How this skill is triggered — by the user, by Claude, or both
Slash command
/devpowers:e2e-screenshots-reportThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Three steps.
Three steps.
/e2e-screenshots-report [--in DIR] [--out PATH] [--screenshot-on]
--in — directory the project's tests write screenshots to. Default test-results/ (Playwright JS and pytest-playwright convention). Pass an explicit path if the project writes elsewhere.--out — output HTML path. Default /tmp/e2e-report/index.html.--screenshot-on — additionally force Playwright to save a final-state PNG per test (uses the override config / --screenshot on flag). Off by default.If the project has no Playwright tests (no playwright.config.* and no pytest-playwright), stop and tell the user.
Default — run the tests as-is and harvest the screenshots they already take inline:
npx playwright test # JS
pytest # Python
Screenshots land in test-results/ by default. If the project writes elsewhere, pass --in <dir>.
With --screenshot-on — additionally turn on Playwright's per-test final-state PNG:
JS / TS — write playwright.screenshots.config.ts next to the existing playwright.config:
import { defineConfig } from '@playwright/test';
import base from './playwright.config';
export default defineConfig({
...base,
use: { ...base.use, screenshot: 'on' },
outputDir: 'test-results',
});
Then run:
npx playwright test --config=playwright.screenshots.config.ts
Python (pytest-playwright):
pytest --screenshot on --output test-results
Failing tests still produce PNGs and still belong in the report.
Both scripts convert PNG screenshots to JPEG (quality 80) before base64-embedding — a single index.html of 30 screenshots is ~3 MB instead of ~30 MB. JPEG inputs are passed through.
Pick the runtime that matches the project:
JS / TS projects (Node already available):
node report.js --out /tmp/e2e-report/index.html
First run auto-installs jimp (pure-JS, no native deps) into /tmp/.e2e-report-tools — shared across projects, your node_modules stays clean.
Python projects:
uv run report.py --out /tmp/e2e-report/index.html
# or: python report.py --out /tmp/e2e-report/index.html (after `pip install Pillow`)
uv run resolves Pillow automatically via the inline PEP-723 dep block.
Both default --in to test-results/. Pass --in <dir> if the project writes screenshots somewhere else.
Send /tmp/e2e-report/index.html to the user with the SendUserFile tool. It's a single self-contained HTML (base64-embedded images), attachable to a PR.
npx claudepluginhub kolodkin/devpowers --plugin devpowersGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.