Zenn
🏃‍♀️

第３回：GherkinからChatGPTでコードを自動生成｜AIを活用したE2Eテスト開発の効率化

に公開
Playwright
BDD
ChatGPT
Gherkin
Cucumber
tech

📘 この記事で分かること

  • Gherkin形式の仕様からChatGPTを使ってコードを自動生成する手順
  • フロントエンド・バックエンド・テストコードの構成例
  • AIと手動開発を組み合わせた実践的なE2Eテスト戦略
  • 生成されたコードの確認とテストまでの流れ

🎯 この記事の対象者

  • ChatGPTを業務に活用しているエンジニア
  • Gherkin形式を活用して、開発・テストを効率化したい技術リーダー
  • テストコード作成の手間を減らしたいQA・開発者
  • 実務でのE2E開発・運用フローを模索している方

1. はじめに

この記事ではGherkinを使って実際に動作するコードと自動テストのコードを同時に生成します。

これは単なる効率化にとどまらず、仕様と実装・テストの乖離を防ぐという大きな利点があります。
Gherkinによって共通言語で仕様を記述することで、開発者・QA・ビジネス側の認識を揃えながら、そのままコードとテストに落とし込むことができ、「実装したけどテストがない」「テストはあるけど仕様がズレている」 といった問題を減らせます。

また、最初からテストがあり、必要に応じてテストステップを追加・修正することで、後からバグが紛れ込むリスクも減少し、長期的な品質維持にも貢献します。

2. ChatGPTへのプロンプト例

Gherkinのシナリオができたので、以下のようなプロンプトで動作するアプリと自動テストのステップを同時に作ってもらいます。

以下のGherkinのシナリオでアプリを作ってください。

Feature: ログイン機能

  Scenario: 正しい資格情報でログインできる
    Given ログインページを開いている
    When ユーザーが "test@example.com" と "password123" を入力してログインボタンを押す
    Then 「ようこそ」というメッセージが表示される

アプリの諸条件は以下：
- frontend/ 内にNext.jsで作ったコードを入れる
- /mypageで「ようこそ」というメッセージを表示
- backend/ 内にExpressで作ったコードを入れる
- ルートフォルダからCucumberとPlaywrightが実行できるようにする
- tests/features/login.feature　に上のGerkinのシナリオを格納
- tests/features/steps/login.steps.ts にPlaywrightの自動テストステップを入れる
- 必要なところに package.json と tsconfig.json を入れる
- できたファイルは bdd-login-app.zip にまとめて、ダウンロードできるようにする

ChatGPTに以上のテキストを渡すと以下のようなフォルダ構成を提案してくれました：

bdd-login-app/
├── backend/
│   ├── src/
│   │   └── index.ts             # Expressサーバーエントリポイント
│   ├── package.json              # backend依存関係とスクリプト
│   └── tsconfig.json            # Express用TypeScript設定
│
├── frontend/
│   ├── pages/
│   │   ├─ login.tsx             # ログインページUI
│   │   └── mypage.tsx           # ログイン後のマイページUI
│   ├── public/
│   ├── package.json             # frontend依存関係とスクリプト
│   └── tsconfig.json           # Next.js用TypeScript設定
│
├── tests/
│   ├── features/
│   │   └── login.feature        # Gherkin仕様ファイル
│   │   └── steps/
│   │     └── login.steps.ts     # PlaywrightによるBDDテストステップ
│
├── cucumber.js                  # Cucumber設定ファイル
├── package.json                 # ルートスクリプトとdev依存関係（cucumber, playwrightなど）
└── tsconfig.json               # ルート共通のTypeScript設定

3. Playwrightのステップコードの確認

ChatGPTが出してきたコードではそのまま動かないケースもあるので、多少の修正が必要です。
実際に動くコードは以下のGitHubリポジトリで確認できます：

👉 https://github.com/moksahero/bdd-login-app

frontendとbackendのコードはcloneしたものを見てももらうといいですね。

以下は tests/features/steps/login.steps.ts の自動テストコードの内容です：

Gherkinの各フックの内容が反映され各テストステップが実装されていますね。

import { Given, When, Then, AfterAll } from "@cucumber/cucumber";
import { Browser, expect } from "@playwright/test";
import { chromium, Page } from "playwright";

let page: Page;
let browser: Browser;

Given("ログインページを開いている", async () => {
  browser = await chromium.launch();
  page = await browser.newPage();
  await page.goto("http://localhost:3000/login");
});

When(
  "ユーザーが {string} と {string} を入力してログインボタンを押す",
  async (email, password) => {
    await page.fill('input[name="email"]', email);
    await page.fill('input[name="password"]', password);
    await page.click('button[type="submit"]');
  }
);

Then("「ようこそ」というメッセージが表示される", async () => {
  await page.waitForSelector("h1");
  const content = await page.textContent("h1");
  expect(content).toContain("ようこそ");
});

AfterAll(async () => {
  if (browser) {
    await browser.close();
    console.log("✅ ブラウザを閉じました");
  }
});

AfterAll フックはクリーンアップ処理（テスト後に必ず実行される処理）を定義する場所です。Playwrightでブラウザを使っている場合、テスト完了後にブラウザを閉じるために使用されます。

ブラウザを閉じないとコマンド実行時やCIで処理が止まってしまうのでブラウザを使ったテストの場合は、各ファイルに必ず入れるようにしてくださいね。

4. アプリと自動テストを走らせてみよう

以下のコマンドでフロントエンド・バックエンドを起動し、自動テストを実行します。

cd frontend
npm install
npm run dev &

cd ../backend
npm install
npm run start &

cd ..
npm install
npx cucumber-js

✅ 実行結果例：

...✅ ブラウザを閉じました

1 scenario (1 passed)
3 steps (3 passed)
0m02.368s (executing steps: 0m02.295s)

このようにして、Gherkin → コード生成 → コード修正 → 自動テスト実行 という一連のサイクルが回ります。

5. まとめ

Gherkinを起点にChatGPTとPlaywright、Cucumberを組み合わせることで、E2Eテストを軸にした開発サイクルを高速に構築することが可能です。
今回のように、シナリオからコード・テストまで自動生成・調整を繰り返すことで、開発の初期段階からテストを自然に組み込む文化を作ることができます。

今後は以下のような拡張が可能です：

  • より複雑な認証パターン（2段階認証など）
  • APIレベルのテストを含むバックエンドシナリオの追加
  • ステージング環境でのCI連携による本番前テストの自動化

小さなUI機能から始めて、仕様 → 実装 → テスト → CI/CD まで一貫して管理するサイクルを、AIの力を借りて浸透させていきましょう。

👨‍💻 著者について

東京とアムステルダムを拠点に、東欧やパキスタンのオフショアチームとフルスタック開発、QAコンサル、テスト自動化、BDD、PMあたりをやっています。
ChatGPTやPlaywrightを活かした自動テストや開発環境づくりのご相談も歓迎です。

Discussion