PlaywrightによるE2Eテスト習得2026年版

// BAD: Fragile. Breaks when styling or DOM hierarchies change:
await page.locator('.btn-primary-2xs > div:nth-child(2)').click();

// GOOD: Resilient. Reflects how real users and screen readers navigate:
await page.getByRole('button', { name: 'Complete Checkout' }).click();
await page.getByLabel('Shipping Address').fill('123 Innovation Way');
await page.getByPlaceholder('Card Number').fill('4242424242424242');

┌────────────────────────────────────────────────────────┐
│                   Chromium Process                     │
│                                                        │
│  ┌────────────────────────┐  ┌───────────────────────┐ │
│  │    Context A (Test 1)  │  │   Context B (Test 2)  │ │
│  │  - Isolated Cookies    │  │ - Isolated Cookies    │ │
│  │  - Isolated Storage    │  │ - Isolated Storage    │ │
│  │  - Independent Cache   │  │ - Independent Cache   │ │
│  └────────────────────────┘  └───────────────────────┘ │
└────────────────────────────────────────────────────────┘

// tests/auth.setup.ts
import { test as setup, expect } from '@playwright/test';

const authFile = 'playwright/.auth/user.json';

setup('authenticate as test user', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('tester@company.com');
  await page.getByLabel('Password').fill('SecurePassword123!');
  await page.getByRole('button', { name: 'Log in' }).click();

  // Wait for dashboard redirect to confirm session established
  await page.waitForURL('/dashboard');
  await expect(page.getByRole('heading', { name: 'My Projects' })).toBeVisible();

  // Save session storage and cookies to disk
  await page.context().storageState({ path: authFile });
});

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

export default defineConfig({
  projects: [
    { name: 'setup', testMatch: /.*\.setup\.ts/ },
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        storageState: 'playwright/.auth/user.json', // Injected instantly!
      },
      dependencies: ['setup'],
    },
  ],
});

test('displays degraded banner on payment gateway 503 error', async ({ page }) => {
  // Intercept the payment route and force a 503 Service Unavailable:
  await page.route('**/api/v1/payments/checkout', async (route) => {
    await route.fulfill({
      status: 503,
      contentType: 'application/json',
      body: JSON.stringify({ error: 'Payment Processor Offline' }),
    });
  });

  await page.goto('/checkout');
  await page.getByRole('button', { name: 'Pay Now' }).click();

  await expect(page.getByText('Payment service is temporarily down')).toBeVisible();
});

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

export class CartPage {
  readonly page: Page;
  readonly checkoutButton: Locator;
  readonly promoCodeInput: Locator;
  readonly discountText: Locator;

  constructor(page: Page) {
    this.page = page;
    this.checkoutButton = page.getByRole('button', { name: 'Proceed to Checkout' });
    this.promoCodeInput = page.getByPlaceholder('Enter discount code');
    this.discountText = page.locator('[data-testid="discount-badge"]');
  }

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

  async applyPromoCode(code: string) {
    await this.promoCodeInput.fill(code);
    await this.page.getByRole('button', { name: 'Apply' }).click();
  }

  async assertDiscountApplied(expectedPercentage: string) {
    await expect(this.discountText).toContainText(expectedPercentage);
  }
}

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

jobs:
  test:
    timeout-minutes: 15
    runs-on: ubuntu-latest
    strategy:
      fail-fast: false
      matrix:
        shardIndex: [1, 2, 3, 4]
        shardTotal: [4]
    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 --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}