Laravel 中文文档

简体中文

English

简体中文

English

深浅模式

Laravel Dusk ​ ​

介绍 ​ ​

Laravel Dusk 提供了一个富有表现力且易于使用的浏览器自动化和测试 API。默认情况下，Dusk 不需要你在机器上安装 JDK 或 Selenium。相反，Dusk 使用一个独立的 ChromeDriver 安装。不过，你可以自由使用任何其他兼容 Selenium 的驱动程序。

安装 ​ ​

要开始使用，你应该将 laravel/dusk Composer 依赖添加到你的项目中：

composer require --dev laravel/dusk:"^5.0"

如果你手动注册 Dusk 的服务提供者，你绝不应该在生产环境中注册它，因为这样做可能会导致任意用户能够与您的应用程序进行身份验证。

安装 Dusk 包后，运行 dusk:install Artisan 命令：

php
artisan dusk:install

一个 Browser 目录将会在你的 tests 目录中创建，并包含一个示例测试。接下来，在你的 .env 文件中设置 APP_URL 环境变量。这个值应该与您在浏览器中访问应用程序时使用的 URL 匹配。

要运行你的测试，使用 dusk Artisan 命令。 dusk 命令接受任何 phpunit 命令也接受的参数：

php
artisan dusk

如果你上次运行 dusk 命令时有测试失败，你可以通过使用 dusk:fails 命令首先重新运行失败的测试来节省时间：

php
artisan dusk:fails

管理 ChromeDriver 安装 ​ ​

如果你想安装与 Laravel Dusk 附带的不同版本的 ChromeDriver，可以使用 dusk:chrome-driver 命令：

# 为你的操作系统安装最新版本的 ChromeDriver...
php artisan dusk:chrome-driver

# 为你的操作系统安装指定版本的 ChromeDriver...
php artisan dusk:chrome-driver 74

# 为所有支持的操作系统安装指定版本的 ChromeDriver...
php artisan dusk:chrome-driver --all

Dusk 需要 chromedriver 二进制文件是可执行的。如果你在运行 Dusk 时遇到问题，你应该确保二进制文件是可执行的，使用以下命令： chmod -R 0755 vendor/laravel/dusk/bin/ 。

使用其他浏览器 ​ ​

默认情况下，Dusk 使用 Google Chrome 和一个独立的 ChromeDriver 安装来运行你的浏览器测试。不过，你可以启动自己的 Selenium 服务器，并在任何你希望的浏览器上运行你的测试。

要开始，打开你的 tests/DuskTestCase.php 文件，这是你的应用程序的基本 Dusk 测试用例。在这个文件中，你可以删除对 startChromeDriver 方法的调用。这将阻止 Dusk 自动启动 ChromeDriver：

/**
 * 准备 Dusk 测试执行。
 *
 * @beforeClass
 * @return void
 */
public static function prepare()
{
    // static::startChromeDriver();
}

接下来，你可以修改 driver 方法以连接到你选择的 URL 和端口。此外，你可以修改应该传递给 WebDriver 的“期望能力”：

/**
 * 创建 RemoteWebDriver 实例。
 *
 * @return \Facebook\WebDriver\Remote\RemoteWebDriver
 */
protected function driver()
{
    return RemoteWebDriver::create(
        'http://localhost:4444/wd/hub', DesiredCapabilities::phantomjs()
    );
}

入门 ​ ​

生成测试 ​ ​

要生成一个 Dusk 测试，使用 dusk:make Artisan 命令。生成的测试将被放置在 tests/Browser 目录中：

php
artisan dusk:make LoginTest

运行测试 ​ ​

要运行你的浏览器测试，使用 dusk Artisan 命令：

php
artisan dusk

如果你上次运行 dusk 命令时有测试失败，你可以通过使用 dusk:fails 命令首先重新运行失败的测试来节省时间：

php
artisan dusk:fails

dusk 命令接受任何通常由 PHPUnit 测试运行器接受的参数，允许你仅运行给定 组 的测试，等等：

php
artisan dusk --group=foo

手动启动 ChromeDriver ​ ​

默认情况下，Dusk 将自动尝试启动 ChromeDriver。如果这对你的特定系统不起作用，你可以在运行 dusk 命令之前手动启动 ChromeDriver。如果你选择手动启动 ChromeDriver，你应该注释掉你的 tests/DuskTestCase.php 文件中的以下行：

/**
 * 准备 Dusk 测试执行。
 *
 * @beforeClass
 * @return void
 */
public static function prepare()
{
    // static::startChromeDriver();
}

此外，如果你在 9515 以外的端口上启动 ChromeDriver，你应该修改同一类的 driver 方法：

/**
 * 创建 RemoteWebDriver 实例。
 *
 * @return \Facebook\WebDriver\Remote\RemoteWebDriver
 */
protected function driver()
{
    return RemoteWebDriver::create(
        'http://localhost:9515', DesiredCapabilities::chrome()
    );
}

环境处理 ​ ​

要强制 Dusk 在运行测试时使用自己的环境文件，请在项目的根目录中创建一个 .env.dusk.{environment} 文件。例如，如果你将从 local 环境启动 dusk 命令，你应该创建一个 .env.dusk.local 文件。

运行测试时，Dusk 将备份你的 .env 文件并将你的 Dusk 环境重命名为 .env 。测试完成后，你的 .env 文件将被恢复。

创建浏览器 ​ ​

要开始，让我们编写一个测试来验证我们是否可以登录到我们的应用程序。生成测试后，我们可以修改它以导航到登录页面，输入一些凭据，并点击“登录”按钮。要创建浏览器实例，请调用 browse 方法：

<?php

namespace Tests\Browser;

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

class ExampleTest extends DuskTestCase
{
    use DatabaseMigrations;

    /**
     * 一个基本的浏览器测试示例。
     *
     * @return void
     */
    public function testBasicExample()
    {
        $user = factory(User::class)->create([
            'email' => 'taylor@laravel.com',
        ]);

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

如上例所示， browse 方法接受一个回调。Dusk 将自动将浏览器实例传递给此回调，并且是用于与应用程序交互和进行断言的主要对象。

此测试可用于测试由 make:auth Artisan 命令生成的登录屏幕。

创建多个浏览器 ​ ​

有时你可能需要多个浏览器才能正确执行测试。例如，可能需要多个浏览器来测试与 websockets 交互的聊天屏幕。要创建多个浏览器，请在传递给 browse 方法的回调的签名中“请求”多个浏览器：

$this->browse(function ($first, $second) {
    $first->loginAs(User::find(1))
          ->visit('/home')
          ->waitForText('Message');

    $second->loginAs(User::find(2))
           ->visit('/home')
           ->waitForText('Message')
           ->type('message', 'Hey Taylor')
           ->press('Send');

    $first->waitForText('Hey Taylor')
          ->assertSee('Jeffrey Way');
});

调整浏览器窗口大小 ​ ​

你可以使用 resize 方法调整浏览器窗口的大小：

$browser->resize(1920, 1080);

可以使用 maximize 方法最大化浏览器窗口：

$browser->maximize();

浏览器宏 ​ ​

如果你想定义一个可以在各种测试中重用的自定义浏览器方法，可以在 Browser 类上使用 macro 方法。通常，你应该从 服务提供者 的 boot 方法中调用此方法：

<?php

namespace App\Providers;

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

class DuskServiceProvider extends ServiceProvider
{
    /**
     * 注册 Dusk 的浏览器宏。
     *
     * @return void
     */
    public function boot()
    {
        Browser::macro('scrollToElement', function ($element = null) {
            $this->script("$('html, body').animate({ scrollTop: $('$element').offset().top }, 0);");

            return $this;
        });
    }
}

macro 函数接受一个名称作为其第一个参数，一个闭包作为其第二个参数。当在 Browser 实现上调用宏作为方法时，将执行宏的闭包：

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

认证 ​ ​

通常，你将测试需要身份验证的页面。你可以使用 Dusk 的 loginAs 方法，以避免在每次测试期间与登录屏幕交互。 loginAs 方法接受用户 ID 或用户模型实例：

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

使用 loginAs 方法后，用户会话将在文件中的所有测试中保持。

数据库迁移 ​ ​

当你的测试需要迁移时，如上面的认证示例，你不应该使用 RefreshDatabase trait。 RefreshDatabase trait 利用数据库事务，这在 HTTP 请求中将不适用。相反，使用 DatabaseMigrations trait：

<?php

namespace Tests\Browser;

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

class ExampleTest extends DuskTestCase
{
    use DatabaseMigrations;
}

与元素交互 ​ ​

Dusk 选择器 ​ ​

选择好的 CSS 选择器来与元素交互是编写 Dusk 测试中最困难的部分之一。随着时间的推移，前端更改可能会导致像下面这样的 CSS 选择器破坏你的测试：

// HTML...

<button>Login</button>

// 测试...

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

Dusk 选择器允许你专注于编写有效的测试，而不是记住 CSS 选择器。要定义选择器，请在 HTML 元素中添加一个 dusk 属性。然后，在 Dusk 测试中使用 @ 前缀选择器来操作附加的元素：

// HTML...

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

// 测试...

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

点击链接 ​ ​

要点击链接，可以在浏览器实例上使用 clickLink 方法。 clickLink 方法将点击具有给定显示文本的链接：

$browser->clickLink($linkText);

此方法与 jQuery 交互。如果页面上没有 jQuery，Dusk 将自动将其注入页面中，以便在测试期间可用。

文本、值和属性 ​ ​

获取和设置值 ​ ​

Dusk 提供了几种方法来与页面上元素的当前显示文本、值和属性进行交互。例如，要获取与给定选择器匹配的元素的“值”，请使用 value 方法：

// 获取值...
$value = $browser->value('selector');

// 设置值...
$browser->value('selector', 'value');

获取文本 ​ ​

text 方法可用于获取与给定选择器匹配的元素的显示文本：

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

获取属性 ​ ​

最后， attribute 方法可用于获取与给定选择器匹配的元素的属性：

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

使用表单 ​ ​

输入值 ​ ​

Dusk 提供了多种方法来与表单和输入元素进行交互。首先，让我们看一个将文本输入到输入字段的示例：

$browser->type('email', 'taylor@laravel.com');

注意，尽管方法接受一个 CSS 选择器，但我们不需要将其传递给 type 方法。如果未提供 CSS 选择器，Dusk 将搜索具有给定 name 属性的输入字段。最后，Dusk 将尝试找到具有给定 name 属性的 textarea 。

要在不清除其内容的情况下向字段追加文本，可以使用 append 方法：

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

你可以使用 clear 方法清除输入的值：

$browser->clear('email');

下拉菜单 ​ ​

要在下拉选择框中选择一个值，可以使用 select 方法。与 type 方法一样， select 方法不需要完整的 CSS 选择器。传递值给 select 方法时，你应该传递底层选项值而不是显示文本：

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

你可以通过省略第二个参数来选择一个随机选项：

$browser->select('size');

复选框 ​ ​

要“选中”复选框字段，可以使用 check 方法。与许多其他输入相关方法一样，不需要完整的 CSS 选择器。如果找不到精确的选择器匹配，Dusk 将搜索具有匹配 name 属性的复选框：

$browser->check('terms');

$browser->uncheck('terms');

单选按钮 ​ ​

要“选择”单选按钮选项，可以使用 radio 方法。与许多其他输入相关方法一样，不需要完整的 CSS 选择器。如果找不到精确的选择器匹配，Dusk 将搜索具有匹配 name 和 value 属性的单选按钮：

$browser->radio('version', 'php7');

附加文件 ​ ​

attach 方法可用于将文件附加到 file 输入元素。与许多其他输入相关方法一样，不需要完整的 CSS 选择器。如果找不到精确的选择器匹配，Dusk 将搜索具有匹配 name 属性的文件输入：

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

附加功能需要在服务器上安装并启用 Zip PHP 扩展。

使用键盘 ​ ​

keys 方法允许你为给定元素提供比 type 方法通常允许的更复杂的输入序列。例如，你可以在输入值时按住修饰键。在此示例中，将在输入 taylor 到与给定选择器匹配的元素时按住 shift 键。在输入 taylor 后，将在没有任何修饰键的情况下输入 otwell ：

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

你甚至可以将“热键”发送到包含你的应用程序的主要 CSS 选择器：

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

所有修饰键都用 {} 字符包裹，并匹配 Facebook\WebDriver\WebDriverKeys 类中定义的常量，可以在 GitHub 上找到。

使用鼠标 ​ ​

点击元素 ​ ​

click 方法可用于“点击”与给定选择器匹配的元素：

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

鼠标悬停 ​ ​

mouseover 方法可用于在需要将鼠标移动到与给定选择器匹配的元素上时：

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

拖放 ​ ​

drag 方法可用于将与给定选择器匹配的元素拖动到另一个元素：

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

或者，你可以在单个方向上拖动元素：

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

JavaScript 对话框 ​ ​

Dusk 提供了多种方法来与 JavaScript 对话框交互：

// 等待对话框出现：
$browser->waitForDialog($seconds = null);

// 断言对话框已显示且其消息与给定值匹配：
$browser->assertDialogOpened('value');

// 在打开的 JavaScript 提示对话框中输入给定值：
$browser->typeInDialog('Hello World');

要关闭打开的 JavaScript 对话框，点击 OK 按钮：

$browser->acceptDialog();

要关闭打开的 JavaScript 对话框，点击 Cancel 按钮（仅适用于确认对话框）：

$browser->dismissDialog();

选择器范围 ​ ​

有时你可能希望在给定选择器内执行多个操作。例如，你可能希望断言某些文本仅在表格中存在，然后点击该表格中的按钮。你可以使用 with 方法来实现这一点。在传递给 with 方法的回调中执行的所有操作都将限定在原始选择器内：

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

等待元素 ​ ​

在测试广泛使用 JavaScript 的应用程序时，通常需要“等待”某些元素或数据可用，然后再继续测试。Dusk 使这变得很简单。使用多种方法，你可以等待页面上的元素可见，甚至可以等待给定的 JavaScript 表达式评估为 true 。

等待 ​ ​

如果你需要暂停测试一段时间，可以使用 pause 方法：

$browser->pause(1000);

等待选择器 ​ ​

waitFor 方法可用于暂停测试的执行，直到与给定 CSS 选择器匹配的元素显示在页面上。默认情况下，这将在抛出异常之前暂停测试最多五秒钟。如果需要，你可以将自定义超时阈值作为第二个参数传递给该方法：

// 最多等待五秒钟以获取选择器...
$browser->waitFor('.selector');

// 最多等待一秒钟以获取选择器...
$browser->waitFor('.selector', 1);

你还可以等待给定选择器从页面中消失：

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

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

在可用时限定选择器 ​ ​

有时，你可能希望等待给定选择器，然后与匹配该选择器的元素进行交互。例如，你可能希望等待模态窗口可用，然后按下模态中的“OK”按钮。在这种情况下，可以使用 whenAvailable 方法。在给定回调中执行的所有元素操作都将限定在原始选择器内：

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

等待文本 ​ ​

waitForText 方法可用于等待给定文本显示在页面上：

// 最多等待五秒钟以获取文本...
$browser->waitForText('Hello World');

// 最多等待一秒钟以获取文本...
$browser->waitForText('Hello World', 1);

等待链接 ​ ​

waitForLink 方法可用于等待给定链接文本显示在页面上：

// 最多等待五秒钟以获取链接...
$browser->waitForLink('Create');

// 最多等待一秒钟以获取链接...
$browser->waitForLink('Create', 1);

等待页面位置 ​ ​

在进行路径断言时，例如 $browser->assertPathIs('/home') ，如果 window.location.pathname 正在异步更新，则断言可能会失败。你可以使用 waitForLocation 方法等待位置为给定值：

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

你还可以等待命名路由的位置：

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

等待页面重新加载 ​ ​

如果你需要在页面重新加载后进行断言，请使用 waitForReload 方法：

$browser->click('.some-action')
        ->waitForReload()
        ->assertSee('something');

等待 JavaScript 表达式 ​ ​

有时你可能希望暂停测试的执行，直到给定的 JavaScript 表达式评估为 true 。你可以使用 waitUntil 方法轻松实现这一点。将表达式传递给此方法时，你不需要包含 return 关键字或结束分号：

// 最多等待五秒钟以使表达式为真...
$browser->waitUntil('App.dataLoaded');

$browser->waitUntil('App.data.servers.length > 0');

// 最多等待一秒钟以使表达式为真...
$browser->waitUntil('App.data.servers.length > 0', 1);

等待 Vue 表达式 ​ ​

以下方法可用于等待给定的 Vue 组件属性具有给定值：

// 等待组件属性包含给定值...
$browser->waitUntilVue('user.name', 'Taylor', '@user');

// 等待组件属性不包含给定值...
$browser->waitUntilVueIsNot('user.name', null, '@user');

使用回调等待 ​ ​

Dusk 中的许多“等待”方法依赖于底层的 waitUsing 方法。你可以直接使用此方法等待给定回调返回 true 。 waitUsing 方法接受最大等待秒数、闭包应评估的间隔、闭包和可选的失败消息：

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

进行 Vue 断言 ​ ​

Dusk 甚至允许你对 Vue 组件数据的状态进行断言。例如，假设你的应用程序包含以下 Vue 组件：

// HTML...

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

// 组件定义...

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

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

你可以对 Vue 组件的状态进行如下断言：

/**
 * 一个基本的 Vue 测试示例。
 *
 * @return void
 */
public function testVue()
{
    $this->browse(function (Browser $browser) {
        $browser->visit('/')
                ->assertVue('user.name', 'Taylor', '@profile-component');
    });
}

可用断言 ​ ​

Dusk 提供了多种可以对你的应用程序进行的断言。所有可用的断言都在下面的列表中进行了记录：

assertTitle assertTitleContains assertUrlIs assertSchemeIs assertSchemeIsNot assertHostIs assertHostIsNot assertPortIs assertPortIsNot assertPathBeginsWith assertPathIs assertPathIsNot assertRouteIs assertQueryStringHas assertQueryStringMissing assertFragmentIs assertFragmentBeginsWith assertFragmentIsNot assertHasCookie assertCookieMissing assertCookieValue assertPlainCookieValue assertSee assertDontSee assertSeeIn assertDontSeeIn assertSourceHas assertSourceMissing assertSeeLink assertDontSeeLink assertInputValue assertInputValueIsNot assertChecked assertNotChecked assertRadioSelected assertRadioNotSelected assertSelected assertNotSelected assertSelectHasOptions assertSelectMissingOptions assertSelectHasOption assertValue assertVisible assertPresent assertMissing assertDialogOpened assertEnabled assertDisabled assertButtonEnabled assertButtonDisabled assertFocused assertNotFocused assertVue assertVueIsNot assertVueContains assertVueDoesNotContain

assertTitle ​ ​

断言页面标题与给定文本匹配：

$browser->assertTitle($title);

assertTitleContains ​ ​

断言页面标题包含给定文本：

$browser->assertTitleContains($title);

assertUrlIs ​ ​

断言当前 URL（不含查询字符串）与给定字符串匹配：

$browser->assertUrlIs($url);

assertSchemeIs ​ ​

断言当前 URL 方案与给定方案匹配：

$browser->assertSchemeIs($scheme);

assertSchemeIsNot ​ ​

断言当前 URL 方案不与给定方案匹配：

$browser->assertSchemeIsNot($scheme);

assertHostIs ​ ​

断言当前 URL 主机与给定主机匹配：

$browser->assertHostIs($host);

assertHostIsNot ​ ​

断言当前 URL 主机不与给定主机匹配：

$browser->assertHostIsNot($host);

assertPortIs ​ ​

断言当前 URL 端口与给定端口匹配：

$browser->assertPortIs($port);

assertPortIsNot ​ ​

断言当前 URL 端口不与给定端口匹配：

$browser->assertPortIsNot($port);

assertPathBeginsWith ​ ​

断言当前 URL 路径以给定路径开头：

$browser->assertPathBeginsWith($path);

assertPathIs ​ ​

断言当前路径与给定路径匹配：

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

assertPathIsNot ​ ​

断言当前路径不与给定路径匹配：

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

assertRouteIs ​ ​

断言当前 URL 与给定命名路由的 URL 匹配：

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

assertQueryStringHas ​ ​

断言给定查询字符串参数存在：

$browser->assertQueryStringHas($name);

断言给定查询字符串参数存在并具有给定值：

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

assertQueryStringMissing ​ ​

断言给定查询字符串参数不存在：

$browser->assertQueryStringMissing($name);

assertFragmentIs ​ ​

断言当前片段与给定片段匹配：

$browser->assertFragmentIs('anchor');

assertFragmentBeginsWith ​ ​

断言当前片段以给定片段开头：

$browser->assertFragmentBeginsWith('anchor');

assertFragmentIsNot ​ ​

断言当前片段不与给定片段匹配：

$browser->assertFragmentIsNot('anchor');

assertHasCookie ​ ​

断言给定 cookie 存在：

$browser->assertHasCookie($name);

assertCookieMissing ​ ​

断言给定 cookie 不存在：

$browser->assertCookieMissing($name);

assertCookieValue ​ ​

断言 cookie 具有给定值：

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

assertPlainCookieValue ​ ​

断言未加密的 cookie 具有给定值：

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

assertSee ​ ​

断言给定文本存在于页面上：

$browser->assertSee($text);

assertDontSee ​ ​

断言给定文本不存在于页面上：

$browser->assertDontSee($text);

assertSeeIn ​ ​

断言给定文本存在于选择器内：

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

assertDontSeeIn ​ ​

断言给定文本不存在于选择器内：

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

assertSourceHas ​ ​

断言给定源代码存在于页面上：

$browser->assertSourceHas($code);

assertSourceMissing ​ ​

断言给定源代码不存在于页面上：

$browser->assertSourceMissing($code);

断言给定链接存在于页面上：

$browser->assertSeeLink($linkText);

断言给定链接不存在于页面上：

$browser->assertDontSeeLink($linkText);

assertInputValue ​ ​

断言给定输入字段具有给定值：

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

assertInputValueIsNot ​ ​

断言给定输入字段不具有给定值：

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

assertChecked ​ ​

断言给定复选框已选中：

$browser->assertChecked($field);

assertNotChecked ​ ​

断言给定复选框未选中：

$browser->assertNotChecked($field);

assertRadioSelected ​ ​

断言给定单选字段已选中：

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

assertRadioNotSelected ​ ​

断言给定单选字段未选中：

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

assertSelected ​ ​

断言给定下拉菜单已选择给定值：

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

assertNotSelected ​ ​

断言给定下拉菜单未选择给定值：

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

assertSelectHasOptions ​ ​

断言给定值数组可供选择：

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

assertSelectMissingOptions ​ ​

断言给定值数组不可供选择：

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

assertSelectHasOption ​ ​

断言给定值可供在给定字段上选择：

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

assertValue ​ ​

断言与给定选择器匹配的元素具有给定值：

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

assertVisible ​ ​

断言与给定选择器匹配的元素可见：

$browser->assertVisible($selector);

assertPresent ​ ​

断言与给定选择器匹配的元素存在：

$browser->assertPresent($selector);

assertMissing ​ ​

断言与给定选择器匹配的元素不可见：

$browser->assertMissing($selector);

assertDialogOpened ​ ​

断言具有给定消息的 JavaScript 对话框已打开：

$browser->assertDialogOpened($message);

assertEnabled ​ ​

断言给定字段已启用：

$browser->assertEnabled($field);

assertDisabled ​ ​

断言给定字段已禁用：

$browser->assertDisabled($field);

assertButtonEnabled ​ ​

断言给定按钮已启用：

$browser->assertButtonEnabled($button);

assertButtonDisabled ​ ​

断言给定按钮已禁用：

$browser->assertButtonDisabled($button);

assertFocused ​ ​

断言给定字段已聚焦：

$browser->assertFocused($field);

assertNotFocused ​ ​

断言给定字段未聚焦：

$browser->assertNotFocused($field);

assertVue ​ ​

断言给定 Vue 组件数据属性与给定值匹配：

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

assertVueIsNot ​ ​

断言给定 Vue 组件数据属性不与给定值匹配：

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

assertVueContains ​ ​

断言给定 Vue 组件数据属性是一个数组并包含给定值：

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

assertVueDoesNotContain ​ ​

断言给定 Vue 组件数据属性是一个数组并不包含给定值：

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

页面 ​ ​

有时，测试需要按顺序执行几个复杂的操作。这会使你的测试更难阅读和理解。页面允许你定义可以在给定页面上使用单个方法执行的表达性操作。页面还允许你为应用程序或单个页面定义常见选择器的快捷方式。

生成页面 ​ ​

要生成页面对象，请使用 dusk:page Artisan 命令。所有页面对象将被放置在 tests/Browser/Pages 目录中：

php
artisan dusk:page Login

配置页面 ​ ​

默认情况下，页面有三个方法： url 、 assert 和 elements 。我们现在将讨论 url 和 assert 方法。 elements 方法将在 下面详细讨论。

url 方法 ​ ​

url 方法应返回表示页面的 URL 的路径。Dusk 将在浏览器中导航到页面时使用此 URL：

/**
 * 获取页面的 URL。
 *
 * @return string
 */
public function url()
{
    return '/login';
}

assert 方法 ​ ​

assert 方法可以进行任何必要的断言，以验证浏览器实际上在给定页面上。完成此方法不是必需的；但是，如果你愿意，可以进行这些断言。这些断言将在导航到页面时自动运行：

/**
 * 断言浏览器在页面上。
 *
 * @return void
 */
public function assert(Browser $browser)
{
    $browser->assertPathIs($this->url());
}

导航到页面 ​ ​

配置页面后，你可以使用 visit 方法导航到它：

use Tests\Browser\Pages\Login;

$browser->visit(new Login);

有时你可能已经在给定页面上，并需要将页面的选择器和方法“加载”到当前测试上下文中。这在按下按钮并被重定向到给定页面而不显式导航到它时很常见。在这种情况下，你可以使用 on 方法加载页面：

use Tests\Browser\Pages\CreatePlaylist;

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

简写选择器 ​ ​

页面的 elements 方法允许您为页面上的任何 CSS 选择器定义快速、易记的快捷方式。例如，让我们为应用程序登录页面的 "email" 输入字段定义一个快捷方式：

/**
 * 获取页面的元素快捷方式。
 *
 * @return array
 */
public function elements()
{
    return [
        '@email' => 'input[name=email]',
    ];
}

现在，您可以在任何使用完整 CSS 选择器的地方使用这个简写选择器：

$browser->type('@email', 'taylor@laravel.com');

全局简写选择器 ​ ​

安装 Dusk 后，一个基础 Page 类将被放置在您的 tests/Browser/Pages 目录中。此类包含一个 siteElements 方法，可用于定义在整个应用程序中每个页面上都应可用的全局简写选择器：

/**
 * 获取站点的全局元素快捷方式。
 *
 * @return array
 */
public static function siteElements()
{
    return [
        '@element' => '#selector',
    ];
}

页面方法 ​ ​

除了页面上定义的默认方法外，您还可以定义其他方法，这些方法可以在您的测试中使用。例如，假设我们正在构建一个音乐管理应用程序。应用程序的一个页面的常见操作可能是创建播放列表。您可以在页面类上定义一个 createPlaylist 方法，而不是在每个测试中重写创建播放列表的逻辑：

<?php

namespace Tests\Browser\Pages;

use Laravel\Dusk\Browser;

class Dashboard extends Page
{
    // 其他页面方法...

    /**
     * 创建一个新的播放列表。
     *
     * @param  \Laravel\Dusk\Browser  $browser
     * @param  string  $name
     * @return void
     */
    public function createPlaylist(Browser $browser, $name)
    {
        $browser->type('name', $name)
                ->check('share')
                ->press('Create Playlist');
    }
}

定义方法后，您可以在任何使用该页面的测试中使用它。浏览器实例将自动传递给页面方法：

use Tests\Browser\Pages\Dashboard;

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

组件 ​ ​

组件类似于 Dusk 的“页面对象”，但用于在应用程序中重复使用的 UI 和功能部分，例如导航栏或通知窗口。因此，组件不绑定到特定的 URL。

生成组件 ​ ​

要生成组件，请使用 dusk:component Artisan 命令。新组件将放置在 test/Browser/Components 目录中：

php
artisan dusk:component DatePicker

如上所示，“日期选择器”是一个可能在应用程序的各种页面中存在的组件示例。在测试套件的数十个测试中手动编写浏览器自动化逻辑以选择日期可能会变得繁琐。相反，我们可以定义一个 Dusk 组件来表示日期选择器，从而允许我们在组件中封装该逻辑：

<?php

namespace Tests\Browser\Components;

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

class DatePicker extends BaseComponent
{
    /**
     * 获取组件的根选择器。
     *
     * @return string
     */
    public function selector()
    {
        return '.date-picker';
    }

    /**
     * 断言浏览器页面包含组件。
     *
     * @param  Browser  $browser
     * @return void
     */
    public function assert(Browser $browser)
    {
        $browser->assertVisible($this->selector());
    }

    /**
     * 获取组件的元素快捷方式。
     *
     * @return array
     */
    public function elements()
    {
        return [
            '@date-field' => 'input.datepicker-input',
            '@month-list' => 'div > div.datepicker-months',
            '@day-list' => 'div > div.datepicker-days',
        ];
    }

    /**
     * 选择给定的日期。
     *
     * @param  \Laravel\Dusk\Browser  $browser
     * @param  int  $month
     * @param  int  $day
     * @return void
     */
    public function selectDate($browser, $month, $day)
    {
        $browser->click('@date-field')
                ->within('@month-list', function ($browser) use ($month) {
                    $browser->click($month);
                })
                ->within('@day-list', function ($browser) use ($day) {
                    $browser->click($day);
                });
    }
}

使用组件 ​ ​

定义组件后，我们可以轻松地从任何测试中在日期选择器中选择日期。而且，如果选择日期所需的逻辑发生变化，我们只需更新组件：

<?php

namespace Tests\Browser;

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

class ExampleTest extends DuskTestCase
{
    /**
     * 基本组件测试示例。
     *
     * @return void
     */
    public function testBasicExample()
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/')
                    ->within(new DatePicker, function ($browser) {
                        $browser->selectDate(1, 2018);
                    })
                    ->assertSee('January');
        });
    }
}

持续集成 ​ ​

CircleCI ​ ​

如果您使用 CircleCI 运行 Dusk 测试，可以使用此配置文件作为起点。与 TravisCI 类似，我们将使用 php artisan serve 命令启动 PHP 的内置 Web 服务器：

version: 2
jobs:
    build:
        steps:
            - run: sudo apt-get install -y libsqlite3-dev
            - run: cp .env.testing .env
            - run: composer install -n --ignore-platform-reqs
            - run: npm install
            - run: npm run production
            - run: vendor/bin/phpunit
   
            - run:
                name: 启动 Chrome Driver
                command: ./vendor/laravel/dusk/bin/chromedriver-linux
                background: true
   
            - run:
                name: 运行 Laravel 服务器
                command: php artisan serve
                background: true
   
            - run:
                name: 运行 Laravel Dusk 测试
                command: php artisan dusk

Codeship ​ ​

要在 Codeship 上运行 Dusk 测试，请将以下命令添加到您的 Codeship 项目中。这些命令只是一个起点，您可以根据需要添加其他命令：

phpenv local 7.2
cp .env.testing .env
mkdir -p ./bootstrap/cache
composer install --no-interaction --prefer-dist
php artisan key:generate
nohup bash -c "php artisan serve 2>&1 &" && sleep 5
php artisan dusk

Heroku CI ​ ​

要在 Heroku CI 上运行 Dusk 测试，请将以下 Google Chrome buildpack 和脚本添加到您的 Heroku app.json 文件中：

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

Travis CI ​ ​

要在 Travis CI 上运行您的 Dusk 测试，请使用以下 .travis.yml 配置。由于 Travis CI 不是图形环境，我们需要采取一些额外步骤来启动 Chrome 浏览器。此外，我们将使用 php artisan serve 启动 PHP 的内置 Web 服务器：

language: php

php:
  - 7.3

addons:
  chrome: stable

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

before_script:
  - google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 http://localhost &
  - php artisan serve &

script:
  - php artisan dusk

GitHub Actions ​ ​

如果您使用 Github Actions 运行您的 Dusk 测试，可以使用此配置文件作为起点。与 TravisCI 类似，我们将使用 php artisan serve 命令启动 PHP 的内置 Web 服务器：

name: CI
on: [push]
jobs:

  dusk-php:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: 准备环境
        run: cp .env.example .env
      - name: 安装 Composer 依赖
        run: composer install --no-progress --no-suggest --prefer-dist --optimize-autoloader
      - name: 生成应用程序密钥
        run: php artisan key:generate
      - name: 升级 Chrome Driver
        run: php artisan dusk:chrome-driver
      - name: 启动 Chrome Driver
        run: ./vendor/laravel/dusk/bin/chromedriver-linux > /dev/null 2>&1 &
      - name: 运行 Laravel 服务器
        run: php artisan serve > /dev/null 2>&1 &
      - name: 运行 Dusk 测试
        run: php artisan dusk

在您的 .env.testing 文件中，调整 APP_URL 的值：

APP_URL=http://127.0.0.1:8000