トップ > DX > GitHub Copilot と Playwright を活用したアプリケーションテスト効率化

GitHub Copilot と Playwright を活用したアプリケーションテスト効率化

DX AI アドベントカレンダー2025

はじめに

NTTビジネスソリューションズ の 迫です。

Web アプリケーション開発はスピードと品質が強く求められるようになり、テスト工程にかかる負担は増大しています。
本記事では、GitHub Copilot と Playwright を組み合わせて、アプリケーションテストの効率を高める方法について解説します。
AI によるテスト項目の自動生成と、E2E テストの自動化がどのように生産性向上に寄与するのか、その有効性と期待できる成果をまとめています。

用語補足

GitHub Copilot

GitHub が提供する AI コード補完ツールです。
自然言語による指示からコードの生成、テストケースの作成支援まで幅広く活用できます。

Playwright

Microsoft が開発した E2E（End-to-End）テスト自動化フレームワークです。
複数ブラウザに対応し、UI の動作を高速かつ正確に自動で検証できます。 自動でテストシナリオを作成と実行まで行ってくれます。

対象読者

本記事は以下の方々を対象としています。

  • テスト工程の効率化に興味のある開発者
  • GitHub Copilot や Playwright の利用方法・活用メリットを知りたい方

背景と課題について

従来のテスト工程では、次のような課題が一般的です。
テスト項目はテストシナリオ・パターンなど様々なケースを想定して作成する事が必要になり、下記のような要因によって開発工程全体に対して大きい比率を占めるものとなっていると思います。

テスト工程が増大する要因

  • テスト項目の作成に時間がかかる（特にテスト項目を作成にあたっての設計書・ソースファイルの確認に時間がかかる）
  • テストコードの記述量が多く、メンテナンスが大変
  • 人手による確認・レビューが多く、漏れが発生しやすい
  • 開発スピードにテスト工程が追いつかない

これらの課題に対し、AI と自動化ツールを組み合わせたテスト効率化が注目されています。
GitHub Copilot によるテストコード生成と Playwright による自動テストは、品質と生産性の両立を実現してくれます。

事前の準備（GitHub Copilot を使ってサンプルのプロジェクトを作成）

本ブログでの解説用にテスト対象となる簡易的なアプリケーションを準備します。
GitHub Copilot に対し「簡単な Web アプリケーションを作成して」といったプロンプトを与えるだけで、コードが自動生成されます。今回は３択クイズを出してくれるアプリを用意しました。このモックアプリはログインしクイズに挑戦できる簡単なアプリケーションになっています。GitHub Copilotを使用する際のメリットを下記に列挙します。

GitHub Copilotを使用する際のメリット

  • GitHub Copilot は自然言語の説明から UI や API のサンプルコードを生成可能
  • 早期にテスト対象を準備し、テスト作成を並行できる
  • モックアプリを短時間で用意できるため、教育・検証用途にも有効

サンプルのプロジェクト

作業の前提条件

  • 以降の作業操作は、Visual Studio Code（以下、VS Code）を利用しています。
  • GitHub Copilot は、Agentモードを使用しています。

1.テスト環境の準備（Playwright のインストール）

まずはテスト環境の準備を行います。
Playwright のインストールを実施します。今回本ブログで使用するPlaywrightの特徴を下記に記載いたします。

Playwright の特徴

  • ブラウザソフト：Chromium / Firefox / WebKit をサポート
  • 画面操作の自動化が容易（クリック、入力、遷移など）
  • スクリーンショット・動画・ログ取得が可能
  • CI/CD（GitHub Actions など）と連携しやすい

インストール手順（playwright）

npm install
npx playwright install

Playwrightインストール

2.テスト項目の作成 - 正常系テスト（GitHub Copilot による自動生成）

正常な操作手順を想定したテスト項目を作成します（３択クイズ画面を操作するイメージ）。
GitHub Copilot はテスト実施したい内容（ユーザーの操作など）を仕様や動作イメージを伝えるだけで、Playwright のテストコードを作成してくれます。期待できる効果と具体的な指示の例は下記です。

GitHub Copilot による自動生成で期待できる効果

  • テストケースのひな型作成が高速化
  • コーディングミスの防止
  • テストの観点漏れを減らせる
  • 複数テストの量産が容易になる

GitHub Copilotへの指示例

テストを行いたい操作をフォーム画面のオブジェクト名（ログインボタンなど）を指定して日本語で指示できます。 運用マニュアルのイメージでテスト項目が作れるので作成漏れの対策にもなります。

テスト項目作成のプロンプト

作成されたテスト項目TypeScript（.ts）ファイル

正常系テストのテストコードTypeScript（.ts）ファイル

作成された TypeScript（.ts）形式のテストコードは E2E テストを自動化するためのシンプルなブラウザ操作スクリプトであり、内容は自由に修正・追記できるため、自動生成後もテストを進めながら追加のテストロジックを柔軟に拡張できます。 例えばボタンクリックして戻りを3秒待つなど簡単な構文で追加や修正は可能です。

    await page.click('.choice-btn[data-answer="1"]');
    await page.waitForSelector('.result-message', { timeout: 3000 });

3.テストの実行

生成したテストは Playwright のコマンドで実行できます。

npx playwright test　TypeScript（.ts）[ファイルを指定]  [playwright のパラメータを措定]

ターミナル実行例

結果検証

Playwright はテストの成功・失敗だけでなく、結果の詳細レポートを生成します。具体的には下記の項目を詳細レポートの中で確認が可能になります。生成されるのはHTMLレポートのレポートで、とても見やすく、正常／異常をすぐに確認できます。

詳細レポートの項目

  • スクリーンショット
  • 実行ログ
  • ステップごとの処理状況
  • エラー発生時のトレース

テストレポート（個別結果）

テストでエラーが発生すると「Errors」に不具合箇所が表示され、テスト結果とソースファイルを同時に確認できるため効率的で、修正後もそのまま再テストできることから単体テストから結合テストまでの時間短縮に役立ちます。

4.テスト項目の作成 - アプリケーションの網羅性テストを実施したい場合（GitHub Copilot による自動生成）

簡単な正常系だけでなく、アプリケーション開発ではロジックの網羅性も確認の観点の一つです。本来ステートメントの分岐を網羅するには相当な数の時間と労力が必要です。そこでプロンプトを工夫して以下の内容で指示をします。

プロンプト（網羅テスト）

機能単位にテストケースの洗い出しとスクリプトが作成されます。 この作業だけでも人間が作業実施した場合と比較すると大幅な効率化に繋がります。

作成されたテストパターン

内容を検証してみます。 ログイン機能の場合、「通常のログインID時：IDが空白：IDが最大文字」　など正しい条件で作成されているのが確認できます。

5.テスト項目の作成 - セキュリティテストを実施したい場合（GitHub Copilot による自動生成）

上記の正常系テストだけでなく、セキュリティ観点のテスト項目も GitHub Copilotに生成させることができます。セキュリティテストはテスト観点の洗い出しも大変ですが、クロスサイトスクリプティング（XSS）など自分でコーディングしたりパターンを洗い出すだけでも相当な工数がかかります。今回はプロンプトを工夫して以下の内容で指示をします。

セキュリティテスト

テスト項目（セキュリティテスト）

Open Web Application Security Project（OWASP）に記載されている上位の脆弱性についてテスト項目 を作成依頼しました。TypeScript（.ts）ファイルの中には数百ラインのテストコードが出来上がりました。

参考）OWASPとは

Webアプリケーションのセキュリティ向上を目的とした、非営利・オープンコミュニティの国際的プロジェクトです。

6.テスト実行（結果）

セキュリティテストの結果です。いくつかのテストでセキュリティに関する修正のアドバイスが出力されました。

テスト結果（スクリーンショット）

上記の画面（上部）にXSSの証跡が確認できます。テストは様々なパターンで実行されます。TypeScript（.ts）ファイルの中に以下の構文をいれると該当コードの箇所でスクリーンショット（エビデンス）を自動保存してくれます。

スクリーンショット

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

結果検証

不正な入力（XSS）が適切にサニタイズされているか、認証が必要なページへ不正アクセスできないか、そして想定外のUI表示が発生していないかを確認します。
Playwright のログ・スクリーンショットにより、問題の再現性と解析精度が向上します。

テスト結果（一覧）

テスト結果（個別）

期待できる効果

セキュリティテストの観点を自動的に補完することで、人手では見落としやすい脆弱性を早期に発見でき、結果として全体的な品質向上にもつながります。

まとめ

GitHub Copilot と Playwright を組み合わせることで、従来と同程度以上の品質を担保しつつテスト工程を自動生成ができ、開発の効率化を大幅に向上できます。具体的なメリットとしては下記を挙げることができます。

テスト工程自動化のメリット

  • テスト項目作成の高速化
  • テストコード品質の向上
  • 自動実行・検証による作業負荷の削減
  • 開発スピードと品質の両立

AI と自動テストの活用は今後ますます重要になると考えられます。 同時に開発者自身が Playwright の基礎を理解していないと、 生成されたコードの意味がわからないまま運用するリスクもあるので自身のスキルアップもすすめながら開発ツールの利活用を行う事が大切になると思います。

執筆者

迫　正宏（NTTビジネスソリューションズ（株） バリューデザイン部 システム開発部門）

第一種情報処理技術者、第二種電気工事士、AWS Certified Solutions Architect - Associateなど

商標

  • GitHub および GitHub Copilot は、GitHub, Inc. の登録商標または商標です。
  • Microsoft および Playwright は、Microsoft Corporation の登録商標または商標です。
  • Firefox は、Mozilla Foundation の登録商標です。
  • Chromium は、Google LLC の商標です。
  • WebKit は、Apple Inc. の商標です。
  • Java は、Oracle および/またはその関連会社の登録商標です。
  • ECMAScript は、ECMA International によって標準化された仕様です。
  • JavaScript は、商標ではなく、ECMAScript をベースとしたプログラミング言語の名称です。
  • Visual Studio Code は、米国 Microsoft Corporation の商標または登録商標です。
  • タイトル画像：ImageFXで生成。Googleが提供する高性能画像生成AIです。（※ImageFX、GoogleはGoogle LLCの商標または登録商標です）
  • その他記載されている会社名、製品名は、それぞれの所有者の登録商標または商標です。

© NTT WEST, Inc.