Getting Started with Playwright: Installation, Setup, and Your First Test

Introduction

Playwright has rapidly become the preferred automation framework for modern web applications. Developed by Microsoft and built by the same engineers who previously worked on Puppeteer, Playwright offers fast, reliable, and cross-browser automation capabilities out of the box.

Unlike older automation tools, Playwright was designed for modern web applications and includes built-in auto-waiting, network interception, parallel execution, API testing capabilities, and powerful debugging tools such as Trace Viewer.

In this tutorial, you'll learn how to install Playwright, create your first test, and execute it across multiple browsers.

Why Playwright?

Playwright offers several advantages over traditional automation tools:

• Cross-browser support (Chromium, Firefox, WebKit)
• Automatic waiting for elements
• Fast parallel execution
• Built-in API testing support
• Network interception and mocking
• Powerful debugging and trace viewer
• Excellent TypeScript support
• Modern architecture built for today's web applications

Prerequisites

Before installing Playwright, make sure you have:

• Node.js 18 or later
• npm or yarn installed
• Basic knowledge of JavaScript or TypeScript
• Visual Studio Code (recommended)

Verify installation:

node -v
npm -v

Install Playwright

Create a new project:

mkdir playwright-demo
cd playwright-demo
npm init -y

Install Playwright:

npm init playwright@latest

You will see several prompts:

• ✔ Do you want to use TypeScript? → Yes
• ✔ Where to put tests? → tests
• ✔ Add GitHub Actions workflow? → Yes
• ✔ Install browsers? → Yes

Project Structure

Playwright creates the following structure:

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

Your First Test

Create tests/google.spec.ts:

import { test, expect } from '@playwright/test';

test('Google search page loads successfully', async ({ page }) => {
  await page.goto('https://www.google.com');

  await expect(page).toHaveTitle(/Google/);
});

Execute the Test

Run:

npx playwright test

Output:

Running 1 test using 1 worker

✓ google.spec.ts

1 passed (2.4s)

Run in Headed Mode

npx playwright test --headed

The browser window will appear during execution.

Generate HTML Report

npx playwright show-report

Playwright automatically generates a rich HTML report containing:

• Execution results
• Screenshots
• Error messages
• Test duration

Execute Tests on a Specific Browser

npx playwright test --project=chromium
npx playwright test --project=firefox
npx playwright test --project=webkit

Why Companies Are Moving to Playwright

Many organizations are migrating from Selenium to Playwright because of:

• Faster execution
• Reduced flakiness
• Better developer experience
• Easier parallel execution
• Native support for modern web applications

Companies ranging from startups to Fortune 500 enterprises are adopting Playwright as their primary automation framework.

What's Next?

In the next tutorial, we'll cover:

• Locators
• Auto-waiting
• Assertions
• Page interactions
• Best practices for writing stable tests

Final Thoughts

Playwright is more than just a browser automation tool. It is a complete testing platform capable of handling UI testing, API testing, mocking, authentication, visual testing, and CI/CD integration.

Learning Playwright today is one of the highest ROI investments for modern SDETs and automation engineers.