launch

Installation
SKILL.md

VS Code Automation

Automate VS Code (Code OSS) using @playwright/cli. VS Code is built on Electron/Chromium and exposes a Chrome DevTools Protocol (CDP) port that @playwright/cli can attach to, enabling the same snapshot-interact workflow used for web pages.

Prerequisites

  • @playwright/cli is available via devDependencies. Run npm install at the repo root, then use npx @playwright/cli to invoke commands. Alternatively, install globally with npm install -g @playwright/cli.
  • For Code OSS (VS Code dev build): The repo must be built before launching. ./scripts/code.sh runs the build automatically if needed, or set VSCODE_SKIP_PRELAUNCH=1 to skip the compile step if you've already built.
  • CSS selectors are internal implementation details. Selectors like .interactive-input-part, .interactive-input-editor, and .part.auxiliarybar used in eval commands are VS Code internals that may change across versions. If they stop working, use npx @playwright/cli snapshot to re-discover the current DOM structure.

Core Workflow

  1. Launch Code OSS with remote debugging enabled
  2. Attach npx @playwright/cli to the CDP port
  3. Snapshot to discover interactive elements
  4. Interact using element refs
  5. Re-snapshot after navigation or state changes

📸 Take screenshots for a paper trail. Use npx @playwright/cli screenshot --filename=<path> at key moments — after launch, before/after interactions, and when something goes wrong. Screenshots provide visual proof of what the UI looked like and are invaluable for debugging failures or documenting what was accomplished.

Related skills

More from microsoft/vscode

Installs
165
GitHub Stars
184.8K
First Seen
Mar 5, 2026