【Playwright E2Eテスト入門】初心者でも分かる導入から実践まで完全ガイド

「Webシステムの更新のたびに手動で全画面をチェックしている」「テスト品質が担当者によってバラバラ」――こうした課題を解決するのが、PlaywrightによるE2Eテストの自動化です。

本記事では、E2Eテストの基本からPlaywrightの導入手順、実践的なテストコードの書き方まで、中小企業のIT担当者でもすぐに始められるよう初心者向けに解説します。

Playwright E2Eテストとは？基本を理解しよう

Webシステムの更新のたびに全機能を手動でチェックするのは大変な作業です。テスト品質も担当者によってばらつきが出てしまいます。こうした課題を解決するのがE2E（End-to-End）テストの自動化です。

E2Eテストとは、ユーザーが実際にシステムを使う流れを再現し、最初から最後まで一連の操作が正しく動作するかを確認するテスト手法です。例えばECサイトなら「商品検索→カートに追加→購入手続き→完了画面の表示」という実際のユーザー体験を検証します。

Playwrightは、このE2Eテストを自動化するためのツールです。Microsoftが開発・メンテナンスしており、複数のブラウザ（Chrome、Firefox、Safari）に対応しています。最大の特徴はメンテナンス性の高いテストコードが書きやすいこと。属人化を解消し、ヒューマンエラーを削減することで、限られたリソースでも安定したシステム運用を実現できます。

Playwrightが選ばれる5つの理由

1. 複数ブラウザへの完全対応
Chrome、Firefox、Safari（WebKit）のすべてに対応。一つのテストコードで全ブラウザの動作を確認できます。

2. 高速で安定した実行
最新のブラウザ自動化技術を採用し、待機処理も自動的に最適化されます。

3. 強力なデバッグ機能
テスト失敗時のスクリーンショット自動保存、ビデオ録画、詳細なトレース機能で問題の原因を特定しやすくなっています。

4. モダンな開発体験
TypeScript完全サポート、優れたIDEサポート、分かりやすいAPIで、書きやすく読みやすいコードが実現できます。

5. Microsoftによる継続的なサポート
大手テック企業による開発で、定期的なアップデートと長期的なサポートが期待できます。

他のツールとの違い

特徴	Playwright	Selenium	Cypress
複数ブラウザ対応	◎ 完全対応	◎ 完全対応	△ Chromeベース中心
実行速度	◎ 高速	△ やや遅い	◎ 高速
学習コスト	○ 中程度	△ やや高い	○ 低い
自動待機機能	◎ 強力	× 手動設定	◎ 強力
クロスドメイン対応	◎ 可能	◎ 可能	△ 制限あり

Seleniumは長い歴史を持ちますが、設定が複雑で待機処理を手動で書く必要があります。Cypressは学習コストが低いものの、複数ドメインをまたぐテストに制限があります。Playwrightは学習コストと機能性のバランスが良く、中小企業にとって最適な選択肢です。

中小企業こそ導入メリットが大きい理由

リソースが限られた中小企業にとって、Playwrightの導入メリットは特に大きくなります。

属人化の解消
テスト手順がコードとして残るため、担当者が変わっても同じ品質でテストを実施できます。

人的コストの削減
一度テストを作成すれば何度でも自動実行でき、手動テストの時間を大幅に削減できます。

リリース前の不安解消
「今回の修正で他の機能が壊れていないか」という不安を自動テストで解消できます。

夜間・休日の活用
テストは自動実行されるため、夜間や休日に走らせて翌朝結果を確認できます。

Harmonic Societyでも、中小企業向けの業務システム開発において、Playwrightを活用したテスト自動化を推進しています。

導入前に知っておくべきこと

解決できる課題を確認しよう

以下のような課題があれば、Playwright導入の効果が期待できます。

手動テストの限界
- リリースのたびに同じ操作を繰り返している
- テスト工数が増え続け、開発スピードが落ちている
- テスト漏れによる不具合が本番環境で発生している

品質のばらつき
- 担当者によってテストの粒度や観点が異なる
- 新人には難しく、ベテランに負担が集中している

リグレッションテストの不足
- 新機能追加時に既存機能への影響を十分確認できていない
- 過去に修正したバグが再発することがある

必要な環境と前提知識

技術的な環境要件
- Node.js: バージョン16以上
- OS: Windows、macOS、Linuxすべてに対応
- メモリ: 4GB以上推奨
- ディスク容量: 1GB程度

必要な前提知識レベル
- JavaScript/TypeScriptの基礎（変数、関数、if文が理解できる程度）
- HTML/CSSの基本（要素やクラス、IDの概念）
- コマンドライン操作の基本

プログラミング経験がほとんどない方でも、基礎的なWeb知識があれば1〜2週間程度の学習で始められます。

段階的導入のすすめ

成功のカギは「小さく始めて、徐々に拡大する」アプローチです。

フェーズ1：最重要機能1つから開始（1〜2週間）
ビジネスに最も影響が大きい機能（ログイン、問い合わせフォームなど）を選び、成功体験を得ることを優先します。

フェーズ2：関連機能への拡大（1ヶ月）
最初のテストで得た知見を活かし、3〜5つの主要機能をカバーします。

フェーズ3：定期実行の仕組み化（2〜3ヶ月）
CI/CDへの組み込み、レポート確認の習慣化、メンテナンスルールの確立を進めます。

フェーズ4：全体最適化（継続的）
テストカバレッジの拡大、実行時間の最適化、チーム全体での運用定着を図ります。

Playwrightの導入手順

Node.jsのインストール

PlaywrightはNode.js上で動作するため、まずNode.jsをインストールします。

Windowsの場合
1. Node.js公式サイト（https://nodejs.org/）にアクセス
2. 「LTS（推奨版）」をダウンロード
3. インストーラーを実行し、基本的にすべて「次へ」で進める
4. コマンドプロンプトで確認：node --version

macOSの場合
Homebrewを使う方法が推奨されます。

brew install node
node --version

Playwrightのインストール

1. プロジェクトフォルダの作成

mkdir my-playwright-tests
cd my-playwright-tests

2. プロジェクトの初期化

npm init -y

3. Playwrightのインストール

npm init playwright@latest

インストール中の質問には以下のように回答します。

• TypeScript or JavaScript? → JavaScript（初心者の場合）
• Where to put your end-to-end tests? → tests（デフォルト）
• Add a GitHub Actions workflow? → No
• Install Playwright browsers? → Yes

初期設定

playwright.config.jsファイルで基本設定を行います。中小企業向けの推奨設定は以下の通りです。

const { defineConfig } = require('@playwright/test');

module.exports = defineConfig({
  testDir: './tests',
  timeout: 30000,
  workers: 1, // 安定性重視
  reporter: 'html',

  use: {
    baseURL: 'https://your-site.com', // 実際のURLに変更
    screenshot: 'only-on-failure',
    video: 'off',
    headless: true,
  },

  projects: [
    {
      name: 'chromium',
      use: { browserName: 'chromium' },
    },
  ],
});

動作確認

サンプルテストを実行して正しく動作するか確認します。

npx playwright test

成功すると以下のような出力が表示されます。

Running 1 test using 1 worker
  ✓  tests/example.spec.js:3:1 › has title (2s)
  1 passed (3s)

HTMLレポートを確認するには以下を実行します。

npx playwright show-report

テストコードの書き方

基本的なテストコードの構造

Playwrightのテストコードは、AAA（Arrange-Act-Assert）パターンで書くと分かりやすくなります。

const { test, expect } = require('@playwright/test');

test('ログイン機能のテスト', async ({ page }) => {
  // Arrange（準備）：テストの前提条件を設定
  await page.goto('https://example.com/login');

  // Act（実行）：テスト対象の操作を実行
  await page.fill('#email', 'test@example.com');
  await page.fill('#password', 'password123');
  await page.click('button[type="submit"]');

  // Assert（検証）：結果が期待通りか確認
  await expect(page).toHaveURL('https://example.com/dashboard');
  await expect(page.locator('h1')).toContainText('ダッシュボード');
});

主要な操作方法

ページ遷移

await page.goto('https://example.com');
await page.goto('/products'); // baseURL設定時

テキスト入力

await page.fill('#username', 'tanaka');
await page.type('#search', '検索キーワード', { delay: 100 });

クリック操作

await page.click('button#submit');
await page.click('text=送信'); // テキストで検索

セレクトボックス

await page.selectOption('select#prefecture', '東京都');

チェックボックス・ラジオボタン

await page.check('#agree');
await page.uncheck('#agree');

要素の取得方法（ロケーター戦略）

テストを壊れにくくするには、適切な要素の取得方法を選ぶことが重要です。

推奨される取得方法（優先順位順）

1. ロール・ラベル・テキストによる取得（最推奨）

await page.getByRole('button', { name: '送信' });
await page.getByLabel('メールアドレス');
await page.getByText('ログアウト');

デザイン変更に強く、アクセシビリティにも配慮された方法です。

2. テスト専用属性による取得

await page.getByTestId('submit-button');

HTML側にdata-testid="submit-button"を追加します。デザインやクラス名の変更の影響を受けません。

3. CSSセレクター（必要に応じて）

await page.locator('#submit-btn');
await page.locator('.primary-button');

他の方法が使えない場合のみ使用してください。

実践的なテストシナリオ

ログイン機能のテスト

test('正常なログイン', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('メールアドレス').fill('user@example.com');
  await page.getByLabel('パスワード').fill('password123');
  await page.getByRole('button', { name: 'ログイン' }).click();

  await expect(page).toHaveURL('/dashboard');
  await expect(page.getByText('ようこそ')).toBeVisible();
});

test('エラー処理の確認', async ({ page }) => {
  await page.goto('/login');
  await page.getByRole('button', { name: 'ログイン' }).click();

  await expect(page.getByText('メールアドレスを入力してください')).toBeVisible();
});

フォーム送信のテスト

test('問い合わせフォームの送信', async ({ page }) => {
  await page.goto('/contact');

  await page.getByLabel('お名前').fill('山田太郎');
  await page.getByLabel('メールアドレス').fill('yamada@example.com');
  await page.getByLabel('お問い合わせ内容').fill('製品について質問があります');
  await page.getByRole('button', { name: '送信' }).click();

  await expect(page.getByText('送信が完了しました')).toBeVisible();
});

複数ページにわたる操作

test('商品購入フロー', async ({ page }) => {
  // 商品検索
  await page.goto('/');
  await page.getByPlaceholder('商品を検索').fill('ノートパソコン');
  await page.getByRole('button', { name: '検索' }).click();

  // 商品選択
  await page.getByRole('link', { name: '商品A' }).click();
  await page.getByRole('button', { name: 'カートに追加' }).click();

  // カート確認
  await page.getByRole('link', { name: 'カート' }).click();
  await expect(page.getByText('商品A')).toBeVisible();

  // 購入手続き
  await page.getByRole('button', { name: '購入手続きへ' }).click();
  await expect(page).toHaveURL('/checkout');
});

効率的な運用のポイント

テストの整理と管理

テストファイルの命名規則

tests/
├── auth/
│   ├── login.spec.js
│   └── logout.spec.js
├── forms/
│   ├── contact.spec.js
│   └── registration.spec.js
└── e2e/
    └── purchase-flow.spec.js

機能ごとにフォルダ分けし、ファイル名は機能名.spec.jsとします。

CI/CDへの組み込み

GitHub Actionsでの自動実行例：

name: Playwright Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test

メンテナンスしやすいテストコードの書き方

共通処理の関数化

async function login(page, email, password) {
  await page.goto('/login');
  await page.getByLabel('メールアドレス').fill(email);
  await page.getByLabel('パスワード').fill(password);
  await page.getByRole('button', { name: 'ログイン' }).click();
}

test('ダッシュボード表示', async ({ page }) => {
  await login(page, 'user@example.com', 'password123');
  await expect(page.getByText('ダッシュボード')).toBeVisible();
});

テストデータの外部化

const testUsers = {
  admin: { email: 'admin@example.com', password: 'admin123' },
  user: { email: 'user@example.com', password: 'user123' }
};

test('管理者ログイン', async ({ page }) => {
  await login(page, testUsers.admin.email, testUsers.admin.password);
});

よくある質問とトラブルシューティング

テストが不安定になる原因と対策

タイムアウトエラー
要素の読み込みに時間がかかる場合は、タイムアウト値を調整します。

await expect(page.getByText('読み込み完了')).toBeVisible({ timeout: 10000 });

要素が見つからないエラー
ページの読み込みを待ってから操作します。

await page.waitForLoadState('networkidle');
await page.click('button');

リソースが限られた環境での運用

実行時間の最適化
- 並列実行数を調整：workers: 2
- ヘッドレスモードで実行：headless: true
- 不要なビデオ録画をオフ：video: 'off'

優先度の高いテストから実施
すべてを自動化しようとせず、ビジネスクリティカルな機能に絞ります。

次のステップ

Playwright E2Eテストの基本を習得したら、以下のステップに進みましょう。

• 公式ドキュメント: https://playwright.dev/
• コミュニティ: GitHub Discussionsで質問・情報交換
• 上級テクニック: Page Object Modelパターンの学習

E2Eテストと合わせて、単体テストの導入も検討しましょう。テストフレームワークの選定についてはVitestとJestの徹底比較が参考になります。

Harmonic Societyでは、Playwrightを活用した「ちょうどいい」テスト自動化を、導入から運用定着まで伴走支援しています。お客様の状況に合わせた最適な自動化をご提案しますので、お気軽にご相談ください。