Laravel Dusk

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

簡介

Pest 4 現已包含自動瀏覽器測試功能，與 Laravel Dusk 相比，它在效能和易用性上有顯著提升。對於新專案，我們建議使用 Pest 進行瀏覽器測試。

Laravel Dusk 提供了一個富有表現力且易於使用的瀏覽器自動化和測試 API。預設情況下，Dusk 不需要你在本地計算機上安裝 JDK 或 Selenium。相反，Dusk 使用獨立的 ChromeDriver 安裝。當然，你也可以自由使用任何其他相容 Selenium 的驅動程式。

安裝

要開始使用，請安裝 Google Chrome，並將 laravel/dusk Composer 依賴項新增到你的專案中

1composer require laravel/dusk --dev

composer require laravel/dusk --dev

如果你手動註冊 Dusk 的服務提供者，請確保絕不要在生產環境中註冊它，否則可能導致任意使用者能夠透過你的應用程式進行身份驗證。

安裝 Dusk 包後，執行 dusk:install Artisan 命令。dusk:install 命令將建立一個 tests/Browser 目錄、一個示例 Dusk 測試，併為你的作業系統安裝 Chrome Driver 二進位制檔案。

1php artisan dusk:install

php artisan dusk:install

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

如果你正在使用 Laravel Sail 來管理本地開發環境，請查閱 Sail 關於配置和執行 Dusk 測試的文件。

管理 ChromeDriver 安裝

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

 1# Install the latest version of ChromeDriver for your OS...
 2php artisan dusk:chrome-driver
 3 
 4# Install a given version of ChromeDriver for your OS...
 5php artisan dusk:chrome-driver 86
 6 
 7# Install a given version of ChromeDriver for all supported OSs...
 8php artisan dusk:chrome-driver --all
 9 
10# Install the version of ChromeDriver that matches the detected version of Chrome / Chromium for your OS...
11php artisan dusk:chrome-driver --detect

# 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

Dusk 要求 chromedriver 二進位制檔案具有可執行許可權。如果你在執行 Dusk 時遇到問題，請確保使用以下命令賦予二進位制檔案執行許可權：chmod -R 0755 vendor/laravel/dusk/bin/。

使用其他瀏覽器

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

要開始操作，請開啟 tests/DuskTestCase.php 檔案，這是你應用程式的基礎 Dusk 測試用例。在此檔案中，你可以刪除對 startChromeDriver 方法的呼叫。這將阻止 Dusk 自動啟動 ChromeDriver。

1/**
2 * Prepare for Dusk test execution.
3 *
4 * @beforeClass
5 */
6public static function prepare(): void
7{
8    // static::startChromeDriver();
9}

/**
 * Prepare for Dusk test execution.
 *
 * @beforeClass
 */
public static function prepare(): void
{
    // static::startChromeDriver();
}

接下來，你可以修改 driver 方法以連線到你選擇的 URL 和埠。此外，你還可以修改應傳遞給 WebDriver 的“期望能力 (desired capabilities)”。

 1use Facebook\WebDriver\Remote\RemoteWebDriver;
 2 
 3/**
 4 * Create the RemoteWebDriver instance.
 5 */
 6protected function driver(): RemoteWebDriver
 7{
 8    return RemoteWebDriver::create(
 9        'https://:4444/wd/hub', DesiredCapabilities::phantomjs()
10    );
11}

use Facebook\WebDriver\Remote\RemoteWebDriver;

/**
 * Create the RemoteWebDriver instance.
 */
protected function driver(): RemoteWebDriver
{
    return RemoteWebDriver::create(
        'https://:4444/wd/hub', DesiredCapabilities::phantomjs()
    );
}

入門

生成測試

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

1php artisan dusk:make LoginTest

php artisan dusk:make LoginTest

在每次測試後重置資料庫

你編寫的大多數測試都將與從應用程式資料庫檢索資料的頁面進行互動；然而，Dusk 測試絕不應該使用 RefreshDatabase trait。RefreshDatabase trait 利用了資料庫事務，這在跨 HTTP 請求時並不適用。相反，你有兩個選擇：DatabaseMigrations trait 和 DatabaseTruncation trait。

使用資料庫遷移

DatabaseMigrations trait 會在每次測試前執行資料庫遷移。但是，為每次測試丟棄並重新建立資料庫表通常比截斷表要慢。

1<?php
2 
3use Illuminate\Foundation\Testing\DatabaseMigrations;
4use Laravel\Dusk\Browser;
5 
6pest()->use(DatabaseMigrations::class);
7 
8//

<?php

use Illuminate\Foundation\Testing\DatabaseMigrations;
use Laravel\Dusk\Browser;

pest()->use(DatabaseMigrations::class);

//

 1<?php
 2 
 3namespace Tests\Browser;
 4 
 5use Illuminate\Foundation\Testing\DatabaseMigrations;
 6use Laravel\Dusk\Browser;
 7use Tests\DuskTestCase;
 8 
 9class ExampleTest extends DuskTestCase
10{
11    use DatabaseMigrations;
12 
13    //
14}

<?php

namespace Tests\Browser;

use Illuminate\Foundation\Testing\DatabaseMigrations;
use Laravel\Dusk\Browser;
use Tests\DuskTestCase;

class ExampleTest extends DuskTestCase
{
    use DatabaseMigrations;

    //
}

執行 Dusk 測試時不能使用 SQLite 記憶體資料庫。由於瀏覽器在自己的程序中執行，它將無法訪問其他程序的記憶體資料庫。

使用資料庫截斷

DatabaseTruncation trait 會在第一次測試時遷移資料庫，以確保資料庫表已正確建立。但在隨後的測試中，資料庫表只會簡單地被截斷——這比重新執行所有資料庫遷移速度更快。

1<?php
2 
3use Illuminate\Foundation\Testing\DatabaseTruncation;
4use Laravel\Dusk\Browser;
5 
6pest()->use(DatabaseTruncation::class);
7 
8//

<?php

use Illuminate\Foundation\Testing\DatabaseTruncation;
use Laravel\Dusk\Browser;

pest()->use(DatabaseTruncation::class);

//

 1<?php
 2 
 3namespace Tests\Browser;
 4 
 5use App\Models\User;
 6use Illuminate\Foundation\Testing\DatabaseTruncation;
 7use Laravel\Dusk\Browser;
 8use Tests\DuskTestCase;
 9 
10class ExampleTest extends DuskTestCase
11{
12    use DatabaseTruncation;
13 
14    //
15}

<?php

namespace Tests\Browser;

use App\Models\User;
use Illuminate\Foundation\Testing\DatabaseTruncation;
use Laravel\Dusk\Browser;
use Tests\DuskTestCase;

class ExampleTest extends DuskTestCase
{
    use DatabaseTruncation;

    //
}

預設情況下，此 trait 會截斷除 migrations 表以外的所有表。如果你想自定義要截斷的表，可以在測試類上定義 $tablesToTruncate 屬性。

如果你使用的是 Pest，你應該在基礎 DuskTestCase 類或測試檔案擴充套件的任何類上定義屬性或方法。

1/**
2 * Indicates which tables should be truncated.
3 *
4 * @var array
5 */
6protected $tablesToTruncate = ['users'];

/**
 * Indicates which tables should be truncated.
 *
 * @var array
 */
protected $tablesToTruncate = ['users'];

或者，你可以在測試類上定義 $exceptTables 屬性來指定哪些表應從截斷中排除。

1/**
2 * Indicates which tables should be excluded from truncation.
3 *
4 * @var array
5 */
6protected $exceptTables = ['users'];

/**
 * Indicates which tables should be excluded from truncation.
 *
 * @var array
 */
protected $exceptTables = ['users'];

要指定應截斷表的資料庫連線，可以在測試類上定義 $connectionsToTruncate 屬性。

1/**
2 * Indicates which connections should have their tables truncated.
3 *
4 * @var array
5 */
6protected $connectionsToTruncate = ['mysql'];

/**
 * Indicates which connections should have their tables truncated.
 *
 * @var array
 */
protected $connectionsToTruncate = ['mysql'];

如果你想在執行資料庫截斷之前或之後執行程式碼，可以在測試類上定義 beforeTruncatingDatabase 或 afterTruncatingDatabase 方法。

 1/**
 2 * Perform any work that should take place before the database has started truncating.
 3 */
 4protected function beforeTruncatingDatabase(): void
 5{
 6    //
 7}
 8 
 9/**
10 * Perform any work that should take place after the database has finished truncating.
11 */
12protected function afterTruncatingDatabase(): void
13{
14    //
15}

/**
 * Perform any work that should take place before the database has started truncating.
 */
protected function beforeTruncatingDatabase(): void
{
    //
}

/**
 * Perform any work that should take place after the database has finished truncating.
 */
protected function afterTruncatingDatabase(): void
{
    //
}

執行測試

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

1php artisan dusk

php artisan dusk

如果你上次執行 dusk 命令時有測試失敗，可以透過使用 dusk:fails 命令先重新執行失敗的測試來節省時間。

1php artisan dusk:fails

php artisan dusk:fails

dusk 命令接受 Pest / PHPUnit 測試執行器通常接受的任何引數，例如允許你只執行給定分組的測試。

1php artisan dusk --group=foo

php artisan dusk --group=foo

如果你正在使用 Laravel Sail 管理本地開發環境，請查閱 Sail 關於配置和執行 Dusk 測試的文件。

手動啟動 ChromeDriver

預設情況下，Dusk 會嘗試自動啟動 ChromeDriver。如果這不適用於你的特定系統，你可以在執行 dusk 命令之前手動啟動 ChromeDriver。如果你選擇手動啟動，則應註釋掉 tests/DuskTestCase.php 檔案中的以下行。

1/**
2 * Prepare for Dusk test execution.
3 *
4 * @beforeClass
5 */
6public static function prepare(): void
7{
8    // static::startChromeDriver();
9}

/**
 * Prepare for Dusk test execution.
 *
 * @beforeClass
 */
public static function prepare(): void
{
    // static::startChromeDriver();
}

此外，如果你在 9515 以外的埠啟動 ChromeDriver，則應修改同一類的 driver 方法以反映正確的埠。

 1use Facebook\WebDriver\Remote\RemoteWebDriver;
 2 
 3/**
 4 * Create the RemoteWebDriver instance.
 5 */
 6protected function driver(): RemoteWebDriver
 7{
 8    return RemoteWebDriver::create(
 9        'https://:9515', DesiredCapabilities::chrome()
10    );
11}

use Facebook\WebDriver\Remote\RemoteWebDriver;

/**
 * Create the RemoteWebDriver instance.
 */
protected function driver(): RemoteWebDriver
{
    return RemoteWebDriver::create(
        'https://:9515', DesiredCapabilities::chrome()
    );
}

環境處理

要強制 Dusk 在執行測試時使用其自己的環境檔案，請在專案根目錄建立一個 .env.dusk.{environment} 檔案。例如，如果你將從 local 環境啟動 dusk 命令，你應該建立一個 .env.dusk.local 檔案。

執行測試時，Dusk 會備份你的 .env 檔案，並將 Dusk 環境重新命名為 .env。測試完成後，你的 .env 檔案將被恢復。

瀏覽器基礎

建立瀏覽器

讓我們開始編寫一個測試，驗證我們是否可以登入到應用程式。生成測試後，我們可以修改它以導航到登入頁面、輸入憑據並點選“登入”按鈕。要建立瀏覽器例項，可以在 Dusk 測試中呼叫 browse 方法。

 1<?php
 2 
 3use App\Models\User;
 4use Illuminate\Foundation\Testing\DatabaseMigrations;
 5use Laravel\Dusk\Browser;
 6 
 7pest()->use(DatabaseMigrations::class);
 8 
 9test('basic example', function () {
10    $user = User::factory()->create([
11        'email' => '[email protected]',
12    ]);
13 
14    $this->browse(function (Browser $browser) use ($user) {
15        $browser->visit('/login')
16            ->type('email', $user->email)
17            ->type('password', 'password')
18            ->press('Login')
19            ->assertPathIs('/home');
20    });
21});

<?php

use App\Models\User;
use Illuminate\Foundation\Testing\DatabaseMigrations;
use Laravel\Dusk\Browser;

pest()->use(DatabaseMigrations::class);

test('basic example', function () {
    $user = User::factory()->create([
        'email' => '[email protected]',
    ]);

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

 1<?php
 2 
 3namespace Tests\Browser;
 4 
 5use App\Models\User;
 6use Illuminate\Foundation\Testing\DatabaseMigrations;
 7use Laravel\Dusk\Browser;
 8use Tests\DuskTestCase;
 9 
10class ExampleTest extends DuskTestCase
11{
12    use DatabaseMigrations;
13 
14    /**
15     * A basic browser test example.
16     */
17    public function test_basic_example(): void
18    {
19        $user = User::factory()->create([
20            'email' => '[email protected]',
21        ]);
22 
23        $this->browse(function (Browser $browser) use ($user) {
24            $browser->visit('/login')
25                ->type('email', $user->email)
26                ->type('password', 'password')
27                ->press('Login')
28                ->assertPathIs('/home');
29        });
30    }
31}

<?php

namespace Tests\Browser;

use App\Models\User;
use Illuminate\Foundation\Testing\DatabaseMigrations;
use Laravel\Dusk\Browser;
use Tests\DuskTestCase;

class ExampleTest extends DuskTestCase
{
    use DatabaseMigrations;

    /**
     * A basic browser test example.
     */
    public function test_basic_example(): void
    {
        $user = User::factory()->create([
            'email' => '[email protected]',
        ]);

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

如上面的示例所示，browse 方法接受一個閉包。Dusk 會自動將瀏覽器例項傳遞給此閉包，它是用於與應用程式互動並進行斷言的主要物件。

建立多個瀏覽器

有時你可能需要多個瀏覽器才能正確執行測試。例如，可能需要多個瀏覽器來測試與 WebSocket 互動的聊天介面。要建立多個瀏覽器，只需在傳遞給 browse 方法的閉包簽名中新增更多瀏覽器引數即可。

 1$this->browse(function (Browser $first, Browser $second) {
 2    $first->loginAs(User::find(1))
 3        ->visit('/home')
 4        ->waitForText('Message');
 5 
 6    $second->loginAs(User::find(2))
 7        ->visit('/home')
 8        ->waitForText('Message')
 9        ->type('message', 'Hey Taylor')
10        ->press('Send');
11 
12    $first->waitForText('Hey Taylor')
13        ->assertSee('Jeffrey Way');
14});

$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');
});

visit 方法可用於導航到應用程式中的給定 URI。

1$browser->visit('/login');

$browser->visit('/login');

你可以使用 visitRoute 方法導航到命名路由。

1$browser->visitRoute($routeName, $parameters);

$browser->visitRoute($routeName, $parameters);

你可以使用 back 和 forward 方法進行“後退”和“前進”導航。

1$browser->back();
2 
3$browser->forward();

$browser->back();

$browser->forward();

你可以使用 refresh 方法重新整理頁面。

1$browser->refresh();

$browser->refresh();

調整瀏覽器視窗大小

你可以使用 resize 方法調整瀏覽器視窗的大小。

1$browser->resize(1920, 1080);

$browser->resize(1920, 1080);

maximize 方法可用於最大化瀏覽器視窗。

1$browser->maximize();

$browser->maximize();

fitContent 方法將調整瀏覽器視窗大小以匹配其內容大小。

1$browser->fitContent();

$browser->fitContent();

當測試失敗時，Dusk 會在截圖前自動調整瀏覽器大小以適應內容。你可以透過在測試中呼叫 disableFitOnFailure 方法來停用此功能。

1$browser->disableFitOnFailure();

$browser->disableFitOnFailure();

你可以使用 move 方法將瀏覽器視窗移動到螢幕上的不同位置。

1$browser->move($x = 100, $y = 100);

$browser->move($x = 100, $y = 100);

瀏覽器宏

如果你想定義一個可以在多個測試中複用的自定義瀏覽器方法，可以在 Browser 類上使用 macro 方法。通常，你應該從服務提供者的 boot 方法中呼叫此方法。

 1<?php
 2 
 3namespace App\Providers;
 4 
 5use Illuminate\Support\ServiceProvider;
 6use Laravel\Dusk\Browser;
 7 
 8class DuskServiceProvider extends ServiceProvider
 9{
10    /**
11     * Register Dusk's browser macros.
12     */
13    public function boot(): void
14    {
15        Browser::macro('scrollToElement', function (string $element = null) {
16            $this->script("$('html, body').animate({ scrollTop: $('$element').offset().top }, 0);");
17 
18            return $this;
19        });
20    }
21}

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Laravel\Dusk\Browser;

class DuskServiceProvider extends ServiceProvider
{
    /**
     * Register Dusk's browser macros.
     */
    public function boot(): void
    {
        Browser::macro('scrollToElement', function (string $element = null) {
            $this->script("$('html, body').animate({ scrollTop: $('$element').offset().top }, 0);");

            return $this;
        });
    }
}

macro 函式接受一個名稱作為第一個引數，接受一個閉包作為第二個引數。當在 Browser 例項上呼叫宏作為方法時，將執行宏的閉包。

1$this->browse(function (Browser $browser) use ($user) {
2    $browser->visit('/pay')
3        ->scrollToElement('#credit-card-details')
4        ->assertSee('Enter Credit Card Details');
5});

$this->browse(function (Browser $browser) use ($user) {
    $browser->visit('/pay')
        ->scrollToElement('#credit-card-details')
        ->assertSee('Enter Credit Card Details');
});

認證

通常，你需要測試需要身份驗證的頁面。你可以使用 Dusk 的 loginAs 方法，以避免在每次測試時都與應用程式的登入螢幕互動。loginAs 方法接受與你的可認證模型關聯的主鍵，或可認證模型例項。

1use App\Models\User;
2use Laravel\Dusk\Browser;
3 
4$this->browse(function (Browser $browser) {
5    $browser->loginAs(User::find(1))
6        ->visit('/home');
7});

use App\Models\User;
use Laravel\Dusk\Browser;

$this->browse(function (Browser $browser) {
    $browser->loginAs(User::find(1))
        ->visit('/home');
});

使用 loginAs 方法後，使用者會話將為檔案內的所有測試所保持。

Cookies

你可以使用 cookie 方法獲取或設定加密 cookie 的值。預設情況下，Laravel 建立的所有 cookie 都是加密的。

1$browser->cookie('name');
2 
3$browser->cookie('name', 'Taylor');

$browser->cookie('name');

$browser->cookie('name', 'Taylor');

你可以使用 plainCookie 方法獲取或設定未加密 cookie 的值。

1$browser->plainCookie('name');
2 
3$browser->plainCookie('name', 'Taylor');

$browser->plainCookie('name');

$browser->plainCookie('name', 'Taylor');

你可以使用 deleteCookie 方法刪除給定的 cookie。

1$browser->deleteCookie('name');

$browser->deleteCookie('name');

執行 JavaScript

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

1$browser->script('document.documentElement.scrollTop = 0');
2 
3$browser->script([
4    'document.body.scrollTop = 0',
5    'document.documentElement.scrollTop = 0',
6]);
7 
8$output = $browser->script('return window.location.pathname');

$browser->script('document.documentElement.scrollTop = 0');

$browser->script([
    'document.body.scrollTop = 0',
    'document.documentElement.scrollTop = 0',
]);

$output = $browser->script('return window.location.pathname');

截圖

你可以使用 screenshot 方法進行截圖並以給定檔名儲存。所有截圖都將儲存在 tests/Browser/screenshots 目錄中。

1$browser->screenshot('filename');

$browser->screenshot('filename');

responsiveScreenshots 方法可用於在不同的斷點處進行一系列截圖。

1$browser->responsiveScreenshots('filename');

$browser->responsiveScreenshots('filename');

screenshotElement 方法可用於擷取頁面上特定元素的截圖。

1$browser->screenshotElement('#selector', 'filename');

$browser->screenshotElement('#selector', 'filename');

將控制檯輸出儲存到磁碟

你可以使用 storeConsoleLog 方法將當前瀏覽器的控制檯輸出寫入磁碟，並使用給定的檔名。控制檯輸出將儲存在 tests/Browser/console 目錄中。

1$browser->storeConsoleLog('filename');

$browser->storeConsoleLog('filename');

將頁面原始碼儲存到磁碟

你可以使用 storeSource 方法將當前頁面的原始碼寫入磁碟，並使用給定的檔名。頁面原始碼將儲存在 tests/Browser/source 目錄中。

1$browser->storeSource('filename');

$browser->storeSource('filename');

與元素互動

Dusk 選擇器

選擇良好的 CSS 選擇器來與元素互動是編寫 Dusk 測試最困難的部分之一。隨著時間的推移，前端更改會導致類似以下的 CSS 選擇器破壞你的測試。

1// HTML...
2 
3<button>Login</button>

// HTML...

<button>Login</button>

1// Test...
2 
3$browser->click('.login-page .container div > button');

// Test...

$browser->click('.login-page .container div > button');

Dusk 選擇器允許你專注於編寫有效的測試，而不是記住 CSS 選擇器。要定義選擇器，請將 dusk 屬性新增到 HTML 元素中。然後，在與 Dusk 瀏覽器互動時，在選擇器前加上 @ 以在測試中操作附加的元素。

1// HTML...
2 
3<button dusk="login-button">Login</button>

// HTML...

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

1// Test...
2 
3$browser->click('@login-button');

// Test...

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

如果需要，你可以透過 selectorHtmlAttribute 方法自定義 Dusk 選擇器使用的 HTML 屬性。通常，此方法應從應用程式 AppServiceProvider 的 boot 方法中呼叫。

1use Laravel\Dusk\Dusk;
2 
3Dusk::selectorHtmlAttribute('data-dusk');

use Laravel\Dusk\Dusk;

Dusk::selectorHtmlAttribute('data-dusk');

文字、值和屬性

獲取和設定值

Dusk 提供了幾種方法來與頁面上元素的當前值、顯示文字和屬性進行互動。例如，要獲取與給定 CSS 或 Dusk 選擇器匹配的元素的“值”，請使用 value 方法。

1// Retrieve the value...
2$value = $browser->value('selector');
3 
4// Set the value...
5$browser->value('selector', 'value');

// Retrieve the value...
$value = $browser->value('selector');

// Set the value...
$browser->value('selector', 'value');

你可以使用 inputValue 方法獲取具有給定欄位名的輸入元素的“值”。

1$value = $browser->inputValue('field');

$value = $browser->inputValue('field');

獲取文字

text 方法可用於檢索與給定選擇器匹配的元素的顯示文字。

1$text = $browser->text('selector');

$text = $browser->text('selector');

獲取屬性

最後，attribute 方法可用於檢索與給定選擇器匹配的元素的屬性值。

1$attribute = $browser->attribute('selector', 'value');

$attribute = $browser->attribute('selector', 'value');

與表單互動

輸入值

Dusk 提供了多種與表單和輸入元素互動的方法。首先，讓我們看一個在輸入欄位中輸入文字的示例。

1$browser->type('email', '[email protected]');

$browser->type('email', '[email protected]');

請注意，雖然該方法在必要時接受 CSS 選擇器，但我們不需要將其傳遞給 type 方法。如果未提供 CSS 選擇器，Dusk 將搜尋具有給定 name 屬性的 input 或 textarea 欄位。

要在不清除內容的情況下向欄位追加文字，可以使用 append 方法。

1$browser->type('tags', 'foo')
2    ->append('tags', ', bar, baz');

$browser->type('tags', 'foo')
    ->append('tags', ', bar, baz');

你可以使用 clear 方法清除輸入的值。

1$browser->clear('email');

$browser->clear('email');

你可以指示 Dusk 使用 typeSlowly 方法緩慢輸入。預設情況下，Dusk 將在按鍵之間暫停 100 毫秒。要自定義按鍵之間的時間，可以將相應的毫秒數作為第三個引數傳遞給該方法。

1$browser->typeSlowly('mobile', '+1 (202) 555-5555');
2 
3$browser->typeSlowly('mobile', '+1 (202) 555-5555', 300);

$browser->typeSlowly('mobile', '+1 (202) 555-5555');

$browser->typeSlowly('mobile', '+1 (202) 555-5555', 300);

你可以使用 appendSlowly 方法緩慢追加文字。

1$browser->type('tags', 'foo')
2    ->appendSlowly('tags', ', bar, baz');

$browser->type('tags', 'foo')
    ->appendSlowly('tags', ', bar, baz');

下拉選單

要選擇 select 元素上可用的值，可以使用 select 方法。與 type 方法一樣，select 方法不需要完整的 CSS 選擇器。在將值傳遞給 select 方法時，你應該傳遞底層的選項值而不是顯示文字。

1$browser->select('size', 'Large');

$browser->select('size', 'Large');

透過省略第二個引數，你可以隨機選擇一個選項。

1$browser->select('size');

$browser->select('size');

透過提供一個數組作為 select 方法的第二個引數，你可以指示該方法選擇多個選項。

1$browser->select('categories', ['Art', 'Music']);

$browser->select('categories', ['Art', 'Music']);

複選框

要“選中”複選框輸入，可以使用 check 方法。與許多其他與輸入相關的方法一樣，不需要完整的 CSS 選擇器。如果找不到 CSS 選擇器匹配項，Dusk 將搜尋具有匹配 name 屬性的複選框。

1$browser->check('terms');

$browser->check('terms');

uncheck 方法可用於“取消選中”複選框輸入。

1$browser->uncheck('terms');

$browser->uncheck('terms');

單選按鈕

要“選擇” radio 輸入選項，可以使用 radio 方法。與許多其他與輸入相關的方法一樣，不需要完整的 CSS 選擇器。如果找不到 CSS 選擇器匹配項，Dusk 將搜尋具有匹配 name 和 value 屬性的 radio 輸入。

1$browser->radio('size', 'large');

$browser->radio('size', 'large');

上傳檔案

attach 方法可用於將檔案附加到 file 輸入元素。與許多其他與輸入相關的方法一樣，不需要完整的 CSS 選擇器。如果找不到 CSS 選擇器匹配項，Dusk 將搜尋具有匹配 name 屬性的 file 輸入。

1$browser->attach('photo', __DIR__.'/photos/mountains.png');

$browser->attach('photo', __DIR__.'/photos/mountains.png');

attach 函式要求伺服器上安裝並啟用 Zip PHP 擴充套件。

點選按鈕

press 方法可用於點選頁面上的按鈕元素。傳遞給 press 方法的引數可以是按鈕的顯示文字，也可以是 CSS / Dusk 選擇器。

1$browser->press('Login');

$browser->press('Login');

提交表單時，許多應用程式會在點選後停用表單的提交按鈕，並在表單提交的 HTTP 請求完成後重新啟用它。要點選按鈕並等待其重新啟用，可以使用 pressAndWaitFor 方法。

1// Press the button and wait a maximum of 5 seconds for it to be enabled...
2$browser->pressAndWaitFor('Save');
3 
4// Press the button and wait a maximum of 1 second for it to be enabled...
5$browser->pressAndWaitFor('Save', 1);

// Press the button and wait a maximum of 5 seconds for it to be enabled...
$browser->pressAndWaitFor('Save');

// Press the button and wait a maximum of 1 second for it to be enabled...
$browser->pressAndWaitFor('Save', 1);

點選連結

要點選連結，可以使用瀏覽器例項上的 clickLink 方法。clickLink 方法將點選具有給定顯示文字的連結。

1$browser->clickLink($linkText);

$browser->clickLink($linkText);

你可以使用 seeLink 方法來確定具有給定顯示文字的連結在頁面上是否可見。

1if ($browser->seeLink($linkText)) {
2    // ...
3}

if ($browser->seeLink($linkText)) {
    // ...
}

這些方法與 jQuery 互動。如果頁面上沒有 jQuery，Dusk 會自動將其注入頁面，以便在測試期間可用。

使用鍵盤

keys 方法允許你為給定元素提供比 type 方法通常允許的更復雜的輸入序列。例如，你可以指示 Dusk 在輸入值時按住修飾鍵。在此示例中，在元素輸入 taylor 時將按住 shift 鍵。taylor 輸入後，將輸入 swift，不帶任何修飾鍵。

1$browser->keys('selector', ['{shift}', 'taylor'], 'swift');

$browser->keys('selector', ['{shift}', 'taylor'], 'swift');

keys 方法的另一個有價值的用例是嚮應用程式的主要 CSS 選擇器傳送“鍵盤快捷鍵”組合。

1$browser->keys('.app', ['{command}', 'j']);

$browser->keys('.app', ['{command}', 'j']);

所有修飾鍵（如 {command}）都包裹在 {} 字元中，並與 Facebook\WebDriver\WebDriverKeys 類中定義的常量匹配，這些常量可以在 GitHub 上找到。

流式鍵盤互動

Dusk 還提供了一個 withKeyboard 方法，允許你透過 Laravel\Dusk\Keyboard 類流式地執行復雜的鍵盤互動。Keyboard 類提供了 press、release、type 和 pause 方法。

1use Laravel\Dusk\Keyboard;
2 
3$browser->withKeyboard(function (Keyboard $keyboard) {
4    $keyboard->press('c')
5        ->pause(1000)
6        ->release('c')
7        ->type(['c', 'e', 'o']);
8});

use Laravel\Dusk\Keyboard;

$browser->withKeyboard(function (Keyboard $keyboard) {
    $keyboard->press('c')
        ->pause(1000)
        ->release('c')
        ->type(['c', 'e', 'o']);
});

鍵盤宏

如果你想定義可以在整個測試套件中輕鬆複用的自定義鍵盤互動，可以使用 Keyboard 類提供的 macro 方法。通常，你應該從服務提供者的 boot 方法中呼叫此方法。

 1<?php
 2 
 3namespace App\Providers;
 4 
 5use Facebook\WebDriver\WebDriverKeys;
 6use Illuminate\Support\ServiceProvider;
 7use Laravel\Dusk\Keyboard;
 8use Laravel\Dusk\OperatingSystem;
 9 
10class DuskServiceProvider extends ServiceProvider
11{
12    /**
13     * Register Dusk's browser macros.
14     */
15    public function boot(): void
16    {
17        Keyboard::macro('copy', function (string $element = null) {
18            $this->type([
19                OperatingSystem::onMac() ? WebDriverKeys::META : WebDriverKeys::CONTROL, 'c',
20            ]);
21 
22            return $this;
23        });
24 
25        Keyboard::macro('paste', function (string $element = null) {
26            $this->type([
27                OperatingSystem::onMac() ? WebDriverKeys::META : WebDriverKeys::CONTROL, 'v',
28            ]);
29 
30            return $this;
31        });
32    }
33}

<?php

namespace App\Providers;

use Facebook\WebDriver\WebDriverKeys;
use Illuminate\Support\ServiceProvider;
use Laravel\Dusk\Keyboard;
use Laravel\Dusk\OperatingSystem;

class DuskServiceProvider extends ServiceProvider
{
    /**
     * Register Dusk's browser macros.
     */
    public function boot(): void
    {
        Keyboard::macro('copy', function (string $element = null) {
            $this->type([
                OperatingSystem::onMac() ? WebDriverKeys::META : WebDriverKeys::CONTROL, 'c',
            ]);

            return $this;
        });

        Keyboard::macro('paste', function (string $element = null) {
            $this->type([
                OperatingSystem::onMac() ? WebDriverKeys::META : WebDriverKeys::CONTROL, 'v',
            ]);

            return $this;
        });
    }
}

macro 函式接受一個名稱作為第一個引數，接受一個閉包作為第二個引數。當在 Keyboard 例項上呼叫宏作為方法時，將執行宏的閉包。

1$browser->click('@textarea')
2    ->withKeyboard(fn (Keyboard $keyboard) => $keyboard->copy())
3    ->click('@another-textarea')
4    ->withKeyboard(fn (Keyboard $keyboard) => $keyboard->paste());

$browser->click('@textarea')
    ->withKeyboard(fn (Keyboard $keyboard) => $keyboard->copy())
    ->click('@another-textarea')
    ->withKeyboard(fn (Keyboard $keyboard) => $keyboard->paste());

使用滑鼠

點選元素

click 方法可用於點選與給定 CSS 或 Dusk 選擇器匹配的元素。

1$browser->click('.selector');

$browser->click('.selector');

clickAtXPath 方法可用於點選與給定 XPath 表示式匹配的元素。

1$browser->clickAtXPath('//div[@class = "selector"]');

$browser->clickAtXPath('//div[@class = "selector"]');

clickAtPoint 方法可用於點選相對於瀏覽器可見區域的給定座標對處的最頂層元素。

1$browser->clickAtPoint($x = 0, $y = 0);

$browser->clickAtPoint($x = 0, $y = 0);

doubleClick 方法可用於模擬滑鼠雙擊。

1$browser->doubleClick();
2 
3$browser->doubleClick('.selector');

$browser->doubleClick();

$browser->doubleClick('.selector');

rightClick 方法可用於模擬滑鼠右鍵點選。

1$browser->rightClick();
2 
3$browser->rightClick('.selector');

$browser->rightClick();

$browser->rightClick('.selector');

clickAndHold 方法可用於模擬按下並按住滑鼠按鈕。隨後呼叫 releaseMouse 方法將撤消此行為並釋放滑鼠按鈕。

1$browser->clickAndHold('.selector');
2 
3$browser->clickAndHold()
4    ->pause(1000)
5    ->releaseMouse();

$browser->clickAndHold('.selector');

$browser->clickAndHold()
    ->pause(1000)
    ->releaseMouse();

controlClick 方法可用於模擬瀏覽器內的 ctrl+click 事件。

1$browser->controlClick();
2 
3$browser->controlClick('.selector');

$browser->controlClick();

$browser->controlClick('.selector');

滑鼠懸停 (Mouseover)

當你需要將滑鼠移動到與給定 CSS 或 Dusk 選擇器匹配的元素上時，可以使用 mouseover 方法。

1$browser->mouseover('.selector');

$browser->mouseover('.selector');

拖放 (Drag and Drop)

drag 方法可用於將與給定選擇器匹配的元素拖動到另一個元素上。

1$browser->drag('.from-selector', '.to-selector');

$browser->drag('.from-selector', '.to-selector');

或者，你可以沿單個方向拖動元素。

1$browser->dragLeft('.selector', $pixels = 10);
2$browser->dragRight('.selector', $pixels = 10);
3$browser->dragUp('.selector', $pixels = 10);
4$browser->dragDown('.selector', $pixels = 10);

$browser->dragLeft('.selector', $pixels = 10);
$browser->dragRight('.selector', $pixels = 10);
$browser->dragUp('.selector', $pixels = 10);
$browser->dragDown('.selector', $pixels = 10);

最後，你可以按給定的偏移量拖動元素。

1$browser->dragOffset('.selector', $x = 10, $y = 10);

$browser->dragOffset('.selector', $x = 10, $y = 10);

JavaScript 對話方塊

Dusk 提供了各種與 JavaScript 對話方塊互動的方法。例如，你可以使用 waitForDialog 方法等待 JavaScript 對話框出現。此方法接受一個可選引數，指示等待對話框出現多少秒。

1$browser->waitForDialog($seconds = null);

$browser->waitForDialog($seconds = null);

assertDialogOpened 方法可用於斷言已顯示對話方塊幷包含給定的訊息。

1$browser->assertDialogOpened('Dialog message');

$browser->assertDialogOpened('Dialog message');

如果 JavaScript 對話方塊包含提示，你可以使用 typeInDialog 方法在提示中輸入值。

1$browser->typeInDialog('Hello World');

$browser->typeInDialog('Hello World');

要透過點選“確定”按鈕關閉開啟的 JavaScript 對話方塊，可以呼叫 acceptDialog 方法。

1$browser->acceptDialog();

$browser->acceptDialog();

要透過點選“取消”按鈕關閉開啟的 JavaScript 對話方塊，可以呼叫 dismissDialog 方法。

1$browser->dismissDialog();

$browser->dismissDialog();

與內聯框架 (iframe) 互動

如果你需要與 iframe 內的元素互動，可以使用 withinFrame 方法。在傳遞給 withinFrame 方法的閉包內發生的所有元素互動都將限定在指定 iframe 的上下文中。

1$browser->withinFrame('#credit-card-details', function ($browser) {
2    $browser->type('input[name="cardnumber"]', '4242424242424242')
3        ->type('input[name="exp-date"]', '1224')
4        ->type('input[name="cvc"]', '123')
5        ->press('Pay');
6});

$browser->withinFrame('#credit-card-details', function ($browser) {
    $browser->type('input[name="cardnumber"]', '4242424242424242')
        ->type('input[name="exp-date"]', '1224')
        ->type('input[name="cvc"]', '123')
        ->press('Pay');
});

作用域選擇器

有時你可能希望在限定在給定選擇器範圍內的同時執行多個操作。例如，你可能希望斷言某些文字僅存在於表格中，然後點選該表格中的按鈕。你可以使用 with 方法來實現這一點。在傳遞給 with 方法的閉包內執行的所有操作都將限定在原始選擇器內。

1$browser->with('.table', function (Browser $table) {
2    $table->assertSee('Hello World')
3        ->clickLink('Delete');
4});

$browser->with('.table', function (Browser $table) {
    $table->assertSee('Hello World')
        ->clickLink('Delete');
});

你偶爾可能需要在當前作用域之外執行斷言。你可以使用 elsewhere 和 elsewhereWhenAvailable 方法來實現這一點。

 1$browser->with('.table', function (Browser $table) {
 2    // Current scope is `body .table`...
 3 
 4    $browser->elsewhere('.page-title', function (Browser $title) {
 5        // Current scope is `body .page-title`...
 6        $title->assertSee('Hello World');
 7    });
 8 
 9    $browser->elsewhereWhenAvailable('.page-title', function (Browser $title) {
10        // Current scope is `body .page-title`...
11        $title->assertSee('Hello World');
12    });
13});

$browser->with('.table', function (Browser $table) {
    // Current scope is `body .table`...

    $browser->elsewhere('.page-title', function (Browser $title) {
        // Current scope is `body .page-title`...
        $title->assertSee('Hello World');
    });

    $browser->elsewhereWhenAvailable('.page-title', function (Browser $title) {
        // Current scope is `body .page-title`...
        $title->assertSee('Hello World');
    });
});

等待元素

在測試大量使用 JavaScript 的應用程式時，通常需要在繼續測試之前“等待”某些元素或資料可用。Dusk 使這一過程變得非常簡單。透過各種方法，你可以等待元素在頁面上可見，甚至等待直到給定的 JavaScript 表示式求值為 true。

等待 (Waiting)

如果只需要暫停測試給定的毫秒數，請使用 pause 方法。

1$browser->pause(1000);

$browser->pause(1000);

如果只需要在給定條件為 true 時暫停測試，請使用 pauseIf 方法。

1$browser->pauseIf(App::environment('production'), 1000);

$browser->pauseIf(App::environment('production'), 1000);

同樣，如果需要在給定條件不為 true 時暫停測試，可以使用 pauseUnless 方法。

1$browser->pauseUnless(App::environment('testing'), 1000);

$browser->pauseUnless(App::environment('testing'), 1000);

等待選擇器

waitFor 方法可用於暫停測試執行，直到與給定 CSS 或 Dusk 選擇器匹配的元素顯示在頁面上。預設情況下，這將暫停測試最多五秒，然後丟擲異常。如果需要，你可以將自定義超時閾值作為第二個引數傳遞給該方法。

1// Wait a maximum of five seconds for the selector...
2$browser->waitFor('.selector');
3 
4// Wait a maximum of one second for the selector...
5$browser->waitFor('.selector', 1);

// Wait a maximum of five seconds for the selector...
$browser->waitFor('.selector');

// Wait a maximum of one second for the selector...
$browser->waitFor('.selector', 1);

你也可以等待，直到與給定選擇器匹配的元素包含給定的文字。

1// Wait a maximum of five seconds for the selector to contain the given text...
2$browser->waitForTextIn('.selector', 'Hello World');
3 
4// Wait a maximum of one second for the selector to contain the given text...
5$browser->waitForTextIn('.selector', 'Hello World', 1);

// Wait a maximum of five seconds for the selector to contain the given text...
$browser->waitForTextIn('.selector', 'Hello World');

// Wait a maximum of one second for the selector to contain the given text...
$browser->waitForTextIn('.selector', 'Hello World', 1);

你也可以等待，直到與給定選擇器匹配的元素從頁面中消失。

1// Wait a maximum of five seconds until the selector is missing...
2$browser->waitUntilMissing('.selector');
3 
4// Wait a maximum of one second until the selector is missing...
5$browser->waitUntilMissing('.selector', 1);

// Wait a maximum of five seconds until the selector is missing...
$browser->waitUntilMissing('.selector');

// Wait a maximum of one second until the selector is missing...
$browser->waitUntilMissing('.selector', 1);

或者，你可以等待，直到與給定選擇器匹配的元素被啟用或停用。

 1// Wait a maximum of five seconds until the selector is enabled...
 2$browser->waitUntilEnabled('.selector');
 3 
 4// Wait a maximum of one second until the selector is enabled...
 5$browser->waitUntilEnabled('.selector', 1);
 6 
 7// Wait a maximum of five seconds until the selector is disabled...
 8$browser->waitUntilDisabled('.selector');
 9 
10// Wait a maximum of one second until the selector is disabled...
11$browser->waitUntilDisabled('.selector', 1);

// Wait a maximum of five seconds until the selector is enabled...
$browser->waitUntilEnabled('.selector');

// Wait a maximum of one second until the selector is enabled...
$browser->waitUntilEnabled('.selector', 1);

// Wait a maximum of five seconds until the selector is disabled...
$browser->waitUntilDisabled('.selector');

// Wait a maximum of one second until the selector is disabled...
$browser->waitUntilDisabled('.selector', 1);

在可用時限定選擇器範圍

偶爾，你可能希望等待一個與給定選擇器匹配的元素出現，然後與該元素互動。例如，你可能希望等待直到模態視窗可用，然後按模態中的“確定”按鈕。可以使用 whenAvailable 方法來實現這一點。在給定閉包內執行的所有元素操作都將限定在原始選擇器內。

1$browser->whenAvailable('.modal', function (Browser $modal) {
2    $modal->assertSee('Hello World')
3        ->press('OK');
4});

$browser->whenAvailable('.modal', function (Browser $modal) {
    $modal->assertSee('Hello World')
        ->press('OK');
});

等待文字

waitForText 方法可用於等待，直到給定文字顯示在頁面上。

1// Wait a maximum of five seconds for the text...
2$browser->waitForText('Hello World');
3 
4// Wait a maximum of one second for the text...
5$browser->waitForText('Hello World', 1);

// Wait a maximum of five seconds for the text...
$browser->waitForText('Hello World');

// Wait a maximum of one second for the text...
$browser->waitForText('Hello World', 1);

你可以使用 waitUntilMissingText 方法等待，直到顯示的文字已從頁面中刪除。

1// Wait a maximum of five seconds for the text to be removed...
2$browser->waitUntilMissingText('Hello World');
3 
4// Wait a maximum of one second for the text to be removed...
5$browser->waitUntilMissingText('Hello World', 1);

// Wait a maximum of five seconds for the text to be removed...
$browser->waitUntilMissingText('Hello World');

// Wait a maximum of one second for the text to be removed...
$browser->waitUntilMissingText('Hello World', 1);

等待連結

waitForLink 方法可用於等待，直到給定連結文字顯示在頁面上。

1// Wait a maximum of five seconds for the link...
2$browser->waitForLink('Create');
3 
4// Wait a maximum of one second for the link...
5$browser->waitForLink('Create', 1);

// Wait a maximum of five seconds for the link...
$browser->waitForLink('Create');

// Wait a maximum of one second for the link...
$browser->waitForLink('Create', 1);

等待輸入

waitForInput 方法可用於等待，直到給定輸入欄位在頁面上可見。

1// Wait a maximum of five seconds for the input...
2$browser->waitForInput($field);
3 
4// Wait a maximum of one second for the input...
5$browser->waitForInput($field, 1);

// Wait a maximum of five seconds for the input...
$browser->waitForInput($field);

// Wait a maximum of one second for the input...
$browser->waitForInput($field, 1);

等待頁面位置

進行路徑斷言（例如 $browser->assertPathIs('/home')）時，如果 window.location.pathname 正在非同步更新，斷言可能會失敗。你可以使用 waitForLocation 方法等待位置為給定值。

1$browser->waitForLocation('/secret');

$browser->waitForLocation('/secret');

waitForLocation 方法也可用於等待當前視窗位置為完全限定的 URL。

1$browser->waitForLocation('https://example.com/path');

$browser->waitForLocation('https://example.com/path');

你也可以等待命名路由的位置。

1$browser->waitForRoute($routeName, $parameters);

$browser->waitForRoute($routeName, $parameters);

等待頁面重新載入

如果需要在執行操作後等待頁面重新載入，請使用 waitForReload 方法。

1use Laravel\Dusk\Browser;
2 
3$browser->waitForReload(function (Browser $browser) {
4    $browser->press('Submit');
5})
6->assertSee('Success!');

use Laravel\Dusk\Browser;

$browser->waitForReload(function (Browser $browser) {
    $browser->press('Submit');
})
->assertSee('Success!');

由於等待頁面重新載入的需求通常發生在點選按鈕之後，為了方便起見，可以使用 clickAndWaitForReload 方法。

1$browser->clickAndWaitForReload('.selector')
2    ->assertSee('something');

$browser->clickAndWaitForReload('.selector')
    ->assertSee('something');

等待 JavaScript 表示式

有時你可能希望暫停測試執行，直到給定的 JavaScript 表示式求值為 true。你可以使用 waitUntil 方法輕鬆實現這一點。在將表示式傳遞給此方法時，不需要包含 return 關鍵字或結尾的分號。

1// Wait a maximum of five seconds for the expression to be true...
2$browser->waitUntil('App.data.servers.length > 0');
3 
4// Wait a maximum of one second for the expression to be true...
5$browser->waitUntil('App.data.servers.length > 0', 1);

// Wait a maximum of five seconds for the expression to be true...
$browser->waitUntil('App.data.servers.length > 0');

// Wait a maximum of one second for the expression to be true...
$browser->waitUntil('App.data.servers.length > 0', 1);

等待 Vue 表示式

waitUntilVue 和 waitUntilVueIsNot 方法可用於等待，直到 Vue 元件屬性具有給定值。

1// Wait until the component attribute contains the given value...
2$browser->waitUntilVue('user.name', 'Taylor', '@user');
3 
4// Wait until the component attribute doesn't contain the given value...
5$browser->waitUntilVueIsNot('user.name', null, '@user');

// Wait until the component attribute contains the given value...
$browser->waitUntilVue('user.name', 'Taylor', '@user');

// Wait until the component attribute doesn't contain the given value...
$browser->waitUntilVueIsNot('user.name', null, '@user');

等待 JavaScript 事件

waitForEvent 方法可用於暫停測試執行，直到發生 JavaScript 事件。

1$browser->waitForEvent('load');

$browser->waitForEvent('load');

事件監聽器附加到當前作用域，預設情況下是 body 元素。使用帶作用域的選擇器時，事件監聽器將附加到匹配的元素。

1$browser->with('iframe', function (Browser $iframe) {
2    // Wait for the iframe's load event...
3    $iframe->waitForEvent('load');
4});

$browser->with('iframe', function (Browser $iframe) {
    // Wait for the iframe's load event...
    $iframe->waitForEvent('load');
});

你也可以提供一個選擇器作為 waitForEvent 方法的第二個引數，將事件監聽器附加到特定元素。

1$browser->waitForEvent('load', '.selector');

$browser->waitForEvent('load', '.selector');

你也可以等待 document 和 window 物件上的事件。

1// Wait until the document is scrolled...
2$browser->waitForEvent('scroll', 'document');
3 
4// Wait a maximum of five seconds until the window is resized...
5$browser->waitForEvent('resize', 'window', 5);

// Wait until the document is scrolled...
$browser->waitForEvent('scroll', 'document');

// Wait a maximum of five seconds until the window is resized...
$browser->waitForEvent('resize', 'window', 5);

使用回撥函式等待

Dusk 中的許多“等待”方法都依賴底層的 waitUsing 方法。你可以直接使用此方法來等待給定閉包返回 true。waitUsing 方法接受等待的最大秒數、評估閉包的間隔、閉包以及一個可選的失敗訊息。

1$browser->waitUsing(10, 1, function () use ($something) {
2    return $something->isReady();
3}, "Something wasn't ready in time.");

$browser->waitUsing(10, 1, function () use ($something) {
    return $something->isReady();
}, "Something wasn't ready in time.");

滾動元素到檢視中

有時你可能無法點選元素，因為它在瀏覽器的可見區域之外。scrollIntoView 方法將滾動瀏覽器視窗，直到給定選擇器處的元素在檢視內。

1$browser->scrollIntoView('.selector')
2    ->click('.selector');

$browser->scrollIntoView('.selector')
    ->click('.selector');

可用斷言

Dusk 提供了各種可針對應用程式進行的斷言。所有可用斷言均記錄在下表中。

assertTitle assertTitleContains assertUrlIs assertSchemeIs assertSchemeIsNot assertHostIs assertHostIsNot assertPortIs assertPortIsNot assertPathBeginsWith assertPathEndsWith assertPathContains assertPathIs assertPathIsNot assertRouteIs assertQueryStringHas assertQueryStringMissing assertFragmentIs assertFragmentBeginsWith assertFragmentIsNot assertHasCookie assertHasPlainCookie assertCookieMissing assertPlainCookieMissing assertCookieValue assertPlainCookieValue assertSee assertDontSee assertSeeIn assertDontSeeIn assertSeeAnythingIn assertSeeNothingIn assertCount assertScript assertSourceHas assertSourceMissing assertSeeLink assertDontSeeLink assertInputValue assertInputValueIsNot assertChecked assertNotChecked assertIndeterminate assertRadioSelected assertRadioNotSelected assertSelected assertNotSelected assertSelectHasOptions assertSelectMissingOptions assertSelectHasOption assertSelectMissingOption assertValue assertValueIsNot assertAttribute assertAttributeMissing assertAttributeContains assertAttributeDoesntContain assertAriaAttribute assertDataAttribute assertVisible assertPresent assertNotPresent assertMissing assertInputPresent assertInputMissing assertDialogOpened assertEnabled assertDisabled assertButtonEnabled assertButtonDisabled assertFocused assertNotFocused assertAuthenticated assertGuest assertAuthenticatedAs assertVue assertVueIsNot assertVueContains assertVueDoesntContain

assertTitle

斷言頁面標題與給定的文字匹配

1$browser->assertTitle($title);

$browser->assertTitle($title);

assertTitleContains

斷言頁面標題包含給定的文字

1$browser->assertTitleContains($title);

$browser->assertTitleContains($title);

assertUrlIs

斷言當前 URL（不含查詢字串）與給定的字串匹配

1$browser->assertUrlIs($url);

$browser->assertUrlIs($url);

assertSchemeIs

斷言當前 URL 方案與給定的方案匹配

1$browser->assertSchemeIs($scheme);

$browser->assertSchemeIs($scheme);

assertSchemeIsNot

斷言當前 URL 方案與給定的方案不匹配

1$browser->assertSchemeIsNot($scheme);

$browser->assertSchemeIsNot($scheme);

assertHostIs

斷言當前 URL 主機與給定的主機匹配

1$browser->assertHostIs($host);

$browser->assertHostIs($host);

assertHostIsNot

斷言當前 URL 主機與給定的主機不匹配

1$browser->assertHostIsNot($host);

$browser->assertHostIsNot($host);

assertPortIs

斷言當前 URL 埠與給定的埠匹配

1$browser->assertPortIs($port);

$browser->assertPortIs($port);

assertPortIsNot

斷言當前 URL 埠與給定的埠不匹配

1$browser->assertPortIsNot($port);

$browser->assertPortIsNot($port);

assertPathBeginsWith

斷言當前 URL 路徑以給定的路徑開頭

1$browser->assertPathBeginsWith('/home');

$browser->assertPathBeginsWith('/home');

assertPathEndsWith

斷言當前 URL 路徑以給定的路徑結尾

1$browser->assertPathEndsWith('/home');

$browser->assertPathEndsWith('/home');

assertPathContains

斷言當前 URL 路徑包含給定的路徑

1$browser->assertPathContains('/home');

$browser->assertPathContains('/home');

assertPathIs

斷言當前路徑與給定的路徑匹配

1$browser->assertPathIs('/home');

$browser->assertPathIs('/home');

assertPathIsNot

斷言當前路徑與給定的路徑不匹配

1$browser->assertPathIsNot('/home');

$browser->assertPathIsNot('/home');

assertRouteIs

斷言當前 URL 與給定的命名路由的 URL 匹配

1$browser->assertRouteIs($name, $parameters);

$browser->assertRouteIs($name, $parameters);

assertQueryStringHas

斷言給定的查詢字串引數存在

1$browser->assertQueryStringHas($name);

$browser->assertQueryStringHas($name);

斷言給定的查詢字串引數存在且具有給定的值

1$browser->assertQueryStringHas($name, $value);

$browser->assertQueryStringHas($name, $value);

assertQueryStringMissing

斷言給定的查詢字串引數缺失

1$browser->assertQueryStringMissing($name);

$browser->assertQueryStringMissing($name);

assertFragmentIs

斷言 URL 的當前雜湊片段與給定的片段匹配

1$browser->assertFragmentIs('anchor');

$browser->assertFragmentIs('anchor');

assertFragmentBeginsWith

斷言 URL 的當前雜湊片段以給定的片段開頭

1$browser->assertFragmentBeginsWith('anchor');

$browser->assertFragmentBeginsWith('anchor');

assertFragmentIsNot

斷言 URL 的當前雜湊片段與給定的片段不匹配

1$browser->assertFragmentIsNot('anchor');

$browser->assertFragmentIsNot('anchor');

斷言給定的加密 cookie 存在

1$browser->assertHasCookie($name);

$browser->assertHasCookie($name);

斷言給定的未加密 cookie 存在

1$browser->assertHasPlainCookie($name);

$browser->assertHasPlainCookie($name);

斷言給定的加密 cookie 不存在

1$browser->assertCookieMissing($name);

$browser->assertCookieMissing($name);

斷言給定的未加密 cookie 不存在

1$browser->assertPlainCookieMissing($name);

$browser->assertPlainCookieMissing($name);

斷言加密 cookie 具有給定的值

1$browser->assertCookieValue($name, $value);

$browser->assertCookieValue($name, $value);

斷言未加密 cookie 具有給定的值

1$browser->assertPlainCookieValue($name, $value);

$browser->assertPlainCookieValue($name, $value);

assertSee

斷言頁面上存在給定的文字

1$browser->assertSee($text);

$browser->assertSee($text);

assertDontSee

斷言頁面上不存在給定的文字

1$browser->assertDontSee($text);

$browser->assertDontSee($text);

assertSeeIn

斷言選擇器記憶體在給定的文字

1$browser->assertSeeIn($selector, $text);

$browser->assertSeeIn($selector, $text);

assertDontSeeIn

斷言選擇器內不存在給定的文字

1$browser->assertDontSeeIn($selector, $text);

$browser->assertDontSeeIn($selector, $text);

assertSeeAnythingIn

斷言選擇器記憶體在任何文字

1$browser->assertSeeAnythingIn($selector);

$browser->assertSeeAnythingIn($selector);

assertSeeNothingIn

斷言選擇器內不存在任何文字

1$browser->assertSeeNothingIn($selector);

$browser->assertSeeNothingIn($selector);

assertCount

斷言與給定選擇器匹配的元素出現了指定的次數

1$browser->assertCount($selector, $count);

$browser->assertCount($selector, $count);

assertScript

斷言給定的 JavaScript 表示式求值為給定的值

1$browser->assertScript('window.isLoaded')
2    ->assertScript('document.readyState', 'complete');

$browser->assertScript('window.isLoaded')
    ->assertScript('document.readyState', 'complete');

assertSourceHas

斷言頁面上存在給定的原始碼

1$browser->assertSourceHas($code);

$browser->assertSourceHas($code);

assertSourceMissing

斷言頁面上不存在給定的原始碼

1$browser->assertSourceMissing($code);

$browser->assertSourceMissing($code);

assertSeeLink

斷言頁面上存在給定的連結

1$browser->assertSeeLink($linkText);

$browser->assertSeeLink($linkText);

assertDontSeeLink

斷言頁面上不存在給定的連結

1$browser->assertDontSeeLink($linkText);

$browser->assertDontSeeLink($linkText);

assertInputValue

斷言給定的輸入欄位具有給定的值

1$browser->assertInputValue($field, $value);

$browser->assertInputValue($field, $value);

assertInputValueIsNot

斷言給定的輸入欄位不具有給定的值

1$browser->assertInputValueIsNot($field, $value);

$browser->assertInputValueIsNot($field, $value);

assertChecked

斷言給定的複選框已選中

1$browser->assertChecked($field);

$browser->assertChecked($field);

assertNotChecked

斷言給定的複選框未選中

1$browser->assertNotChecked($field);

$browser->assertNotChecked($field);

assertIndeterminate

斷言給定的複選框處於不確定狀態

1$browser->assertIndeterminate($field);

$browser->assertIndeterminate($field);

assertRadioSelected

斷言給定的單選欄位已選中

1$browser->assertRadioSelected($field, $value);

$browser->assertRadioSelected($field, $value);

assertRadioNotSelected

斷言給定的單選欄位未選中

1$browser->assertRadioNotSelected($field, $value);

$browser->assertRadioNotSelected($field, $value);

assertSelected

斷言給定的下拉選單已選中給定的值

1$browser->assertSelected($field, $value);

$browser->assertSelected($field, $value);

assertNotSelected

斷言給定的下拉選單未選中給定的值

1$browser->assertNotSelected($field, $value);

$browser->assertNotSelected($field, $value);

assertSelectHasOptions

斷言給定的值陣列可供選擇

1$browser->assertSelectHasOptions($field, $values);

$browser->assertSelectHasOptions($field, $values);

assertSelectMissingOptions

斷言給定的值陣列不可供選擇

1$browser->assertSelectMissingOptions($field, $values);

$browser->assertSelectMissingOptions($field, $values);

assertSelectHasOption

斷言給定的值可在給定欄位上選擇

1$browser->assertSelectHasOption($field, $value);

$browser->assertSelectHasOption($field, $value);

assertSelectMissingOption

斷言給定的值不可供選擇

1$browser->assertSelectMissingOption($field, $value);

$browser->assertSelectMissingOption($field, $value);

assertValue

斷言與給定選擇器匹配的元素具有給定的值

1$browser->assertValue($selector, $value);

$browser->assertValue($selector, $value);

assertValueIsNot

斷言與給定選擇器匹配的元素不具有給定的值

1$browser->assertValueIsNot($selector, $value);

$browser->assertValueIsNot($selector, $value);

assertAttribute

斷言與給定選擇器匹配的元素在提供的屬性中具有給定的值

1$browser->assertAttribute($selector, $attribute, $value);

$browser->assertAttribute($selector, $attribute, $value);

assertAttributeMissing

斷言與給定選擇器匹配的元素缺失提供的屬性

1$browser->assertAttributeMissing($selector, $attribute);

$browser->assertAttributeMissing($selector, $attribute);

assertAttributeContains

斷言與給定選擇器匹配的元素在提供的屬性中包含給定的值

1$browser->assertAttributeContains($selector, $attribute, $value);

$browser->assertAttributeContains($selector, $attribute, $value);

assertAttributeDoesntContain

斷言與給定選擇器匹配的元素在提供的屬性中不包含給定的值

1$browser->assertAttributeDoesntContain($selector, $attribute, $value);

$browser->assertAttributeDoesntContain($selector, $attribute, $value);

assertAriaAttribute

斷言與給定選擇器匹配的元素在提供的 aria 屬性中具有給定的值

1$browser->assertAriaAttribute($selector, $attribute, $value);

$browser->assertAriaAttribute($selector, $attribute, $value);

例如，給定標記 <button aria-label="Add"></button>，你可以像這樣針對 aria-label 屬性進行斷言

1$browser->assertAriaAttribute('button', 'label', 'Add')

$browser->assertAriaAttribute('button', 'label', 'Add')

assertDataAttribute

斷言與給定選擇器匹配的元素在提供的 data 屬性中具有給定的值

1$browser->assertDataAttribute($selector, $attribute, $value);

$browser->assertDataAttribute($selector, $attribute, $value);

例如，給定標記 <tr id="row-1" data-content="attendees"></tr>，你可以像這樣針對 data-label 屬性進行斷言

1$browser->assertDataAttribute('#row-1', 'content', 'attendees')

$browser->assertDataAttribute('#row-1', 'content', 'attendees')

assertVisible

斷言與給定選擇器匹配的元素可見

1$browser->assertVisible($selector);

$browser->assertVisible($selector);

assertPresent

斷言與給定選擇器匹配的元素存在於原始碼中

1$browser->assertPresent($selector);

$browser->assertPresent($selector);

assertNotPresent

斷言與給定選擇器匹配的元素不存在於原始碼中

1$browser->assertNotPresent($selector);

$browser->assertNotPresent($selector);

assertMissing

斷言與給定選擇器匹配的元素不可見

1$browser->assertMissing($selector);

$browser->assertMissing($selector);

assertInputPresent

斷言存在具有給定名稱的輸入

1$browser->assertInputPresent($name);

$browser->assertInputPresent($name);

assertInputMissing

斷言原始碼中不存在具有給定名稱的輸入

1$browser->assertInputMissing($name);

$browser->assertInputMissing($name);

assertDialogOpened

斷言已開啟具有給定訊息的 JavaScript 對話方塊

1$browser->assertDialogOpened($message);

$browser->assertDialogOpened($message);

assertEnabled

斷言給定欄位已啟用

1$browser->assertEnabled($field);

$browser->assertEnabled($field);

assertDisabled

斷言給定欄位已停用

1$browser->assertDisabled($field);

$browser->assertDisabled($field);

assertButtonEnabled

斷言給定按鈕已啟用

1$browser->assertButtonEnabled($button);

$browser->assertButtonEnabled($button);

assertButtonDisabled

斷言給定按鈕已停用

1$browser->assertButtonDisabled($button);

$browser->assertButtonDisabled($button);

assertFocused

斷言給定欄位已聚焦

1$browser->assertFocused($field);

$browser->assertFocused($field);

assertNotFocused

斷言給定欄位未聚焦

1$browser->assertNotFocused($field);

$browser->assertNotFocused($field);

assertAuthenticated

斷言使用者已透過身份驗證

1$browser->assertAuthenticated();

$browser->assertAuthenticated();

assertGuest

斷言使用者未透過身份驗證

1$browser->assertGuest();

$browser->assertGuest();

assertAuthenticatedAs

斷言使用者已以給定使用者身份透過身份驗證

1$browser->assertAuthenticatedAs($user);

$browser->assertAuthenticatedAs($user);

assertVue

Dusk 甚至允許你對 Vue 元件資料狀態進行斷言。例如，假設你的應用程式包含以下 Vue 元件

 1// HTML...
 2 
 3<profile dusk="profile-component"></profile>
 4 
 5// Component Definition...
 6 
 7Vue.component('profile', {
 8    template: '<div>{{ user.name }}</div>',
 9 
10    data: function () {
11        return {
12            user: {
13                name: 'Taylor'
14            }
15        };
16    }
17});

// HTML...

<profile dusk="profile-component"></profile>

// Component Definition...

Vue.component('profile', {
    template: '<div>{{ user.name }}</div>',

    data: function () {
        return {
            user: {
                name: 'Taylor'
            }
        };
    }
});

你可以像這樣對 Vue 元件的狀態進行斷言

1test('vue', function () {
2    $this->browse(function (Browser $browser) {
3        $browser->visit('/')
4            ->assertVue('user.name', 'Taylor', '@profile-component');
5    });
6});

test('vue', function () {
    $this->browse(function (Browser $browser) {
        $browser->visit('/')
            ->assertVue('user.name', 'Taylor', '@profile-component');
    });
});

 1/**
 2 * A basic Vue test example.
 3 */
 4public function test_vue(): void
 5{
 6    $this->browse(function (Browser $browser) {
 7        $browser->visit('/')
 8            ->assertVue('user.name', 'Taylor', '@profile-component');
 9    });
10}

/**
 * A basic Vue test example.
 */
public function test_vue(): void
{
    $this->browse(function (Browser $browser) {
        $browser->visit('/')
            ->assertVue('user.name', 'Taylor', '@profile-component');
    });
}

assertVueIsNot

斷言給定的 Vue 元件資料屬性與給定值不匹配

1$browser->assertVueIsNot($property, $value, $componentSelector = null);

$browser->assertVueIsNot($property, $value, $componentSelector = null);

assertVueContains

斷言給定的 Vue 元件資料屬性是一個數組幷包含給定的值

1$browser->assertVueContains($property, $value, $componentSelector = null);

$browser->assertVueContains($property, $value, $componentSelector = null);

assertVueDoesntContain

斷言給定的 Vue 元件資料屬性是一個數組且不包含給定的值

1$browser->assertVueDoesntContain($property, $value, $componentSelector = null);

$browser->assertVueDoesntContain($property, $value, $componentSelector = null);

頁面

有時，測試需要按順序執行幾個複雜的操作。這會使你的測試更難閱讀和理解。Dusk 頁面允許你定義富有表現力的操作，然後可以透過單個方法在給定頁面上執行這些操作。頁面還允許你為應用程式或單個頁面定義常用選擇器的快捷方式。

生成頁面

要生成頁面物件，請執行 dusk:page Artisan 命令。所有頁面物件都將放置在應用程式的 tests/Browser/Pages 目錄中。

1php artisan dusk:page Login

php artisan dusk:page Login

配置頁面

預設情況下，頁面有三個方法：url、assert 和 elements。我們現在討論 url 和 assert 方法。elements 方法將在下文中詳細討論。

`url` 方法

url 方法應返回表示該頁面的 URL 路徑。Dusk 在瀏覽器中導航到該頁面時將使用此 URL。

1/**
2 * Get the URL for the page.
3 */
4public function url(): string
5{
6    return '/login';
7}

/**
 * Get the URL for the page.
 */
public function url(): string
{
    return '/login';
}

`assert` 方法

assert 方法可以進行驗證瀏覽器實際上是否在給定頁面上所需的任何斷言。實際上沒有必要在此方法中放置任何內容；但是，如果你願意，可以自由進行這些斷言。這些斷言將在導航到頁面時自動執行。

1/**
2 * Assert that the browser is on the page.
3 */
4public function assert(Browser $browser): void
5{
6    $browser->assertPathIs($this->url());
7}

/**
 * Assert that the browser is on the page.
 */
public function assert(Browser $browser): void
{
    $browser->assertPathIs($this->url());
}

導航到頁面

一旦定義了頁面，就可以使用 visit 方法導航到它。

1use Tests\Browser\Pages\Login;
2 
3$browser->visit(new Login);

use Tests\Browser\Pages\Login;

$browser->visit(new Login);

有時你可能已經在一個給定的頁面上，需要將頁面的選擇器和方法“載入”到當前的測試上下文中。這在點選按鈕並被重定向到給定頁面而未明確導航到它時很常見。在這種情況下，你可以使用 on 方法來載入頁面。

1use Tests\Browser\Pages\CreatePlaylist;
2 
3$browser->visit('/dashboard')
4    ->clickLink('Create Playlist')
5    ->on(new CreatePlaylist)
6    ->assertSee('@create');

use Tests\Browser\Pages\CreatePlaylist;

$browser->visit('/dashboard')
    ->clickLink('Create Playlist')
    ->on(new CreatePlaylist)
    ->assertSee('@create');

簡寫選擇器

頁面類中的 elements 方法允許你為頁面上的任何 CSS 選擇器定義快速、易記的快捷方式。例如，讓我們為應用程式登入頁面的“電子郵件”輸入欄位定義一個快捷方式。

 1/**
 2 * Get the element shortcuts for the page.
 3 *
 4 * @return array<string, string>
 5 */
 6public function elements(): array
 7{
 8    return [
 9        '@email' => 'input[name=email]',
10    ];
11}

/**
 * Get the element shortcuts for the page.
 *
 * @return array<string, string>
 */
public function elements(): array
{
    return [
        '@email' => 'input[name=email]',
    ];
}

一旦定義了快捷方式，你就可以在通常使用完整 CSS 選擇器的任何地方使用簡寫選擇器。

1$browser->type('@email', '[email protected]');

$browser->type('@email', '[email protected]');

全域性簡寫選擇器

安裝 Dusk 後，基礎 Page 類將放置在你的 tests/Browser/Pages 目錄中。此類包含一個 siteElements 方法，可用於定義應在整個應用程式的每個頁面上可用的全域性簡寫選擇器。

 1/**
 2 * Get the global element shortcuts for the site.
 3 *
 4 * @return array<string, string>
 5 */
 6public static function siteElements(): array
 7{
 8    return [
 9        '@element' => '#selector',
10    ];
11}

/**
 * Get the global element shortcuts for the site.
 *
 * @return array<string, string>
 */
public static function siteElements(): array
{
    return [
        '@element' => '#selector',
    ];
}

頁面方法

除了頁面上定義的預設方法外，你還可以定義可以在整個測試中使用的其他方法。例如，假設我們正在構建一個音樂管理應用程式。應用程式的一個頁面上的常見操作可能是建立播放列表。與其在每個測試中重寫建立播放列表的邏輯，不如在頁面類上定義一個 createPlaylist 方法。

 1<?php
 2 
 3namespace Tests\Browser\Pages;
 4 
 5use Laravel\Dusk\Browser;
 6use Laravel\Dusk\Page;
 7 
 8class Dashboard extends Page
 9{
10    // Other page methods...
11 
12    /**
13     * Create a new playlist.
14     */
15    public function createPlaylist(Browser $browser, string $name): void
16    {
17        $browser->type('name', $name)
18            ->check('share')
19            ->press('Create Playlist');
20    }
21}

<?php

namespace Tests\Browser\Pages;

use Laravel\Dusk\Browser;
use Laravel\Dusk\Page;

class Dashboard extends Page
{
    // Other page methods...

    /**
     * Create a new playlist.
     */
    public function createPlaylist(Browser $browser, string $name): void
    {
        $browser->type('name', $name)
            ->check('share')
            ->press('Create Playlist');
    }
}

一旦定義了該方法，就可以在利用該頁面的任何測試中使用它。瀏覽器例項將自動作為第一個引數傳遞給自定義頁面方法。

1use Tests\Browser\Pages\Dashboard;
2 
3$browser->visit(new Dashboard)
4    ->createPlaylist('My Playlist')
5    ->assertSee('My Playlist');

use Tests\Browser\Pages\Dashboard;

$browser->visit(new Dashboard)
    ->createPlaylist('My Playlist')
    ->assertSee('My Playlist');

元件

元件類似於 Dusk 的“頁面物件”，但適用於在整個應用程式中複用的 UI 和功能片段，例如導航欄或通知視窗。因此，元件不繫結到特定的 URL。

生成元件

要生成元件，請執行 dusk:component Artisan 命令。新元件放置在 tests/Browser/Components 目錄中。

1php artisan dusk:component DatePicker

php artisan dusk:component DatePicker

如上所示，“日期選擇器”是一個可能存在於整個應用程式各種頁面上的元件示例。手動編寫瀏覽器自動化邏輯以在測試套件的數十個測試中選擇日期可能會變得很麻煩。相反，我們可以定義一個 Dusk 元件來表示日期選擇器，從而允許我們將該邏輯封裝在元件內。

 1<?php
 2 
 3namespace Tests\Browser\Components;
 4 
 5use Laravel\Dusk\Browser;
 6use Laravel\Dusk\Component as BaseComponent;
 7 
 8class DatePicker extends BaseComponent
 9{
10    /**
11     * Get the root selector for the component.
12     */
13    public function selector(): string
14    {
15        return '.date-picker';
16    }
17 
18    /**
19     * Assert that the browser page contains the component.
20     */
21    public function assert(Browser $browser): void
22    {
23        $browser->assertVisible($this->selector());
24    }
25 
26    /**
27     * Get the element shortcuts for the component.
28     *
29     * @return array<string, string>
30     */
31    public function elements(): array
32    {
33        return [
34            '@date-field' => 'input.datepicker-input',
35            '@year-list' => 'div > div.datepicker-years',
36            '@month-list' => 'div > div.datepicker-months',
37            '@day-list' => 'div > div.datepicker-days',
38        ];
39    }
40 
41    /**
42     * Select the given date.
43     */
44    public function selectDate(Browser $browser, int $year, int $month, int $day): void
45    {
46        $browser->click('@date-field')
47            ->within('@year-list', function (Browser $browser) use ($year) {
48                $browser->click($year);
49            })
50            ->within('@month-list', function (Browser $browser) use ($month) {
51                $browser->click($month);
52            })
53            ->within('@day-list', function (Browser $browser) use ($day) {
54                $browser->click($day);
55            });
56    }
57}

<?php

namespace Tests\Browser\Components;

use Laravel\Dusk\Browser;
use Laravel\Dusk\Component as BaseComponent;

class DatePicker extends BaseComponent
{
    /**
     * Get the root selector for the component.
     */
    public function selector(): string
    {
        return '.date-picker';
    }

    /**
     * Assert that the browser page contains the component.
     */
    public function assert(Browser $browser): void
    {
        $browser->assertVisible($this->selector());
    }

    /**
     * Get the element shortcuts for the component.
     *
     * @return array<string, string>
     */
    public function elements(): array
    {
        return [
            '@date-field' => 'input.datepicker-input',
            '@year-list' => 'div > div.datepicker-years',
            '@month-list' => 'div > div.datepicker-months',
            '@day-list' => 'div > div.datepicker-days',
        ];
    }

    /**
     * Select the given date.
     */
    public function selectDate(Browser $browser, int $year, int $month, int $day): void
    {
        $browser->click('@date-field')
            ->within('@year-list', function (Browser $browser) use ($year) {
                $browser->click($year);
            })
            ->within('@month-list', function (Browser $browser) use ($month) {
                $browser->click($month);
            })
            ->within('@day-list', function (Browser $browser) use ($day) {
                $browser->click($day);
            });
    }
}

使用元件

一旦定義了元件，我們就可以輕鬆地從任何測試中選擇日期選擇器中的日期。而且，如果選擇日期所需的邏輯發生變化，我們只需要更新元件即可。

 1<?php
 2 
 3use Illuminate\Foundation\Testing\DatabaseMigrations;
 4use Laravel\Dusk\Browser;
 5use Tests\Browser\Components\DatePicker;
 6 
 7pest()->use(DatabaseMigrations::class);
 8 
 9test('basic example', function () {
10    $this->browse(function (Browser $browser) {
11        $browser->visit('/')
12            ->within(new DatePicker, function (Browser $browser) {
13                $browser->selectDate(2019, 1, 30);
14            })
15            ->assertSee('January');
16    });
17});

<?php

use Illuminate\Foundation\Testing\DatabaseMigrations;
use Laravel\Dusk\Browser;
use Tests\Browser\Components\DatePicker;

pest()->use(DatabaseMigrations::class);

test('basic example', function () {
    $this->browse(function (Browser $browser) {
        $browser->visit('/')
            ->within(new DatePicker, function (Browser $browser) {
                $browser->selectDate(2019, 1, 30);
            })
            ->assertSee('January');
    });
});

 1<?php
 2 
 3namespace Tests\Browser;
 4 
 5use Illuminate\Foundation\Testing\DatabaseMigrations;
 6use Laravel\Dusk\Browser;
 7use Tests\Browser\Components\DatePicker;
 8use Tests\DuskTestCase;
 9 
10class ExampleTest extends DuskTestCase
11{
12    /**
13     * A basic component test example.
14     */
15    public function test_basic_example(): void
16    {
17        $this->browse(function (Browser $browser) {
18            $browser->visit('/')
19                ->within(new DatePicker, function (Browser $browser) {
20                    $browser->selectDate(2019, 1, 30);
21                })
22                ->assertSee('January');
23        });
24    }
25}

<?php

namespace Tests\Browser;

use Illuminate\Foundation\Testing\DatabaseMigrations;
use Laravel\Dusk\Browser;
use Tests\Browser\Components\DatePicker;
use Tests\DuskTestCase;

class ExampleTest extends DuskTestCase
{
    /**
     * A basic component test example.
     */
    public function test_basic_example(): void
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/')
                ->within(new DatePicker, function (Browser $browser) {
                    $browser->selectDate(2019, 1, 30);
                })
                ->assertSee('January');
        });
    }
}

component 方法可用於獲取限定在給定元件範圍內的瀏覽器例項。

1$datePicker = $browser->component(new DatePickerComponent);
2 
3$datePicker->selectDate(2019, 1, 30);
4 
5$datePicker->assertSee('January');

$datePicker = $browser->component(new DatePickerComponent);

$datePicker->selectDate(2019, 1, 30);

$datePicker->assertSee('January');

持續整合

大多數 Dusk 持續整合配置都期望你的 Laravel 應用程式使用內建的 PHP 開發伺服器在 8000 埠上提供服務。因此，在繼續之前，應確保你的持續整合環境具有 http://127.0.0.1:8000 的 APP_URL 環境變數值。

Heroku CI

要在 Heroku CI 上執行 Dusk 測試，請將以下 Google Chrome 構建包和指令碼新增到你的 Heroku app.json 檔案中。

 1{
 2  "environments": {
 3    "test": {
 4      "buildpacks": [
 5        { "url": "heroku/php" },
 6        { "url": "https://github.com/heroku/heroku-buildpack-chrome-for-testing" }
 7      ],
 8      "scripts": {
 9        "test-setup": "cp .env.testing .env",
10        "test": "nohup bash -c './vendor/laravel/dusk/bin/chromedriver-linux --port=9515 > /dev/null 2>&1 &' && nohup bash -c 'php artisan serve --no-reload > /dev/null 2>&1 &' && php artisan dusk"
11      }
12    }
13  }
14}

{
  "environments": {
    "test": {
      "buildpacks": [
        { "url": "heroku/php" },
        { "url": "https://github.com/heroku/heroku-buildpack-chrome-for-testing" }
      ],
      "scripts": {
        "test-setup": "cp .env.testing .env",
        "test": "nohup bash -c './vendor/laravel/dusk/bin/chromedriver-linux --port=9515 > /dev/null 2>&1 &' && nohup bash -c 'php artisan serve --no-reload > /dev/null 2>&1 &' && php artisan dusk"
      }
    }
  }
}

Travis CI

要在 Travis CI 上執行 Dusk 測試，請使用以下 .travis.yml 配置。由於 Travis CI 不是圖形化環境，我們需要採取一些額外步驟來啟動 Chrome 瀏覽器。此外，我們將使用 php artisan serve 來啟動 PHP 的內建 Web 伺服器。

 1language: php
 2 
 3php:
 4  - 8.2
 5 
 6addons:
 7  chrome: stable
 8 
 9install:
10  - cp .env.testing .env
11  - travis_retry composer install --no-interaction --prefer-dist
12  - php artisan key:generate
13  - php artisan dusk:chrome-driver
14 
15before_script:
16  - google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 https:// &
17  - php artisan serve --no-reload &
18 
19script:
20  - php artisan dusk

language: php

php:
  - 8.2

addons:
  chrome: stable

install:
  - cp .env.testing .env
  - travis_retry composer install --no-interaction --prefer-dist
  - php artisan key:generate
  - php artisan dusk:chrome-driver

before_script:
  - google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 https:// &
  - php artisan serve --no-reload &

script:
  - php artisan dusk

GitHub Actions

如果你正在使用 GitHub Actions 執行 Dusk 測試，可以使用以下配置檔案作為起點。與 Travis CI 一樣，我們將使用 php artisan serve 命令來啟動 PHP 的內建 Web 伺服器。

 1name: CI
 2on: [push]
 3jobs:
 4 
 5  dusk-php:
 6    runs-on: ubuntu-latest
 7    env:
 8      APP_URL: "http://127.0.0.1:8000"
 9      DB_USERNAME: root
10      DB_PASSWORD: root
11      MAIL_MAILER: log
12    steps:
13      - uses: actions/checkout@v5
14      - name: Prepare The Environment
15        run: cp .env.example .env
16      - name: Create Database
17        run: |
18          sudo systemctl start mysql
19          mysql --user="root" --password="root" -e "CREATE DATABASE \`my-database\` character set UTF8mb4 collate utf8mb4_bin;"
20      - name: Install Composer Dependencies
21        run: composer install --no-progress --prefer-dist --optimize-autoloader
22      - name: Generate Application Key
23        run: php artisan key:generate
24      - name: Upgrade Chrome Driver
25        run: php artisan dusk:chrome-driver --detect
26      - name: Start Chrome Driver
27        run: ./vendor/laravel/dusk/bin/chromedriver-linux --port=9515 &
28      - name: Run Laravel Server
29        run: php artisan serve --no-reload &
30      - name: Run Dusk Tests
31        run: php artisan dusk
32      - name: Upload Screenshots
33        if: failure()
34        uses: actions/upload-artifact@v4
35        with:
36          name: screenshots
37          path: tests/Browser/screenshots
38      - name: Upload Console Logs
39        if: failure()
40        uses: actions/upload-artifact@v4
41        with:
42          name: console
43          path: tests/Browser/console

name: CI
on: [push]
jobs:

  dusk-php:
    runs-on: ubuntu-latest
    env:
      APP_URL: "http://127.0.0.1:8000"
      DB_USERNAME: root
      DB_PASSWORD: root
      MAIL_MAILER: log
    steps:
      - uses: actions/checkout@v5
      - name: Prepare The Environment
        run: cp .env.example .env
      - name: Create Database
        run: |
          sudo systemctl start mysql
          mysql --user="root" --password="root" -e "CREATE DATABASE \`my-database\` character set UTF8mb4 collate utf8mb4_bin;"
      - name: Install Composer Dependencies
        run: composer install --no-progress --prefer-dist --optimize-autoloader
      - name: Generate Application Key
        run: php artisan key:generate
      - name: Upgrade Chrome Driver
        run: php artisan dusk:chrome-driver --detect
      - name: Start Chrome Driver
        run: ./vendor/laravel/dusk/bin/chromedriver-linux --port=9515 &
      - name: Run Laravel Server
        run: php artisan serve --no-reload &
      - name: Run Dusk Tests
        run: php artisan dusk
      - name: Upload Screenshots
        if: failure()
        uses: actions/upload-artifact@v4
        with:
          name: screenshots
          path: tests/Browser/screenshots
      - name: Upload Console Logs
        if: failure()
        uses: actions/upload-artifact@v4
        with:
          name: console
          path: tests/Browser/console

Chipper CI

如果你正在使用 Chipper CI 執行 Dusk 測試，可以使用以下配置檔案作為起點。我們將使用 PHP 的內建伺服器來執行 Laravel，以便監聽請求。

 1# file .chipperci.yml
 2version: 1
 3 
 4environment:
 5  php: 8.2
 6  node: 16
 7 
 8# Include Chrome in the build environment
 9services:
10  - dusk
11 
12# Build all commits
13on:
14   push:
15      branches: .*
16 
17pipeline:
18  - name: Setup
19    cmd: |
20      cp -v .env.example .env
21      composer install --no-interaction --prefer-dist --optimize-autoloader
22      php artisan key:generate
23 
24      # Create a dusk env file, ensuring APP_URL uses BUILD_HOST
25      cp -v .env .env.dusk.ci
26      sed -i "s@APP_URL=.*@APP_URL=http://$BUILD_HOST:8000@g" .env.dusk.ci
27 
28  - name: Compile Assets
29    cmd: |
30      npm ci --no-audit
31      npm run build
32 
33  - name: Browser Tests
34    cmd: |
35      php -S [::0]:8000 -t public 2>server.log &
36      sleep 2
37      php artisan dusk:chrome-driver $CHROME_DRIVER
38      php artisan dusk --env=ci

# file .chipperci.yml
version: 1

environment:
  php: 8.2
  node: 16

# Include Chrome in the build environment
services:
  - dusk

# Build all commits
on:
   push:
      branches: .*

pipeline:
  - name: Setup
    cmd: |
      cp -v .env.example .env
      composer install --no-interaction --prefer-dist --optimize-autoloader
      php artisan key:generate

      # Create a dusk env file, ensuring APP_URL uses BUILD_HOST
      cp -v .env .env.dusk.ci
      sed -i "s@APP_URL=.*@APP_URL=http://$BUILD_HOST:8000@g" .env.dusk.ci

  - name: Compile Assets
    cmd: |
      npm ci --no-audit
      npm run build

  - name: Browser Tests
    cmd: |
      php -S [::0]:8000 -t public 2>server.log &
      sleep 2
      php artisan dusk:chrome-driver $CHROME_DRIVER
      php artisan dusk --env=ci

要了解有關在 Chipper CI 上執行 Dusk 測試的更多資訊，包括如何使用資料庫，請查閱官方 Chipper CI 文件。