playwright-debug

Capture runtime errors, network failures, and DOM state from web UIs with Playwright.

Updated May 28, 2026
One-click install
npx skills add https://github.com/syntropic137/harness-app-template --skill playwright-debug-syntropic137
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: playwright-debug
Source: https://github.com/syntropic137/harness-app-template/tree/main/.claude/skills/playwright-debug
Command: npx skills add https://github.com/syntropic137/harness-app-template --skill playwright-debug-syntropic137

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manual UI debugging is slow and inconsistent, making it hard to capture runtime errors, network failures, and exact DOM state when investigating user-reported bugs or validating frontend fixes.

Core Features & Use Cases

  • Programmatic DOM Inspection: Use role-based locators to enumerate interactive elements and capture accessible page state without relying on fragile CSS selectors.
  • Error Capture: Automatically collect console errors, unhandled page exceptions, and failed network requests to pinpoint root causes of UI failures.
  • Use Case: When a user reports that clicking a "Submit" button throws an error, use this Skill to navigate to the page, trigger the click, capture the failed network response and associated console error to identify whether the issue is frontend or backend.

Quick Start

Use the playwright-debug skill to navigate to your running local web app, capture all console errors and failed network requests, and output the results as structured JSON for analysis.

Frequently Asked Questions about playwright-debug

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

FAQPage Schema
How do I capture console errors and failed network requests during web UI debugging?

Web UI debugging captures console errors and failed network requests by automating Playwright to navigate your local web app, trigger user interactions, and collect runtime exceptions and network failures into structured JSON output for analysis.

What is the best way to automate DOM inspection for frontend bug investigation?

Automating DOM inspection for frontend bug investigation uses Playwright's role-based locators to enumerate interactive elements and capture accessible page state, avoiding fragile CSS selectors to accurately verify user interface fixes.

Do I need a running local web app instance to use Playwright for UI debugging?

Yes, Playwright UI debugging requires a running local web app instance and Playwright's Chromium browser to execute locator-based inspections and event captures for validating frontend fixes and investigating bugs.

Can I identify whether a UI error is caused by the frontend or backend using automated testing?

Automated testing identifies frontend or backend UI error sources by navigating to the page, triggering the action, and capturing the failed network response alongside associated console errors to pinpoint the root cause.

How do I capture unhandled page exceptions when validating user experience fixes?

Capturing unhandled page exceptions when validating user experience fixes involves using Playwright automation to trigger application interactions and automatically log runtime errors, network failures, and exact DOM state.

Why does programmatic DOM inspection use role-based locators instead of CSS selectors?

Programmatic DOM inspection uses role-based locators instead of CSS selectors to enumerate interactive elements and capture accessible page state reliably, avoiding fragile selectors that break during frontend styling changes.