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 文档。