Playwright E2E Testing | Shyam

Overview

Playwright is a framework for testing modern web applications with support for all browsers - Chrome, Firefox, and WebKit. Write tests once and run them across all browsers.

Key Features

Cross-Browser: Chrome, Firefox, WebKit with consistent behavior
Mobile Testing: Test on mobile devices and tablets
Network Simulation: Simulate slow networks and latency
Auto-Wait: Smart waiting for elements and network
Screenshots & Videos: Capture visual artifacts

Quick Start

npm install -D @playwright/test

Write Tests

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

test('should add item to cart', async ({ page }) => {
  await page.goto('https://example.com')
  
  // Find and click product
  await page.click('text=Product Name')
  
  // Verify product page
  await expect(page).toHaveURL(/.*product/)
  
  // Add to cart
  await page.click('button:has-text("Add to Cart")')
  
  // Verify cart updated
  await expect(page.locator('.cart-count')).toContainText('1')
})

Advanced Patterns

Mobile Testing

test('mobile responsive', async ({ browser }) => {
  const context = await browser.newContext({
    viewport: { width: 375, height: 667 }
  })
  const page = await context.newPage()
  await page.goto('https://example.com')
  // Mobile testing
})

Network Interception

await page.route('**/api/**', route => {
  route.abort()
})

await page.goto('https://example.com')
await expect(page.locator('text=Error')).toBeVisible()

Playwright supports debugging with Inspector and automatic video recording.