Module 0: Course roadmap and setup

Welcome! This module is the starting point of the course. With no prior Playwright experience, by the end of this module you’ll have a working test running on your own machine.

🎬 Video coming soon

What is Playwright and why does it matter

Playwright is an open-source browser automation framework built by Microsoft. It supports Chromium, Firefox, and WebKit (Safari), which means one test can run across all major browsers.

Why choose Playwright?

Fast — tests run in parallel
Reliable — auto-waiting means you never write sleep()
Powerful — API testing, network interception, auth state, mobile emulation — all built in
Beginner-friendly — the API reads like plain English

What we’ll build throughout the course

Over the course of these modules, we’ll build a real, working automation project. Each module adds a new layer:

Modules 0–3: Foundations — setup, locators, actions
Modules 4–6: Quality — assertions, flaky test prevention, configuration
Modules 7–10: Scale — POM, fixtures, API, auth
Modules 11–13: Professional level — visual testing, CI, final project

Shifting from manual QA to automation (a mindset change)

In manual QA you execute every step yourself: “I click this button, this text appears, this URL changes.” In automation, you write those same steps as code.

The key difference: a manual test runs once. An automated test can run hundreds of times, in seconds, with no human involvement.

Keep in mind as you make the shift:

Writing code is a skill you learn — you already have the testing mindset
Code errors are normal — nobody’s code works the first time
The Playwright API is readable — page.click('Login') makes it obvious what it does

Installing Node, VS Code, and Git

We’ll install these three tools. Each step is also shown in the module video — click the timestamp next to the step to jump directly to that part.

Node.js — LTS version. Go to nodejs.org and download the LTS version (not Current). Accept all default options in the installer. Then verify in your terminal:
Terminal window
```
node --version   # v20.x.x or higher
npm --version    # v10.x.x or higher
```
🎬 In the video: coming soon
Node.js installation — slide guide Slides — opens in a new tab
VS Code. Download the Stable version from code.visualstudio.com. After installing, add these extensions: Playwright Test for VSCode (to run tests directly from the editor) and ESLint (for code quality).

🎬 In the video: coming soon
VS Code installation — slide guide Slides — opens in a new tab
Git. Download from git-scm.com and accept the default options in the installer. Then verify:
Terminal window
```
git --version
```
🎬 In the video: coming soon
Git installation — slide guide Slides — opens in a new tab

As for browsers: Playwright installs its own browsers separately (in the next step) — don’t confuse them with your system browsers.

Installing Playwright

Create a new folder and install Playwright:

mkdir playwright-course
cd playwright-course
npm init playwright@latest

During installation you’ll be asked a few questions:

TypeScript or JavaScript? — choose TypeScript (we use TypeScript throughout the course)
tests folder name? — enter tests (the default)
GitHub Actions workflow? — false for now
Install Playwright browsers? — true (required)

Downloading the browsers may take a few minutes — that’s normal.

Creating your first Playwright project

Once installation is complete, take a look at the project structure:

ls

You should see the following files:

playwright-course/
├── tests/
│   └── example.spec.ts
├── playwright.config.ts
├── package.json
└── node_modules/

The `package.json`, `tests/`, and `playwright.config.ts` structure

`package.json`

This is your project’s “ID card.” It stores dependencies, scripts, and metadata. The Playwright script looks like this:

{
  "scripts": {
    "test": "playwright test"
  }
}

The `tests/` folder

All your .spec.ts files live here. Playwright automatically discovers every test file in this folder.

`playwright.config.ts`

This is Playwright’s main configuration file. From here you control:

Which browsers to run
What baseURL to use for all tests
Whether tests run in parallel
Whether failing tests should be retried

Running your first test

Run Playwright’s built-in example test:

npx playwright test

In the console you should see output like this:

Running 6 tests using 6 workers
  6 passed (8s)

Success! Playwright ran two test scenarios across three browsers (chromium, firefox, webkit).

Opening the HTML report

Playwright can display test results in a beautiful HTML report:

npx playwright show-report

This command opens the browser and shows, for each test:

Passed / failed status
Execution time
Screenshots and traces (on failure)

In CI environments this report is saved as an artifact.