laravel 浏览器测试——迹忆客-ag捕鱼王app官网

cookie

可以使用cookie方法来获取或设置加密cookie的值：

$browser->cookie('name');
$browser->cookie('name', 'taylor');

我们可以使用plaincookie方法来获取或设置未加密的 cookie 的值：

$browser->plaincookie('name');
$browser->plaincookie('name', 'taylor');

可以使用deletecookie方法删除给定的 cookie：

$browser->deletecookie('name');

截图

可以使用screenshot方法来截取屏幕截图，并将其与给定的文件名一起存储。所有屏幕截图都将存储在tests/browser/screenshots目录中：

$browser->screenshot('filename');

将控制台输出存储到磁盘

可以使用storeconsolelog方法将控制台输出以给定的文件名写入磁盘。控制台输出将存储在tests/browser/console目录中：

$browser->storeconsolelog('filename');

将页面源存储到磁盘

可以使用storesource方法将页面的当前源以给定的文件名写入磁盘。页面源将存储在tests/browser/source目录中：

$browser->storesource('filename');

与页面元素交互

dusk 选择器

编写 dusk 测试最困难的部分之一就是为元素交互选择好的 css 选择器，随着时间的推移，前端的改变可能导致 css 选择器像下面这样中断测试：

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

dusk 选择器允许你专注于编写高效的测试而不是记住 css 选择器。要定义一个选择器，添加 dusk 属性到 html 元素，然后，通过在选择器前添加 @ 前缀在 dusk 测试中操作元素：

// html...
login
// test...
$browser->click('@login-button');

点击链接

要点击链接，可以使用浏览器实例上的 clicklink 方法，clicklink 方法将会点击包含给定文本的链接：

$browser->clicklink($linktext);

注：该方法通过 jquery 进行交互，如果 jquery 在页面上无效，dusk 会自动将其注入到页面，以便在测试期间生效。

文本、值 & 属性

获取 & 设置值

dusk 提供了多个方法用于和页面元素的当前显示文本、值和属性进行交互，例如，要获取匹配给定选择器的元素值，使用 value 方法：

// retrieve the value...
$value = $browser->value('selector');
// set the value...
$browser->value('selector', 'value');

可以使用inputvalue方法获取具有给定字段名称的输入元素的“值”：

// retrieve the value of an input element...
$inputvalue = $browser->inputvalue('field');

获取文本

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

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

获取属性

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

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

使用表单

输入值

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

$browser->type('email', 'test@163.com');

注意，虽然 type 方法在需要的时候可以接收，但是我们也不是必须要传递 css 选择器到该方法。如果没有提供 css 选择器，dusk 会搜索包含给定 name 属性的输入字段，最后，dusk 会尝试查找包含给定 name 属性的 textarea。

要追加文本到某个字段而不清除其值，可以使用 append 方法：

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

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

$browser->clear('email');

可以使用typeslowly方法指示 dusk 缓慢键入。默认情况下，dusk 将在两次按键之间暂停 100 毫秒。要自定义按键之间的时间量，可以将适当的毫秒数作为第三个参数传递给该方法：

$browser->typeslowly('mobile', ' 1 (202) 555-5555');
$browser->typeslowly('mobile', ' 1 (202) 555-5555', 300);

可以使用该appendslowly方法缓慢附加文本：

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

下拉框

要在下拉选择框中选择值，可以使用 select 方法。和 type 方法一样，select 方法不需要完整的 css 选择器，当传递值到 select 方法时，需要传递底层 option 值而不是显示文本：

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

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

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

注：使用 attach 函数要求系统安装并启用了了 php zip 扩展。

使用键盘

keys 方法允许我们提供比 type 方法更多的复杂输入序列到给定元素。例如，可以存放编辑键及对应输入值，在本例中，shift键会被存放而taylor被输入到与给定选择器匹配的元素中。输入taylor后，otwell会以不带任何编辑键的形式被输入：

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

我们甚至还可以发送“热键”到包含应用的主css选择器上：

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

注：所有编辑键都被包裹在 {} 中，并匹配定义在 facebook\webdriver\webdriverkeys 类中的常量，这些常量可以在github上找到。

使用鼠标

点击元素

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

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

clickatxpath方法可用于“单击”与给定 xpath 表达式匹配的元素：

$browser->clickatxpath('//div[@class = "selector"]');

clickatpoint方法可用于在相对于浏览器可见区域的给定坐标对处“单击”最顶部的元素：

$browser->clickatpoint(0, 0);

doubleclick方法可用于模拟鼠标的双击：

$browser->doubleclick();

rightclick方法可用于模拟鼠标的右键“单击”：

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

clickandhold方法可用于模拟鼠标按钮被点击和按住。对releasemouse方法的后续调用将撤消此行为并释放鼠标按钮：

$browser->clickandhold()
        ->pause(1000)
        ->releasemouse();

鼠标悬停

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

最后，可以将元素拖动给定的偏移量：

$browser->dragoffset('.selector', 10, 10);

javascript 对话框

dusk 提供多个方法与 javascript 对话框交互：

// wait for a dialog to appear:
$browser->waitfordialog($seconds = null);
// assert that a dialog has been displayed and that its message matches the given value:
$browser->assertdialogopened('value');
// type the given value in an open javascript prompt dialog:
$browser->typeindialog('hello world');

要关闭一个打开的 javascript 对话框，可以点击确定按钮：

$browser->acceptdialog();

也可以点击取消按钮：

$browser->dismissdialog();

选择器作用域

有时候可能只想要在某个给定选择器上执行一系列操作，例如，我们可能想要在某个表格中断言文本是否存在然后在同一个表格中点击按钮。可以使用 with 方法来完成这一功能，传递给 with 方法的回调中所有被执行的操作都被限制在给定的选择器中：

$browser->with('.table', function ($table) {
    $table->assertsee('hello world')
          ->clicklink('delete');
});

我们可能偶尔需要在当前范围之外执行断言可以使用elsewhere方法来完成此操作：

 $browser->with('.table', function ($table) {
    // current scope is `body .table`...
    $browser->elsewhere('.page-title', function ($title) {
        // current scope is `body .page-title`...
        $title->assertsee('hello world');
    });
 });

等待元素

当测试到广泛使用 javascript 的应用时，经常需要等待特定元素或数据加载完成之后才能进行测试。dusk 让这种测试变得简单，通过使用多种方法，你可以在页面上等待元素变得可访问，甚至直到给定 javascript 表达式值为 true。

等待

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

$browser->pause(1000);

等待选择器

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

// wait a maximum of five seconds for the selector...
$browser->waitfor('.selector');
// wait a maximum of one second for the selector...
$browser->waitfor('.selector', 1);

还可以等到给定选择器在页面消失：

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

选择器作用域（有效的话）

某些情况下，你可能想要等待给定选择器然后和匹配给定选择器的元素进行交互。例如，可能想要等待直到模态窗口有效然后在该窗口中按下“ok”按钮。whenavailable 方法可以用于此种案例。给定回调中的所有元素操作执行都会限制在特定选择器中：

$browser->whenavailable('.modal', function ($modal) {
    $modal->assertsee('hello world')
          ->press('ok');
});

等待文本

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

// wait a maximum of five seconds for the text...
$browser->waitfortext('hello world');
// wait a maximum of one second for the text...
$browser->waitfortext('hello world', 1);

可以使用该waituntilmissingtext方法等待显示的文本从页面中移除：

// wait a maximum of five seconds for the text to be removed...
$browser->waituntilmissingtext('hello world');
// wait a maximum of one second for the text to be removed...
$browser->waituntilmissingtext('hello world', 1);

等待链接

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

// wait a maximum of five seconds for the link...
$browser->waitforlink('create');
// wait a maximum of one second for the link...
$browser->waitforlink('create', 1);

等待页面加载

当进行页面断言如 $browser->assertpathis('/home') 时，如果 window.location.pathname 被异步更新则断言会失败。你可以使用 waitforlocation 方法等待 location 成为给定值：

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

还可以等待命名路由的 location：

$browser->waitforroute($routename, $parameters);

等待页面重载

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

$browser->click('.some-action')
    ->waitforreload()
    ->assertsee('something');
        ```
#### 等待 javascript 表达式
有时候可能想要暂定测试直到 javascript 表达式值为 true。可以简单通过 `waituntil` 方法完成这一功能。当暂停表达式时，不需要包含 return 关键词或者结束分号：
```php
// wait a maximum of five seconds for the expression to be true...
$browser->waituntil('app.dataloaded');
$browser->waituntil('app.data.servers.length > 0');
// wait a maximum of one second for the expression to be true...
$browser->waituntil('app.data.servers.length > 0', 1);

等待 vue 表达式

下面的方法可用于等待直到给定 vue 组件属性包含指定值：

// wait until the component attribute contains the given value...
$browser->waituntilvue('user.name', 'taylor', '@user');
// wait until the component attribute doesn't contain the given value...
$browser->waituntilvueisnot('user.name', null, '@user');

带回调的等待

dusk 里面的很多“wait”方法依赖于底层的 waitusing 方法。我们可以直接使用这个方法来等待给定回调返回 true，waitusing 方法接收等待的最大秒数、闭包执行的时间间隔、闭包以及可选的失败信息：

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

将元素滚动到视图中

有时我们可能无法单击某个元素，因为它位于浏览器的可视区域之外。scrollintoview方法将滚动浏览器窗口，直到给定选择器处的元素在视图中：

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

vue 断言

dusk 甚至允许我们对 vue 组件数据的状态进行断言，例如，假应用包含了如下 vue 组件：

// html...

// component definition...
vue.component('profile', {
    template: '
{{ user.name }}
',
    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', '迹忆客', '@profile-component');
    });
}

有效的断言

dusk 提供了多种断言用于应用测试，所有有效的断言罗列如下：

asserttitle

asserttitlecontains

asserturlis

assertschemeis

assertschemeisnot

asserthostis

asserthostisnot

assertportis

assertportisnot

assertpathbeginswith

assertpathis

assertpathisnot

assertrouteis

assertquerystringhas

assertquerystringmissing

assertfragmentis

assertfragmentbeginswith

assertfragmentisnot

asserthascookie

asserthasplaincookie

assertcookiemissing

assertplaincookiemissing

assertcookievalue

assertplaincookievalue

assertsee

assertdontsee

assertseein

assertdontseein

assertsourcehas

assertsourcemissing

assertseelink

assertdontseelink

assertinputvalue

assertinputvalueisnot

assertchecked

assertnotchecked

assertradioselected

assertradionotselected

assertselected

assertnotselected

assertselecthasoptions

assertselectmissingoption

assertselectmissingoptions

assertselecthasoption

assertvalue

assertattribute

assertariaattribute

assertdataattribute

assertvisible

assertpresent

assertmissing

assertdialogopened

assertenabled

assertdisabled

assertbuttonenabled

assertbuttondisabled

assertfocused

assertnotfocused

assertauthenticated

assertguest

assertauthenticatedas

assertvue

assertvueisnot

assertvuecontains

assertvuedoesnotcontain

生成页面

要生成页面对象，使用 artisan 命令 dusk:page 即可。所有页面对象都位于 tests/browser/pages 目录：

$ php artisan dusk:page login

配置页面

默认情况下，页面有三个方法：url、assert 和 elements，下面我们来讨论 url 和 assert，至于 elements，我们将会在后续选择器速记中详细讨论。

url方法

url 方法会返回代表页面的 url 路径，dusk 会在浏览器中导航到页面时使用这个 url：

/**
 * get the url for the page.
 *
 * @return string
 */
public function 
{
    return '/login';
}

assert方法

assert 方法会生成必要的断言来验证浏览器确实在给定页面，完成这个方法不是必须的；不过，我们可以在需要的时候生成这些断言。这些断言将会在导航到页面时自动运行：

/**
 * assert that the browser is on the page.
 *
 * @return void
 */
public function assert(browser $browser)
{
    $browser->assertpathis($this->);
}

导航到页面

页面被配置后，可以使用 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');

可以使用visitroute方法导航到命名路由：

$browser->visitroute('login');

可以使用back和forward方法“后退”和“前进”导航：

$browser->back();
$browser->forward();

我们可以使用refresh方法刷新页面：

$browser->refresh();

速记选择器

页面的 elements 方法允许我们为页面的 css 选择器定义快速的、易记的快捷方式，例如，让我们为应用登录页面的“email”输入定义一个快捷方式：

/**
 * get the element shortcuts for the page.
 *
 * @return array
 */
public function elements()
{
    return [
        '@email' => 'input[name=email]',
    ];
}

现在，我们可以在任意你想要试用完整css选择器的地方使用速记选择器：

$browser->type('@email', 'jiyik@163.com');

全局速记选择器

安装完 dusk 后，一个基本的 page 类会生成到 tests/browser/pages 目录下。该类包含一个可用于定义全局速记选择器的 siteelement 方法，所谓全局速记选择器，指的是在整个应用中生效的速记选择器：

/**
 * get the global element shortcuts for the site.
 *
 * @return array
 */
public static function siteelements()
{
    return [
        '@element' => '#selector',
    ];
}

页面方法

除了页面定义的默认方法外，你还可以定义额外的方法用于测试。例如，假设我们正在构建一个音乐管理应用，应用页面常用的功能就是创建一个播放列表，我们不必在每次测试的时候重复编写创建播放列表的逻辑，只需在页面类中定义一个 createplaylist 方法即可：

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

如上所示，「日期选择器」是一个可以在整个应用的不同页面有效的示例组件。手动编写浏览器自动测试逻辑在测试套件的各个测试中选择日期会显得很笨拙，所以，我们可以定义一个 dusk 组件来表示这个日期选择器，从而方面我们在单个可复用组件中实现相应业务逻辑：

assertvisible($this->selector());
    }
    /**
     * get the element shortcuts for the component.
     *
     * @return array
     */
    public function elements()
    {
        return [
            '@date-field' => 'input.datepicker-input',
            '@month-list' => 'div > div.datepicker-months',
            '@day-list' => 'div > div.datepicker-days',
        ];
    }
    /**
     * select the given date.
     *
     * @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);
                });
    }
}

使用组件

定义好组件后，就可以在任何测试中通过日期选择器轻松选择日期，使用组件还有一个好处就是，如果选择日期的必要逻辑有改动，只需更新这个组件即可：

browse(function (browser $browser) {
            $browser->visit('/')
                    ->within(new datepicker, function ($browser) {
                        $browser->selectdate(1, 2018);
                    })
                    ->assertsee('january');
        });
    }
}

持续集成

注：添加持续集成配置文件之前，确保 .env.testing 文件包含值为 的 app_url 配置项。

circleci

如果你想通过 circleci 运行 dusk 测试，可以使用这个配置文件作为起点，和 travis ci 一样，我们使用 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: 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
                - store_artifacts:
                    path: tests/browser/screenshots

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 测试，可以使用下面这个配置文件作为起点。和 travis ci 类似，我们使用 php artisan serve 命令来启动 php 内置的 web 服务器：

name: ci
on: [push]
jobs:
  dusk-php:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: prepare the environment
        run: cp .env.example .env
      - name: install composer dependencies
        run: composer install --no-progress --no-suggest --prefer-dist --optimize-autoloader
      - name: generate application key
        run: php artisan key:generate
      - name: upgrade chrome driver
        run: php artisan dusk:chrome-driver
      - name: start chrome driver
        run: ./vendor/laravel/dusk/bin/chromedriver-linux > /dev/null 2>&1 &
      - name: run laravel server
        run: php artisan serve > /dev/null 2>&1 &
      - name: run dusk tests
        run: php artisan dusk