初心者向けPlaywright徹底解説！Webアプリテストの自動化を始めよう

こんにちは！
今回は、テスト自動化ツール Playwright の基本について解説します。特に、「自動化って難しそう…」と思っている方に向けて、手順やポイントを一つひとつ丁寧に説明します！

Playwrightとは

Playwrightの概要

Playwrightは、Microsoftが開発したWebアプリケーションのテスト自動化ツールです。以下の特徴があります：

  • 複数のブラウザに対応
    Google Chrome、Firefox、Safari、Microsoft Edgeなど主要ブラウザをサポート。
  • クロスプラットフォーム対応
    Windows、Mac、Linuxで動作。
  • モダンな設計
    JavaScript/TypeScriptをはじめ、PythonやJava、C#でも利用可能。
  • E2Eテストに最適
    ユーザー視点の操作を再現した「エンドツーエンド（E2E）テスト」が簡単に実現。

なぜテスト自動化が必要？

Webアプリケーション開発では、「新しい機能を追加したら、他の部分が壊れてしまった」というケースを防ぐためにテストが重要です。しかし、手作業でテストを行うと次のような課題が出てきます：

  • 時間がかかる
    毎回同じ手順を繰り返すのは非効率。
  • ミスが起こりやすい
    手動だと見逃しや確認漏れが発生。

そこで、Playwrightのようなツールを使えば、以下のメリットがあります：

  • 素早いテスト実行
    数分で大量のテストを完了。
  • 精度が向上
    人間のミスを減らし、正確に動作確認。
  • 開発者の負担を軽減
    テスト作業が減ることで、新しい機能開発に集中できる。

Playwrightのインストール

まず、Node.jsがインストールされていることを確認してください。その後、以下のコマンドでPlaywrightをインストールできます。

npm init playwright@latest

このコマンドを実行すると、対話形式で以下の設定を行えます。

  • TypeScriptまたはJavaScriptの選択（デフォルトはTypeScript）
  • テストフォルダの名前（デフォルトはtests）
  • GitHub Actionsのワークフロー追加
  • Playwrightブラウザのインストール（デフォルトでtrue）

これらの設定が完了すると、必要なファイルやフォルダが自動的に作成されます。

プロジェクトの構成
インストール後、以下のような構成になります。

my-playwright-project/
├── tests/
│   └── example.spec.js
├── playwright.config.js
└── package.json

簡単なテストの作成

まずはサンプルテストを実行してみましょう。

npx playwright test

このコマンドを実行すると、Playwrightが起動し、設定ファイルに記述されたすべてのテストが順番に実行されます。

テスト結果の確認
テストが終了すると、結果が表示されます。成功したテストは緑色で、失敗したテストは赤色で表示され、エラーメッセージが表示されます。

Test 'example test' passed.

もしテストが失敗した場合、エラーメッセージとスタックトレースが表示され、どのステップでエラーが発生したのかを確認できます。

テスト結果の詳細確認
テストが失敗した場合や、エラーメッセージが表示されるときは、Playwrightのデバッグ機能を使用することができます。デバッグモードを有効にするには、以下のコマンドを使用します。

npx playwright test --debug

これにより、どのステップで失敗したのかを視覚化しながら確認できます。

簡単なテストスクリプトの書き方

Playwrightを使った基本的なテストスクリプトはとてもシンプルです。まずは、ページの読み込みやボタンのクリック、テキストの入力などの基本的な操作を確認していきましょう。

インポートと設定
テストを記述するには、PlaywrightのAPIをインポートして使います。以下のように記述します。

const { chromium } = require('playwright');

async function runTest() {
    // ブラウザを開く
    const browser = await chromium.launch();
    const page = await browser.newPage();

    // ページにアクセスする
    await page.goto('https://example.com');

    // 要素の操作（例: ボタンのクリック）
    await page.click('text=Sign in');

    // フォームへの入力
    await page.fill('input[name="username"]', 'testuser');
    await page.fill('input[name="password"]', 'password123');

    // ログインボタンのクリック
    await page.click('button[type="submit"]');

    // 結果の確認
    const headerText = await page.textContent('h1');
    console.log(headerText);

    // ブラウザを閉じる
    await browser.close();
}

runTest();

要素の選択と操作方法
要素の選択には、セレクタ（CSSセレクタ）を使用します。Playwrightは、以下のように操作できます：

  • クリック: await page.click('selector')
  • テキスト入力: await page.fill('selector', 'text')
  • スクロール: await page.scroll('selector')
  • 画面のスクリーンショット: await page.screenshot({ path: 'screenshot.png' })

スクリーンショットやPDFの生成
テストの結果を視覚的に確認したい場合、スクリーンショットやPDFとして保存することができます。

await page.screenshot({ path: 'example.png' });
await page.pdf({ path: 'example.pdf' });

E2Eテストの基礎

E2E（エンドツーエンド）テストとは？
E2Eテストは、ユーザーがWebアプリケーションを使用する際のシナリオを再現するテスト手法です。Playwrightを使うことで、ユーザーが実際に行う操作をシミュレーションし、その結果を確認できます。

  • 例: ユーザーがログイン画面から始まり、ダッシュボードにアクセスし、商品の検索を行ってカートに追加し、購入手続きをする。これらの操作を通じて、Webアプリケーションの一連の動作が正しく機能するかを確認します。

Playwrightを使ったE2Eテストの具体例

ログインテスト
ユーザーがログイン画面にアクセスし、正しい情報でログインするシナリオをテストします。

async function loginTest() {
    const browser = await chromium.launch();
    const page = await browser.newPage();

    await page.goto('https://example.com/login');

    // ログインフォームに情報を入力
    await page.fill('input[name="username"]', 'testuser');
    await page.fill('input[name="password"]', 'password123');

    // ログインボタンをクリック
    await page.click('button[type="submit"]');

    // ダッシュボードページが表示されることを確認
    const dashboardHeader = await page.textContent('h1');
    console.log(dashboardHeader);

    await browser.close();
}

loginTest();

検索機能のテスト
検索機能が正しく動作するかを確認するために、特定のクエリで検索を行い、その結果が表示されるかを確認します。

async function searchTest() {
    const browser = await chromium.launch();
    const page = await browser.newPage();

    await page.goto('https://example.com');

    // 検索フォームにテキストを入力
    await page.fill('input[name="search"]', 'laptop');

    // 検索ボタンをクリック
    await page.click('button[type="submit"]');

    // 検索結果が表示されることを確認
    const resultText = await page.textContent('h2.result');
    console.log(resultText);

    await browser.close();
}

searchTest();

応用編

クロスブラウザテストの実現
異なるブラウザで同じ動作ができるかを確認するために、PlaywrightのbrowserTypeを利用します。

async function crossBrowserTest() {
   const browser = await chromium.launch();
   const page = await browser.newPage();

   // Firefoxブラウザを使用してテスト
   const firefox = await browser.firefox.launch();
   const firefoxPage = await firefox.newPage();

   await firefoxPage.goto('https://example.com');
   const firefoxHeader = await firefoxPage.textContent('h1');
   console.log(firefoxHeader);

   await firefox.close();
   await browser.close();
}

crossBrowserTest();

Playwrightの主な機能

  1. クロスブラウザテスト: Chromium、WebKit、Firefoxなど、主要なブラウザエンジンでのテストが可能です。
  2. マルチプラットフォーム対応: Windows、Linux、macOSでのテストがサポートされています。
  3. 複数言語サポート: TypeScript、JavaScript、Python、.NET、Javaでのテスト記述が可能です。
  4. モバイルウェブのテスト: モバイルデバイスのエミュレーション機能を備えており、モバイル向けのテストも行えます。
  5. 自動待機機能: 要素の表示や非表示を自動的に待機するため、手動での待機処理が不要です。

Playwrightの活用例

  • フォームの自動入力と送信: ユーザー登録やログインフォームの入力と送信を自動化できます。
  • スクリーンショット撮影: 特定のページや要素のスクリーンショットを撮影し、ビジュアルリグレッションテストに利用できます。
  • APIレスポンスのモック: 外部APIのレスポンスをモックし、テストの安定性を向上させることができます。

公式ドキュメント

さらに詳しい情報や高度な使い方については、公式ドキュメントをご参照ください。

Playwright

まとめ

Playwrightは、Webアプリケーションのテスト自動化を強力にサポートするツールです。初心者でも直感的に操作でき、多機能で柔軟性があります。ぜひこの機会にPlaywrightを導入し、テストの効率化を図ってみてください。

関連する記事はこちら↓↓

Zodとは？基本的な使い方や活用方法を徹底解説！【TypeScript/JavaScript】
はじめに こんにちは！今回は、JavaScriptとTypeScriptの型検証ライブラリ「Zod」について解説します。Zodは、簡単で使いやすい型チェックを提供し、バリデーションが非常にスムーズに行えるため、開発者にとっては欠かせないツー...
annotations-lab.com
2024.12.08
React Hook Formの基本的な使い方を解説！【初心者向け】
こんにちは！今回は、Reactを使ったフォームの管理を超シンプルにできるライブラリ、React Hook Formを使ったフォーム作成を、初心者の方にもわかりやすく解説します！ この記事では、名前を入力して送信するだけの簡単なフォームを一緒...
annotations-lab.com
2024.12.05
タイトルとURLをコピーしました