第2回:Cucumber・Gherkin・Playwrightとは?BDDの必須ツール
「AI × BDDで変わるソフトウェア開発|自動化と高品質を両立する新時代の開発手法」の第2回では、BDD開発を支える3つの柱——Cucumber、Gherkin、Playwrightについて解説します。
✅ この記事で分かること
- Cucumberとはどんなツールか?
- Gherkinとはどんな書き方なのか?
- Playwrightとは?なぜ注目されているのか?
- Gherkinで仕様を書き、Playwright + Cucumberでテストを自動実行する流れ
🛠 Cucumberとは?
Cucumberは、BDD(振る舞い駆動開発)を支援するテストフレームワークです。
自然言語で書かれたGherkinのシナリオを、実際にコードと紐づけて自動テストとして実行可能にするのが役割です。
Cucumberの仕組みはシンプルです:
-
.feature
ファイルに書かれたシナリオ(例:ログイン成功) - ステップ定義ファイルで
Given / When / Then
の処理内容を実装 - テストフレームワーク(例:Playwright)と連携して、E2Eテストを実行
Node.js環境では、@cucumber/cucumber
パッケージで導入できます。
🗒 Gherkinとは?
Gherkinは、Cucumberで使用される記述フォーマットです。
自然言語に近い形で、アプリの振る舞い(仕様)を誰でも読める形で書くことができます。
代表的な構文は以下の通り:
Feature: ログイン機能
Scenario: 正しい資格情報でログインできる
Given ログインページを開いている
When メールアドレスとパスワードを入力してログインボタンを押す
Then マイページに遷移し「ようこそ」と表示される
-
Feature
: 何の機能か -
Scenario
: どういうユースケースか -
Given
: 前提条件 -
When
: 操作やイベント -
Then
: 結果・期待される振る舞い
Gherkinのメリットは、ビジネス・開発・QA全員が読める共通言語になることです。
🧪 Playwrightとは?
Playwrightは、Microsoft製のモダンなE2Eテストフレームワークです。
以下の特徴から、SeleniumやPuppeteerの次世代を担う存在として注目されています。
✅ Playwrightの特徴
- 複数ブラウザ対応(Chromium、Firefox、WebKit)
- ヘッドレス実行が高速・安定
- ネットワーク操作やスクリーンショットが簡単
- モバイルブラウザやマルチコンテキストもサポート
- TypeScriptとの相性が抜群
Cucumberと組み合わせれば、Playwrightで作成した自動テストをGherkinのシナリオ経由で実行できま、自然言語の仕様から自動テストが実行できるようになります。
🔁 GherkinからPlaywrightによる自動テストまでの流れ
以下の流れでシナリオと自動テストを作成します:
-
login.feature
などの.feature
ファイルにGherkinでシナリオを書く -
login.steps.ts
内にPlaywrightの自動テストを実装-
When
やThen
に対応するPlaywrightの自動テストを実装
-
-
npx cucumber-js
でテストを実行 - Gherkinで定義されたシナリオから、Playwrightの自動テストが実行され、結果を確認
この流れで自然言語で書かれたシナリオから自動テストが走らせれるようになります
✨ まとめ
要素 | 概要 | 主な役割 |
---|---|---|
Cucumber | BDDフレームワーク | Gherkinを使った自然言語テストの実行 |
Gherkin | 記述フォーマット | 振る舞いを自然言語で定義 |
Playwright | E2Eテストツール | ブラウザを操作して実際に動作を確認 |
これらを組み合わせることで、仕様・テスト・ドキュメントを一体化できます。
次の記事は
次回の記事
第3回:GherkinからChatGPTでコードを自動生成|AIを活用したE2Eテスト開発の効率化
では実際にChatGPTのプロンプトで実装と自動テストの生成を行い、実行するところまでをお見せします。
👨💻 著者について
東京とアムステルダムを拠点に、東欧やパキスタンのオフショアチームとフルスタック開発、QAコンサル、テスト自動化、BDD、PMあたりをやっています。
ChatGPTやPlaywrightを活かした自動テストや開発環境づくりのご相談も歓迎です。
Discussion