📦 Module 2 – Installing Playwright

Module Overview

Detail	Info
Difficulty
Time Required	⏱️ 15-20 minutes
Prerequisites	Node.js installed
Outcome	Fully functional Playwright test project

✅ Learning Objectives

After completing this module, you will be able to:

Create a new Playwright project structure
Initialize Node.js configuration
Install Playwright with browser support
Configure test settings properly
Run your first automated test suite
Understand the folder structure of a Playwright project

🛠️ Prerequisites Check

Before starting, verify you have these tools installed:

Step 1: Verify Node.js is Installed

Open your terminal and run:

node --version

You should see output similar to:

v18.x.x or higher

If you don't have Node.js, download it from: nodejs.org

Pro Tip

Use Node.js version 18 or higher for best compatibility with latest Playwright features.

Step 2: Verify npm is Available

npm --version

Expected output:

9.x.x or higher

npm comes bundled with Node.js, so installing Node usually handles this automatically.

🚀 Installation Steps

Follow these steps in order to set up your Playwright environment.

📁 Step 1: Create a Project Folder

Create a dedicated directory for your automation tests:

# Create the main project directory
mkdir playwright-tests

# Navigate into it
cd playwright-tests

Why Create Separate Folders?

We keep our course website (Docusaurus) separate from our test projects (Playwright) because:

Clean separation of concerns
Easier version control (git)
Can host tests on different CI pipelines
No node_modules conflicts

📄 Step 2: Initialize Node Project

Initialize a new Node.js package:

npm init -y

What this does:

Creates package.json file
Sets up default project metadata
Enables npm dependency management

Generated package.json looks like:

{
  "name": "playwright-tests",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {},
  "keywords": [],
  "author": "",
  "license": "ISC"
}

DON'T SKIP THIS STEP

Without initializing Node, you cannot install Playwright packages or run scripts properly!

🎯 Step 3: Install Playwright

Install Playwright along with its dependencies:

npm init playwright@latest

During installation, you'll be prompted with questions:

Prompt	Recommended Choice	Explanation
TypeScript or JavaScript?	JavaScript	Easier for beginners; this course uses JS
Name of site/tests folder?	Press Enter (default: `tests`)	Standard convention
Add GitHub Actions workflow?	No	We'll customize this later
Install browsers?	Yes	Essential for running tests locally

Choose:
• JavaScript
• Default test folder
• Install browsers → Yes
• GitHub Actions → No

What Gets Installed

Playwright installs these components:

@playwright/test – Main testing framework
Browsers: Chromium, Firefox, WebKit
playwright.config.js – Configuration file
Example test files – To get started quickly
Trace Viewer – Debugging tool

Total space used: ~300-400 MB (includes browser binaries)

⏱️ Installation Time Expectations

Component	Time Required
Downloading packages	~30 seconds
Installing dependencies	~45 seconds
Downloading browser binaries	~2-3 minutes
TOTAL	~4-5 minutes

Actual time varies based on internet speed.

🧪 Step 4: Run Example Tests (Verify Installation)

Once installation completes, validate everything works:

npx playwright test

Expected successful output:

Running 3 tests using 3 workers

  ✓ example.spec.js:4:1 › has title (619ms)
  ✓ example.spec.js:9:1 › get started link (471ms)
  ✓ example.spec.js:12:1 › check cta button (498ms)

  3 passed (2s)

To open last HTML report run:
  npx playwright show-report

Test Passed!

🎉 Congratulations! Your Playwright environment is now ready!

If you see "3 passed", your installation was successful!

👀 Step 5: Open Test Report

View the beautiful HTML report generated by Playwright:

npx playwright show-report

If port 9323 is busy (common error), use:

npx playwright show-report --port=9324

Then visit in browser:

http://localhost:9324

Report features you'll see:

Pass/fail status with colors
Screenshot thumbnails per step
Timeline visualization
Network request logs
Console logs captured

📂 Understanding Project Structure

After installation, your playwright-tests/ folder should look like this:

playwright-tests/
│
├── node_modules/           ← Dependencies (don't edit manually)
│   └── @playwright/
│       └── test/
│
├── tests/                  ← Your test files go here ✏️
│   └── example.spec.js    ← Sample test (can delete later)
│
├── playwright.config.js    ← Configuration settings ⚙️
│
├── package.json            ← Project metadata & scripts
├── package-lock.json       ← Exact dependency versions
│
└── playwright-report/      ← Auto-generated reports 📊

⚙️ Quick Config Overview

Your default playwright.config.js includes:

Setting	Value	Purpose
`testDir`	`'./tests'`	Where to find test files
`fullyParallel`	`true`	Run tests simultaneously
`retries`	`0` locally / `2` on CI	Retry failed tests
`reporter`	`'html'`	Generate HTML report
`projects`	`[chromium, firefox, webkit]`	Browser targets

🔧 Common Installation Issues & Fixes

Issue 1: Port Already in Use

Error message:

Error: listen EADDRINUSE: address already in use ::1:9323

Solution:

# Use a different port
npx playwright show-report --port=9325

Or kill existing process:

lsof -i :9323 | grep LISTEN
kill -9 <PID>

Issue 2: Permission Denied (Mac/Linux)

Error message:

EACCES: permission denied, mkdir '/usr/local/lib/node_modules'

Solution:

# Use npx instead of global install
npx playwright test

# Or fix permissions
sudo chown -R $(whoami) ~/.npm
sudo chown -R $(whoami) /usr/local/lib/node_modules

Issue 3: Old Node Version

Error message:

Playwright requires Node.js >= 14

Solution: Upgrade Node.js:

Download latest LTS from nodejs.org
Or use version manager: nvm install --lts

Issue 4: Tests Not Found

Error message:

No tests found.

Common causes:

Running command from wrong directory
Test files not in tests/ folder
File extension mismatch (.spec.js vs .test.js)

Fix:

cd playwright-tests          # Always run from here!
npx playwright test --list    # Check what tests are found

📊 Installation Checklist

Before proceeding to Module 3, confirm each item:

Environment Setup ✅

Item	Status
Node.js v18+ installed	☐
npm available via terminal	☐
Project folder created	☐
`package.json` initialized	☐
Playwright installed successfully	☐
Browsers downloaded (Chromium/Firefox/WebKit)	☐

Validation Tests ✅

Item	Status
Ran `npx playwright test`	☐
Saw passing tests ("X passed")	☐
Opened HTML report (`show-report`)	☐
Report loaded in browser correctly	☐

Configuration Verified ✅

Item	Status
Checked `playwright.config.js` exists	☐
Understand `testDir: './tests'` location	☐
Know how to run single test file	☐

🎓 Key Takeaways from This Module

TL;DR – What You Need to Remember:

Always run commands from inside playwright-tests/ folder, not the parent directory
npm init -y → npm init playwright@latest = standard setup sequence
Choose JavaScript (not TypeScript) if following this exact course
Install browsers during setup (unless using CI docker images)
Verify installation by running: npx playwright test
Check reports with: npx playwright show-report

Previous Module: ← Module 1 – Introduction to Playwright

Up Next: → Module 3 – Writing Your First Test

❓ Frequently Asked Questions

Q: Can I use Yarn instead of npm?

Yes! Replace all npm commands with yarn:

yarn init
yarn create @playwright/latest
yarn add @playwright/test
yarn playwright test

Both work perfectly with Playwright.

Q: Do I need to install all 3 browsers?

Not necessarily. For this beginner course, Chromium is sufficient.

You can limit to Chromium-only config:

// playwright.config.js
projects: [
  { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
],

Saves ~200MB disk space.

Q: How much disk space does Playwright need?

Approximate sizes:

Component	Size
Playwright npm package	~15 MB
Chromium binary	~150 MB
Firefox binary	~80 MB
WebKit binary	~70 MB
Total	~315 MB

Q: Should I commit node_modules to Git?

NO! Add node_modules/ to .gitignore.

Team members/can install dependencies themselves via:

npm ci  # Install exact versions from lockfile

🚨 Module Completion Badge

✅ MODULE 2 COMPLETE!

You've successfully installed Playwright and can now:

✅ Create Playwright projects from scratch
✅ Initialize proper project structure
✅ Run automated browser tests
✅ View detailed HTML test reports

Ready for Module 3: Writing Your First Custom Test! →

🚀 Keep Going

Apply what you learned in this module:

🧪 Practice Exercises — hands-on tasks to build real skills
🏗️ Real Projects — real-world automation examples

✅ Learning Objectives​

🛠️ Prerequisites Check​

Step 1: Verify Node.js is Installed​

Step 2: Verify npm is Available​

🚀 Installation Steps​

📁 Step 1: Create a Project Folder​

📄 Step 2: Initialize Node Project​

🎯 Step 3: Install Playwright​

⏱️ Installation Time Expectations​

🧪 Step 4: Run Example Tests (Verify Installation)​

👀 Step 5: Open Test Report​

📂 Understanding Project Structure​

⚙️ Quick Config Overview​

🔧 Common Installation Issues & Fixes​

Issue 1: Port Already in Use​

Issue 2: Permission Denied (Mac/Linux)​

Issue 3: Old Node Version​

Issue 4: Tests Not Found​

📊 Installation Checklist​

Environment Setup ✅​

Validation Tests ✅​

Configuration Verified ✅​

🎓 Key Takeaways from This Module​

🔗 Quick Navigation​

❓ Frequently Asked Questions​

🚨 Module Completion Badge​

🚀 Keep Going​

✅ Learning Objectives

🛠️ Prerequisites Check

Step 1: Verify Node.js is Installed

Step 2: Verify npm is Available

🚀 Installation Steps

📁 Step 1: Create a Project Folder

📄 Step 2: Initialize Node Project

🎯 Step 3: Install Playwright

⏱️ Installation Time Expectations

🧪 Step 4: Run Example Tests (Verify Installation)

👀 Step 5: Open Test Report

📂 Understanding Project Structure

⚙️ Quick Config Overview

🔧 Common Installation Issues & Fixes

Issue 1: Port Already in Use

Issue 2: Permission Denied (Mac/Linux)

Issue 3: Old Node Version

Issue 4: Tests Not Found

📊 Installation Checklist

Environment Setup ✅

Validation Tests ✅

Configuration Verified ✅

🎓 Key Takeaways from This Module

🔗 Quick Navigation

❓ Frequently Asked Questions

🚨 Module Completion Badge

🚀 Keep Going