skills.rest
nullmastermind
nullmastermindCOMMUNITY
Explore all skills by this author →
Website𝕏@nullmastermindGitHub

spx-e2e-playwright

Reproduce UI bugs in local web apps with Playwright MCP and collect browser evidence.

9|9|Updated Mar 24, 2026
Search Tags:#playwright#e2e-testing#websocket#browser-automation#network-monitoring#bug-reproduction#evidence-capture
One-click install
npx skills add https://github.com/nullmastermind/viber-router --skill spx-e2e-playwright
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spx-e2e-playwright
Source: https://github.com/nullmastermind/viber-router/tree/main/.claude/skills/spx-e2e-playwright
Command: npx skills add https://github.com/nullmastermind/viber-router --skill spx-e2e-playwright

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reproduce intermittent or hard-to-observe UI bugs by driving a real browser like a user and collecting verifiable evidence such as screenshots, console errors, network traces, and accessibility snapshots so developers can trace issues to source code with confidence.

Core Features & Use Cases

  • User-like E2E Interaction: Drives Playwright MCP with clicks, typing, hover, drag, and realistic pacing to reproduce flows exactly as users experience them.
  • Evidence Collection: Captures before/after screenshots, console messages, DOM accessibility snapshots, HTTP request/response logs, and WebSocket activity for each critical step.
  • Instrumentation & Diagnostics: Injects safe monitoring helpers to log network and WebSocket events, and guides correlation to source code via codebase-retrieval for root-cause tracing.
  • Workflows: Reproduce mode for bug reports, Explore mode for proactive UX testing, and Verify mode for post-fix confirmation.

Quick Start

Ask the assistant to reproduce the reported bug by providing the local app URL and a concise step-by-step description of the actions to perform.

Frequently Asked Questions about spx-e2e-playwright

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I reproduce intermittent UI bugs using Playwright?▼

Reproduce intermittent UI bugs by driving a real browser with user-like clicks and typing via Playwright. The Skill captures screenshots, console logs, and network traces during these interactions to provide verifiable evidence of the exact failure.

Can I capture WebSocket activity and network traces during E2E testing?▼

Yes, you can capture WebSocket activity and network traces during E2E testing by injecting safe monitoring helpers. The Skill logs HTTP request/response details and WebSocket events for each critical step alongside console messages and DOM snapshots.

What evidence do I need to trace a UI bug to its source code?▼

To trace a UI bug to its source code, you need evidence like before/after screenshots, console errors, network traces, and accessibility snapshots. The Skill guides correlation of this captured evidence to the source code via codebase-retrieval for root-cause tracing.

Does this Playwright E2E testing workflow work with local web applications?▼

Yes, this Playwright E2E testing workflow works with local web applications. It requires a running local app URL and Playwright MCP tooling to drive user-like interactions, network monitoring, and codebase mapping for manual reproduction and verification.

How do I verify a browser bug fix without writing automated test scripts?▼

Verify a browser bug fix without writing automated test scripts by using the Verify mode to replay user-like interactions. The Skill drives Playwright MCP with realistic pacing to confirm the post-fix behavior and capture updated evidence.

Related Skills

Explore More Software Engineering Skills→
hafiznaveedchuhan-ctrlhafiznaveedchuhan-ctrl

browser-use

Automate browser navigation, form filling, and data extraction via Playwright MCP.

Community
Intermediate
a-ariffa-ariff
14

root-cause-tracing

Trace bugs backward from symptoms to identify root causes.

Community
Intermediate
tranvietanh0tranvietanh0

gk:wiki

Create, update, and audit game design wiki pages against the codebase.

Community
Intermediate
misty-stepmisty-step
2

qa

Coordinates automated Playwright and manual QA routes with evidence capture for bug reports.

Official
Advanced