Can I automate native Electron menus with this skill?

Native file dialogs and system menus cannot be automated via CDP. Instead, use the provided window.electronAPI methods to trigger application logic.

How do I connect Playwright to my Electron app?

Start your Electron app with Chrome DevTools Protocol enabled on port 9222 using the 'npm run electron:debug' command, then use the Playwright MCP tools to connect.

Why shouldn't I use browser_navigate?

Navigating or refreshing the page via Playwright will destroy the current application state and loaded project data. Use browser_evaluate to inspect the state instead.

How do I safely stop the debug session?

Identify the specific process listening on port 9222 using 'lsof -i :9222 -sTCP:LISTEN' and kill that PID specifically to avoid killing your host application.

Playwright Electron Debugger

Name: Playwright Electron Debugger
Author: voicetreelab

byvoicetreelab

•

736

•

Browser Automation

Enables live debugging and automation for Electron applications using Playwright MCP and the Chrome DevTools Protocol.

This skill provides a streamlined workflow for connecting Claude to a running VoiceTree Electron application via the Playwright Model Context Protocol (MCP). It allows for real-time UI inspection, automated interaction, and visual debugging through screenshots and accessibility snapshots without disrupting the application's state. By leveraging direct access to internal APIs and the Cytoscape graph instance, developers can programmatically verify complex spatial IDE states and automate testing routines directly within the live development environment.

Key Features

01Direct access to internal Electron APIs and Cytoscape instances

02Safe process management for targeting specific Electron debug instances

03Visual debugging with screenshots and accessibility snapshots

04736 GitHub stars

05Automated state verification using custom JavaScript evaluation

06Live UI inspection and interaction via Playwright MCP

Use Cases

01Capturing screenshots of a running Electron app for documentation

02Verifying graph node and edge counts programmatically during dev

03Debugging complex UI states in the VoiceTree spatial IDE

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add voicetreelab/voicetree playwright-debug

For use in Claude.ai and ChatGPT

Download Skill