はじめに
⚠️ 本記事は、過去に投稿した 「生成AI × Laravel Dusk でブラウザテストを自動化する」 の最新版です。
記載内容・環境構築手順・動画などを2025年10月版にアップデートしています。
「テストを自動化したいけど、テストコードを書くのが面倒...」
「UIが変わるたびにテストコードの修正が大変...」
「エラーが起こって動かない...」
こんな悩みを持つ開発者の方も多いのではないでしょうか？本記事では、生成AI と Laravel Dusk を組み合わせて、ブラウザテストを超効率化する方法をご紹介します。
<コードの生成>
<テストの実行>
生成AIによる効率的なブラウザテスト
- テストトレイト作成: オンライン画面での「ログイン」や「画面遷移」などの操作をするテストトレイト（操作関数のまとまり） を作成、テストトレイトの作成は BLOCS Dusk がサポート
- テストスクリプト作成: テストトレイトを呼び出し、シナリオに沿った一連のブラウザテストを実行する Laravel Dusk のテストスクリプトを作成、テストスクリプト作成は Cursor や Github Copilot がサポート
- テスト実行: Laravel Dusk でテストスクリプトを実行
生成AIで Laravel Dusk のコード生成をサポートするパッケージを開発しました。
1. テスト環境準備
テスト対象のプロジェクトにブラウザからアクセスできれば、別途準備したテスト環境でブラウザテストを実行できます。テスト対象の Laravel プロジェクトに、BLOCS Dusk を直接インストールする必要はありません。
必要な環境
- PHP 8.3 以上
- Composer
- Laravel 11 以上
セットアップ
1-1. Laravel プロジェクト作成
composer create-project laravel/laravel dusk-web-test
1-2. blocs/dusk をインストール
cd dusk-web-test
composer require --dev blocs/dusk
1-3. Laravel Dusk と Open AI をインストール
php artisan dusk:install
php artisan openai:install
1-4. Laravel Dusk を実行
php artisan dusk
初回実行時にエラーが発生する場合があります。その場合は、再度実行してください。
1-5. envの設定
OPENAI_API_KEY=your-api-key-here
テストコードの生成には LLM の利用が必要なため、お持ちでない場合は、OpenAI_API キーを取得してください。OPENAI_APIキーの取得方法
1-6. APIリクエストのタイムアウトを変更
コード生成を行う際、下記のようなエラーが発生する場合があります。
cURL error 28: Operation timed out after 30002 milliseconds with 0 bytes received (see https://curl.haxx.se/libcurl/c/libcurl-errors.html) for https://api.openai.com/v1/chat/completions
Can not generate code
この場合は、config/openai.php の request_timeout パラメータを調整してください。
デフォルト値は 30 秒 です。
'request_timeout' => env('OPENAI_REQUEST_TIMEOUT', 120),
以上で環境構築は完了です。
ファイル構成
テストに関係するディレクトリ構造は以下の通りです。ブラウザテストのテストスクリプト（ExampleTest.phpなど）は、tests/Browser 配下に配置します。
dusk-web-test/
├─ config/
│ └─ openai.php
├─ tests/
│ ├─ Browser/
│ │ ├─ ExampleTest.php（テストスクリプト）
│ │ ├─ ExampleTestTrait.php（テストトレイト）
│ │ ├─ prompt/
│ │ │ ├─ developer.md
│ │ │ ├─ user.md
│ │ └─ ...（他のディレクトリは省略）
│ ├─ Feature/
│ ├─ Unit/
│ └─ DuskTestCase.php
└─ ...（他のディレクトリは省略）
2. テストトレイト作成
2-1. テストトレイト準備
以下のようなテストトレイトのファイルを作成します。テストトレイトで実行したい操作をコメントで指示します。
<?php
namespace Tests\Browser;
trait ExampleTestTrait
{
private function searchQiita($browser): void
{
// qiita.comに移動する
// 検索フォームにblocsと入力して、リターンする
// 検索結果一覧を関連順に並び替える
// 一番上の記事を開く
}
}
2-2. BLOCS Dusk でコード生成
BLOCS Dusk でコメントで指示した操作のコードを生成します。BLOCS Dusk を実行するとコマンド選択が表示されます。（↑↓で選択可能です。）
php artisan blocs:dusk tests/Browser/ExampleTestTrait.php
| コマンド | 説明 |
|---|---|
| searchQiita など | コードを生成する操作関数を選択 |
| quit | 終了する |
ステップごとにブラウザで動作確認しながらコード生成を行います。まず、コメントで指示した操作内容のコードを自動生成します。自動生成されたコードのコマンドを選択します。すべてのステップのコードを生成とブラウザで動作確認をして、テストトレイトを完成します。
| コマンド | 説明 |
|---|---|
| execute | 生成したコードをブラウザで実行して、テストトレイトを更新 |
| update | 生成したコードを実行せずに、テストトレイトを更新 |
| skip | このステップをとばす |
| quit | 自動生成を終了する |
3. テストスクリプト作成
3-1. テストスクリプト準備
以下のようなテストスクリプトのファイルを作成します。テストスクリプトでテストトレイトを呼び出し、実行したいシナリオをコメントで指示します。
<?php
namespace Tests\Browser;
use Laravel\Dusk\Browser;
use Tests\DuskTestCase;
class ExampleTest extends DuskTestCase
{
use ExampleTestTrait;
public function testQiita(): void
{
$this->browse(function (Browser $browser) {
// Qiitaでblocsを検索する
});
}
}
3-2. AI エージェントでコード生成
Cursor や GitHub Copilot などのエージェントを活用して、テストスクリプトを作成します。
4. テスト実行
このコマンドを実行すると、テストスクリプトを実行します。Laravel Dusk は、デフォルトでは画面を表示せずにバックグラウンドでテストを実行します。ブラウザで動作を確認しながらテストしたい時は、-- browseオプションをつけます。
php artisan dusk --browse tests/Browser/ExampleTest.php
まとめ
本記事では、Laravel Dusk でブラウザテストを超効率化するツールについて紹介しました。興味のある方は、ぜひ試してみてください！
弊社では、Laravel の開発をもっと便利にするテンプレートエンジンの開発も行っています。