Laravel 5.4 を使用してアプリケーションを起動すると、Laravel Dusk はブラウザーでテストするための API を提供します。もちろん、他のブラウザーがそれを使用したい場合は、Selenium を使用できます。 】お使いの環境が Laravel 5.4 をサポートしている場合、最初のステップはデモをインストールすることです。Laravel をインストールするには、composer を使用します
composer create-project --prefer-dist laravel/laravel demo
composer require laravel/dusk
をインストールします。Laravel アプリケーションに DuskServiceProvider を登録します。は 2 つの方法です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
上面这个命令会在 testsBrowser 目录下创建一个 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 会把错误截图直接放到 testsBrowserscreenshots 中，以方便大家可以更加准确的查找错误。
测试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
プロバイダ アレイ が登録されました、 <?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');
});
}
}
このメソッドはLaravelにグローバルに登録されます。グローバルに登録したくない場合は、方法2を使用します。 AppServiceProvider に DuskServiceProvider を登録しますphp artisan dusk:make SupportEmailsTest
DUSK# をインストールします🎜 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 テストを作成しましょう 🎜php artisan dusk:page CreateTaskPage
を書き込みます🎜🎜上記のコマンドは、testsBrowser ディレクトリに LoginTest クラスを作成します🎜
🎜<p style="max-width:90%">public function url(){<br/> return '/tasks/create';<br/>}<br/></p>User テーブルを作成します🎜public function assert(Browser $browser){
$browser->assertPathIs($this->url());
}tinker< を使用します。 /code> テストデータを10個追加するコマンド🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">public function elements(){
return [ &#39;@addTask&#39; => &#39;.btn-primary&#39;,
];
}</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>🎜 もちろん自分で登録することもできます。テストするには、ユーザー名とパスワードを知っている必要があります。 🎜🎜メールアドレス: moocfans@moocfans.cn 🎜パスワード: moocfans 🎜<img src="https://img.php.cn/upload/article/000/000/194/60e715df41b0bc7b37ecef7d08b626bf-6.png" alt="Laravel Dusk ブラウザテストの詳細な紹介がよりエレガントになりました" title=""/>🎜🎜<code>LoginTest クラス ユーザー ログインが成功し、ようこそページのテスト ケースに戻ります。 🎜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');
});
}
}🎜🎜Chrome のバージョンは 54 を超える必要があることに注意してください🎜🎜テストの失敗🎜🎜間違ったテスト ケースを意図的に変更することもでき、PHPUnit はエラー メッセージをスローします。まず、ログインパスワードを 1 に変更しましょう🎜rrreee🎜🎜🎜ユーザー名とパスワードが一致しません。したがって、エラーメッセージが表示されます。 Dusk はエラーのスクリーンショットを testsBrowserscreenshots に直接配置するため、誰もがより正確にエラーを見つけることができます。 🎜🎜🎜🎜テストAjax 呼び出し #🎜🎜Dusk もちろん、ajax 呼び出しもテストできます。 🎜完璧なテストケース、ajax テストデモが github にあります 🎜それをダウンロードして直接使用できます。 🎜🎜新しいテストケースを作成するプロセス、テストケースを作成します🎜🎜phpArtisan dusk:make CreateTaskTest🎜🎜
🎜🎜次にテストケースを編集します🎜rrreee
🎜🎜waitUntilMissing を使用することもできます は、Dusk の API を実行します 🎜rrreee🎜その他の API については、Laravel 5.4 ドキュメントを確認してください 🎜🎜別の例を参照してください #🎜🎜モーダル ダイアログ ボックスがログイン電子メールをバインドします 🎜のプロセスこのテストケースを作成しています。 🎜登录
找到 链接 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="max-width:90%">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 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
