Playwright Intro

What is Playwright?

Playwright is an open-source end-to-end (E2E) testing and browser automation framework developed by Microsoft.

It allows you to automate modern web browsers like:

  • Chromium (Chrome, Edge)
  • Firefox
  • WebKit (Safari engine)

You can use it for:

  • UI testing
  • Web scraping
  • Form automation
  • Performance checks
  • API testing
  • Cross-browser testing

Official website: https://playwright.dev

Why Playwright is Popular

Key Features

  • Fast and reliable
  • Auto-waits for elements
  • Supports multiple browsers
  • Parallel test execution
  • Built-in screenshots, videos, and tracing
  • Headless and headed modes
  • Mobile emulation
  • API testing support

Installation

Using Node.js

First install Node.js, then run:

npm init playwright@latest

Or install manually:

npm install -D @playwright/test
npx playwright install

Basic Folder Structure

project/
├── tests/
│   └── example.spec.js
├── playwright.config.js
└── package.json

Your First Test

Create a file:

// tests/example.spec.js

const { test, expect } = require('@playwright/test');

test('homepage has title', async ({ page }) => {
  await page.goto('https://example.com');

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

Run the test:

npx playwright test

Common Commands

Run all tests

npx playwright test

Run in headed mode

npx playwright test --headed

Open Playwright UI Mode

npx playwright test --ui

Generate Code Automatically

npx playwright codegen https://example.com

Core Concepts

Browser

const browser = await chromium.launch();

Page

Represents a browser tab.

const page = await browser.newPage();

Locators

Used to find elements.

page.locator('#login')
page.getByText('Submit')
page.getByRole('button')

Example: Login Test

const { test, expect } = require('@playwright/test');

test('login test', async ({ page }) => {
  await page.goto('https://example.com/login');

  await page.fill('#username', 'admin');
  await page.fill('#password', 'password');

  await page.click('button[type="submit"]');

  await expect(page.locator('.welcome'))
    .toContainText('Welcome');
});

Auto-Waiting

One of Playwright's biggest advantages is automatic waiting.

You usually do NOT need manual waits like:

await page.waitForTimeout(5000);

Playwright automatically waits for:

  • Elements to appear
  • Buttons to become clickable
  • Navigation to complete

Debugging Tools

Trace Viewer

npx playwright show-trace trace.zip

Screenshots

await page.screenshot({
  path: 'page.png'
});

Video Recording

Can be configured in playwright.config.js.

Playwright vs Selenium

Feature Playwright Selenium
Speed Faster Slower
Auto Waits Built-in Mostly Manual
Modern Browser Support Excellent Good
Setup Complexity Easy Medium
Multi-tab Handling Excellent More Complex

Supported Languages

  • JavaScript
  • TypeScript
  • Python
  • Java
  • .NET

Example in Python:

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()

    page.goto("https://example.com")

    print(page.title())

    browser.close()

Best Learning Resources

When to Use Playwright

Choose Playwright if you need:

  • Modern web application testing
  • CI/CD automation
  • Cross-browser testing
  • Fast and stable E2E tests
  • Reliable automation for React, Vue, and Angular applications

Simple Learning Path

  1. Install Playwright
  2. Learn Locators
  3. Understand Assertions
  4. Write Small Tests
  5. Learn Fixtures and Hooks
  6. Add CI/CD Integration
  7. Use Tracing and Debugging Tools
  8. Learn Page Object Model (POM)

Conclusion

Playwright is one of the most powerful modern browser automation frameworks available today. Its speed, reliability, auto-waiting capabilities, and excellent cross-browser support make it a preferred choice for test automation engineers and developers.

Whether you are testing web applications, automating repetitive tasks, or building a robust CI/CD testing pipeline, Playwright provides an efficient and developer-friendly solution.