Install Playwright with Node.js & VS Code

Run these three commands to install Playwright with a working example test:

# 1. Install Node.js 20 LTS from https://nodejs.org
# 2. Create a project and scaffold Playwright
mkdir my-qa-project && cd my-qa-project
npm init playwright@latest
# 3. Run the example test
npx playwright test

• A machine running Windows 10+, macOS 12+, or Ubuntu 20.04+
• Admin / sudo rights to install software
• At least 2 GB free disk (browsers take ~1 GB)
• Internet access to download Node and Playwright browsers

1. 1

   Download the LTS installer

   Go to nodejs.org and pick the LTS download. In 2026 that's Node 20.x. Avoid the "Current" build — Playwright targets LTS.

2. 2

   Run the installer

   Accept the defaults on Windows/macOS. On Linux, prefer nvm: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash && nvm install --lts.

3. 3

   Verify

   Copy

   node --version   # v20.x.x
   npm --version    # 10.x.x

1. 1

   Download VS Code

   From code.visualstudio.com. Any recent build is fine.

2. 2

   Install the official Playwright extension

   Open VS Code → Extensions (Ctrl+Shift+X) → search "Playwright Test for VSCode" by Microsoft → Install. This adds the green ▶ gutter icons, the Testing sidebar and the record-a-test button.

Create an empty folder and run the official scaffolder:

mkdir my-qa-project && cd my-qa-project
npm init playwright@latest

The wizard asks four questions — recommended answers:

• TypeScript or JavaScript? → TypeScript
• Where to put your tests? → tests
• Add a GitHub Actions workflow? → Yes
• Install browsers? → Yes (downloads Chromium, Firefox and WebKit)

You'll end up with this structure:

my-qa-project/
├── .github/workflows/playwright.yml
├── tests/
│   └── example.spec.ts
├── tests-examples/
├── playwright.config.ts
├── package.json
└── package-lock.json

npx playwright test              # runs headless in all 3 browsers
npx playwright test --ui         # opens the UI Mode (recommended)
npx playwright test --headed     # see the browser
npx playwright show-report       # last HTML report

You should see something like:

Running 6 tests using 6 workers
  6 passed (7.3s)

To open last HTML report run:
  npx playwright show-report

1. 1

   Open UI Mode

   Run npx playwright test --ui. Click any test to run it and use the time-travel slider.

2. 2

   Break something on purpose

   Open tests/example.spec.ts and change expect(page).toHaveTitle(/Playwright/) to /BrokenTitle/. Save. Watch UI Mode re-run and show the diff.

3. 3

   Restore and commit

   Fix the assertion, then git init && git add . && git commit -m "chore: scaffold Playwright". You now have a real Playwright project.

Setup done. Now write a real end-to-end test from scratch in Module 1 / Lesson 3: Your First Playwright Test.

Docs: playwright.dev/docs/intro · Node.js downloads