What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Fix Playwright Codegen by isolating the failure: verify the Microsoft Playwright extension and project, try the standalone CLI generator, then repair the browser binaries and operating-system dependencies for the Playwright version your project actually uses. If command-line Codegen works while the VS Code command does not, the generator is healthy and the remaining investigation belongs to the workspace or extension integration.
What Codegen needs before it can work
Playwright Codegen is available through the official Playwright extension for Visual Studio Code and through the Playwright CLI. The supported setup starts with Node.js (the Playwright VS Code guide recommends the LTS release), VS Code, the official extension published by Microsoft, and a project containing Playwright Test.
Verify the project and extension
- Install or enable the official Playwright extension published by Microsoft in the VS Code window where your project is open.
- Open the repository that contains your Playwright package, rather than a parent folder or an unrelated workspace.
- Open the Command Palette (Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on macOS) and run Test: Install Playwright.
- Choose the browser projects offered by the setup wizard. You can change projects later in
playwright.config.ts.
If the Testing sidebar is missing, first check that the extension is installed and enabled in this specific VS Code window. A missing sidebar does not by itself identify an extension-host, workspace, or configuration fault.
Check what version the terminal resolves
From the project directory, run:
npx playwright --versionUse this result when deciding which browser installation command to run. A globally installed Playwright, a different workspace, or a package-manager mismatch can make the terminal use a different version from the one your tests use.
#1 Best Overall
Use the two VS Code recording commands correctly
Record new
Open the Testing or Playwright sidebar and choose Record new. The documented workflow creates a file such as test-1.spec.ts and opens a browser with Playwright Inspector. Navigate and interact with the application, then stop or cancel recording and review the generated test.
Record at cursor
Open an existing test, place the cursor where new actions should be inserted, and choose Record at cursor. This mode expects the test’s browser to be available. If no browser opens, run the test first with Show browser enabled, then start recording at the cursor.
Pick a locator
To copy a locator instead of recording a complete flow, choose Pick locator, hover over the target in the browser, click it, and press Enter. In the standalone Inspector, stop recording first so that Pick Locator is available, select the element, and copy the generated locator.
Test Codegen outside VS Code
The CLI is an independent diagnostic path. From the intended project directory, run:
Rank #2
npx playwright codegen https://example.comReplace the URL with the application under test. The URL is optional; you can navigate after the browser opens. Codegen launches a browser and Playwright Inspector, where you can copy generated code into your test.
Useful CLI options
npx playwright codegen --browser chromium https://example.com
npx playwright codegen --output=tests/recorded.spec.ts https://example.com
npx playwright codegen --target=javascript https://example.com--browserselects a browser such as Chromium.--outputwrites generated code to a file.--targetchooses the generated language target supported by your installed Playwright version.
Interpret the comparison carefully. If CLI Codegen works but a sidebar command fails, browser launch and generation are functional; focus on the selected workspace, project discovery, and extension state. That is a diagnostic inference, not proof of a particular VS Code bug. If both paths fail, keep the exact CLI error and repair the local Playwright installation before blaming the editor.
Repair missing browsers and Linux dependencies
Playwright releases use matching browser binaries. Updating the package can therefore require another browser installation.
Install the default browsers
npx playwright installInstall only Chromium
npx playwright install chromiumInstall Chromium and Linux system dependencies
npx playwright install-deps chromium
npx playwright install --with-deps chromiumThe first command installs operating-system dependencies; the second combines browser and dependency installation. On Linux, choose the combined command when both the executable and required libraries are absent. On other systems, a browser that still will not launch can indicate a display, permission, policy, or environment problem rather than a missing Playwright download.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Read the launch error literally
“Browser will not open” is a symptom, not a diagnosis. An error naming a missing executable points toward playwright install; an error naming a shared library points toward Linux dependencies; a display or sandbox message requires environment-specific changes. Do not assume one installation command fixes every launch failure.
Understand and improve generated locators
Playwright’s generator examines the page and prioritizes role, text, and test-id locators, refining the match so it uniquely identifies an element. Generated code is a starting point, not a guarantee that the locator expresses your intended behavior.
When a locator is ambiguous
- Use the Inspector’s highlight or locator-picking view to confirm which element is selected.
- Inspect the generated test and compare the locator with accessible roles, visible text, and stable test IDs in the application.
- Prefer a unique role or test ID over a long CSS path tied to layout details.
- After editing, run the test and check that it targets the intended element in all relevant states.
Generated assertions
Codegen can add assertions for visibility, text, and values. Keep assertions that describe a real requirement; remove incidental assertions that make a test brittle. Review waits and navigation boundaries as well, especially when the application updates content asynchronously.
Record authenticated workflows safely
The CLI can save and load browser storage state for workflows that require a login. Storage state can contain cookies and other sensitive authentication material.
- Keep the state file local and exclude it from source control.
- Delete it when the recording or debugging task is complete.
- Never paste credentials or a storage-state file into an issue or support request.
Troubleshooting by symptom
“Record new” does nothing
- Confirm the Microsoft Playwright extension is enabled in the current window.
- Confirm the opened folder is the Playwright project and that Test: Install Playwright completed.
- Run CLI Codegen. If it works, reload or re-open the VS Code workspace and investigate project discovery or extension state.
“Record at cursor” has no browser
Run the test with Show browser enabled, stop at the intended insertion point, and then invoke Record at cursor. This mode appends to an existing test; it is not the same workflow as starting a new recording.
The browser executable is missing
Run npx playwright --version, then install browsers for that resolved package with npx playwright install or the specific browser command. Repeat after package upgrades when the error indicates a version mismatch.
Linux reports a missing library
Run npx playwright install-deps chromium, or npx playwright install --with-deps chromium when Chromium itself is also missing. If your environment is containerized or locked down, check whether the user can install system packages and whether a display is available.
Codegen opens but chooses the wrong element
Stop recording, use Pick Locator, highlight the element, and inspect the resulting role, text, or test-id locator. Replace an ambiguous locator with a stable, unique one and rerun the test.
The test reaches a login page
Record the authenticated flow with storage state, protect the resulting file, and load it only in the local workflow that needs it. A login redirect can also mean the recording started in a fresh context without the required state.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Performance, reliability, and maintenance
- Run Codegen from the same package-managed project used by your tests; this avoids silently using another Playwright version.
- Use a focused URL and a clean browser context when diagnosing launch problems, then add authentication or custom setup.
- After every Playwright package update, treat browser installation as a required verification step.
- Keep generated tests short and refactor repeated flows into fixtures or helpers after recording.
- Use the CLI as a repeatable fallback in CI or remote development environments where the VS Code UI is unavailable.
Or skip the browser setup
If you only need an image of a page rather than an interactive Playwright test, ScreenshotNeo provides a website screenshot API and MCP server. One GET request returns PNG, JPEG, WebP, or PDF output. It accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response reports the page verdict and billing status in X-Page-Verdict and X-Billed headers.
Basic cURL request:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);See the ScreenshotNeo documentation for the complete option set, including full-page and element capture, device presets, retina scale, PDF settings, custom CSS and JavaScript, clicks, waits, request blocking, headers, cookies, user agents, geolocation, transparent backgrounds, resizing, TTL caching, signed links, asynchronous webhooks, bulk capture, usage data, and the OpenAPI specification. Its MCP server exposes take_screenshot, get_page_info, and capture_pdf to Claude, Cursor, and other MCP clients.
The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is included on every plan. Create a free ScreenshotNeo account to try it.
Recommended Free Tools
The Bottom Line
Start with the extension and project check, reproduce the problem with npx playwright codegen, and install browsers for the exact Playwright version in your project. That sequence separates VS Code integration issues from genuine browser or environment launch failures.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
