skills.rest
dyad-sh
dyad-shOFFICIAL
Explore all skills by this author →
WebsiteGitHub

dyad:debug-with-playwright

Debugs Electron E2E tests by capturing Playwright screenshots at key execution points.

21.4k|2.6k|Updated Apr 11, 2025
Search Tags:#screenshots#playwright#electron#Debugging#E2E Testing#Test automation
One-click install
npx skills add https://github.com/dyad-sh/dyad --skill dyad-debug-with-playwright
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dyad:debug-with-playwright
Source: https://github.com/dyad-sh/dyad/tree/main/.claude/skills/debug-with-playwright
Command: npx skills add https://github.com/dyad-sh/dyad --skill dyad-debug-with-playwright

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Playwright's built-in screenshot option does not work with Electron apps, making it hard to see what the UI looked like when an E2E test fails. This Skill guides you through manually adding screenshot capture to failing tests so you can visually inspect application state.

Core Features & Use Cases

  • Manual Screenshot Injection: Adds page.screenshot() calls at key points in a test to capture full-page or element-level images.
  • Electron-Aware Workflow: Retrieves the page via electronApp.firstWindow() or the po PageObject fixture, working around Playwright's Electron limitations.
  • Iterative Debugging Loop: Runs the test with retries disabled, reads the captured PNGs, checks Playwright traces, and cleans up debug artifacts afterward.
  • Use Case: A test in e2e-tests/main.spec.ts fails intermittently. Use this Skill to insert screenshots before and after the failing step, run the test, and view the images to discover a hidden error dialog.

Quick Start

Debug the failing E2E test in e2e-tests/main.spec.ts by adding screenshots at key points and showing me what the UI looks like when it fails.

Frequently Asked Questions about dyad:debug-with-playwright

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

FAQPage Schema
How do I take screenshots in Playwright Electron tests?▼

Playwright's built-in screenshot option does not work with Electron, so call page.screenshot() manually in your test. Get the page with await electronApp.firstWindow() and save PNGs to a debug directory for inspection.

How to debug a failing Playwright E2E test visually?▼

Add page.screenshot() calls before and after the failing step, run the test with PLAYWRIGHT_RETRIES=0, then read the captured PNG files. Check for missing elements, error dialogs, or lingering loading spinners.

Why doesn't Playwright screenshot on failure work with Electron?▼

The screenshot: "on" option is unsupported for Electron due to a known Playwright limitation (issue #8208). You must capture screenshots manually via page.screenshot() or rely on fixtures that auto-capture on failure.

Do I need to rebuild the app before running E2E tests?▼

E2E tests run against the built binary, so run npm run build if you changed application code. If you only modified test files, you can skip the build step.

How do I get the page object from an Electron Playwright fixture?▼

Use await electronApp.firstWindow() from the test fixture to get the page. Alternatively, access po.page if the PageObject fixture exposes it directly.

Related Skills

Explore More Software Engineering Skills→
langflow-ailangflow-ai
153.0k

e2e-testing

Automates Playwright-based end-to-end testing for the Langflow UI.

Official
Intermediate
meta-pytorchmeta-pytorch
2.5k

implement

Generate minimal code changes to fix failing tests from /write-tests runs.

Official
Intermediate
SebastienDegodezSebastienDegodez
8

playwright-evidence

Capture Playwright test screenshots, videos, and traces on failure.

Community
Advanced
lebsrallebsral
11

ai-tracing-requests

Trace and inspect AI request steps with OpenTelemetry instrumentation and DSPy inspection.

Community
Advanced