How to Install Playwright in VS Code

To run Playwright on your computer, you need two things installed: Node.js and Visual Studio Code. Once those are in place, one terminal command sets up your entire project.

Let's go through the process step by step. Let's dive in.

Prerequisites: Install Node.js and VS Code

Before you install Playwright in VS Code, you need two components on your machine.

Install Node.js

Node.js is a runtime environment for your computer to be able to run JavaScript and TypeScript code. This is what it is. Since Playwright runs on TypeScript (or JavaScript), you need to install it first.

Navigate to nodejs.org and click Get Node.js. Make sure LTS (Long Term Support) is selected. This gives you the stable version.

Instead of using the command line, the easiest way is to download the installer package and just run it on your computer. That's the simplest way.

For Mac:

• Apple Silicon chip (M1, M2, M3, M4) - select ARM64

• Intel chip - select x64

For Windows:

• Intel or AMD processor (most likely) - select x64

• ARM-based Windows laptop (newer and rare) - select ARM64

Download the package, run the installer, and Node.js will be ready on your machine. Yes, that simple :)

Install Visual Studio Code

VS Code is the editor where you actually write the code. Go to code.visualstudio.com, download it for your operating system, and install.

That's it for the prerequisites.

How to Install Playwright in VS Code

Now let's set up the actual Playwright project. You have two options here: you can set up Playwright as a new independent project, or you can install Playwright into an existing web application that you have. The process is the same.

For this guide, we will set it up as an independent project.

Step 1: Create a Project Folder

Create a new empty folder somewhere on your computer. Name it something like DemoProject. This empty folder will be your future Playwright framework.

Open Visual Studio Code and go to File > Open Folder. Select the folder you just created and hit Open.

Step 2: Validate Node.js Installation

Open a terminal in VS Code by clicking Terminal > New Terminal. Type this command:

node -v

If you see a version number like v24.x.x, it means Node.js was installed successfully. If you get an error, go back and reinstall Node.js.

Step 3: Run the Playwright Installation Command

In the same terminal, run:

npm init playwright@latest

Playwright will run a quick installation wizard. It asks you a few questions:

1. Language of choice: TypeScript or JavaScript? Go with TypeScript. Playwright's documentation is written in TypeScript, so you can find more examples with TypeScript. I always recommend TypeScript for Playwright projects.

2. Default test folder name? Keep the default tests and press Enter.

3. Add a GitHub Actions workflow? Select false for now. You can always add this later.

4. Install Playwright browsers? Select Yes. This downloads Chromium, Firefox, and WebKit browsers that Playwright uses to run your tests.

The browser download might take a minute on the first install. After that, you are done. Playwright is installed.

Install the Playwright Extension for VS Code

One more thing I would like to recommend. Click on the Extensions tab in VS Code (the icon on the left sidebar) and search for Playwright.

Look for Playwright Test for VS Code with the Microsoft checkmark. This is the one you need. Click Install.

Once installed, you will see a small test runner icon in the left sidebar. With this extension, you can run and debug tests directly from the editor with a single click. No brainer at all!

Playwright Project Folder Structure Explained

After installation, Playwright generates the project structure for you. Let's run through what each piece does.

node_modules

This is an automatically generated system folder. It keeps your framework's dependencies and packages in one place. Currently, since we installed only Playwright, you see it has only Playwright-related packages.

You never edit this folder manually. If you delete it and run npm install in the terminal, node_modules will be generated automatically. How? By looking into the package.json file.

package.json

This file has a devDependencies section that defines which modules we have in our project. Currently, we have only @playwright/test and @types/node. When you run npm install, npm looks into this section, finds the packages that need to be downloaded, and downloads them from the npm registry.

tests Folder

This is the place where you keep your tests. Playwright generates an example spec file with two sample tests that you can run right away. There is also a tests-examples folder with a bunch of other tests you can explore.

playwright.config.ts

This is the main configuration file of your Playwright project. Playwright sets up some initial configuration for you, including projects for three browsers: Chromium, Firefox, and WebKit. You can customize this file as your project grows.

How to Run Your First Playwright Test

Let's see Playwright in action. Go to the test explorer (the test runner icon in the left sidebar) and click the refresh button. You should see your example test files listed.

Click the green play arrow next to any test. The test will execute, and you will see the result. A green checkmark means the test passed.

Want to run the other example tests? Move the spec file from the tests-examples folder into the tests folder. Hit refresh in the test explorer, and the new tests will appear. Run them to see more of what Playwright can do.

If you want to run tests from the command line instead, use:

npx playwright test

This runs all tests in headless mode (without opening a visible browser). To see the browser while tests run, add the --headed flag:

npx playwright test --headed

After the test run, you can view the HTML report with:

npx playwright show-report

Final Thoughts

That's it. You're all set and ready to write Playwright tests.

The whole setup is just: Node.js, VS Code, npm init playwright@latest, and the Playwright extension. Now it's all about learning the framework itself, starting with locators and assertions.

Microsoft Playwright is growing in popularity very quickly and is becoming the go-to framework for UI test automation. Get the new skills at Bondar Academy with the Playwright UI Testing Mastery program. Start from scratch and become an expert to increase your value on the market! You can also watch the lesson Playwright Installation with this step-by-step guide for free.