Overview

This skill provides a comprehensive toolkit for testing and debugging web applications using Playwright. It supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

How This Skill Works

Start the local dev server with npm run dev, then run automated tests with npx playwright test. Use the browser tool to manually interact with the app and inspect state, logs, and UI behavior.

When to Use It

• You’ve just added or updated UI components and want automated tests to verify frontend behavior.
• Tests are flaky or failing and you need to debug UI interactions and state.
• You need visual evidence of failures by capturing screenshots (and videos) for analysis.
• You want to inspect browser console logs during test runs to diagnose JavaScript errors.
• You’re preparing a local web app for handoff and want end-to-end checks before release.

Quick Start

1. Step 1: Start the dev server with npm run dev.
2. Step 2: Run the tests using npx playwright test.
3. Step 3: Use the browser tool to debug and inspect state as needed.

Best Practices

• Start the dev server with npm run dev before running tests.
• Assign unique IDs to interactive elements to simplify selectors.
• Clear browser logs and screenshots before each test run for clean results.
• Record videos of failed tests to aid debugging.
• Use the browser tool to manually reproduce and inspect failures during debugging.

Example Use Cases

• Test a local React app login flow with Playwright tests.
• Debug a flaky dropdown interaction by stepping through UI with the browser tool.
• Capture a failing checkout page screenshot to document the regression.
• Review console errors during automated test runs to identify JavaScript issues.
• Record a video of a failed test to share with teammates.

Frequently Asked Questions