Install Playwright: A Complete Guide for Windows and macOS

By AravindPlaywright Tutorial
Installing Playwright through Visual Studio Code terminal using npm command

Last updated on August 8th, 2025 at 09:51 am

Overview of Playwright

Looking to automate your browser tests smoothly? One of the fastest ways to get started is to install Playwright, a powerful end-to-end testing framework built by Microsoft. Whether you’re working on Windows or macOS, Playwright makes it simple to write reliable tests for modern web applications.

In this guide, we’ll walk you through the complete Playwright setup process with quick steps, from installation to running your first test. You’ll also learn how to use npm init playwright@latest, install supported browsers, and even set things up in VS Code. Let’s get started and make your test automation workflow easier and faster!

Steps to Install Playwright Quickly

Playwright is lightweight automation framework and you can install in just 2 minutes. Before you Configure Playwright in VS Code, ensure that Node.js and Visual Studio Code are already installed on your system. If not, don’t worry, let’s walk through how to download and install both for your Playwright automation framework setup.

Step #1: Download and Install Node.js

Download Node.js

  • Visit the official Node.js download Page.
  • Click on the Get Node.js button. It will take you to the Node.js download page.
Download Node.js for Playwright setup on Windows or macOS
  • Select your Operating system and download compatible Node.js version.
Select operating system and download compatible Node.js version for Playwright setup

Install Node.js

  • Run the Node.js installer, then simply follow the default setup instructions in the installation wizard.

Verify Node.js Installation

To verify Node.js Installation:

  • Open the command prompt
  • Run the node -v command
  • You will now see the version of Node.js that’s installed on your system. This confirms that the installation was successful.

Step #2: Visual Studio Code Installation Steps

Download VS Code

  • Go to the official Visual Studio Code download page to get the latest version for Windows or macOS.
  • Select your operating system (Windows, macOS) and click on the “Download” button to begin.
Official Visual Studio Code download page with OS options for Windows, macOS, and Linux

Install VS Code

  • Use the Visual Studio Code setup wizard to install VS Code on your Windows or macOS.

Launch VS Code

  • Start Visual Studio Code by clicking its icon in the Start menu (Windows) or Applications folder (macOS).

Step #3: Configure VS Code and Install Playwright

Let’s set up Visual Studio Code by adding the Playwright Test extension and installing the Playwright framework.

Open a New Project Folder

  • Create(manually or mkdir Playwright Automation) and open a folder named Playwright Automation in the D: drive. This will be your project workspace for setting up Playwright test automation.
  • Click on File > Open Folder (or Press Ctrl + K then Ctrl + O) and select your workspace folder in VS Code.
Opening Playwright Automation folder in Visual Studio Code for setting up Playwright project.

Install the Playwright Test for VSCode Extension

  • Search and install “Playwright Test for VSCode” extensions from the Extensions view (Ctrl+Shift+X)
Searching and installing Playwright Test for VSCode extension from the Extensions view in Visual Studio Code

Install Playwright

Now you’re all set to begin the Playwright installation process.

To Set up Playwright inside VS Code, just follow these easy steps and run a few quick commands in the terminal. This will complete your Playwright project setup and get your automation project ready to go.

  • To open the terminal in VS Code, go to the top menu and click View > Terminal, or simply press Ctrl + ` on your keyboard.
Go to the top menu in VS Code and click View > Terminal to open the integrated terminal.
  • This will launch the integrated terminal in VS Code, where you can run the commands needed to configure Playwright in VS Code.
VS Code terminal showing Playwright commands being executed
  • In the integrated terminal of VS Code, type the following command and hit Enter to start installing the latest version of Playwright:
npm init playwright@latest
Typing the command npm init playwright@latest in the VS Code terminal to install Playwright
  • This command will begin the Playwright installation steps using the most recent version available.
  • Now, the terminal will prompt you with the question:
    • “Do you want to use TypeScript or JavaScript?”
    • Choose JavaScript and press Enter to continue with the Playwright test environment setup using JavaScript.
Selecting JavaScript in the Playwright setup prompt and pressing Enter in the VS Code terminal.
  • Next, Playwright will ask:
    • “Where to put your end-to-end tests?” with a default value of tests.
    • Keep the folder name as tests and press Enter to continue the Playwright test automation setup.
Playwright setup asking where to put end-to-end tests with default folder name set to tests in VS Code terminal
  • Next, Playwright will ask:
    • “Add a GitHub Actions workflow? (y/N)” with a default value of false.
    • You can type y to enable GitHub Actions integration or n to skip it and continue the Playwright setup process.
Playwright setup asking to add a GitHub Actions workflow with default value set to false in VS Code terminal

Playwright Supported Browsers Installation

  • Next, Playwright will prompt:
    • “Install Playwright browsers (can be done manually via ‘npx playwright install’)? (Y/n)” with the default set to true.
    • Press Y to install all Playwright-supported browsers(Chromium, WebKit, and Firefox) automatically and continue the setup process.
Pressing Y in the Playwright setup prompt to install all supported browsers automatically in VS Code terminal

That’s it!

Playwright will now install everything you need, the Playwright framework, supported browsers, and all required configuration files within a few seconds.

Now your Playwright project structure should look like the example shown below.

This folder structure is automatically generated during the Playwright setup and includes all necessary files for running your first test.

Folder structure of a Playwright project after installation, including tests, configuration files, and node_modules in VS Code

Step #4: Write and Run Your First Playwright Test

Write First Playwright Test

  • Create a new test file named playwrightdemo.spec.js inside the tests folder.
    • This file will contain your first Playwright test script and is part of the recommended Playwright project structure.
First Playwright test script that opens the Facebook login page and verifies the title using JavaScript in VS Code
  • Now, write the following Playwright test code inside your playwrightdemo.spec.js file.
    • This script will open the Facebook login page and verify the page title.
// playwrightdemo.spec.js

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

test('Visit Facebook login page and verify title', async ({ page }) => {
  // Navigate to Facebook login page
  await page.goto('https://www.facebook.com/');

  // Expect the page title to contain 'Facebook'
  await expect(page).toHaveTitle(/Facebook/);
});

Run First Playwright Test

  • Running Playwright test in headed mode:
    • To run your test in Visual (headed) mode, open the VS Code terminal and enter the following command. This allows you to see the browser UI while the test runs. Generally, we use the headed mode to perform visual testing in Playwright.
npx playwright test tests/playwrightdemo.spec.js --headed
  • Running Playwright test in headless mode:
    • To run your test without opening the browser UI, enter the command below in the VS Code terminal. This runs your Playwright test in headless mode, which is faster and ideal for CI/CD pipelines.
npx playwright test tests/playwrightdemo.spec.js

The command above will run your Playwright test in all three supported browsers: Chromium, WebKit, and Firefox.

This ensures your test is cross-browser compatible and works across major browser engines.

View Test Result Report

Once the Playwright test execution is complete, you can view the HTML report using the command below. This report provides a detailed summary of your test results in a browser-friendly format.

npx playwright show-report

Basic Playwright Commands for Beginners

CommandDescription
npx playwright testRuns all tests in headless mode by default.
npx playwright test –headedRuns tests in visual (headed) mode to see browser UI during execution.
npx playwright test tests/filename.spec.jsRuns a specific test file (replace filename with your test file name).
npx playwright codegenLaunches the Playwright Inspector to auto-generate test scripts by recording user actions on a given URL.
npx playwright show-reportOpens the HTML test report in your browser after test execution.
npx playwright install-depsInstalls necessary dependencies, mostly used in Linux environments.
npx playwright openOpens the specified URL using Playwright’s browser context, useful for debugging.

Final Words

Installing Playwright is quick and beginner-friendly, especially when using Visual Studio Code. With just a few commands, you can set up Playwright, install supported browsers, and start writing automated tests in no time. Whether you’re testing on Chromium, Firefox, or WebKit, Playwright provides a reliable and powerful framework for modern test automation. Now that your setup is complete, you’re ready to write your playwright tests and explore all the features Playwright has to offer.

FAQs on Installing Playwright Using Visual Studio Code

What is Playwright used for?

Playwright is a lightweight, modern automation tool for testing web applications across multiple browsers like Chrome, Firefox, and Safari.

How do I install Playwright in Visual Studio Code?

First, install Node.js and Visual Studio Code. Then open VS Code, open your project folder in the terminal, and run npm init playwright@latest.

Is Node.js required to install Playwright?

Yes, Node.js is required because Playwright is a Node-based automation library. You must install Node.js before setting up Playwright.

Do I need to install browsers separately?

No, Playwright automatically installs Chromium, Firefox, and WebKit when you initialize it using the setup command.

Can I install Playwright on a specific drive like D:\?

Yes, you can install and run Playwright from any drive or folder as long as Node.js is properly configured in your system path.

What is the recommended code editor for Playwright?

Visual Studio Code is highly recommended because it offers extensions, syntax highlighting, and integrated terminal support for Playwright projects.

How do I verify if Node.js is installed?

You can open Command Prompt and run node -v. If installed, it will display the Node.js version number.

Does Playwright support cross-browser testing?

Yes, Playwright supports Chromium, Firefox, and WebKit, allowing you to run the same test on different browsers easily.

How do I run my first Playwright test?

After initializing Playwright, use the terminal to run npx playwright test and it will execute sample tests created during setup.

You might also like:

Playwright Python tutorial for beginners showing automated browser testing and VS Code setup

Playwright Python: Complete Tutorial for Beginners

Playwright with GitHub Actions for CI/CD automation in software testing

How to Run Playwright Tests in Github Actions

Playwright mobile testing guide with iOS and Android device simulation

How to Perform Mobile Testing in Playwright

Leave a Reply

Your email address will not be published. Required fields are marked *