debug-with-playwright_skill

Overview

This skill helps debug end-to-end Playwright tests by inserting manual screenshots at strategic points so you can visually inspect application state. It guides adding page.screenshot() calls, running the test, viewing images, and iterating until the failure is understood and resolved. It focuses on Electron + Playwright specifics where automatic screenshot capture may not work.

How this skill works

The skill inspects the specified E2E test file, suggests where to add manual screenshots, and provides code snippets to create a debug-screenshots directory and call page.screenshot() or element.screenshot(). It explains how to obtain the Playwright page from the test fixtures (electronApp.firstWindow() or po.page), run the built test binary, and review the generated PNG files and Playwright trace for context.

When to use it

• A flaky or failing E2E test where logs don’t reveal the UI state
• When Playwright’s built-in screenshot-on-failure isn’t available for Electron
• To capture UI before and after a specific action to compare states
• During iterative debugging of layout, visibility, or spinner/loading issues
• When you need visual evidence to report a bug or confirm a fix

Best practices

• Always get the page via electronApp.firstWindow() or use po.page when available
• Create a dedicated debug-screenshots directory under the test folder and commit nothing from it
• Capture screenshots before and after the suspected failing step to compare states
• Prefer element.screenshot() for focused debugging and full-page screenshots for overall layout
• Remove debug screenshots and screenshot calls after the issue is resolved to keep tests clean

Example use cases

• Debug a chat input that appears empty after sending a message by capturing before-send and after-send screenshots
• Investigate a modal that blocks interactions by capturing the page when the modal should be closed
• Verify layout regressions across screen sizes by saving full-page screenshots during the test
• Diagnose a spinner that never disappears by capturing the element and surrounding UI at several timestamps
• Provide visual evidence of a failing flow when filing an issue or code review