Skip to main content

How to Install Playwright | Step-by-Step Guide for Beginners

How to Install Playwright | Step-by-Step Guide for Beginners

1. Prerequisites

Before you start, make sure you have:

1. Node.js installed

  • Recommended versions: 20.x, 22.x or 24.x
  • Check your version:
node -v
  • If you don’t have it, download it from the official Node.js website and install it.

2. Supported Operating System

  • Windows: Windows 11+ or Windows Server 2019+ (WSL also works)
  • macOS: macOS 14 (Ventura) or later
  • Linux: Debian 12/13 or Ubuntu 22.04 / 24.04 (x86-64 or arm64)

3. A terminal and a code editor

  • Any terminal (Command Prompt, PowerShell, Terminal, etc.)
  • A code editor like Visual Studio Code (VS Code) is recommended.

2. Create or Open a Project Folder

You can use Playwright in:

  • A new project (fresh folder), or
  • An existing Node.js project.

For a new project

  1. Create a new folder and navigate into it:
mkdir my-playwright-project
cd my-playwright-project
  1. (Optional but recommended) Initialize package.json:
npm init -y

This creates a basic package.json file to manage your dependencies.

For an existing project

Just go to that project folder in your terminal:

cd path/to/your/project

3. Install Playwright Test

Use this command (in your project folder):

npm init playwright@latest

This command does two things:

  • Installs the @playwright/test package (the test runner).
  • Sets up a basic folder structure and configuration for you.

3.1 Answering the Prompts

When you run npm init playwright@latest, it will ask:

  1. TypeScript or JavaScript?
    • Default: TypeScript
    • TypeScript gives you type-safety and better autocomplete.
    • JavaScript is fine if you prefer no build step.
  2. Tests folder name
    • Default: tests
    • If there is already a tests folder, it suggests e2e.
    • This is where your Playwright test files will live.
  3. Add a GitHub Actions workflow (recommended for CI)?
    • If you select Yes, a .github/workflows/playwright.yml file will be created.
    • This lets your tests run automatically when you push to GitHub (CI).
  4. Install Playwright browsers? (default: yes)
    • If you choose Yes, Playwright downloads the browser engines it needs (Chromium, Firefox, WebKit).
    • These are separate from the browsers installed on your machine; they’re custom, test-friendly builds.

You can run npm init playwright@latest again later. It will not overwrite existing tests; it only adds missing config or files.

4. What Gets Installed / Project Structure

After the setup, you’ll typically see something like this:

playwright.config.ts   # Main Playwright configuration file
package.json           # Node.js project config + dependencies
package-lock.json      # Or yarn.lock / pnpm-lock.yaml
e2e/
  example.spec.ts      # Example test file

4.1 playwright.config.ts

This file controls global test settings, such as:

  • Browsers to run on (Chromium, Firefox, WebKit)
  • Timeouts (how long to wait for actions and tests)
  • Retries (how many times to retry failing tests)
  • Projects (e.g., run the same tests against Chrome Desktop, Mobile Safari, etc.)
  • Reporters (e.g., show results in terminal, HTML report, JSON, etc.)

You’ll rarely touch this at the very beginning, but it’s your central place when you want to change how tests run.

4.2 e2e/example.spec.ts

This is a small sample test file that:

  • Opens a browser
  • Navigates to a page (usually Playwright’s example page)
  • Performs some actions
  • Checks (asserts) that something is on the page

It’s there to show you the basic API and give you something to run immediately.

5. Running the Example Test (CLI Mode)

To run tests, use:

npx playwright test

What happens:

  • Playwright starts by default in headless mode (no visible browser window).
  • It runs tests in parallel across:
    • Chromium
    • Firefox
    • WebKit
    (This is configured in playwright.config and can be changed.)
  • Test progress and summary appear in the terminal:
    • How many tests passed/failed
    • What browsers were used
    • Total duration

5.1 Useful CLI Options

You can combine these options with npx playwright test:

  1. Run in headed mode (show the browser window):
npx playwright test --headed

This lets you visually see what the test is doing.

  1. Run only one browser / project:
npx playwright test --project=chromium

Replace chromium with firefox or webkit as needed.

  1. Run a single test file:
npx playwright test e2e/example.spec.ts
  1. Run with the built-in Testing UI:
npx playwright test --ui

(UI mode is explained in more advanced docs, but this is the basic command.)

If you want more advanced filters (e.g., run tests by name/tag, shard across multiple machines, configure retries), that’s covered in more detailed “Running Tests” docs — but the above is enough to get started.

6. Generating & Viewing the HTML Test Report

After a test run, Playwright can generate a rich HTML report showing:

  • Which tests passed / failed / skipped / flaky
  • Filter by browser (Chromium/Firefox/WebKit)
  • Test details, errors, steps, and attachments

By default:

  • The HTML report is generated after the run.
  • It auto-opens only when there are failures.

To open the last report manually, use:

npx playwright show-report

This will:

  • Start a small local server
  • Open the report in your default browser

From there you can click into any test:

  • See screenshots, logs, trace files (if configured)
  • Inspect error messages and stack traces
  • View timelines of what happened during the test

Comments

Post a Comment

Popular posts from this blog

Step-by-Step: Launch Browser, Context, and Page in Playwright and Run Test and Configuration (JavaScript)

🎥 Setup Browser, Context, Page & Run Config Test Scripts with package.json & playwright.config.js Step-by-Step: Launch Browser, Context, and Page in Playwright and Run Test and Configuration (JavaScript) 1. Install Playwright You can install Playwright using the following command: npm init playwright@latest 2. Create a Basic Test Script Understand the core Playwright architecture: Element Description browser Controls the browser instance (like Chrome, Firefox, etc.) context Acts like a separate browser profile (cookies, localStorage are isolated) page A single browser tab where interaction happens 3. Run the Test npx playwright test example.spec.js Ways to Run TypeScript Tests Way Command Notes 🟢 Via npx npx playwright test Uses built-in TypeScript support 🟢 With s...
Post a Comment
Read more

Playwright Test Structure in Details -Session-02

🎥 Playwright: test.only, Hooks & Grouping with test.describe Explained Let’s go step-by-step , showing how to build from a single test , to using beforeEach / afterEach , and then organizing things with test.describe . ✅ Step 1: Basic Single Test with test.only import { test, expect } from '@playwright/test' ; test. only ( '🚀 Basic test - check title' , async ({ page }) => { await page. goto ( 'https://example.com' ); await expect (page). toHaveTitle ( /Example Domain/ ); }); test.only ensures only this test runs — great for debugging. ✅ Step 2: Add beforeEach and afterEach import { test, expect } from '@playwright/test' ; test. beforeEach ( async ({ page }) => { console . log ( '🔄 Setting up before each test' ); await page. goto ( 'https://example.com' ); }); test. afterEach ( async ({ page }, testInfo) => { console . log ( `📦 Finished test: ${testInfo.title} `); }); test. only ( ...
Post a Comment
Read more

Playwright Locators in JavaScript (Complete Guide)

🎯 Playwright Locators in JavaScript (Complete Guide) This guide explains each Playwright locator with: ✅ What it is 🕐 When to use ⚙️ How to use it 🎯 Benefits 🧪 Code Examples 🔹 1. Locator by ID ✅ What: Selects an element with a unique id . 🕐 When: Element has a unique id . ⚙️ How: page.locator('#username') 🎯 Benefit: Fast and reliable. <input id="username" /> await page.locator('#username').fill('John'); 🔹 2. Locator by Class ✅ What: Selects by class . 🕐 When: Repeated or styled elements. ⚙️ How: page.locator('.password') 🎯 Benefit: Useful for shared styling. <input class="password" /> await page.locator('.password').fill('12345'); 🔹 3. Locator by Text ✅ What: Matches visible element text. 🕐 When: For buttons, links, etc. ⚙️ How: page.getByText('Login') 🎯 Benefit: Human-readable. <button>Login...
Post a Comment
Read more