Laravel Dusk

簡介
安裝
- 管理 ChromeDriver 安裝
- 使用其他瀏覽器
入門
瀏覽器基礎
與元素互動
可用斷言
頁面
元件
- 產生元件
- 使用元件
持續整合

簡介

[!WARNING] Pest 4 現在包含了自動化瀏覽器測試，與 Laravel Dusk 相比，提供了顯著的效能和可用性改進。對於新專案，我們建議使用 Pest 進行瀏覽器測試。

Laravel Dusk 提供了一個表達力強、易於使用的瀏覽器自動化和測試 API。預設情況下，Dusk 不需要您在本地電腦上安裝 JDK 或 Selenium。相反，Dusk 使用獨立的 ChromeDriver 安裝。但是，您可以自由使用任何其他 Selenium 相容的驅動程式。

安裝

首先，安裝 Google Chrome 並將 laravel/dusk Composer 依賴項新增到您的專案中：

composer require laravel/dusk --dev

[!WARNING] 如果您手動註冊 Dusk 的服務提供者，則絕不應在生產環境中註冊它，因為這可能導致任意使用者能夠認證您的應用程式。

安裝 Dusk 套件後，執行 dusk:install Artisan 命令。該命令將建立 tests/Browser 目錄、一個範例 Dusk 測試，並為您的作業系統安裝 Chrome Driver 二進位檔案：

php artisan dusk:install

接下來，在應用程式的 .env 檔案中設定 APP_URL 環境變數。此值應與您在瀏覽器中存取應用程式時使用的 URL 匹配。

[!NOTE] 如果您正在使用 Laravel Sail 來管理本地開發環境，請同時查閱 Sail 文件中關於配置和執行 Dusk 測試的內容。

管理 ChromeDriver 安裝

如果您想安裝與 Laravel Dusk 透過 dusk:install 命令安裝的 ChromeDriver 不同版本，可以使用 dusk:chrome-driver 命令：

# Install the latest version of ChromeDriver for your OS...
php artisan dusk:chrome-driver

# Install a given version of ChromeDriver for your OS...
php artisan dusk:chrome-driver 86

# Install a given version of ChromeDriver for all supported OSs...
php artisan dusk:chrome-driver --all

# Install the version of ChromeDriver that matches the detected version of Chrome / Chromium for your OS...
php artisan dusk:chrome-driver --detect

[!WARNING] Dusk 要求 chromedriver 二進位檔案可執行。如果您在執行 Dusk 時遇到問題，應使用以下命令確保二進位檔案可執行：chmod -R 0755 vendor/laravel/dusk/bin/。

使用其他瀏覽器

預設情況下，Dusk 使用 Google Chrome 和獨立的 ChromeDriver 安裝來執行瀏覽器測試。但是，您可以啟動自己的 Selenium 伺服器並針對任何瀏覽器執行測試。

首先，打開 tests/DuskTestCase.php 檔案，這是您應用程式的基礎 Dusk 測試案例。在此檔案中，您可以移除對 startChromeDriver 方法的呼叫。這將阻止 Dusk 自動啟動 ChromeDriver。然後，修改 driver 方法以連接到您選擇的 URL 和連接埠。

入門

產生測試

要產生 Dusk 測試，請使用 dusk:make Artisan 命令。產生的測試將放置在 tests/Browser 目錄中：

php artisan dusk:make LoginTest

每次測試後重置資料庫

您編寫的大多數測試都會與從應用程式資料庫檢索資料的頁面互動；但是，Dusk 測試絕不應使用 RefreshDatabase trait。該 trait 利用資料庫事務，這在 HTTP 請求中不適用或不可用。相反，您有兩個選擇：DatabaseMigrations trait 和 DatabaseTruncation trait。

DatabaseMigrations trait 會在每次測試前執行資料庫遷移。DatabaseTruncation trait 會在第一次測試時遷移資料庫，然後在後續測試中僅截斷資料表。

執行測試

要執行瀏覽器測試，請執行 dusk Artisan 命令：

php artisan dusk

如果您上次執行 dusk 命令時有測試失敗，可以使用 dusk:fails 命令優先重新執行失敗的測試以節省時間：

php artisan dusk:fails

dusk 命令接受 Pest/PHPUnit 測試執行器通常接受的任何參數。

手動啟動 ChromeDriver

預設情況下，Dusk 會自動嘗試啟動 ChromeDriver。如果這在您的系統上不起作用，可以在執行 dusk 命令前手動啟動 ChromeDriver。

環境處理

要強制 Dusk 在執行測試時使用自己的環境檔案，請在專案根目錄建立一個 .env.dusk.{environment} 檔案。例如，如果您將從 local 環境啟動 dusk 命令，應建立一個 .env.dusk.local 檔案。執行測試時，Dusk 將備份您的 .env 檔案並將 Dusk 環境重新命名為 .env。測試完成後，.env 檔案將被恢復。

瀏覽器基礎

建立瀏覽器

要開始，讓我們編寫一個測試來驗證我們可以登入應用程式。您可以在 Dusk 測試中呼叫 browse 方法來建立瀏覽器實例：

$this->browse(function (Browser $browser) {
    $browser->visit('/login')
        ->type('email', $user->email)
        ->type('password', 'password')
        ->press('Login')
        ->assertPathIs('/home');
});

建立多個瀏覽器

有時您可能需要多個瀏覽器來正確執行測試。只需在提供給 browse 方法的閉包簽名中添加更多瀏覽器參數即可：

$this->browse(function (Browser $first, Browser $second) {
    $first->loginAs(User::find(1))->visit('/home')->waitForText('Message');
    $second->loginAs(User::find(2))->visit('/home')->waitForText('Message')
        ->type('message', 'Hey Taylor')->press('Send');
    $first->waitForText('Hey Taylor')->assertSee('Jeffrey Way');
});

調整瀏覽器視窗大小

使用 resize、maximize 和 fitContent 方法調整瀏覽器視窗大小。使用 move 方法移動瀏覽器視窗位置。

瀏覽器巨集

使用 Browser::macro 方法定義自訂瀏覽器方法，通常在服務提供者的 boot 方法中呼叫。

認證

使用 Dusk 的 loginAs 方法來避免在每次測試中與應用程式的登入畫面互動。該方法接受認證模型的主鍵或認證模型實例。

Cookie

使用 cookie 方法獲取或設定加密的 cookie 值。使用 plainCookie 方法處理未加密的 cookie。使用 deleteCookie 方法刪除 cookie。

執行 JavaScript

使用 script 方法在瀏覽器中執行任意 JavaScript 語句。

截圖

使用 screenshot 方法截圖並儲存。使用 responsiveScreenshots 在不同斷點截取一系列截圖。使用 screenshotElement 截取特定元素的截圖。

將控制台輸出儲存到磁碟

使用 storeConsoleLog 方法將瀏覽器控制台輸出寫入磁碟。

將頁面原始碼儲存到磁碟

使用 storeSource 方法將頁面原始碼寫入磁碟。

與元素互動

Dusk 選擇器

Dusk 選擇器讓您專注於編寫有效的測試，而不是記住 CSS 選擇器。要定義選擇器，請為 HTML 元素添加 dusk 屬性。然後，在測試中使用 @ 前綴來操作該元素：

<button dusk="login-button">Login</button>

$browser->click('@login-button');

文字、值和屬性

使用 value 方法獲取或設定元素的值。使用 text 方法獲取元素的顯示文字。使用 attribute 方法獲取元素的屬性值。

與表單互動

使用 type 方法在輸入欄位中輸入文字。使用 append 方法追加文字而不清除內容。使用 clear 方法清除輸入值。使用 typeSlowly 和 appendSlowly 方法慢速輸入。

使用 select 方法選擇下拉選項。使用 check 和 uncheck 方法勾選/取消勾選複選框。使用 radio 方法選擇單選按鈕。

附加檔案

使用 attach 方法將檔案附加到 file 輸入元素。

按鈕點選

使用 press 方法點選按鈕元素。使用 pressAndWaitFor 方法點選按鈕並等待其重新啟用。

點選連結

使用 clickLink 方法點選具有給定顯示文字的連結。使用 seeLink 方法檢查連結是否可見。

使用鍵盤

使用 keys 方法提供複雜的輸入序列。使用 withKeyboard 方法進行流暢的鍵盤互動。使用 Keyboard::macro 定義自訂鍵盤巨集。

使用滑鼠

Dusk 提供了 click、clickAtXPath、clickAtPoint、doubleClick、rightClick、clickAndHold、controlClick、clickWhenVisible、mouseover、drag 等滑鼠互動方法。

JavaScript 對話框

使用 waitForDialog 等待對話框出現。使用 assertDialogOpened 斷言對話框已顯示。使用 typeInDialog、acceptDialog 和 dismissDialog 與對話框互動。

與內聯框架互動

使用 withinFrame 方法與 iframe 內的元素互動。

範圍限定選擇器

使用 with 方法將操作範圍限定在給定選擇器內。使用 elsewhere 和 elsewhereWhenAvailable 在當前範圍外執行斷言。

等待元素

Dusk 提供了多種等待方法：pause、waitFor、waitForText、waitForTextIn、waitForLink、waitForInput、waitForLocation、waitForRoute、waitForReload、waitUntil、waitUntilMissing、waitUntilEnabled、waitUntilDisabled、waitUntilMissingText 和 whenAvailable。

可用斷言

Dusk 提供了豐富的斷言方法，包括 assertTitle、assertTitleContains、assertUrlIs、assertSchemeIs、assertHostIs、assertPortIs、assertPathIs、assertPathBeginsWith、assertQueryStringHas、assertQueryStringMissing、assertFragmentIs、assertFragmentBeginsWith、assertRouteIs、assertSee、assertDontSee、assertSeeIn、assertDontSeeIn、assertSeeAnythingIn、assertSeeNothingIn、assertScript、assertSourceHas、assertSourceMissing、assertLinkPresent、assertLinkNotPresent、assertInputPresent、assertInputMissing、assertChecked、assertNotChecked、assertRadioSelected、assertRadioNotSelected、assertSelected、assertNotSelected、assertSelectHasOptions、assertSelectMissingOptions、assertSelectHasOption、assertSelectMissingOption、assertValue、assertAttribute、assertAriaAttribute、assertDataAttribute、assertVisible、assertPresent、assertNotPresent、assertMissing、assertInputValue、assertInputValueIsNot、assertDialogOpened、assertEnabled、assertDisabled、assertButtonEnabled、assertButtonDisabled、assertFocused、assertNotFocused、assertAuthenticated、assertGuest、assertAuthenticatedAs、assertVue、assertVueIsNot、assertVueContains、assertVueDoesNotContain 等。

頁面

頁面允許您使用操作方法定義常見選擇器，從而在多個測試中輕鬆重用。使用 dusk:page Artisan 命令產生頁面。

元件

元件類似於頁面，但用於在導航欄或通知等 UI 片段上建立可重用的測試功能。使用 dusk:component Artisan 命令產生元件。

持續整合

Dusk 可以在 Heroku CI、Travis CI、GitHub Actions 和 Chipper CI 等持續整合平台上執行。配置 CI 環境時，需要安裝 Chrome 瀏覽器並啟動 ChromeDriver。