E2E Testing with Claude Code: Playwright/Cypress 실전 가이드

E2E 테스트をClaude Code로 효율화하기

E2E（End-to-End）테스트は사용자の操作フローを自動검증する重要な테스트手法です。Claude Code를 활용하면 PlaywrightやCypressの테스트コードを빠르게생성し、CI環境への통합まで一気に進められます。

Playwrightでの테스트구현

로그インフローの테스트

> 로그インからダッシュボード표시までのE2E 테스트を
> Playwrightで생성して。Page Objectパターンで。

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

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

  constructor(page: Page) {
    this.page = page;
    this.emailInput = page.getByLabel('メールアドレス');
    this.passwordInput = page.getByLabel('パスワード');
    this.submitButton = page.getByRole('button', { name: 'ログイン' });
    this.errorMessage = page.getByRole('alert');
  }

  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/e2e/login.spec.ts
import { test, expect } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';

test.describe('ログイン機能', () => {
  test('正しい認証情報でログインできる', async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login('user@example.com', 'password123');

    await expect(page).toHaveURL('/dashboard');
    await expect(page.getByText('ダッシュボード')).toBeVisible();
  });

  test('不正な認証情報でエラーが表示される', async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login('user@example.com', 'wrongpassword');

    await expect(loginPage.errorMessage).toBeVisible();
    await expect(loginPage.errorMessage).toContainText('認証に失敗しました');
  });
});

Cypressでの테스트구현

ECサイトの購入フロー

> 상품선택からカート추가、購入완료までのフローを
> Cypressで생성して。カスタムコマンドも定義して。

// cypress/support/commands.ts
Cypress.Commands.add('login', (email: string, password: string) => {
  cy.session([email, password], () => {
    cy.visit('/login');
    cy.get('[data-cy="email"]').type(email);
    cy.get('[data-cy="password"]').type(password);
    cy.get('[data-cy="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

// cypress/e2e/purchase.cy.ts
describe('購入フロー', () => {
  beforeEach(() => {
    cy.login('buyer@example.com', 'password123');
  });

  it('商品をカートに追加して購入完了できる', () => {
    cy.visit('/products');
    cy.get('[data-cy="product-card"]').first().click();
    cy.get('[data-cy="add-to-cart"]').click();
    cy.get('[data-cy="cart-badge"]').should('contain', '1');

    cy.visit('/cart');
    cy.get('[data-cy="checkout-button"]').click();

    cy.get('[data-cy="confirm-order"]').click();
    cy.get('[data-cy="order-complete"]').should('be.visible');
    cy.get('[data-cy="order-number"]').should('exist');
  });
});

Playwright vs Cypress の使い分け

項目	Playwright	Cypress
マルチ브라우저	Chromium/Firefox/WebKit	Chrome/Firefox/Edge
병렬実行	ネイティブ대응	Dashboard利用
マルチ탭	대응	非대응
API테스트	대응	대응
学習コスト	やや高い	低い

ビジュアルリグレッション테스트

Playwrightのスクリーンショット比較機能を使えば、UIの意図しない변경を検出할 수 있습니다。

test('ヘッダーの見た目が変わっていないか確認', async ({ page }) => {
  await page.goto('/');
  await expect(page.locator('header')).toHaveScreenshot('header.png');
});

정리

Claude Code를 활용하면 PlaywrightやCypressのE2E 테스트を효율적으로구현し、品質の高い테스트スイートを구축할 수 있습니다。API테스트자동화や테스트戦略가이드도 함께 참고하세요.

상세 정보는Playwright공식 문서およびCypress공식 문서를 참고하세요.