Playwright Installation |

Playwright is a Node.js library, so you need to install Node.js locally. If you already have it installed, you can skip this step.

1. Install Node.js

Playwright officially recommends using Node.js.

Open the Node.js official website
Download and install the LTS (Long Term Support) version
Verify successful installation:

node -v
npm -v

You should see version numbers displayed.

For more installation details, refer to:

2. Create a New Project Directory

Once Node.js is successfully installed, you can begin installing and using Playwright.

Run the following command in your terminal:

mkdir tutorial-playwright-demo
cd tutorial-playwright-demo

3. Initialize and Install Playwright

Run:

npm init playwright@latest

During installation, you’ll be prompted to:

Select language: JavaScript or TypeScript — choose the one you’re familiar with
Install test examples: Recommended to select Yes (helpful for learning)
Download browsers: Select Yes (Playwright will download Chromium, Firefox, and WebKit)

After installation completes, your project directory will look like this:

playwright-demo/
├─ tests/             # Example test cases
├─ playwright.config.js  # Configuration file
├─ package.json
└─ node_modules/

4. Initialize with Yarn

yarn create playwright

5. Initialize with pnpm

pnpm create playwright

All three package managers produce identical initialization results — choose the one you’re comfortable with.

Manual Installation

If you already have a project and want to manually add Playwright, complete the following two steps.

Step 1: Install the npm package

# Install Playwright Test as a dev dependency
npm i -D @playwright/test

# If you only need the browser automation library (without test runner)
npm i playwright

Step 2: Install browsers

# Install all browsers (Chromium, Firefox, WebKit)
npx playwright install

# Or install specific browsers only
npx playwright install chromium
npx playwright install firefox
npx playwright install webkit

Browser binaries are downloaded by default to the OS cache directory (e.g., ~/Library/Caches/ms-playwright/ on macOS), so they won’t consume your project’s space.

Notes on Installed Browsers

Playwright installs test versions of browsers, not the ones you use daily:

Playwright Name	Corresponding Browser	Description
Chromium	Open-source base of Google Chrome	Core engine of Chrome; behavior is nearly identical
Firefox	Mozilla Firefox	Official test build of Firefox
WebKit	Apple Safari’s engine	Underlying rendering engine of Safari

These test versions may differ slightly from the browsers used daily, but they behave identically in most testing scenarios.

Verify Installation

After installation, run the following command to verify success:

# Check installed Playwright version and browsers
npx playwright --version

Expected output (similar to):

Version 1.52.0

Run an example test to confirm everything works:

npx playwright test

If you see test execution output (including passed and failed tests), the installation was successful.

Common Installation Issues

Slow browser download

Browser binaries are large (~400–500 MB), and download speed depends on your network.

You can use a domestic mirror by setting an environment variable:

# Set download source to a domestic mirror
export PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright/
npx playwright install

Missing system dependencies on Linux

Running Playwright on Linux requires additional system libraries.

# Install system dependencies required by Playwright
npx playwright install-deps

# Or install dependencies for a specific browser only
npx playwright install-deps chromium

When using Playwright in a Docker container, use the official Microsoft Playwright Docker image (mcr.microsoft.com/playwright), which has all dependencies pre-installed.

First Script: Hello World

Create a new file named test.js and add the following content:

Example

// test.js

const { chromium } = require('playwright');

(async () => {

  // 1. Launch browser
  const browser = await chromium.launch({ headless: false }); // Set false to see the browser
  const page = await browser.newPage();

  // 2. Open webpage
  await page.goto('https://www.baidu.com');

  // 3. Take and save screenshot
  await page.screenshot({ path: 'baidu.png' });

  // 4. Close browser
  await browser.close();

  console.log("Screenshot saved to baidu.png");

})();

Run it with:

node test.js

The above is a simple Playwright example that captures a screenshot of Baidu’s homepage.

YouTip