前言

在現代軟體開發中，自動化測試已經成為不可或缺的一部分。無論是確保新功能不會影響現有功能，還是防止 bug 進入生產環境，良好的測試流程都能大大提高開發效率和應用質量。在這篇文章中，我們將介紹 Laravel Dusk，一個強大而易用的瀏覽器自動化測試工具，並展示如何使用 Dusk 來編寫和運行功能測試。

什麼是 Laravel Dusk？

Laravel Dusk 是一個基於瀏覽器的自動化測試工具，允許開發者通過模擬用戶操作來測試 Web 應用程序。Dusk 基於 ChromeDriver 和 Facebook WebDriver，因此它可以在無頭瀏覽器模式下運行，不需要手動打開瀏覽器即可執行測試。

安裝與配置

要使用 Laravel Dusk，首先需要將其安裝到你的 Laravel 專案中。你可以使用 Composer 來安裝：

composer require --dev laravel/dusk

安裝完成後，執行以下命令來初始化 Dusk 並生成相關文件：

php artisan dusk:install

這將在你的專案中創建一個 tests/Browser 目錄，用於存放 Dusk 測試。

環境配置

當你執行 php artisan dusk 命令時，Dusk 會默認使用 .env.dusk.{environment} 文件作為環境配置。這允許你在測試中使用不同於開發或生產環境的設置。比如，你可以創建 .env.dusk.local 文件來配置測試數據庫或其他測試專用的環境變數。

cp .env .env.dusk.local

然後在 .env.dusk.local 中進行相應的配置修改：

APP_ENV=local
APP_URL=http://localhost:8000
DB_CONNECTION=mysql
DB_DATABASE=dusk_testing
DB_USERNAME=root
DB_PASSWORD=

編寫第一個 Dusk 測試

我們來編寫一個簡單的 Dusk 測試，測試應用的登錄功能。首先，生成一個 Dusk 測試文件：

php artisan dusk:make LoginTest

生成的測試文件位於 tests/Browser/LoginTest.php。打開這個文件，編寫以下代碼：

namespace Tests\Browser;

use Laravel\Dusk\Browser;
use Tests\DuskTestCase;

class LoginTest extends DuskTestCase
{
    public function testUserCanLogin()
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/login')
                    ->type('email', 'user@example.com')
                    ->type('password', 'password')
                    ->press('Login')
                    ->assertPathIs('/home')
                    ->assertSee('Dashboard');
        });
    }
}

這個測試將會模擬一個用戶登錄到應用中，並驗證登錄成功後是否進入了首頁。

使用 Dusk 捕捉整頁截圖

有時候，當測試失敗時，我們希望能夠捕捉整個頁面的截圖來幫助調試。默認情況下，Dusk 只會捕捉視口內的部分。如果你需要捕捉整頁截圖，可以使用自定義視口尺寸的方式來實現：

$browser->resize(1920, 3000)
        ->screenshot('full-page');

這段代碼將瀏覽器的高度設置為 3000 像素，然後捕捉整頁的截圖。

測試複雜的表單提交

Dusk 不僅可以用於簡單的操作，還可以處理複雜的表單提交。例如，我們需要在表單中填寫多個字段，並且根據不同的輸入選項生成不同的結果頁面。以下是一個更複雜的例子：

$browser->visit('/report')
        ->type('search_date', '2024-09-01')
        ->select('class_info', 'Class A')
        ->select('cities', 'Taipei')
        ->press('Generate Report')
        ->assertSee('Report Generated Successfully')
        ->assertPathIs('/report/results')
        ->screenshot('report-results');

這個測試將自動填寫日期、選擇班級和城市，然後生成報告並驗證結果頁面。

使用 Dusk 點擊動態生成的元素

有時候，網頁上的某些元素是動態生成的或在頁面加載後才顯示。Dusk 提供了 waitFor 方法來等待這些元素出現，然後再進行操作：

$browser->visit('/dynamic-page')
        ->waitFor('.dynamic-button', 10)
        ->click('.dynamic-button')
        ->assertSee('Button Clicked Successfully');

這段代碼將會等待最多 10 秒，直到 .dynamic-button 元素出現在頁面上，然後進行點擊操作。

結語

Laravel Dusk 是一個強大的工具，讓我們能夠輕鬆編寫和執行瀏覽器自動化測試。無論是簡單的操作還是複雜的用例，Dusk 都能夠應對自如。通過將 Dusk 集成到你的開發工作流程中，你可以顯著提高應用的可靠性，並確保在每次更新後不會出現意外的問題。如果你還沒有使用 Dusk，現在正是開始的好時機！