How to Check Whether Playwright Is Installed in VS Code

Short answer: Playwright in VS Code has three separate installation layers. Check the official VS Code extension, the Playwright package and CLI in the current project, and the browser binaries required to run tests. A successful check at one layer does not prove the other two are installed.

1. Check the Playwright VS Code extension

Open VS Code’s Extensions view with Ctrl+Shift+X on Windows/Linux or Cmd+Shift+X on macOS.
Search for Playwright.
Install the official Playwright extension from Microsoft if it is missing.
Reload VS Code if the extension asks you to.

The extension adds editor integration such as a Playwright sidebar and controls for running and debugging tests. It does not install your project’s npm package or browser binaries. See Microsoft’s VS Code guide.

What confirms the extension is working?

Open a workspace containing Playwright tests. The Playwright testing view should appear, and test files should offer run and debug actions. If the extension is listed but those controls are unavailable, continue with the project and browser checks below.

2. Check Playwright in the current project

Open VS Code’s integrated terminal at the root of the project you want to test. Run the command for your package manager:

npm

npx playwright --version

Yarn

yarn playwright --version

pnpm

pnpm exec playwright --version

A version number means the workspace can resolve and run Playwright’s local CLI. The command may download a package when using npx if the dependency is not already available, so inspect the output and your package manifest when you need to verify a committed project dependency.

Inspect the dependency declaration

Check package.json for a Playwright package in devDependencies or dependencies. Typical entries are @playwright/test for the test runner or playwright for the browser automation library. Then confirm the installed tree with your package manager:

npm ls @playwright/test playwright

# Yarn
 yarn why @playwright/test

# pnpm
pnpm why @playwright/test

The exact package name depends on how the project was created. A version command is the practical runtime check; the manifest and lockfile show what the project intends to install.

3. Check Playwright browser binaries

Playwright downloads browser binaries separately from the JavaScript package. List the browsers known to the installed Playwright version:

npx playwright install --list

With Yarn or pnpm, use the corresponding local CLI:

yarn playwright install --list
pnpm exec playwright install --list

Look for the browser your configuration uses, such as Chromium, Firefox, or WebKit. If the list is empty or the required browser is absent, install the default set:

npx playwright install

To install only one browser:

npx playwright install chromium
npx playwright install firefox
npx playwright install webkit

Playwright browser revisions are tied to Playwright releases. Updating the package can therefore require another browser installation.

Linux system dependencies

Some Linux environments also need operating-system libraries. Install them with:

npx playwright install-deps

Or install browsers and their dependencies together:

npx playwright install --with-deps

This is especially relevant in minimal CI images and containers. The official browser documentation and CLI documentation describe the supported installation options.

4. Use the VS Code setup command when Playwright is missing

The official extension provides a guided project setup:

Open the Command Palette with Ctrl+Shift+P or Cmd+Shift+P.
Run Test: Install Playwright.
Choose the browsers to install.
Allow the wizard to add the project files and, if desired, a GitHub Actions workflow.

The extension guide recommends Node.js (LTS) and VS Code as prerequisites. After setup, repeat the version and browser-list checks.

5. A complete verification checklist

Layer	Check	What it proves
Editor extension	Extensions view → official Playwright extension	VS Code integration is installed
Project package	`npx playwright --version` or the Yarn/pnpm equivalent	The current workspace can resolve the CLI
Browser binaries	`npx playwright install --list`	Playwright-managed browsers are present
System libraries	`npx playwright install-deps` when required	Linux dependencies needed by browsers are installed

Run commands from the intended project root.
Confirm the package manager matches the lockfile.
Check that the browser named in your Playwright configuration appears in the install list.
Run one test from the Playwright sidebar or terminal after all three layers pass.

6. Common errors and fixes

“playwright: command not found” or an executable error

Cause: You are outside the project, the dependency is absent, or you used a global installation instead of the workspace package.

Fix: Open the terminal in the project root, install the project’s declared dependency, and run the package-manager-specific command:

npm install --save-dev @playwright/test
npx playwright --version

The extension is installed, but no tests appear

Cause: The workspace may not contain a Playwright configuration or test files, or the extension has not reloaded.

Fix: Run Test: Install Playwright, open the correct folder rather than a parent directory, and reload VS Code.

The version command works, but tests report a missing executable

Cause: The JavaScript package is installed while browser binaries are not.

Fix: Run npx playwright install, or install only the configured browser.

The browser list is empty after an upgrade

Cause: A newer Playwright release can require different browser revisions.

Fix: Run npx playwright install again using the same package manager and project that runs your tests.

Browser launch fails on Linux CI

Cause: Required system libraries are not in the runner image.

Fix: Use npx playwright install --with-deps in a supported environment, or install dependencies in the image before running tests.

`npx` reports a different version than expected

Cause: The command was run in another directory, or npx resolved a package outside the intended dependency tree.

Fix: Check pwd, inspect package.json and the lockfile, and use npm ls, yarn why, or pnpm why to trace the package.

Permission or cache errors during installation

Cause: The package or browser cache directory is not writable, often because a previous command ran with elevated privileges.

Fix: Use the normal developer account, repair ownership of the relevant cache directory, and avoid mixing root and non-root package installations.

7. Performance, reliability, and cost considerations

The checks themselves are fast when the package and browser cache already exist. Browser installation is the expensive step because it downloads browser binaries and may install Linux libraries. In CI, cache the Playwright browser directory according to your runner’s cache mechanism, but invalidate that cache when the Playwright version changes.

For reliable results, pin the project dependency through its lockfile, run the same package-manager command locally and in CI, and install browsers from that exact dependency version. Do not use a globally installed Playwright as evidence that the workspace is configured correctly.

Playwright, its VS Code extension, and browser downloads are separate software components. Their versions and installation behavior can change, so consult the current official VS Code guide, browser guide, and best practices when reproducing a setup later.

Or skip the browser setup

If your goal is simply to obtain a clean image of a page for documentation, a visual regression baseline, or an issue report, ScreenshotNeo can capture the URL through one request. Its API removes cookie and consent banners, newsletter popups, and chat widgets before the shot. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and the response identifies the page verdict and billing status.

See the ScreenshotNeo API documentation for all options.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://playwright.dev/docs/getting-started-vscode -o shot.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={
        "access_key": "YOUR_API_KEY",
        "url": "https://playwright.dev/docs/getting-started-vscode",
    },
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://playwright.dev/docs/getting-started-vscode'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', image));

ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. It includes full-page and element capture, custom waits, headers and cookies, device presets, PDF output, caching, async jobs, bulk capture, and other options. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

FAQ

Does installing the VS Code extension install Playwright?

No. It installs editor integration. The project package and browser binaries require separate checks.

Is a working `npx playwright --version` enough?

No. It confirms the CLI can run, but use playwright install --list to verify browser binaries.

Should Playwright be installed globally?

No. Prefer the version declared by the project and invoke it through npm, Yarn, or pnpm.

Why does a browser update require another download?

Playwright releases are associated with specific browser revisions, so a package update can change the required binaries.

Which command should I use in a pnpm project?

Run pnpm exec playwright --version and pnpm exec playwright install --list from the project root.