Playwright Test for VS Code

Embeds clickable green/grey triangles directly next to test function definitions in the editor, enabling one-click execution of individual tests without opening a terminal or command palette. The extension parses test files to identify test boundaries and positions decorators at the correct line, then spawns a Playwright process with the selected test filter when clicked.

Provides a hierarchical test explorer sidebar that auto-discovers and groups tests by file, folder, and project configuration, allowing users to select and execute multiple tests, entire test suites, or all tests in a project with a single action. The sidebar maintains state across editor sessions and displays test status (pass/fail/pending) with visual indicators.

Provides an optional setup flow during Playwright initialization that automatically generates a GitHub Actions workflow file (.github/workflows/playwright.yml) configured to run tests on push and pull requests. The generated workflow includes browser installation, dependency caching, and artifact upload for test results and traces.

Displays visual indicators (green checkmarks for pass, red X for fail, grey dash for pending) next to each test in the sidebar and inline in the editor, providing at-a-glance status of test results. Status updates in real-time as tests execute and persists across editor sessions, allowing users to quickly identify failing tests without opening test output.

Displays execution duration for each step during step-by-step debugging, showing how long each Playwright action (navigation, click, wait) took to complete. This helps identify performance bottlenecks or timing-related failures in tests, such as slow page loads or unresponsive elements.

Toggles a watch mode (via eye icon in sidebar) that automatically re-executes affected tests whenever test files or source files change, providing immediate feedback on test status without manual re-triggering. The extension tracks file dependencies and only re-runs tests that may be affected by the change.

Allows users to select which Playwright project (browser/device configuration) to use when executing tests, either globally or per-test, enabling the same test to run against Chromium, Firefox, WebKit, or mobile emulators without code changes. The extension reads all projects from playwright.config.ts and presents them as selectable run profiles in the sidebar.

Launches an interactive locator picker that overlays a running browser window, allowing users to hover over and click DOM elements to generate Playwright locators (e.g., `page.locator('button:has-text("Submit")')`). The picker stores the generated locator in the editor clipboard and highlights matching elements in the browser in real-time as the user hovers.

When a user hovers over a Playwright locator or action in the editor (e.g., `page.locator('button')`), the extension highlights the corresponding DOM element in a running browser window, providing visual confirmation that the locator targets the intended element. This works during both normal editing and breakpoint debugging.

Allows users to set breakpoints in test code via right-click context menu, then step through test execution line-by-line with per-step duration display. During breakpoint pauses, users can inspect variable values via hover tooltips and edit locators in-editor with live browser feedback showing the updated element selection.

Provides a dedicated trace viewer interface (toggled via checkbox in sidebar) that displays a complete recording of test execution including all browser interactions, network requests, console logs, and screenshots. Users can scrub through the trace timeline to inspect the state of the page at any point during test execution, enabling post-mortem analysis of failures without re-running the test.

Launches an interactive browser window that records user interactions (clicks, typing, navigation) and automatically generates Playwright test code that reproduces those interactions. Users can record a new test from scratch or append recorded actions to an existing test at the cursor position, with the extension handling locator generation and assertion insertion.

Automatically scans the project directory for Playwright installation and configuration files (playwright.config.ts/js), detects installed browsers and projects, and initializes the extension without manual setup. If Playwright is not found, the extension offers a one-click installation command that installs Playwright and its dependencies via NPM.