[ Laravel從入門到精通 ] 測試系列 —— 在 Laravel 中基於 Dusk 實現瀏覽器自動化測試（一）：快速入門
簡介
我們前面介紹的單元測試和功能測試都是基於 PHPUnit 的，PHPUnit 作為一個 PHP 測試框架功能很強大，但是隻能用於測試後端介面和功能，無法模擬瀏覽器端行為測試基於 JavaScript 的前端應用。
為此，Laravel 為瀏覽器測試提供了一個官方擴充套件包 —— Laravel Dusk，該特性是在 Laravel 5.4 引入的，之前版本使用的是 Symfony BrowserKit 元件來模擬 Web 瀏覽器，但畢竟不是真正的瀏覽器，所以有諸多限制。
而 Laravel Dusk 基於 ChromeDriver （一個 Selenium WebDriver，支援桌面版和移動版 Chrome 瀏覽器）和 Facebook php-webdriver （Selenium WebDriver PHP 客戶端）構建，我們可以通過它來模擬在瀏覽器中的任何操作，從而實現瀏覽器自動化測試的目的。
Laravel Dusk 為我們做好了底層封裝，你不需要單獨安裝 Selenium，也不需要有之前使用過 Selenium 的經驗，就可以通過 Dusk 提供的方法輕鬆上手瀏覽器自動化測試。下面我們就來簡單介紹如何在 Laravel 專案中基於 Dusk 實現瀏覽器自動化測試。
注：Selenium 是一組工具集，用於實現測試自動化，關於 Selenium 的更多細節請參考 官方文件 ，或者閱讀相應的 中文文件 。
安裝配置
首先，在 Laravel 專案根目錄下通過 Composer 安裝 Dusk 擴充套件包：
composer require --dev laravel/dusk
我們只在本地開發環境或測試環境安裝 Dusk，所以加上了 --dev 選項，如果在生產環境安裝，存在安全風險，例如可以以任何使用者的身份登入到應用，所以不建議在生產環境使用。
接下來，執行 Artisan 命令 dusk:install 執行初始化操作：
php artisan dusk:install
該命令會在 tests 目錄下建立一個 Browser 目錄幷包含一個測試用例示例：
從根源上看，瀏覽器測試用例也是繼承自 PHPUnit\Framework\TestCase ，所以可以在用例中使用前面提到的所有 PHPUnit 及 Laravel 框架提供的斷言方法。
你可能已經注意到生成的子目錄中還包含了一個 screenshots 目錄，當測試失敗時，Dusk 會將螢幕截圖並將圖片儲存到該目錄，這在除錯時很有幫助。
接下來，需要更新 .env 檔案中的 APP_URL 配置項，這裡配置為專案的虛擬域名即可，比如 http://laravel58.test ，該域名需要和 Web 伺服器中的配置保持一致，以便可以通過瀏覽器訪問。
注：除此之外，你還可以讓 Dusk 選擇使用自己獨立的環境配置檔案，例如 .env.dusk.local ，如果是測試環境，則對應的配置檔案是 .env.dusk.testing 。
執行測試
做好以上初始化工作後，就可以在專案根目錄下通過如下 Artisan 命令基於 Dusk 執行瀏覽器測試了：
php artisan dusk
該命令會執行 tests\Browser\ExampleTest.php 檔案中的 ExampleTest ：
class ExampleTest extends DuskTestCase
{
/**
* A basic browser test example.
*
* @return void
*/
public function testBasicExample()
{
$this->browse(function (Browser $browser) {
$browser->visit('/')
->assertSee('Laravel');
});
}
}
其中，我們向 browse 方法傳入了一個包含 Browser 例項的回撥，在該回調中，我們可以基於 Browser 例項提供的方法模擬瀏覽器的各種操作，然後通過斷言方法對結果進行測試。比如這裡通過 visit 方法模擬在瀏覽器中訪問 http://laravel58.test/ URL，然後通過 assertSee 方法斷言結果頁面是否包含 Laravel 字串。
如果測試通過，則顯示結果如下：
如果將 Laravel 字串替換成其它不會在結果頁面出現的字串，比如 學院君 ，則測試失敗：
同時，會在 tests/Browser/screenshots 目錄下生成一張測試失敗時的頁面截圖。
看完這個最基本的測試用例，下面我們來看一些稍微複雜一點的例子。
表單和認證
通過 Dusk 還可以與表單進行互動，下面我們基於 Laravel認證腳手架程式碼模擬表單互動來測試使用者認證功能。
完整認證腳手架程式碼生成和資料庫遷移後，我們通過如下 Artisan 命令建立一個新的瀏覽器測試用例 RegisterTest ：
php artisan dusk:make RegisterTest
該命令會在 tests/Browser 目錄下生成 RegisterTest.php 檔案：
<?php
namespace Tests\Browser;
use Tests\DuskTestCase;
use Laravel\Dusk\Browser;
use Illuminate\Foundation\Testing\DatabaseMigrations;
class RegisterTest extends DuskTestCase
{
/**
* A Dusk test example.
*
* @return void
*/
public function testExample()
{
$this->browse(function (Browser $browser) {
$browser->visit('/')
->assertSee('Laravel');
});
}
}
修改 testExample 方法如下：
/**
* A Dusk register test example.
*
* @return void
*/
public function testExample()
{
$this->browse(function (Browser $browser) {
$browser->visit('/')// 訪問首頁
->clickLink('Register')// 點選註冊按鈕
->assertSee('Register')// 斷言註冊頁面包含Register文字
// 通過下面這些值填充登錄檔單
->value('#name', 'test_01')
->value('#email', '[email protected]')
->value('#password', 'test123456')
->value('#password-confirm', 'test123456')
->click('button[type="submit"]')// 點選註冊按鈕
->assertPathIs('/home')// 註冊成功後跳轉到 /home 頁面
->assertSee("You are logged in!");// 登入成功後提示文字
});
}
在這段測試用例中，我們首先訪問應用首頁，然後通過 clickLink 方法模擬點選註冊連結，進入註冊頁面後，先斷言頁面是否包含「Register」文字，然後通過 value 方法填充表單，在該方法中，第一個引數是 CSS 選擇器，第二個是對應輸入框的值，表單填充完畢後，通過 click 方法模擬點選註冊按鈕提交表單，提交表單註冊成功後，斷言頁面是否跳轉到 /home 路由，並斷言登入成功提示文字是否出現，至此，我們就編寫好了註冊流程的自動化測試，對比我們上篇教程通過 Laravel 功能測試編寫的測試用例，瀏覽器測試功能更加強大，更具有整體性，因為功能測試只能模擬測試指定的後端路由，而瀏覽器測試可以模擬完整的使用者操作流程，能夠在一個用例中測試一個完整的事務。
編寫好瀏覽器測試程式碼後，再次執行測試用例：
php artisan dusk
測試通過，結果顯示如下：
此時，檢視資料庫，會發現 users 表中新增了一個名為 test_01 的測試使用者。
你可以模仿註冊流程測試下使用者登入流程，除此之外，Dusk 還支援很多與其他頁面元素的互動以及額外封裝的斷言方法，具體可以參考官方文件。
下篇教程我們將演示如何在 Laravel 專案中通過 Dusk 編寫 Vue 元件的自動化測試用例。