🔧 阿川の電商水電行
前言
⚠️ 本文是過去發表的 「生成AI × Laravel Dusk 進行瀏覽器測試自動化」 的最新版本。
內容、環境建置步驟、影片等資料已更新至2025年10月版。
「想要自動化測試，但寫測試代碼太麻煩...」
「每次UI變更都需要修正測試代碼，太困難了...」
「出現錯誤，無法執行...」
許多開發者可能也有這樣的煩惱吧？本文將介紹如何結合生成AI與Laravel Dusk，讓瀏覽器測試超級有效率。
<代碼生成>
<測試執行>
生成AI帶來的高效率瀏覽器測試
- 測試特性建立：創建測試特性（操作函數的集成），進行在線操作如「登錄」或「畫面切換」，測試特性的創建由BLOCS Dusk支援
- 測試腳本建立：調用測試特性，依據劇本執行一系列瀏覽器測試的Laravel Dusk測試腳本，測試腳本創建由Cursor或GitHub Copilot支援
- 執行測試：使用Laravel Dusk執行測試腳本
我們開發了支持Laravel Dusk代碼生成的包。
<iframe id="qiita-embed-content__8b03ab1efcf9c1a65af2d46b070e3801"></iframe>
1. 測試環境準備
只要能從瀏覽器訪問測試目標的專案，即可在另外準備的測試環境中執行瀏覽器測試。無需直接在測試目標的Laravel專案中安裝BLOCS Dusk。
所需環境
- PHP 8.3 以上
- Composer
- Laravel 11 以上
設定
1-1. 創建Laravel專案
composer create-project laravel/laravel dusk-web-test1-2. 安裝blocs/dusk
cd dusk-web-test
composer require --dev blocs/dusk1-3. 安裝Laravel Dusk與Open AI
php artisan dusk:install
php artisan openai:install1-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. 準備測試特性
創建以下的測試特性檔案。在測試特性中用註解指示想要執行的操作。
tests/Browser/ExampleTestTrait.php
<?php
namespace Tests\Browser;
trait ExampleTestTrait
{
private function searchQiita($browser): void
{
// 移動到qiita.com
// 在搜尋框中輸入blocs並按下Enter
// 將搜尋結果按相關性排序
// 打開最上面的文章
}
}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. 準備測試腳本
創建以下的測試腳本檔案。在測試腳本中調用測試特性，並用註解指示想要執行的場景。
tests/Browser/ExampleTest.php
<?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開發更加方便的模板引擎。
參考文獻
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
