Adds an 'Open in Trace Viewer' context menu for tests in the Test Explorer and runs Playwright trace viewer for the test. Only tested with .NET and on Mac OSX, but could work on other configurations. Requires powershell and npm/node.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
A Visual Studio Code extension that adds an Open in Trace Viewer command to the Test Explorer, making it easy to launch the Playwright trace viewer for the currently selected test. Focus on inspecting the test run, not hunting through build folders for the right trace zip.
Features
Adds an inline and context menu action to Test Explorer items to open matching Playwright traces.
Locates the latest playwright.ps1 generated by Playwright for .NET under bin/<Debug|Release>/net*.
Searches for trace archives that match the selected test name, with flexible matching strategies and custom glob support.
Runs the Playwright trace viewer via pwsh, launching the Playwright UI in your default browser.
Includes a custom icon inspired by the Playwright logo to highlight the extension’s trace-inspection focus.
Requirements
A workspace that has produced Playwright traces (tested with Playwright for .NET projects).
PowerShell 7+ (pwsh) available on your PATH.
Node.js and npm if you plan to build the extension from source.
Visual Studio Code 1.90.0 or later.
Installation
Install Playwright Trace Launcher from the Visual Studio Code Marketplace (or package it locally and install the generated .vsix via code --install-extension playwright-trace-launcher-<version>.vsix).
Reload VS Code if prompted.
Ensure your solution has been built so that the Playwright tooling and trace files exist under bin/<Debug|Release>/….
Usage
Open the Test Explorer view in VS Code.
Right-click a test (or use the inline menu) and choose Open in Trace Viewer.
The extension searches for:
A playwright.ps1 script in your build output (preferring newer target frameworks).
A trace ZIP whose name or path matches the selected test.
When both are found, the extension runs pwsh <playwright.ps1> show-trace <trace.zip> in the workspace root. The Playwright Trace Viewer opens in your browser.
If either script or trace cannot be located, a toast notification explains what to fix (e.g., rebuild the project or adjust matching options).
Configuration
All settings live under the Open Trace Viewer section (openTraceViewer.*):
Setting
Type
Default
Description
openTraceViewer.search.debugOrRelease
Debug \| Release
Debug
Prioritize build output under bin/Debug or bin/Release.
openTraceViewer.search.traceNameStrategy
filename \| pathContains \| both
both
How to match trace ZIPs to a test name (exact filename, folder path, or both).
openTraceViewer.search.maxResults
number (≥100)
2000
Upper bound on files examined while searching for playwright.ps1 and trace archives.
openTraceViewer.search.additionalTraceGlobs
string[]
see below
Extra glob patterns to include when looking for trace ZIPs (defaults cover **/trace.zip, **/*trace*.zip, **/Playwright*/*trace*.zip, **/TestResults/**/*trace*.zip).
Adjust these in Settings › Extensions › Open Trace Viewer or directly in your settings.json.
Troubleshooting
“Could not find playwright.ps1” – Run your tests or rebuild the solution so Playwright generates the playwright.ps1 script under bin/<cfg>/netX.Y/. Confirm the debugOrRelease setting matches your build configuration.
“Could not find a trace zip for test …” – Ensure tracing is enabled and the trace files are saved. Consider loosening the traceNameStrategy or adding custom glob patterns that match your project’s trace layout.
PowerShell not found – Install PowerShell 7+ and ensure pwsh is on your PATH.
Development
npm install
npm run watch # compile TypeScript in watch mode
Press F5 in VS Code to launch an Extension Development Host. Use npm run package to build a distributable .vsix (requires vsce).
