Playwright Test for VS Code

Integrates with VS Code's Testing API to display clickable execution triangles (green for passed, grey for not-run) adjacent to test definitions in the editor. Clicking triggers test execution via the Playwright test runner, with results reflected back to the sidebar and inline decorators. Uses VS Code's native test discovery mechanism to parse test file structure and map test names to line numbers.

Monitors the active test file for changes and automatically re-executes tests when the file is saved. Triggered via an 'eye' icon toggle in the sidebar. Leverages VS Code's file watcher API to detect save events and pipes them to the Playwright test runner with watch mode enabled. Results update inline and in the sidebar without user intervention.

Aggregates test execution results (pass/fail/skip) from all executed tests and displays them hierarchically in the VS Code Testing sidebar. Shows test names, execution status, duration, and error messages. Updates in real-time as tests complete. Uses VS Code's Testing API to populate the sidebar with test metadata and results.

Provides a right-click context menu option on test definitions to launch the debugger. Clicking 'Debug' starts test execution with the VS Code debugger attached, allowing breakpoints and step-through debugging. Uses VS Code's debugger protocol to attach to the Playwright test runner process.

Provides an optional setup wizard during extension installation that configures GitHub Actions workflows for running Playwright tests in CI/CD. Generates workflow YAML files and configures environment variables. Integrates with the extension's initialization flow to offer CI setup as an optional step.

Executes the same test across multiple browser configurations (Chromium, Firefox, WebKit) by reading the playwright.config.ts/js and running tests for each defined project. Results are aggregated and displayed in the sidebar, showing pass/fail status per browser. Uses Playwright's native project configuration system to determine which browsers to target.

Provides a 'Show browsers' checkbox in the sidebar that controls whether tests execute in headless mode (no visible browser window) or headed mode (visible browser window). Toggles the --headed flag passed to the Playwright test runner. Allows developers to visually observe test execution in real-time without modifying code or config.

Integrates with VS Code's native debugger to set breakpoints in test code. When a breakpoint is hit, the extension highlights the corresponding DOM element(s) in the live browser window, and allows inspection of locator values via hover tooltips. Uses VS Code's debugger protocol to pause execution and sync browser state with editor state.

Allows developers to edit test code at a breakpoint and see changes reflected in the live browser immediately, without restarting the test. Changes to locator selectors or action parameters are re-evaluated against the current page state. Enables rapid iteration on locator strategies without full test re-execution.

Provides a button in the sidebar that activates an interactive picker mode. Clicking elements in the live browser window generates Playwright locator code (e.g., page.locator('button:has-text("Submit")')). The generated locator is copied to clipboard and can be pasted into test code. Uses Playwright's internal locator generation algorithm to produce selectors.

Opens a browser window and records user interactions (clicks, typing, navigation) as Playwright test code. Generates test syntax automatically from recorded actions, including locators, assertions, and wait conditions. Supports recording into a new test file or appending to an existing test at the cursor position. Uses Playwright's codegen engine to transpile recorded interactions into executable test code.

Captures a full execution trace during test runs (including screenshots, network requests, console logs, and DOM snapshots) and displays it in an interactive trace viewer. Allows stepping through test execution frame-by-frame to understand what happened at each step. Toggled via a checkbox in the sidebar. Trace format and viewer implementation details unknown.

Scans the workspace for playwright.config.ts/js files and automatically detects test files, browser configurations, and project definitions. Parses the config to extract test patterns, browser types, and project names without requiring manual setup. Uses Node.js module loading to evaluate the config file and extract metadata.