* * * * *
[TOC]
## 介绍
Laravel Dusk 提供了富有表现力、简单易用的浏览器自动化及测试 API 。默认情况下，Dusk 不需要在你的机器上安装 JDK 或者 Selenium 。而是需要使用单独的 [Chrome 驱动 ](https://sites.google.com/a/chromium.org/chromedriver/home)进行安装。当然，你也可以自由使用其他的兼容 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](https://sites.google.com/a/chromium.org/chromedriver/home) 的安装运行你的浏览器测试。当然，你可以运行你自己的 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 ](https://phpunit.de/manual/current/en/appendixes.annotations.html#appendixes.annotations.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 ](https://github.com/facebook/php-webdriver/blob/community/lib/WebDriverKeys.php)中找到这些类。
### 使用鼠标
#### 点击元素
`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](https://vuejs.org/) 组件数据的状态作出断言。例如，假设您的应用程序包含以下 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](#assertTitle_633)
[assertTitleContains](#assertTitleContains_641)
[assertUrlIs](#assertUrlIs_649)
[assertPathBeginsWith](#assertPathBeginsWith_657)
[assertPathIs](#assertPathIs_665)
[assertPathIsNot](#assertPathIsNot_673)
[assertRouteIs](#assertRouteIs_681)
[assertQueryStringHas](#assertQueryStringHas_689)
[assertQueryStringHas](#assertQueryStringHas_697)
[assertQueryStringMissing](#assertQueryStringMissing_705)
[assertHasCookie](#assertHasCookie_713)
[assertCookieMissing](#assertCookieMissing_721)
[assertCookieValue](#assertCookieValue_729)
[assertPlainCookieValue](#assertPlainCookieValue_737)
[assertSee](#assertSee_745)
[assertDontSee](#assertDontSee_753)
[assertSeeIn](#assertSeeIn_761)
[assertDontSeeIn](#assertDontSeeIn_769)
[assertSourceHas](#assertSourceHas_777)
[assertSourceMissing](#assertSourceMissing_785)
[assertSeeLink](#assertSeeLink_793)
[assertDontSeeLink](#assertDontSeeLink_801)
[assertInputValue](#assertInputValue_809)
[assertInputValueIsNot](#assertInputValueIsNot_817)
[assertChecked](#assertChecked_825)
[assertNotChecked](#assertNotChecked_833)
[assertRadioSelected](#assertRadioSelected_841)
[assertRadioNotSelected](#assertRadioNotSelected_849)
[assertSelected](#assertSelected_857)
[assertNotSelected](#assertNotSelected_865)
[assertSelectHasOption](#assertSelectHasOption_873)
[assertSelectMissingOptions](#assertSelectMissingOptions_881)
[assertSelectHasOption](#assertSelectHasOption_889)
[assertValue](#assertValue_897)
[assertVisible](#assertVisible_905)
[assertMissing](#assertMissing_913)
[assertDialogOpened](#assertDialogOpened_921)
[assertVue](#assertVue_929)
[assertVueIsNot](#assertVueIsNot_937)
#### 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` 方法将会 [在下面详细描述](https://laravel-china.org/docs/laravel/5.6/dusk/1411#shorthand-selectors)。
#### `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](https://codeship.com/) 中运行 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](https://www.heroku.com/continuous-integration) 中运行 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
~~~
- 前言
- 翻译说明
- 发行说明
- 升级指南
- 贡献导引
- 入门指南
- 安装
- 配置信息
- 文件夹结构
- Homestead
- Valet
- 部署
- 核心架构
- 请求周期
- 服务容器
- 服务提供者
- Facades
- Contracts
- 基础功能
- 路由
- 中间件
- CSRF 保护
- 控制器
- 请求
- 响应
- 视图
- URL
- Session
- 表单验证
- 错误
- 日志
- 前端开发
- Blade 模板
- 本地化
- 前端指南
- 编辑资源 Mix
- 安全相关
- 用户认证
- Passport OAuth 认证
- 用户授权
- 加密解密
- 哈希
- 重置密码
- 综合话题
- Artisan 命令行
- 广播系统
- 缓存系统
- 集合
- 事件系统
- 文件存储
- 辅助函数
- 邮件发送
- 消息通知
- 扩展包开发
- 队列
- 任务调度
- 数据库
- 快速入门
- 查询构造器
- 分页
- 数据库迁移
- 数据填充
- Redis
- Eloquent ORM
- 快速入门
- 模型关联
- Eloquent 集合
- 修改器
- API 资源
- 序列化
- 测试相关
- 快速入门
- HTTP 测试
- 浏览器测试 Dusk
- 数据库测试
- 测试模拟器
- 官方扩展包
- Cashier 交易工具包
- Envoy 部署工具
- Horizon
- Scout 全文搜索
- Socialite 社会化登录