How to Install Playwright with TypeScript and Set Up VS Code (Step by Step)

In this lesson you will set up everything you need to write Playwright tests: Node.js, Visual Studio Code, a new Playwright TypeScript project and the official VS Code extension. It takes about 15 minutes, and at the end you will run your first tests in three browsers.

---

✅ Prerequisites

You need only three things:

Tool	Why	Where to get it
Node.js (current LTS)	Runs Playwright and installs packages with npm	nodejs.org
Visual Studio Code	Editor with the official Playwright extension	code.visualstudio.com
A terminal	To run commands	Built into VS Code (View, Terminal)

Git is optional now but useful later when you push your project to GitHub and run it in CI.

---

1️⃣ Step 1: Install Node.js

1. Go to nodejs.org and download the LTS version for your operating system.
2. Run the installer and keep the default options (npm is installed together with Node.js).
3. Open a new terminal and check the versions:

node -v
npm -v

Both commands should print a version number, for example v22.x.x and 10.x.x.

---

2️⃣ Step 2: Install Visual Studio Code

Download VS Code from code.visualstudio.com and install it. Then create an empty folder for your project, for example playwright-course, and open it with File, Open Folder.

---

3️⃣ Step 3: Create a Playwright Project

Open the VS Code terminal (Ctrl + ` or View, Terminal) inside your empty folder and run:

npm init playwright@latest

The installer asks a few questions. Choose these answers for this course:

Question	Answer
Do you want to use TypeScript or JavaScript?	TypeScript
Where to put your end-to-end tests?	tests (default)
Add a GitHub Actions workflow?	Yes (useful later; you can also say No)
Install Playwright browsers?	Yes

Playwright then installs the @playwright/test package and downloads Chromium, Firefox and WebKit. This can take a few minutes the first time.

---

📂 Step 4: Understand the Generated Files

playwright-course/
├── .github/workflows/playwright.yml   # CI workflow (if you chose Yes)
├── node_modules/                      # installed packages (never edit)
├── tests/
│   └── example.spec.ts                # sample test
├── .gitignore                         # ignores reports and results
├── package.json                       # project info and dependencies
├── package-lock.json                  # exact installed versions
└── playwright.config.ts               # Playwright settings

• tests/: all your test files go here. Files ending in .spec.ts or .test.ts are treated as tests.
• playwright.config.ts: browsers, timeouts, reporters and more. It has its own lesson: playwright.config.ts explained.
• package.json: lists @playwright/test as a dev dependency.

---

▶️ Step 5: Run the Sample Tests

npx playwright test

Playwright runs the sample tests in all three browsers, in parallel and headless (no visible window). You should see output similar to:

Running 6 tests using 4 workers
  6 passed (8.2s)

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

Open the HTML report to see each test, browser and step:

npx playwright show-report

---

🧩 Step 6: Install the Playwright VS Code Extension

1. Open the Extensions view in VS Code (Ctrl + Shift + X).
2. Search for Playwright Test for VSCode published by Microsoft and click Install.
3. Open the Testing view (the flask icon in the left sidebar). Your tests appear in a tree.

With the extension you can:

• Run or debug a single test with the green ▶ icon next to it.
• Tick Show browser to watch tests run.
• Use Pick locator to click an element in the browser and get a locator.
• Use Record new to generate a test with Codegen.

---

🔄 Updating Playwright Later

Playwright releases a new version roughly every month. To update:

npm install -D @playwright/test@latest
npx playwright install

The second command downloads browser builds that match the new version.

---

🐞 Common Installation Problems

Problem	Fix
npx: command not found	Node.js is not installed or the terminal was not restarted
Browsers fail to download behind a company proxy	Set the HTTPS_PROXY environment variable, then run npx playwright install
“Executable doesn’t exist” error	Browsers are missing or outdated: run npx playwright install
Missing libraries on Linux	Run npx playwright install --with-deps
PowerShell blocks npx scripts	Run Set-ExecutionPolicy -Scope CurrentUser RemoteSigned once, or use Command Prompt

---

📝 Assignment

1. Install Node.js and VS Code, and paste the output of node -v and npm -v into a notes file.
2. Create a project with npm init playwright@latest using TypeScript.
3. Run npx playwright test and open the HTML report. How many tests ran, and in which browsers?
4. Install the VS Code extension and run only one test from the Testing view with Show browser enabled.
5. Bonus: run npx playwright --version and note which Playwright version you installed.

---

❓ FAQ

🤔 How do I install Playwright with TypeScript?

Install Node.js, open an empty folder and run npm init playwright@latest, then choose TypeScript. Playwright creates the project, config file and sample tests, and downloads the browsers.

🤔 Do I need to install TypeScript separately?

No. Playwright runs .ts test files directly. Install the typescript package only if you want to run type checks with npx tsc --noEmit, covered in TypeScript for Playwright.

🤔 Where does Playwright install the browsers?

In a shared cache folder: %USERPROFILE%\AppData\Local\ms-playwright on Windows, ~/Library/Caches/ms-playwright on macOS and ~/.cache/ms-playwright on Linux.

🤔 Can I use Google Chrome instead of the bundled Chromium?

Yes. Set channel: 'chrome' (or 'msedge') in a project in the config file. Run npx playwright install chrome if Chrome is not installed.

🤔 How do I install Playwright in an existing project?

Run npm init playwright@latest in the project folder, or install it manually with npm install -D @playwright/test followed by npx playwright install.