浏览器测试 (Laravel Dusk)

介绍

Laravel Dusk 提供了富有表现力、简单易用的浏览器自动化及测试 API 。默认情况下，Dusk 不需要在你的机器上安装 JDK 或者 Selenium 。而是需要使用单独的 Chrome 驱动进行安装。当然，你也可以自由使用其他的兼容 Selenium 的驱动程序。

安装

你应该先向你的 Composer 依赖添加 laravel/dusk ：

composer require --dev laravel/dusk

当 Dusk 安装完成后，你应该注册 Laravel\Dusk\DuskServiceProvider 服务提供者。通常情况下，它将会在 Laravel 服务提供者的自动注册过程中自动安装好。

{note} 如果你是手动注册 Dusk 服务提供者，一定不能 在你的生产环境中注册，这样可能会导致一些不守规矩的用户拥有控制你应用的权限。

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

php artisan dusk:install

Browser 目录将会在 tests 目录下被创建，并且包含一个测试用例。然后，在你的 .env 文件中设置 APP_URL 变量。这个值应该与你在浏览器中打开本应用的 URL 匹配。

要运行测试，使用 dusk Artisan 命令。 dusk 命令与 phpunit 命令接收同样的参数：

php artisan dusk

使用其他浏览器

默认情况下， Dusk 使用 Google Chrome 浏览器和一个单独的 ChromeDriver 的安装运行你的浏览器测试。当然，你可以运行你自己的 Selenium 服务，用任何你想用的浏览器进行测试。

如果要这么做，打开 tests/DuskTestCase.php 文件，这个是应用测试用例的基类。在这个文件中，你可以移除对 startChromeDriver 方法的调用。这样 Dusk 就不会自动启动 ChromeDriver 了。

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

然后，你可以修改 driver 方法来连接到你选定的 URL 和端口。此外，你可以修改「期望能力」这个值，它将会被传递到 Web 驱动：

/**
 * 创建 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 命令接受任何能让 PHPUnit 正常运行所接受的参数。例如，让你可以在指定 group 中运行测试：

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，你需要在tests/DuskTestCase.php 文件中修改 driver 方法：

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

环境处理

在你的项目根目录创建 .env.dusk.{environment} 文件来强制 Dusk 使用自己的环境文件来运行测试。简单的说，如果你想用 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', 'secret')
                    ->press('Login')
                    ->assertPathIs('/home');
        });
    }
}

在上面的例子中，browse 方法接收了一个回调参数。Dusk 会自动将这个浏览器实例注入到回调过程中，而且这个浏览器实例可以让你和你的应用之间进行交互和断言。

{tip} 这个测试例子可以用 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();

认证

你可能经常会测试一些需要认证的页面。你可以使用 Dusk 的 loginAs 方法来避免每个测试都去登陆页面登陆一次。 loginAs 可以使用用户 ID 或者用户模型实例：

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

{note} 使用 loginAs 方法后，该用户的 session 将会持久化的供其他测试用例使用。

数据库迁移

就像上面的认证例子一样，当你的测试用例需要迁移的时候，你不应该使用 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 选择器用于元素交互是编写 Dush 测试最困难的部分之一。随着时间推移，前端的更改可能会导致类似以下的 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);

{note} 这个方法可以与 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 提供了与表单和 input 元素交互的各种方法。首先，让我们来看一个在 input 框中输入文本的示例：

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

注意，虽然 type 方法可以传递 CSS 选择器作为一个参数，但这并不是强制要求的。如果传入的不是 CSS 选择器，Dusk 会尝试搜索与 name 属性相同的 input 框。如果还没有找到，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 方法来选中一个复选框。像其他许多与 input 相关的方法，并不是必须传入 CSS 选择器。如果准确的选择器找不到，Dusk 会搜索与 name 属性匹配的复选框：

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

单选按钮

你可以使用 radio 方法来选择某个单选选项。像很多其他的与输入相关的方法一样，它也并不是必须传入 CSS 选择器。如果准确的选择器无法找到的时候，Dusk 会搜索能够与 name 属性或者 value 属性匹配的单选按钮：

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

附加文件

attach 方法可以附加一个文件到 file input 框中。像很多其他的与输入相关的方法一样，它也并不是必须传入 CSS 选择器。如果准确的选择器没法找到的时候，Dusk 会搜索与 name 属性匹配的文件输入框：

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

{note} attach 方法要求在你的服务器上安装并启用PHP的 Zip 扩展。

使用键盘

keys 方法让你可以在指定元素中输入比 type 方法更加复杂的输入序列。例如，你可以在输入值的同时按下按键。在这个例子中，输入 taylor 时，shift 键也同时被按下。当 taylor 输入完之后，将会输入otwell 而不会按下任何按键：

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

你甚至可以在你的应用中选中某个元素之后按下「快捷键」：

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

{tip} 所有包在 {} 中的键盘按键，都应该与 Facebook\WebDriver\WebDriverKeys 类中定义的常量一致。可以在 GitHub 中找到这些类。

使用鼠标

点击元素

click 用来「点击」与指定选择器匹配的元素：

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

Mouseover

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);

元素作用域

有时候你可能希望某个与选择器匹配的元素中执行一系列的操作。例如，你可能希望在某个表格中断言有某些文本，然后在那个表格中点击按钮去操作这些文本。你可以使用 with 方法来达到这个目的。with 方法的回调参数中，所有的操作都作用在同一个原始选择器上：

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

等待元素

由于在测试应用的时候经常会用到 JavaScript，所以经常需要在开始之前「等待」某些元素或数据，以确保在测试中是有效的。 Dusk 让这个变得简单。使用一系列方法，让你可以等待页面元素完全显示，甚至是指定的 JavaScript 表达式返回 true 的时候才继续执行测试。

等待

如果你需要指定暂停的毫秒数，你可以使用 pause 方法：

$browser->pause(1000);

等待选择器元素

waitFor 方法用来暂停测试的执行，直到与 CSS 选择器匹配的元素显示在页面中。在抛出异常之前，默认最多暂停 5 秒。如果需要，你也可以自定义超时时间作为第二个参数传给这个方法：

// 最多为这个选择器等待 5 秒...
$browser->waitFor('.selector');
// 最多为这个选择器等待 1 秒...
$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 方法用于等待指定文本，直到显示在页面中为止：

// 最多为这个文本的显示等待 5 秒...
$browser->waitForText('Hello World');
// 最多为这个文本的显示等待 1 秒...
$browser->waitForText('Hello World', 1);

等待超链接

waitForLink 方法用来等待指定链接文本，直到链接文本显示在页面中为止：

// 最多为这个链接的显示等待 5 秒...
$browser->waitForLink('Create');
// 最多为这个链接的显示等待 1 秒...
$browser->waitForLink('Create', 1);

等待页面跳转

在进行例如 $browser->assertPathIs('/home')的路径断言时，如果 window.location.pathname 为异步完成，断言就会失败。你需要使用 waitForLocation 方法去等待指定的跳转：

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

等待页面重载

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

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

等待 JavaScript 表达式

有时候你可能想要暂停测试用例的执行，直到指定的 JavaScript 表达式计算结果为 true。使用 waitUntil 方法可以让你很容易做到这一点。传递表达式给方法的时候，你不需要包括 return 关键词或者结束分号：

// 最多为表达式的成立等待 5 秒...
$browser->waitUntil('App.dataLoaded');
$browser->waitUntil('App.data.servers.length > 0');
// 最多为表达式的成立等待 1 秒...
$browser->waitUntil('App.data.servers.length > 0', 1);

等待回调

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 组件的状态上作出如下断言：

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

可用的断言

Dusk 提供了一系列可用的断言方法。所有断言如下：

assertTitle assertTitleContains assertUrlIs assertPathBeginsWith assertPathIs assertPathIsNot assertRouteIs assertQueryStringHas assertQueryStringHas assertQueryStringMissing 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 assertMissing assertDialogOpened assertVue assertVueIsNot

assertTitle

断言网页标题匹配指定的文本：

$browser->assertTitle($title);

assertTitleContains

断言网页标题含有指定的文本：

$browser->assertTitleContains($title);

assertUrlIs

断言当前 URL （不带查询字符串）匹配指定的字符串：

$browser->assertUrlIs($url);

assertPathBeginsWith

断言当前 URL 开始于指定的路径：

$browser->assertPathBeginsWith($path);

assertPathIs

断言当前路径匹配指定的路径：

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

assertPathIsNot

断言当前路径不匹配指定的路径：

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

assertRouteIs

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

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

assertQueryStringHas

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

$browser->assertQueryStringHas($name);

assertQueryStringHas

断言存在指定的查询字符串参数以及值：

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

assertQueryStringMissing

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

$browser->assertQueryStringMissing($name);

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);

assertSeeLink

断言当前页存在指定的链接：

$browser->assertSeeLink($linkText);

assertDontSeeLink

断言当前页不存在指定的链接：

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

assertSelectHasOption

断言可选到指定数组中的值：

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

assertSelectMissingOptions

断言选取不到指定数组中的值：

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

assertSelectHasOption

断言可选到指定的值：

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

assertValue

断言选择器范围内的元素存在指定的值：

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

assertVisible

断言选择器范围内的元素可见：

$browser->assertVisible($selector);

assertMissing

断言选择器范围内的元素隐藏：

$browser->assertMissing($selector);

assertDialogOpened

断言 JavaScript 对话框以指定的信息打开：

$browser->assertDialogOpened($message);

assertVue

断言 Vue 组件数据的属性匹配指定的值：

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

assertVueIsNot

断言 Vue 组件数据的属性不匹配指定的值：

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

Page

有时候，需要测试一系列复杂的动作，这会使得测试代码难以阅读和理解。通过页面可以定义出语义化的动作，然后在指定页面中可以使用单个方法。页面还可以定义应用或单个页面通用选择器的快捷方式。

生成页面

dusk:page Artisan 命令可以生成页面。所有的页面对象都位于 tests/Browser/Pages 目录：

php artisan dusk:page Login

配置页面

页面默认拥有 3 个方法： url， assert 和 elements。在这里我们先详述 url 和 assert 方法。elements 方法将会在下面详细描述。

url 方法

url 方法应该返回表示页面 URL 的路径。 Dusk 将会在浏览器中使用这个 URL 来导航到具体页面：

/**
 * 获得页面 URL 路径
 *
 * @return string
 */
public function url()
{
    return '/login';
}

The assert Method

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。

组件的生成

为了生成一个组件, 使用 Artisan 命令 dusk:component 即可生成组件。新生成的组件位于 test/Browser/Components 目录中：

php artisan dusk:component DatePicker

如上所示，这是生成一个“日期选择器”（date picker）组件的示例，这个组件可能会贯穿使用在你应用程序的许多页面中。在整个测试套件的大量测试页面中，手动编写日期选择的浏览器自动化逻辑会非常麻烦。更方便的替代办法是，定义一个表示日期选择器的 Dusk 组件，然后把自动化逻辑封装在该组件内：

<?php
namespace Tests\Browser\Components;
use Laravel\Dusk\Browser;
use Laravel\Dusk\Component as BaseComponent;
class DatePicker extends BaseComponent
{
    /**
     * 获取组件的 root selector 。
     *
     * @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  $year
     * @return void
     */
    public function selectDate($browser, $month, $year)
    {
        $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 1.0

如果你要使用 CircleCI 1.0 运行 Dusk 测试，可能需要使用以下配置进行启动。和 TravisCI 一样，我们需要使用 php artisan serve 命令去运行 PHP 内置服务器：

dependencies:
  pre:
      - curl -L -o google-chrome.deb https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
      - sudo dpkg -i google-chrome.deb
      - sudo sed -i 's|HERE/chrome\"|HERE/chrome\" --disable-setuid-sandbox|g' /opt/google/chrome/google-chrome
      - rm google-chrome.deb
test:
    pre:
        - "./vendor/laravel/dusk/bin/chromedriver-linux":
            background: true
        - cp .env.testing .env
        - "php artisan serve":
            background: true
    override:
        - php artisan dusk

CircleCI 2.0

如果你使用 CircleCI 2.0 运行你的 Dusk 测试，你需要将以下 steps 添加到你的 build 中：

 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: Start Chrome Driver
               command: ./vendor/laravel/dusk/bin/chromedriver-linux
               background: true
            - run:
               name: Run Laravel Server
               command: php artisan serve
               background: true
            - run:
               name: Run Laravel Dusk Tests
               command: php artisan dusk

Codeship

在 Codeship 中运行 Dusk 测试，需要在你的 Codeship 项目中添加以下命令。当然，这些命令只是作为范例，你可以根据需要随意添加额外的命令：

phpenv local 7.1
cp .env.testing .env
composer install --no-interaction
nohup bash -c "./vendor/laravel/dusk/bin/chromedriver-linux 2>&1 &"
nohup bash -c "php artisan serve 2>&1 &" && sleep 5
php artisan dusk

Heroku CI

在 Heroku CI 中运行 Dusk 测试时，请将下列 Google Chrome 构建包和脚本添加到你的 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 测试时，我们需要「sudo-enabled」的 Ubuntu 14.04 (Trusty) 环境。由于 Travis CI 不是图形化环境，我们需要一些额外的步骤去启动 Chrome 浏览器。另外，我们需要使用 php artisan serve 命令去启动 PHP 内置服务器：

sudo: required
dist: trusty
addons:
   chrome: stable
install:
   - cp .env.testing .env
   - travis_retry composer install --no-interaction --prefer-dist --no-suggest
before_script:
   - google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 http://localhost &
   - php artisan serve &
script:
   - php artisan dusk

本文章首发在 LearnKu.com 网站上。

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

浏览器测试 Dusk

浏览器测试 (Laravel Dusk)

介绍

安装

使用其他浏览器

开始

生成测试

运行测试

手动运行 ChromeDriver

环境处理

创建浏览器

创建多个浏览器

改变浏览器窗口大小

认证

数据库迁移

与元素交互

Dusk 选择器

点击链接

文本、值和属性

检索和设置值

检索文本

检索属性

使用表单

输入值

下拉菜单

复选框

单选按钮

附加文件

使用键盘

使用鼠标

点击元素

Mouseover

拖拽

元素作用域

等待元素

等待

等待选择器元素

可用元素的作用域

等待文本

等待超链接

等待页面跳转

等待页面重载

等待 JavaScript 表达式

等待回调

作出 Vue 断言

可用的断言

assertTitle

assertTitleContains

assertUrlIs

assertPathBeginsWith

assertPathIs

assertPathIsNot

assertRouteIs

assertQueryStringHas

assertQueryStringHas

assertQueryStringMissing

assertHasCookie

assertCookieMissing

assertCookieValue

assertPlainCookieValue

assertSee

assertDontSee

assertSeeIn

assertDontSeeIn

assertSourceHas

assertSourceMissing

assertSeeLink

assertDontSeeLink

assertInputValue

assertInputValueIsNot

assertChecked

assertNotChecked

assertRadioSelected

assertRadioNotSelected

assertSelected

assertNotSelected

assertSelectHasOption

assertSelectMissingOptions

assertSelectHasOption

assertValue