Skip to main content

Install Tools

Before writing any UI test, you need Node, an editor with the Playwright extension, and a Playwright project with browsers downloaded. This page gets you from nothing to a green test run.

Note: This track is written against Playwright 1.63. Commands are checked on macOS. Windows equivalents are noted where they differ.

Required Tools​

Node.js​

Playwright Test runs on Node. Use the current LTS release (Node 20 or newer).

Steps:

  1. Download the LTS installer from https://nodejs.org/, or install with a package manager: 
    # macOS
    brew install node
    # Windows
    winget install OpenJS.NodeJS.LTS
  2. Open a new terminal

Verify: node --version prints v20 or higher, and npm --version prints a version.

Visual Studio Code + Playwright Extension​

You can use any editor, but the official VS Code extension gives you a test explorer, a recorder, locator picking and a debugger in one place. The rest of this track assumes you have it.

Steps:

  1. Install VS Code from https://code.visualstudio.com/
  2. Open the Extensions view and search for Playwright Test for VSCode (publisher: Microsoft)
  3. Install it. A Testing icon (a flask) appears in the left sidebar

Verify: The Testing sidebar shows a Playwright section once you open a project that has a playwright.config.ts.

Playwright Project​

Playwright is installed per project, not globally. The init command creates the project layout, installs the test runner and downloads the browsers.

Steps:

  1. Create a folder for your tests and open a terminal in it

  2. Run the init command:

    npm init playwright@latest

  3. Answer the prompts. My choices:

    • TypeScript or JavaScript: TypeScript
    • Where to put your end-to-end tests: tests
    • Add a GitHub Actions workflow: Yes (you get a working CI file for free, see Section 10 - Running in CI)
    • Install Playwright browsers: Yes

    To skip the prompts, pass the answers as flags:

    npm init playwright@latest -- --quiet --browser=chromium --gha --lang=ts

  4. Look at what was created:

    FileWhat it is
    playwright.config.tsTest runner configuration: browsers, timeouts, reporters, base URL
    tests/example.spec.tsA sample test against playwright.dev
    .github/workflows/playwright.ymlGitHub Actions workflow (if you said yes)
    package.jsonHas @playwright/test as a dev dependency

  5. Run the sample test:

    npx playwright test

  6. Open the HTML report:

    npx playwright show-report

Verify: The terminal prints 2 passed and the report opens in your browser with two green tests.

Tip: The browsers are downloaded to a cache folder outside your project (~/Library/Caches/ms-playwright on Mac, %USERPROFILE%\AppData\Local\ms-playwright on Windows). npx playwright install --list shows what is installed. Every Playwright version pins its own browser builds, so after upgrading run npx playwright install again.

Important: The npx prefix runs the Playwright that is installed in this project. A global install is not needed and only causes version confusion.

Optional Tools​

Playwright Test Agents​

Since 1.56, Playwright ships agent definitions (planner, generator, healer) for AI coding tools such as Claude Code and VS Code Copilot. They can draft a test plan from a running app, generate spec files from that plan, and try to repair failing tests.

npx playwright init-agents --loop=claude

Other loop options: vscode, codex, opencode. Re-run this after upgrading Playwright so the agent definitions pick up new tools. I treat these as an assistant, not a replacement for understanding the locators and assertions in Section 5.

ESLint​

Optional, but the one rule worth having is @typescript-eslint/no-floating-promises. A forgotten await in a Playwright test is the most common cause of a test that passes when it should fail. See Section 6 - Test Structure.

The Sample Project​

The code shown in this track lives in a small runnable project inside the knowledge base: playwright/sample/. Every page shows the relevant file. Clone the repo, then:

cd playwright/sample
npm ci
npx playwright install chromium
npx playwright test

Verify: 9 passed.

Last updated on