How do I slow down Playwright actions to see them visually?

You can use the 'slowMo' option within your launchOptions in the playwright.config.ts file to add a millisecond delay between each automated action.

How do I trigger the Playwright Inspector using this skill?

You can launch the inspector by running your tests with the --debug flag, or by using the PWDEBUG=1 environment variable before your test command.

Can I capture network logs during a failed test?

Yes, this skill provides patterns for HAR recording and event listeners like page.on('request') to capture and analyze network traffic during test execution.

What is the best way to debug tests running in CI?

The Trace Viewer is recommended for CI. By setting trace: 'retain-on-failure' in your config, Playwright captures a full record of the test including screenshots and DOM snapshots.

Playwright Debugging Pro

Name: Playwright Debugging Pro
Author: bradtaylorsf

bybradtaylorsf

•

보안 및 테스팅

Troubleshoot and resolve complex browser automation issues using Playwright’s advanced tracing, inspection, and recording tools.

The Playwright Debugging skill provides Claude with a comprehensive toolkit for diagnosing and fixing failing end-to-end tests. It covers everything from interactive debugging with the Playwright Inspector and page.pause() to advanced post-mortem analysis using the Trace Viewer and automated video/screenshot capture. Whether you are dealing with flaky tests in CI/CD pipelines, complex network race conditions, or DOM synchronization issues, this skill ensures rapid resolution by leveraging specialized commands for HAR recording, verbose protocol logging, and headed execution modes.

주요 기능

01Detailed Trace Viewer configuration for CI/CD failures

02Slow-motion and headed mode execution for visual verification

036 GitHub stars

04Interactive Inspector and step-through debugging

05Network request interception and HAR recording

06Automated video, screenshot, and console log capture

사용 사례

01Debugging API-related test failures using network interception and HAR files

02Setting up comprehensive error reporting for automated testing pipelines

03Resolving flaky E2E tests by analyzing DOM snapshots and action timelines

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add bradtaylorsf/alphaagent-team playwright-debugging

For use in Claude.ai and ChatGPT

Download Skill