Learn Playwright - Pre-Requisite Skills & Setup Environment

#Introduction

Welcome to the Learn Playwright series! This series will guide you through mastering Playwright — Microsoft's modern end-to-end testing and browser automation framework — from core concepts all the way to production readiness. There are 23 episodes in total, organized into six phases.

But before writing your first test, there are some basic skills and software you must have. Why do these prerequisites matter? Because Playwright interacts with the browser like a real user: it clicks, types, and reads web pages. If you don't understand how the browser works yet, the entire Playwright API will feel like a black box.

Episode 0 is your roadmap: we'll make sure you have the basic skills, set up Node.js, install Playwright along with the browser binaries, and run your first verification. Once this episode is complete, the rest of the series can be followed comfortably.

#Basic Skills You Must Master

#Web Fundamentals: HTML, CSS, DOM, and HTTP

Playwright operates on top of the web platform. You must understand how a page is built from HTML, how CSS determines the layout, how the DOM (Document Object Model) represents the page in the browser's memory, and how HTTP moves data between the browser and the server. Without these four foundations, terms like selector or response will only confuse you.

#JavaScript or TypeScript

Playwright runs on Node.js, and every example in this series uses TypeScript with full JavaScript support. Make sure basic syntax like arrow functions, async/await, destructuring, and module imports feel familiar. TypeScript is optional, but highly recommended because autocompletion and type safety make tests easier to maintain.

#Automated Testing Concepts and the Test Pyramid

You should also understand the concept of automated testing: a test is written once and executed repeatedly by a machine. Get to know the test pyramid — lots of unit tests at the base, some integration tests in the middle, and a few end-to-end tests at the top. Playwright is the tool for the topmost layer: testing the complete flow of an application exactly like a user would.

#Software You Need to Prepare

#Node.js and Package Manager

Playwright requires Node.js version 18 or later. To manage dependencies, you can use npm, yarn, or pnpm. This series uses npm because it is the most universal. First, verify your Node.js installation:

node --version
npm --version

If a warning appears saying your Node.js version is outdated, upgrade it before continuing. The LTS (Long Term Support) version is the safest choice for a test project.

#Playwright Package and Browser Binaries

Playwright doesn't just install an npm package — it also installs browser binaries for Chromium, Firefox, and WebKit. You don't need to install browsers manually; there's a dedicated Playwright command that downloads them. The installation itself will be done in episode 3, but make sure your storage has room, because the browser binaries take up about 2-4 GB.

#IDE and Git

Set up VS Code with the official Playwright extension to get features like running tests directly from the editor and selector autocompletion. Also set up Git for version control of your test suite:

git --version

#Recommended Minimum Hardware

Running an automated browser is heavier than opening a regular browser. Here are the recommended minimum specifications:

• 4 GB RAM minimum, ideally 8 GB for running tests in parallel.
• Dual-core CPU, which you can leverage with npx playwright test --workers=2.
• 5 GB or more of storage for Node.js, the browser binaries, and test artifacts like screenshots and traces.

If you're working with an older laptop, don't worry — you can still follow this series in single-worker mode and avoid running multiple browsers at once.

#Environment Verification

#Installing Playwright

Before episode 3, do a light installation to make sure everything is ready:

mkdir playwright-project
cd playwright-project
npm init -y
npm install -D @playwright/test
npx playwright install chromium

The command npx playwright install chromium downloads the Chromium browser to your system. You can add firefox and webkit now, or wait until episode 10 when we cover cross-browser testing.

#Running Your First Verification

Create a simple test file and run it:

Your first Playwright verification

const { test, expect } = require('@playwright/test');
 
test('page title is correct', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle(/Example Domain/);
});

Run it with:

npx playwright test

If there are no errors and you see a passed message, your environment is ready. The page.goto() method opens the page, and expect(page).toHaveTitle() verifies its title — we'll dissect both in episodes 3 and 7.

#Closing

In this episode 0 you've laid the foundation for the whole series: understanding web and JavaScript fundamentals, the concepts of automated testing and the test pyramid, setting up Node.js, installing Playwright with the Chromium browser, and verifying your first run.

Key takeaways:

• Playwright automates the browser like a real user: master HTML, CSS, DOM, and HTTP first.
• Understand that end-to-end testing sits at the top of the test pyramid.
• Node.js version 18 or later is a hard requirement for running Playwright.
• Browser binaries must be installed via npx playwright install, not manually.
• First verification: open a page, check its title, and make sure the test passes.

In the next episode we'll discuss the history, background, and why to choose Playwright — from its roots in Microsoft's Puppeteer team, the advantages of auto-waiting and cross-browser support, to its comparison with Selenium, Cypress, and Puppeteer. Make sure your environment is ready, because the Learn Playwright journey is just getting started!