Playwright 1.49: The Complete E2E Testing Guide

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

test.describe('Blog Navigation', () => {
  test('user can read a blog post', async ({ page }) => {
    await page.goto('/blog');
    
    // Click on a blog post by its heading text
    await page.getByRole('heading', { name: /react server components/i }).click();
    
    // Auto-waits for navigation and content to load
    await expect(page).toHaveURL(/\/blog\/react-server-components/);
    await expect(
      page.getByRole('heading', { level: 1 })
    ).toContainText('React');
    
    // Verify article content is present
    await expect(page.getByRole('article')).toBeVisible();
    await expect(page.getByText('Server Components')).toBeVisible();
  });

  test('user can filter posts by category', async ({ page }) => {
    await page.goto('/blog');
    
    // Click category filter
    await page.getByRole('button', { name: /frontend/i }).click();
    
    // Verify only frontend posts are shown
    const posts = page.getByRole('article');
    await expect(posts).toHaveCount(5); // 5 frontend posts
    
    // Each post should have the Frontend category badge
    for (const post of await posts.all()) {
      await expect(post.getByText('Frontend')).toBeVisible();
    }
  });

  test('user can search for posts', async ({ page }) => {
    await page.goto('/blog');
    
    // Type in search box
    await page.getByPlaceholder(/search/i).fill('typescript');
    
    // Verify filtered results
    await expect(page.getByRole('article')).toHaveCount(1);
    await expect(
      page.getByText(/typescript generics/i)
    ).toBeVisible();
  });
});

test('blog listing page visual regression', async ({ page }) => {
  await page.goto('/blog');
  
  // Wait for all images and animations to complete
  await page.waitForLoadState('networkidle');
  
  // Full page screenshot comparison
  await expect(page).toHaveScreenshot('blog-listing.png', {
    maxDiffPixelRatio: 0.01, // Allow 1% pixel difference
    fullPage: true,
  });
});

test('blog post visual regression', async ({ page }) => {
  await page.goto('/blog/react-server-components-guide');
  await page.waitForLoadState('networkidle');
  
  // Compare specific element (not full page)
  const article = page.getByRole('article');
  await expect(article).toHaveScreenshot('rsc-article.png', {
    maxDiffPixelRatio: 0.02,
  });
});

test('responsive design — mobile view', async ({ page }) => {
  // Test mobile viewport
  await page.setViewportSize({ width: 375, height: 812 });
  await page.goto('/blog');
  await page.waitForLoadState('networkidle');
  
  await expect(page).toHaveScreenshot('blog-mobile.png', {
    maxDiffPixelRatio: 0.01,
  });
});

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

test.describe('Blog API', () => {
  test('GET /api/posts returns blog posts', async ({ request }) => {
    const response = await request.get('/api/posts');
    
    expect(response.ok()).toBeTruthy();
    expect(response.status()).toBe(200);
    
    const posts = await response.json();
    expect(posts.length).toBeGreaterThan(0);
    expect(posts[0]).toHaveProperty('title');
    expect(posts[0]).toHaveProperty('slug');
  });

  test('POST /api/posts creates a new post', async ({ request }) => {
    const response = await request.post('/api/posts', {
      data: {
        title: 'Test Post from Playwright',
        content: 'This is a test post created during E2E testing.',
        category: 'Frontend',
      },
      headers: {
        Authorization: 'Bearer test-token',
      },
    });
    
    expect(response.status()).toBe(201);
    const post = await response.json();
    expect(post.title).toBe('Test Post from Playwright');
  });
});

// Combined: API setup + Browser verification
test('newly created post appears on blog page', async ({ page, request }) => {
  // 1. Create post via API (fast)
  const response = await request.post('/api/posts', {
    data: { title: 'E2E Test Post', content: 'Content', category: 'QA' },
    headers: { Authorization: 'Bearer test-token' },
  });
  
  // 2. Verify in browser (the real test)
  await page.goto('/blog');
  await expect(page.getByText('E2E Test Post')).toBeVisible();
});

// playwright.config.ts — Production Configuration
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI, // Prevent .only in CI
  retries: process.env.CI ? 2 : 0, // Retry twice in CI
  workers: process.env.CI ? 4 : undefined, // 4 parallel workers in CI
  reporter: process.env.CI
    ? [['html', { open: 'never' }], ['github']]
    : [['html', { open: 'on-failure' }]],
  
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry', // Record trace on failure for debugging
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },

  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
    { name: 'mobile', use: { ...devices['iPhone 14'] } },
  ],

  webServer: {
    command: 'pnpm dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});

// .github/workflows/e2e.yml
// - uses: actions/checkout@v4
// - uses: actions/setup-node@v4
// - run: pnpm install --frozen-lockfile
// - run: pnpm exec playwright install --with-deps
// - run: pnpm exec playwright test
// - uses: actions/upload-artifact@v4
//   if: always()
//   with:
//     name: playwright-report
//     path: playwright-report/