详细介绍Laravel Dusk浏览器测试更优雅-php教程-PHP中文网

详细介绍Laravel Dusk浏览器测试更优雅

黄舟

发布： 2017-03-21 09:32:29

原创

2046人浏览过

当你使用一个 laravel 5.4 开始你的应用程序时，laravel dusk 给我们带来一个在浏览器测试的api，它给我们一个内置的 chromedriver ，当然别的浏览器要使用的话，可以使用 selenium 。】当你的环境支持 laravel 5.4 时，第一步是安装一个 demo ，我们使用composer安装laravel

composer create-project --prefer-dist laravel/laravel demo

登录后复制

安装 Laravel Dusk

composer require laravel/dusk

登录后复制

这里写图片描述

在你的 Laravel 应用中注册 DuskServiceProvider，有两个方法

方法一

我们可以在 config/app.php文件中 providers数组中注册，

App\Providers\RouteServiceProvider::class,Laravel\Dusk\DuskServiceProvider::class,

登录后复制

这里写图片描述

这种方法会在 Laravel 中全局注册，如果不想要全局注册我们使用方法二。

方法二

在安装环境中的 AppServiceProvider 注册 DuskServiceProvider

namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Laravel\Dusk\DuskServiceProvider;
class AppServiceProvider extends ServiceProvider{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        if ($this->app->environment('local', 'testing', 'staging')) {           
        $this->app->register(DuskServiceProvider::class);
        }
    }
}

登录后复制

接下来我们安装 DUSK#

php artisan dusk:install

登录后复制

这里写图片描述

接下来开始我们的测试

第一个测试

首先我们完成Laravel的认证机制。

php artisan make:auth

登录后复制

这里写图片描述

我们创建一个 Dusk 测试

php artisan dusk:make LoginTest

登录后复制

这里写图片描述

上面这个命令会在 tests\Browser 目录下创建一个 LoginTest 类
这里写图片描述

<?php
namespace Tests\Browser;
use Tests\DuskTestCase;
use Illuminate\Foundation\Testing\DatabaseMigrations;
class LoginTest extends DuskTestCase{
    /**
     * A Dusk test example.
     *
     * @return void
     */
    public function testExample()
    {
        $this->browse(function ($browser) {
            $browser->visit('/')
                    ->assertSee('Laravel');
        });
    }

登录后复制

注意：登录的话需要用户，我们已经添加了测试用户。

添加测试用户

1.执行命令创建 User 表
```
php artisan migrate
```
登录后复制
2.使用 tinker 命令添加10条测试数据
```
php artisan tinker
factory(App\User::class, 10)->create();
```
登录后复制
当然我们自然也可以自己注册。测试的话需要知道用户名和密码。

邮箱： moocfans@moocfans.cn
密码： moocfans

我们在 LoginTest 类中添加一个验证用户登录成功并返回欢迎页的测试用例。
```
    /**
 * A Dusk test example.
 *
 * @return void
 */
public function test_I_can_login_successfully()
{
    $this->browse(function ($browser) {
        $browser->visit('/login')
                ->type('email', 'moocfans@moocfans.cn')
                ->type('password', 'moocfans')
                ->press('Login')
                ->assertSee('You are logged in!');
    });
}
```
登录后复制
接下来我们开始测试
```
php artisan dusk
```
登录后复制
如果你的数据库有正确的数据，则会返回下面的结果。

这里写图片描述

注意 chrome版本需>54

失败的测试

我们可以刻意的修改一个错误的测试用例， PHPUnit 给我们抛出的错误提示。我们先把登录密码改成 1

public function test_I_can_login_successfully()
    {
        $this->browse(function ($browser) {
            $browser->visit('/login')
                    ->type('email', 'moocfans@moocfans.cn')
                    ->type('password', '1')
                    ->press('Login')
                    ->assertSee('You are logged in!');
        });
    }

登录后复制

这里写图片描述

用户名和密码不匹配。所以有错误提示。Dusk 会把错误截图直接放到 \tests\Browser\screenshots 中，以方便大家可以更加准确的查找错误。

白瓜面试

白瓜面试 - AI面试助手,辅助笔试面试神器

查看详情

这里写图片描述

测试Ajax调用#

Dusk 当然也可以测试ajax调用。
有一个完美的测试用例，在github上 ajax测试demo
我们下载下来直接可以用。

创建一个新的测试用例的过程，创建测试用例

php artisan dusk:make CreateTaskTest

这里写图片描述

然后编辑测试用例

  class CreateTaskTest extends DuskTestCase{    /**
     * A Dusk test example.
     *
     * @return void
     */
    public function test_I_can_create_task_successfully()
    {
        $this->browse(function ($browser) {

            $browser->visit('/tasks/create')
                    ->type('title', 'My Task')
                    ->press('Add Task')
                    ->pause(5000)
                    ->assertPathIs('/tasks');
        });
    }
}

登录后复制

测试用例的执行过程

1.输入标题
2.单击“添加任务”按钮
3.等待5秒
4.然后重定向到任务页

这里写图片描述

我们也可以使用 waitUntilMissing 来执行 Dusk 的 API

<?phpnamespace Tests\Browser;
use Tests\DuskTestCase;
use Illuminate\Foundation\Testing\DatabaseMigrations;
class CreateTaskTest extends DuskTestCase{
    /**
     * A Dusk test example.
     *
     * @return void
     */
    public function test_I_can_create_task_successfully()
    {
        $this->browse(function ($browser) {

            $browser->visit('/tasks/create')
                    ->type('title', 'My Task')
                    ->press('Add Task')
                    ->waitUntilMissing('.btn-primary')
                    ->assertPathIs('/tasks');
        });
    }
}

登录后复制

更多的API请查看 Laravel 5.4 文档

在看另外一个例子#

模式对话框绑定你的登录EMail
创建这个测试用例的过程。

php artisan dusk:make SupportEmailsTest

登录后复制

编辑测试用例

class SupportEmailsTest extends DuskTestCase{
    /**
     * A Dusk test example.
     *
     * @return void
     */
    public function test_I_can_open_modal_for_support_emails()
    {
        $this->browse(function ($browser) {

            $user = factory(User::class)->create();

            $browser->loginAs($user)
                    ->visit('/tasks')
                    ->clickLink('Support Email')
                    ->whenAvailable('#modal-support', function ($modal) use($user) {
                        $modal->assertInputValue('#support-from', $user->email);
                    });
        });
    }
}

登录后复制

我们来执行这个测试用例

php artisan dusk tests/Browser/SupportEmailsTest.php

登录后复制

这里写图片描述

页面

Dusk 的 Pages 是功能强大的可重用的测试类。
让我们使用 createtasktest 创建页面重构。

php artisan dusk:page CreateTaskPage

登录后复制

创建的页面会存放在 tests/Browser/Pages 目录中

我们来编辑这个类

<p style="margin-bottom: 7px;">public function url(){<br/>    return '/tasks/create';<br/>}<br/></p>

登录后复制

url 可以导航 Dusk 执行的地址。

public function assert(Browser $browser){
    $browser->assertPathIs($this->url());
}

登录后复制

assert 定义页面的 assertions，当使用 CreateTaskPage 时，这些 assertions 将会使用 assert 方法执行。
在上面的例子中，我们只是明确 Url 是正确的。

public function elements(){
    return [        '@addTask' => '.btn-primary',
    ];
}

登录后复制

elements 方法可以定义选择器。我们可以定义程序可读的名称选择器和重用他们的网页在不同的测试案例。在上面的示例中，我定义了添加任务按钮的选择器。
现在让我们修改 createtasktest 类并使用选择器：

class CreateTaskTest extends DuskTestCase{    /**
     * A Dusk test example.
     *
     * @return void
     */
    public function test_I_can_create_task_successfully()
    {
        $this->browse(function ($browser) {

            $user = factory(User::class)->create();

            $browser->loginAs($user)
                    ->visit(new CreateTaskPage)
                    ->type('title', 'My Task')
                    ->click('@addTask')
                    ->waitUntilMissing('@addTask')
                    ->assertPathIs('/tasks');
        });
    }
}

登录后复制

我们修改看了 createtaskpage。现在让我们重新运行我们的测试，看看是否一切正常：
和上面测试一样，因此图我就用了同一个。
这里写图片描述

以上就是详细介绍Laravel Dusk浏览器测试更优雅的详细内容，更多请关注php中文网其它相关文章！