⚙️ Installation — TypeScript · Java · Python

Installation — TypeScript · Java ·: Playwright's installation works like an industry-certified toolbox kit that already knows which adapters you need: npm init playwright@latest

Playwright's installation works like an industry-certified toolbox kit that already knows which adapters you need: npm init playwright@latest downloads Chromium, Firefox, and WebKit engines, the TypeScript compiler, and the test runner all in a single command. But why wasn't Selenium this straightforward? With Selenium, you had to download a separate driver for each browser (ChromeDriver, GeckoDriver, SafariDriver), manually manage version compatibility, and separately configure your test runner — even after adding the Maven dependency in Java, you still had to provision browser drivers on the system yourself. Playwright manages its browser binaries in its own ~/.cache/ms-playwright directory, so there are no version conflicts. For QA engineers this matters most during CI/CD setup: instead of asking "which ChromeDriver do I download — is it Chrome 117 or 118?" on a fresh runner, you write one command in the pipeline script and the correct version always arrives.

1️⃣ TypeScript / JavaScript Setup

Node.js 18+ must be installed. Check: node --version

TypeScript — Auto Setup (Recommended)

Starts the Playwright installer. Asks language (TS/JS), folder name, CI setup. Press ENTER for all — defaults are correct.

Runs the example tests. 6 tests across 3 browsers — all should PASS.

Opens the HTML report in the browser.

Micro Lab: Playwright — Actions

Replace the TODO line with the critical line from the expected solution. This is not a real runtime; the goal is to reinforce writing the correct structure in a controlled way.

What Does playwright.config.ts Actually Do at Test Runtime?

The test runner scans testDir first…

Before running, the test runner reads testDir: "./tests" and scans ONLY that folder — if you accidentally put a test file elsewhere, Playwright never sees it.

When page.goto("/login") is called…

page.goto("/login") gets resolved as baseURL + "/login" — so when the environment changes (staging/prod), you edit ONE line (baseURL) instead of touching hundreds of goto() calls inside your tests.