Getting Started with Playwright Test Automation

Playwright has emerged as one of the most powerful tools for end-to-end testing of modern web applications. In this guide, I’ll walk you through setting up Playwright and writing your first automated test.

Why Playwright?

After working with various automation frameworks over the past 16 years, Playwright stands out for several reasons:

  • Cross-browser support: Test on Chromium, Firefox, and WebKit with a single API
  • Auto-waiting: Built-in smart waiting eliminates flaky tests
  • Modern architecture: Designed for modern web apps (SPAs, PWAs)
  • Fast execution: Parallel test execution out of the box
  • Developer experience: Excellent TypeScript support and debugging tools

Installation

First, let’s install Playwright in your project:

npm init playwright@latest

This command will:

  1. Install Playwright and browsers
  2. Create example tests
  3. Set up the configuration file

Writing Your First Test

Here’s a simple login test to get you started:

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

test('user can login successfully', async ({ page }) => {
  // Navigate to login page
  await page.goto('https://example.com/login');
  
  // Fill in credentials
  await page.fill('[data-testid="email"]', 'user@example.com');
  await page.fill('[data-testid="password"]', 'SecurePass123!');
  
  // Click login button
  await page.click('button[type="submit"]');
  
  // Verify successful login
  await expect(page).toHaveURL(/.*dashboard/);
  await expect(page.locator('[data-testid="user-menu"]')).toBeVisible();
});

Best Practices

From my experience implementing Playwright across multiple enterprise projects:

1. Use Data Test IDs

<button data-testid="login-btn">Login</button>

This makes your tests more resilient to UI changes.

2. Page Object Model

Organize your tests using the Page Object Model pattern:

export class LoginPage {
  constructor(private page: Page) {}
  
  async login(email: string, password: string) {
    await this.page.fill('[data-testid="email"]', email);
    await this.page.fill('[data-testid="password"]', password);
    await this.page.click('button[type="submit"]');
  }
}

3. Parallel Execution

Leverage Playwright’s built-in parallel execution:

// playwright.config.ts
workers: process.env.CI ? 2 : 4,

Running Tests

Execute your tests with:

# Run all tests
npx playwright test

# Run in headed mode
npx playwright test --headed

# Run specific test file
npx playwright test login.spec.ts

# Debug mode
npx playwright test --debug

CI/CD Integration

Playwright integrates seamlessly with CI/CD pipelines. Here’s a GitHub Actions example:

name: Playwright Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - name: Install dependencies
        run: npm ci
      - name: Install Playwright Browsers
        run: npx playwright install --with-deps
      - name: Run Playwright tests
        run: npx playwright test

Real-World Impact

In a recent client engagement through SDET Experts Pvt Ltd, we migrated from Selenium to Playwright:

  • 85% reduction in flaky tests
  • 3x faster test execution
  • 50% less maintenance overhead
  • Better developer adoption due to superior DX

Conclusion

Playwright represents the future of web test automation. Its modern architecture, excellent developer experience, and powerful features make it ideal for testing today’s complex web applications.

In my next post, I’ll dive deeper into advanced Playwright features including visual regression testing, network interception, and custom reporters.

Questions or experiences to share? Connect with me on LinkedIn or check out my code examples on GitHub.

Hari Prasad is a Test Automation Architect with 16 years of experience, currently providing consultancy services through SDET Experts Pvt Ltd.