Before you touch Playwright, you need three things installed on your machine. Skip this and you will waste an hour debugging environment issues instead of writing tests. Let me save you that hour.
Playwright runs on Node.js. You need version 18 or higher. If you already have Node installed, check your version. If not, download it from nodejs.org -- pick the LTS version, not the latest.
# Check if Node.js is installed and the version
node --version
# Should show v18.x.x or higher
npm --version
# npm comes bundled with Node.jsDo NOT install Node.js using sudo on Mac/Linux. Use nvm (Node Version Manager) instead. Installing with sudo causes permission headaches that will haunt every npm install you do in the future.
You can use any editor, but VS Code is the best choice for Playwright. Why? Because the official Playwright extension only works with VS Code. It lets you run tests with one click, debug visually, and pick locators without writing CSS selectors. Think of it like -- you CAN drive without a GPS, but why would you?
Open VS Code
Press Ctrl+Shift+X (or Cmd+Shift+X on Mac) to open Extensions
Search for "Playwright Test for VSCode" by Microsoft
Click Install -- it is free, published by Microsoft
Restart VS Code after installation
This extension gives you a Testing sidebar where you can see all your tests, run them individually or in groups, and see results inline. It also has a "Pick Locator" feature -- hover over any element in the browser and it gives you the best Playwright locator. We will use this heavily.
Also install the "Error Lens" extension in VS Code. It shows TypeScript errors inline right next to the problematic line. When you make a typo in a Playwright API call, you see the error immediately instead of waiting for the test to fail.
Q: What do you need to set up before writing Playwright tests?
A: Three things: Node.js 18 or higher (Playwright runs on Node), a code editor like VS Code, and the Playwright VS Code extension for running tests, debugging, and picking locators. After that, one command -- npm init playwright@latest -- sets up the project with browsers, config, and sample tests.
Key Point: You need Node.js 18+, VS Code, and the Playwright extension. Get these right and everything else is smooth.