Menu

浏览器测试 Dusk

浏览器测试 (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 方法。该方法可以等待一个回调返回 truewaitUsing 接受的参数为最大等待秒数、闭包的执行间隔、闭包以及一个可选的错误信息。

$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

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

$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 个方法: urlassertelements。 在这里我们先详述 urlassert 方法。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

本文章首发在 Laravel China 社区
上一篇 下一篇
讨论数量: 0
发起讨论


暂无话题~