Happy Web Engineer
Last updated on

はじめてのE2Eテスト｜Playwrightでブラウザ操作を自動化してみよう

はじめに

Webアプリ開発をしていると、「ちゃんと動いているかどうか」 を確認する作業が欠かせません。
例えばこんなチェックを、あなたも日常的にやっていませんか？

  • ログイン画面でIDとパスワードを入力してログインできるか
  • フォームに入力して送信ボタンを押すと、正しく保存されるか
  • 検索ボックスに文字を入れると、ちゃんと検索結果が表示されるか

これらは人が手作業でテストすることもできますが、毎回繰り返すのは大変ですし、見落としが出てしまいます。
そんなときに役立つのが E2Eテスト（End-to-Endテスト）。

そして、モダンなE2Eテストの代表的なツールが Playwright です。

本記事では、初心者にもわかるように「E2Eテストとはなにか？」から始め、Playwrightを使って実際にテストを自動化する手順を紹介します。

E2Eテストとは？

E2Eとは End to End（端から端まで） の意味です。
つまり アプリケーションをユーザー目線で丸ごとテストする仕組み のこと。

単体テストや結合テストとの違い

  • 単体テスト：関数やクラスなど、コードの小さな単位を確認
  • 結合テスト：複数のモジュールを組み合わせて動作確認
  • E2Eテスト：ユーザーが実際に操作する流れをシミュレーション

例えばECサイトなら…

  1. 商品を検索する
  2. カートに入れる
  3. 決済画面に進む
  4. 注文が完了する

この一連の流れを自動で確認するのがE2Eテストです。
つまり 「人間の操作をそのまま再現してくれる自動テスト」 とイメージすればわかりやすいでしょう。

なぜPlaywrightなのか？

E2Eテストの代表格といえば「Selenium」を思い浮かべる人も多いでしょう。
しかし、今では Playwright や「Cypress」がモダンな選択肢として人気を集めています。

Playwrightの特徴は以下の通りです。

  • 主要なブラウザをすべてサポート（Chromium, Firefox, WebKit）
  • 複数タブや複数ページ操作も簡単
  • 待機処理が自動化されていて安定（要素の出現を待ってくれる）
  • Microsoft製で安心感がある
  • テストの並列実行が高速

初心者にとっても「余計な設定に悩まず、すぐ使える」点が魅力です。

Playwrightの導入手順

1. Node.jsのインストール

まずはNode.jsが必要です。公式サイトから最新版LTSをインストールしてください。

Node.js 公式サイト

インストール後、次のコマンドで確認できます。

node -v
npm -v

2. プロジェクト作成

空のフォルダを作り、Playwrightを初期化します。

mkdir playwright-sample
cd playwright-sample
npm init playwright@latest

対話形式でセットアップが始まり、テスト環境が自動的に整います。

3. サンプルテストを実行

初期化が終わったら、Playwrightに用意されているサンプルテストを動かしてみましょう。

npx playwright test

これだけでブラウザが自動で起動し、テストが実行されます。
「動いた！」という体験ができるはずです。

基本的なテストコードの書き方

例1：Google検索を自動化する

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

test('Googleで検索できるか', async ({ page }) => {
  await page.goto('https://www.google.com/');
  await page.fill('input[name="q"]', 'Playwright');
  await page.press('input[name="q"]', 'Enter');
  await expect(page).toHaveTitle(/Playwright/);
});

👉 このテストでは以下を確認しています。

  • Googleのトップページを開く
  • 検索ボックスに「Playwright」と入力
  • Enterキーで検索
  • タイトルに「Playwright」が含まれているか確認

まさに人間の操作をそのまま再現しているイメージです。

例2：ログイン画面のテスト

test('ログインできるか', async ({ page }) => {
  await page.goto('https://example.com/login');
  await page.fill('#username', 'testuser');
  await page.fill('#password', 'password123');
  await page.click('button[type="submit"]');
  await expect(page).toHaveURL('https://example.com/dashboard');
});

👉 このコードで確認するのは…

  • ログイン画面を開く
  • ユーザー名とパスワードを入力
  • 送信ボタンをクリック
  • ダッシュボードに遷移できたかどうか

よくあるつまずきと解決策

1. ブラウザが起動しない

  • Playwrightが必要なブラウザをダウンロードしていない可能性があります。
  • npx playwright install を実行して再試行しましょう。

2. 要素が見つからない

  • #id や .class などセレクタ指定が間違っている場合が多いです。
  • 開発者ツールでセレクタを確認してから書きましょう。

3. テストが遅い

  • 不要な待機（waitForTimeoutなど）が入っていませんか？
  • Playwrightは「要素が出現するまで自動で待つ」仕組みを持っているので、無駄な待機は不要です。

Playwrightの活用シーン

  • ログイン処理の確認
  • フォーム送信の確認
  • ショッピングカートの動作確認
  • 複数ブラウザでの表示チェック

日々の手動テストを自動化するだけで、開発効率は大幅に向上します。

まとめ

  • E2Eテストとは：「人の操作を自動化して確認するテスト」
  • Playwrightの魅力：モダンで高速、初心者でも簡単に導入できる
  • 学ぶステップ：インストール → サンプル実行 → 簡単なテストコード作成

最初はログイン確認など小さなテストから始めるとスムーズです。
Playwrightを使えば、あなたの開発に 「安心感」と「効率」 をプラスできます。

関連記事

👉 REST APIとGraphQLの違いをわかりやすく解説｜初心者が理解すべきデータ取得の仕組み
👉 Laravel Sail入門｜開発環境をシンプルに整える基本ステップ
👉 Astro.jsの特徴と使い方｜静的サイトを高速に作れる理由を初心者向けに紹介
👉フリーランスにおすすめのクラウドサーバー導入ガイド｜初心者でもわかる選び方と始め方