HOME

In this tutorial, I will explain the steps to install Playwright on a Window machine. To install Playwright on a Windows machine, you will typically use Node.js and the npm (Node Package Manager).

Table of Contents

1. System Requirements
2. Implementation Steps
   1. Install Node.js and npm
   2. Create a Project Directory
   3. Install Playwright
   4. Create a new Playwright project
   5. Running the Example Test through Terminal
   6. HTML Test Reports

System Requirements:

• Node.js version 18 or higher
• npm (comes with Node.js)
• Windows 10+, macOS 12+, or Ubuntu 20.04+
• At least 2GB free disk space for browser binaries
• Visual Studio for Code is already installed.

Visual Studio for Code must be installed. If it is not already installed, please refer to this tutorial – How to Install Visual Studio Code on Windows.

Below are the step-by-step instructions to get Playwright up and running on Windows:

Implementation Steps:

1. Install Node.js and npm

Please refer the below tutorial to install node.js.

How to install node.js on windows 11

2. Create a Project Directory

Open Command Prompt or PowerShell. Make a new directory for your Playwright project and navigate into it:

The new empty folder “playwright-demo-project” is created in Documents/Playwright folder.

3. Install Playwright

Open Visual Studio for Code. Install “Playwright Test for VSCode” from Microsoft via the Extensions tab.

Once the plugin is installed. We can see a new Funnel icon called Testing as shown in the image.

4. Create a new Playwright project

Go to File and select Open Folder we have created earlier – playwright-demo-project.

We can see the project is opened in VS code.

Go to the terminal in this project and open a New Terminal.

Type the below command in the terminal

npm init playwright@latest

When prompted, choose / confirm:

• TypeScript or JavaScript (default: TypeScript)
• Tests folder name (default: tests, or e2e if tests already exists)
• Add a GitHub Actions workflow (recommended for CI) – Initial project, so mentioned False
• Install Playwright browsers (default: yes)

Playwright downloads required browser binaries and creates the scaffold below.

playwright.config.ts         # Test configuration
package.json
package-lock.json            # Or yarn.lock / pnpm-lock.yaml
tests/
  example.spec.ts            # Minimal example test

The playwright.config centralizes configuration: target browsers, timeouts, retries, projects, reporters and more. In existing projects dependencies are added to your current package.json.

tests/ contains a minimal starter test. tests-examples/ provides richer samples (e.g. a todo app) to explore patterns.

5. Running the Example Test through Terminal

By default tests run headless in parallel across Chromium, Firefox and WebKit (configurable in playwright.config). Output and aggregated results display in the terminal.

npx playwright test

6. HTML Test Reports

After a test run, the HTML Reporter provides a dashboard filterable by the browser, passed, failed, skipped, flaky and more. Click a test to inspect errors, attachments and steps. It auto-opens only when failures occur; open manually with the command below.

npx playwright show-report

The report is also present in playwright-report folder with the name of “index.html”.

Summary:
1. Install Node.js.
2. Initialize npm project.
3. Install Playwright.
4. Run a test script to verify your setup.
5. View Test report – Index.html report

To know more about Playwright, please refer to this documentation – https://playwright.dev/docs.