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

黄舟
发布: 2023-03-06 19:38:02
原创
1815 人浏览过

当你使用一个 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
这里写图片描述

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中,以方便大家可以更加准确的查找错误。

这里写图片描述

测试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

browse(function ($browser) { $browser->visit('/tasks/create') ->type('title', 'My Task') ->press('Add Task') ->waitUntilMissing('.btn-primary') ->assertPathIs('/tasks'); }); } }
登录后复制

更多的API请查看 Laravel 5.4 文档

在看另外一个例子#

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

登录
找到 链接 Support Email
单击 Support Email
看到你绑定的EMail
根据上面的过程,我们创建测试用例
首先,先创建一个名为SupportEmailsTest测试用例

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
登录后复制

这里写图片描述

页面

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

php artisan dusk:page CreateTaskPage
登录后复制

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

我们来编辑这个类

public function url(){
return '/tasks/create';
}

登录后复制

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!