vscode-playwright

VS Code Playwright Screenshot Skill

Captures VS Code editor views, code walkthroughs, and Copilot Chat examples using Playwright MCP tools with serve-web.

Overview

This skill provides a complete workflow for capturing high-quality VS Code screenshots suitable for embedding in slide decks, documentation, and other visual media. It handles server lifecycle management, viewport configuration, UI cleanup, and screenshot validation.

Prerequisites

• VS Code or VS Code Insiders CLI (code or code-insiders)
• Playwright MCP tools available (mcp_microsoft_pla_browser_*)
• curl for server readiness checks

Architecture

The serve-web CLI is a Rust-based proxy ("server of servers") that downloads the VS Code Server release and proxies connections to the inner Node.js server. The outer CLI accepts a limited set of flags; --server-data-dir is the key flag that controls where all server data (settings, extensions, state) is stored.

Quick Start

1. Detect the VS Code CLI variant and start the web server.
2. Navigate Playwright to the VS Code web instance.
3. Clean up the UI (close panels, tabs, notifications).
4. Open files and capture screenshots.
5. Stop the server and clean up.

Workflow Steps

Step 1: Detect VS Code CLI Variant

Check the VSCODE_QUALITY environment variable first; if it contains insider, use code-insiders. Otherwise, test availability with command -v code-insiders and fall back to code. Store the result for reuse:

if [[ "${VSCODE_QUALITY:-}" == *insider* ]] || command -v code-insiders &>/dev/null; then
  VSCODE_CLI="code-insiders"
else
  VSCODE_CLI="code"
fi

Step 2: Start the VS Code Web Server

Create a temporary server data directory, pre-seed settings (including the color theme) to prevent state restoration, and launch serve-web. The --server-data-dir flag must receive a literal path — shell variables from other terminal sessions are not available in background terminals:

VSCODE_SERVE_DIR=$(mktemp -d)
mkdir -p "$VSCODE_SERVE_DIR/data/User"
cat > "$VSCODE_SERVE_DIR/data/User/settings.json" <<'EOF'
{
  "window.restoreWindows": "none",
  "workbench.editor.restoreEditors": false,
  "workbench.startupEditor": "none",
  "workbench.editor.restoreViewState": false,
  "workbench.editor.sharedViewState": false,
  "files.hotExit": "off",
  "telemetry.telemetryLevel": "off",
  "workbench.colorTheme": "Default Dark Modern",
  "workbench.activityBar.location": "hidden"
}
EOF
$VSCODE_CLI serve-web --port 8765 --without-connection-token \
  --accept-server-license-terms --server-data-dir "$VSCODE_SERVE_DIR"