PlaywrightでE2Eテストを自動化する手順を解説

Web開発

Playwrightは、Microsoftが開発するE2E（エンドツーエンド）テストフレームワークです。Chromium・Firefox・WebKit全てに対応し、ブラウザ操作の自動化からテスト・スクリーンショット・PDF生成までこなせます。本記事では、Playwrightの始め方と基本的な使い方を解説します。

Playwrightの特徴

  • クロスブラウザ対応（Chromium/Firefox/WebKit）
  • 並列実行・トレース・自動待機が充実
  • TypeScript/JavaScript/Python/Java/.NET対応
  • VS Code拡張やUIモードでデバッグ性が高い
  • Selenium・Cypressより設定がシンプル

セットアップ

npm init playwright@latest
# ブラウザを自動ダウンロード

# テスト実行
npx playwright test

# UIモードで起動
npx playwright test --ui

シンプルなテスト

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

test('トップページの見出しが表示される', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
});

test('ログインができる', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('メール').fill('user@example.com');
  await page.getByLabel('パスワード').fill('secret');
  await page.getByRole('button', { name: 'ログイン' }).click();
  await expect(page).toHaveURL('/dashboard');
});

ロケータの基本

Playwrightでは「ユーザー視点」のロケータが推奨されます。CSSセレクタやXPathより、getByRole getByLabel getByTextなどアクセシビリティ属性を活用しましょう。

page.getByRole('button', { name: '送信' });
page.getByLabel('メールアドレス');
page.getByText('お問い合わせ');
page.getByTestId('user-card');

自動待機（Auto-waiting）

Playwrightは要素がDOMに存在・表示・有効になるのを自動で待ちます。sleepやwaitForTimeoutを書く必要がほぼなく、これだけでもCypressやSeleniumに比べてテストが安定します。

トレース・スクリーンショット

# 失敗時のみトレース保存
await page.screenshot({ path: 'page.png', fullPage: true });
# playwright.config.tsで設定
use: { trace: 'on-first-retry', screenshot: 'only-on-failure' }

CI連携

GitHub Actionsとの組み合わせが定番です。公式テンプレートで設定がほぼ完結し、失敗時はトレースファイルがアーティファクトに保存されるため原因調査が容易です。

まとめ

Playwrightは「速い・安定・デバッグしやすい」を兼ね備えた現代的なE2Eテスト基盤です。ユーザー視点のロケータ＋自動待機でテストの脆さが大幅に減り、CIでのフレーキー（flaky）テスト問題も解消しやすくなります。新規にE2Eを始めるならまずPlaywrightで間違いありません。