skills.rest
joshsmithxrm
joshsmithxrmCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ext-verify

Automate VS Code extension webview UI tests with Playwright Electron.

5|1|Updated Dec 14, 2025
Search Tags:#qa#playwright#electron#test#webview#vs-code#extension-testing
One-click install
npx skills add https://github.com/joshsmithxrm/power-platform-developer-suite --skill ext-verify
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ext-verify
Source: https://github.com/joshsmithxrm/power-platform-developer-suite/tree/main/.claude/skills/ext-verify
Command: npx skills add https://github.com/joshsmithxrm/power-platform-developer-suite --skill ext-verify

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Validating VS Code extension webviews is often manual and error-prone; this skill enables automated testing to verify panel rendering, interactions, and behavior using Playwright-CDP.

Core Features & Use Cases

  • Automated webview interaction verification using Playwright Electron
  • Capture screenshots, inspect DOM state, read console logs, and verify events across panels
  • Use during extension UI changes, debugging visual issues, and regression testing for webviews

Quick Start

Launch VS Code with the PPDS extension and run the webview CDP tool to start automated webview testing.

Frequently Asked Questions about ext-verify

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

FAQPage Schema
How do I automate VS Code extension webview testing with Playwright?▼

Automate VS Code extension webview testing using Playwright Electron to interact with panels, verify DOM state, and capture screenshots during local development.

Can I verify button interactions and keyboard shortcuts inside a VS Code webview?▼

Verify button interactions, keyboard shortcuts, and context menus inside a VS Code webview by driving the UI through Playwright Electron and inspecting the resulting DOM state and events.

What's the best way to test VS Code webview panel rendering for regressions?▼

Test VS Code webview panel rendering for regressions by automating UI verification with Playwright-CDP, capturing screenshots, reading console logs, and validating event behavior across panels.

Do I need vscode-test-electron to test VS Code extension webviews?▼

Yes, testing VS Code extension webviews with this Playwright-CDP approach requires both Playwright and vscode-test-electron frameworks running within your local developer environment.

Why does my VS Code webview test fail to capture DOM state during UI debugging?▼

Webview DOM state capture fails if the Playwright Electron CDP connection is not properly established or the VS Code extension panel is not fully rendered before inspection begins.

What is Playwright-CDP used for in VS Code extension development?▼

Playwright-CDP is used in VS Code extension development to automate interactive webview testing, enabling developers to verify render correctness, inspect DOM state, and validate UI events.

Related Skills

Explore More Software Engineering Skills→
konneh-hubkonneh-hub

electron

Automate Electron desktop applications via Chrome DevTools Protocol connections.

Community
Intermediate
AradotsoAradotso
4

kaboom-browser-ai-devtools

Correlate console logs, failed network requests, and DOM state into debugging evidence.

Official
Advanced
joeblackwaslikejoeblackwaslike

vscode-extension-builder-lawvable

Build, bundle, test, and package VS Code extensions into .vsix files.

Community
Advanced
funsaizedfunsaized
1

electron

Automate Electron desktop apps via CDP for UI control and testing.

Community
Advanced