当你使用一个 Laravel 5.4 开始你的应用程序时,Laravel Dusk 给我们带来一个在浏览器测试的API,它给我们一个内置的 ChromeDriver , 当然别的浏览器要使用的话,可以使用 Selenium 。】当你的环境支持 Laravel 5.4 时,第一步是安装一个 demo ,我们使用composer安装Laravel
composer create-project --prefer-dist laravel/laravel demo
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
中,以方便大家可以更加准确的查找错误。
测试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
创建这个测试用例的过程。
登录
找到 链接 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
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中文网其他相关文章!