How to Set Up Playwright in VS Code

Most Playwright testers rely on a simple loop while building tests. Write a few steps, run the test from the terminal, check the output, and rerun when something fails. If the test passes locally, it feels ready to move forward. This workflow is familiar, predictable, and easy to repeat across projects.

That loop starts to slow testing down when failures stop being obvious. A click times out only on the second run. A locator passes locally but fails in CI. An assertion fails even though the page looks correct in screenshots.

When I followed this approach, every failure triggered another rerun with more logs or retries, and figuring out what actually broke took longer than writing the test itself.

This is where VS Code changes the workflow. Instead of reacting after a test fails, you stay inside the execution and debugging loop. You pause a test at the failing step, inspect the page while the browser is still open, and validate locators as you write them. Guesswork drops, feedback becomes immediate, and debugging stops feeling like a separate phase.

In this article, I will show you how to get started with Playwright using VS Code and how to use it to write, run, debug, and scale tests with clearer and faster feedback.

Why Use Playwright with Visual Studio Code?

VS Code transforms how tests are written and debugged, especially for complex workflows where failures are intermittent or timing-sensitive. Instead of reacting to failures after the fact, the editor lets you catch and fix issues as they happen. Here’s why VS Code becomes essential for effective Playwright testing:

• Failure-first debugging instead of reruns: Pause a test at the exact step where it fails and inspect the live browser state, rather than rerunning the test with added logs or retries.
• Locator stability during authoring: Generate locators from real interactions and validate them immediately to reduce flaky selectors before they spread across the suite.

• Execution visibility at step level: Step through Playwright actions one by one and observe navigation, waits, and assertions as they occur.
• Actionable traces during development: Review traces while writing tests, not after CI failures, so timing and state issues surface early.

• Editor-driven test control: Run a single test, block, or file directly from the editor to focus debugging on one failure at a time.

VS Code Setup Slowing Test Execution?

Validate web apps across browsers and OS versions on real devices with pre-configured environments.

Test on Real Devices

Prerequisites Before Installing Playwright with VS Code

Before setting up Playwright in VS Code, make sure your development environment meets a few key requirements. Preparing these prerequisites ensures a smooth installation and avoids common setup issues:

• Node.js: Playwright requires Node.js to manage dependencies and run tests. Ensure you have Node.js (v14 or higher) installed and properly configured in your system PATH.
• VS Code: Use the latest version of Visual Studio Code to get full support for Playwright features, including debugging, test execution, and extensions.
• Optional – Git installed: If you plan to version-control your tests or work in a team, having Git installed helps manage test projects efficiently.
• Basic familiarity with JavaScript/TypeScript: Playwright tests are written in JavaScript or TypeScript, so understanding the language basics will make test creation and troubleshooting easier.

Installing and Configuring Playwright in VS Code

Once the prerequisites are ready, you can install and configure Playwright in VS Code to start building tests. The VS Code extension streamlines setup and integrates key tools directly into your editor.

• Install the Playwright VS Code extension: Search for Playwright Test for VS Code in the Extensions Marketplace and install it. The extension adds test execution, debugging, and locator tools directly into the editor.
• Initialize a Playwright project: Open the Command Palette (Ctrl + Shift + P), run Test: Install Playwright, and follow the prompts. This step installs the necessary dependencies and downloads browser binaries.
• Configure test environment (optional): You can customize the playwright.config.js file to set test directories, browsers, timeouts, and other project-specific options.
• Verify the installation: Create a sample test file and run it from the editor using the play icons in the gutter or the testing sidebar to ensure everything works correctly.

Creating Your First Playwright Test Project Using VS Code

Once Playwright is installed and configured, you can set up a fully functional test project in VS Code. Follow these steps to create, run, and verify your first test.

Step 1: Create a project folder
Open VS Code and create a dedicated folder for your Playwright tests. This folder will serve as your workspace and help keep your test files, configuration, and dependencies organized.

Step 2: Initialize the Node.js project
Open the integrated terminal in VS Code (`Ctrl + “) and run:

npm init -y

This command creates a package.json file to manage your project dependencies and scripts.

Step 3: Install Playwright
Add Playwright as a development dependency by running:

npm install -D @playwright/test

Then, download the required browser binaries with:

npx playwright install

This ensures that Chromium, Firefox, and WebKit are available for cross-browser testing.

Step 4: Create your first test file
Inside your project folder, create a tests directory. Add a file named example.spec.js (or .ts for TypeScript) and write a simple test to verify a page element:

const { test, expect } = require(‘@playwright/test’);

test(‘homepage has title’, async ({ page }) => {

await page.goto(‘https://example.com’);

await expect(page).toHaveTitle(/Example Domain/);

});

Step 5: Run the test
You can run the test directly from VS Code by clicking the green play icon in the gutter next to the test or using the Testing sidebar. Alternatively, execute it from the terminal:

npx playwright test

Ensure that the test passes and check the results in VS Code.

How to Run Playwright Tests from Inside VS Code

VS Code gives you several ways to run and control Playwright tests, making test execution faster and more interactive.

Option 1: Run tests from the editor gutter
Each test or describe block shows a green play icon in the editor gutter. Click it to run an individual test or start a debugging session with breakpoints.

Option 2: Use the Testing sidebar
Open the Testing sidebar to see all tests organized by file. You can run a single test, a group of tests, or the entire suite with one click. The sidebar shows pass/fail status and detailed error messages immediately.

Option 3: Filter tests for focused runs
Use test.only or test.skip in your code, or filter tests in the Testing sidebar. This isolates a single test or feature without running the full suite.

Option 4: Run tests in different browsers
The VS Code extension allows you to select Chromium, Firefox, or WebKit for test execution, enabling cross-browser validation without modifying your test code.

Option 5: Run tests via terminal in VS Code
For advanced scenarios, run tests from the integrated terminal:

npx playwright test –headed –project=firefox

Use flags to run in headed mode, target specific browsers, or generate traces for deeper analysis.

These options keep test execution flexible and interactive, so you can focus on debugging and improving tests rather than managing command-line workflows.

VS Code Setup Slowing Test Execution?

Validate web apps across browsers and OS versions on real devices with pre-configured environments.

Test on Real Devices

How to Debug Playwright Tests Using VS Code

Debugging Playwright tests in VS Code gives you direct visibility into failures and helps fix issues faster by inspecting tests as they run. Follow these steps for a complete, interactive debugging workflow:

Step 1: Set breakpoints in your test code
Open your test file and click next to the line numbers to set breakpoints at key actions or assertions. Breakpoints tell VS Code where to pause test execution so you can inspect what’s happening in the browser at that exact moment.

Step 2: Start the debug session
Click the debug icon next to your test in the gutter or use the Testing sidebar. VS Code launches the test and pauses at your first breakpoint, allowing you to interact with the paused session rather than waiting for the test to finish.

Step 3: Step through test actions
Use the step over and step into controls to move through each Playwright command (clicks, navigations, waits) one at a time. This helps identify where timing issues or flaky interactions occur.

Step 4: Inspect the browser in headed mode
With headed mode enabled, the browser opens during debugging. Hover over elements, check the DOM structure, and validate locators while the test is paused. This makes it easier to see what the test actually interacts with.

Step 5: Use the console and watch expressions
Open the debug console and add watch expressions for variables or page elements you want to track. You can see dynamic values update in real time as the test progresses, helping identify logic or state issues.

Step 6: Analyze traces for deeper insights
If a failure is complex, enable Playwright tracing (trace: ‘on’) and open the Trace Viewer. Step through screenshots, network requests, console logs, and DOM snapshots to pinpoint the cause of the failure.

How to Generate Tests and Locators in VS Code

Playwright’s test generation features in VS Code help you create reliable tests faster by capturing real browser interactions and generating code automatically. Follow these steps to generate tests and locators efficiently:

Step 1: Open Playwright Codegen
Open the Command Palette (Ctrl + Shift + P) and run “Playwright: Open Codegen”. This opens a browser window where your interactions can be recorded into test code automatically.

Step 2: Select the target browser
Choose the browser (Chromium, Firefox, or WebKit) in which you want to record your actions. This ensures the generated test reflects the browser environment you intend to run against.

Step 3: Record interactions
Perform the actions you want to test in the opened browser-clicks, form inputs, navigations, etc. Playwright records these steps in real time and generates the corresponding test code, including locators and assertions.

Step 4: Refine locators
After recording, review the generated locators in the test file. Use VS Code’s locator tools to validate or fine-tune selectors, ensuring they are robust and won’t break with minor DOM changes.

Step 5: Save and run the generated test
Save the test file in your project and run it using the editor gutter icons or the Testing sidebar. Verify that it executes correctly and interacts with elements as expected.

Step 6: Iterate and enhance
Add additional assertions, custom waits, or complex interactions to extend the generated test. You can combine recording with manual editing to create maintainable, production-ready tests.

VS Code Setup Slowing Test Execution?

Validate web apps across browsers and OS versions on real devices with pre-configured environments.

Test on Real Devices

How to Scale Playwright Tests Beyond the Local VS Code Environment

Running Playwright tests inside VS Code works well for development and debugging, but it has limitations as your test suite grows or when you need to test across multiple environments:

• Local resource constraints: Running multiple tests or browsers simultaneously can quickly consume CPU and memory, slowing down test execution.
• Limited cross-browser coverage: While VS Code supports Chromium, Firefox, and WebKit, testing on different OS versions, real devices, or mobile browsers is difficult locally.
• CI/CD complexity: Replicating your local setup in CI pipelines can be challenging, especially with dependencies, browser versions, or environment-specific configurations.
• Manual maintenance of infrastructure: Keeping multiple environments updated, managing browser binaries, and debugging remotely requires extra effort.

This is where tools like BrowserStack can help. It is a real device cloud platform that gives you access to 3,500+ real Windows, Mac, Android, and iOS devices. You can run your Playwright tests across multiple OS versions and browser combinations without maintaining local infrastructure.

These core features of BrowserStack enhance Playwright testing:

• Parallel Testing: Run many Playwright tests simultaneously across browsers and devices so your suite completes faster and scales beyond local CPU limits.
• Local Environment Testing: Test applications hosted on localhost, development, or staging environments securely on BrowserStack without exposing them to the public internet.
• Test Reporting & Analytics: Access detailed logs, screenshots, and execution data that help debug failures without needing multiple reruns.
• External Test Insights: Capture video recordings, network logs, and console output from real runs on remote environments to diagnose issues you might not see locally.
• Integration with CI/CD Pipelines: Seamlessly connect BrowserStack with tools like GitHub Actions, Jenkins, or GitLab to run Playwright tests automatically on every commit.

Talk to an Expert

Conclusion

Playwright with VS Code lets testers write, run, and debug tests efficiently in a single environment. You can pause tests at failing steps, inspect page state, generate and validate locators, and step through actions. This reduces trial-and-error reruns and makes debugging faster and more precise.

BrowserStack extends this workflow by running Playwright tests on real browsers and devices in the cloud. Parallel execution, local environment testing, and detailed logs, screenshots, and videos help catch environment-specific issues quickly. This enables scaling large test suites reliably and integrating with CI/CD pipelines for faster cross-platform testing.

Try BrowserStack for Free