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

Remember: Playwright drives Chromium, Firefox, and WebKit, so one test covers all major browsers — with auto-waiting built in (no sleep()).

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

Don’t worry if terms like POM, fixtures, or CI are new — each gets a full module when we reach it.

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.getByText('Login').click() makes it obvious what it does

Remember: an automated test is your manual steps written as code — write it once, run it hundreds of times.

Installing Node, VS Code, and Git

We’ll install these three tools. Each step’s slide guide is linked below (video walkthroughs coming soon).

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

This is an interactive setup — use the arrow keys or type the value, then press Enter for each question:

TypeScript or JavaScript? — choose TypeScript (we use TypeScript throughout the course)
tests folder name? — enter tests (the default)
GitHub Actions workflow? — false for now (CI automation — covered in a later module)
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, open the project folder in VS Code (File → Open Folder) and look at the Explorer on the left. You should see this structure:

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

Remember: package.json = scripts & dependencies, tests/ = your .spec.ts files, playwright.config.ts = settings (browsers, baseURL, retries).

Running your first test

Run Playwright’s built-in example test:

npx playwright test

(We defined a test script in package.json, so npm test runs the same thing — we’ll use the explicit npx playwright test throughout the course.)

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).

Remember: npx playwright test runs everything — the example produced 6 results because 2 tests × 3 browsers = 6 runs.

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.

Get the practice app (TestMarket Lab)

From Module 2 onward, the exercises are written against TestMarket Lab — a small but realistic web app (login, products, cart, checkout, and an admin area) that runs on your own machine. It’s a separate project from your playwright-course folder: you run the app in one terminal and your tests in another.

Clone, install, and start it:

git clone https://github.com/TesterBaku/testmarket-lab
cd testmarket-lab
npm install
npm start

Leave it running and open http://localhost:3000 — you should see the TestMarket storefront.

Then point your test project at it by adding a baseURL to playwright.config.ts:

export default defineConfig({
  use: {
    baseURL: 'http://localhost:3000',
  },
});

Now the relative paths in the exercises (like page.goto('/auth/login')) resolve to the running app.

Two ways to practice: BrauzerLab runs in your browser with nothing to install — great for quick drills; TestMarket Lab runs locally and is what you write full test suites against.

Key takeaways

Playwright is a cross-browser automation framework — one test runs on Chromium, Firefox, and WebKit, with auto-waiting built in.
You installed three tools: Node.js (runs JavaScript), VS Code (your editor), and Git (version control).
Three files matter in a project: package.json (scripts & dependencies), the tests/ folder (your .spec.ts files), and playwright.config.ts (settings — browsers, baseURL, retries).
Run tests with npx playwright test; view results with npx playwright show-report.

Checklist — you should now have: Node, VS Code, and Git installed; a playwright-course project created with npm init playwright@latest; the example test passing with an HTML report you can open; and TestMarket Lab cloned and running at http://localhost:3000 for the exercises ahead.

In Module 1, we cover the JavaScript and TypeScript you’ll use in every test file.