Playwright Introduction - E2E Test Automation

What You’ll Learn in This Tutorial

✓ Playwright setup
✓ Writing basic tests
✓ Locators and assertions
✓ Page Object Model
✓ CI/CD integration

Step 1: Setup

npm init playwright@latest

# Install browsers
npx playwright install

Step 2: Basic Tests

// tests/example.spec.ts
import { test, expect } from '@playwright/test';

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

test('can navigate', async ({ page }) => {
  await page.goto('https://example.com');
  await page.click('text=More information');
  await expect(page).toHaveURL(/iana.org/);
});

Step 3: Locators

// Recommended order
page.getByRole('button', { name: 'Submit' });
page.getByLabel('Email');
page.getByPlaceholder('Enter email');
page.getByText('Welcome');
page.getByTestId('submit-button');

// CSS/XPath
page.locator('.submit-btn');
page.locator('//button[@type="submit"]');

Step 4: Actions and Assertions

test('form submission', async ({ page }) => {
  await page.goto('/contact');

  // Form input
  await page.getByLabel('Name').fill('Test User');
  await page.getByLabel('Email').fill('test@example.com');
  await page.getByLabel('Message').fill('Hello World');

  // Submit
  await page.getByRole('button', { name: 'Submit' }).click();

  // Assertions
  await expect(page.getByText('Thank you')).toBeVisible();
  await expect(page).toHaveURL('/thank-you');
});

Step 5: Page Object Model

// pages/LoginPage.ts
import { Page, Locator } from '@playwright/test';

export class LoginPage {
  readonly page: Page;
  readonly emailInput: Locator;
  readonly passwordInput: Locator;
  readonly submitButton: Locator;

  constructor(page: Page) {
    this.page = page;
    this.emailInput = page.getByLabel('Email');
    this.passwordInput = page.getByLabel('Password');
    this.submitButton = page.getByRole('button', { name: 'Login' });
  }

  async goto() {
    await this.page.goto('/login');
  }

  async login(email: string, password: string) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.submitButton.click();
  }
}

// tests/login.spec.ts
import { LoginPage } from '../pages/LoginPage';

test('user can login', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.login('test@example.com', 'password');
  await expect(page).toHaveURL('/dashboard');
});

Step 6: Running Tests

# Run all tests
npx playwright test

# UI mode
npx playwright test --ui

# Specific file
npx playwright test login.spec.ts

# Debug mode
npx playwright test --debug

# Show report
npx playwright show-report

Step 7: CI/CD Configuration

# .github/workflows/playwright.yml
name: Playwright Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report
          path: playwright-report/

Summary

Playwright is a fast and reliable E2E testing framework. Multi-browser support and UI mode enable efficient test development.