playwright-debugging

Debug Playwright end-to-end tests with trace viewer and logging.

8|2|Updated Jan 15, 2026
One-click install
npx skills add https://github.com/bradtaylorsf/alphaagent-team --skill playwright-debugging-bradtaylorsf
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: playwright-debugging
Source: https://github.com/bradtaylorsf/alphaagent-team/tree/main/plugins/aai-stack-playwright/skills/playwright-debugging
Command: npx skills add https://github.com/bradtaylorsf/alphaagent-team --skill playwright-debugging-bradtaylorsf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides comprehensive techniques and tools to effectively debug Playwright tests, helping developers quickly identify and resolve issues in their automated browser testing workflows.

Core Features & Use Cases

  • Interactive Debugging: Utilize Playwright Inspector and page.pause() for step-by-step test execution and element inspection.
  • Trace Viewer: Analyze detailed execution traces, including screenshots, network requests, and console logs, to pinpoint failures.
  • Screenshot & Video Capture: Automatically capture visual evidence of test states and execution for easier debugging.
  • Console & Network Logging: Intercept and log browser console messages and network activity to understand application behavior during tests.

Quick Start

Run your Playwright tests with the --debug flag to enter interactive debugging mode.

Frequently Asked Questions about playwright-debugging

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

FAQPage Schema
How do I debug Playwright tests step by step?

Debug Playwright tests by running them with the `--debug` flag to enter interactive debugging mode. This opens the Playwright Inspector, allowing you to execute tests step by step and inspect elements using `page.pause()`.

How does the Playwright trace viewer work for troubleshooting?

The Playwright trace viewer works by recording detailed execution traces during test runs. It captures screenshots, network requests, and console logs, helping you pinpoint failures and analyze application behavior after a test completes.

Can I capture screenshots and videos during Playwright test execution?

Yes, you can capture screenshots and videos during Playwright test execution. This automatically records visual evidence of test states and execution flow, providing visual context that makes troubleshooting complex browser automation scenarios easier.

What is the best way to log console messages and network activity in Playwright?

The best way to log console messages and network activity in Playwright is by intercepting browser events during test execution. This captures network requests and console logs to help you understand application behavior and identify failures.

Why do my Playwright end-to-end tests fail intermittently?

Playwright end-to-end tests fail intermittently due to complex browser automation scenarios like timing issues or network drops. You can resolve these by utilizing slow-motion execution, trace viewer analysis, and capturing visual evidence.

Do I need any specific dependencies to use Playwright Inspector?

No specific dependencies are required to use the Playwright Inspector. It is a built-in feature accessed by running your tests with the `--debug` flag, providing step-by-step test execution and element inspection out of the box.