Detailed introduction to Laravel Dusk browser testing is more elegant

When you start your application using Laravel 5.4, Laravel Dusk brings us an API for testing in the browser. It gives us a built-in ChromeDriver. Of course, if other browsers want to use it, you can use Selenium . 】When your environment supports Laravel 5.4, the first step is to install a demo. We use composer to install Laravel

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

Install Laravel Dusk

composer require laravel/dusk

in There are two methods to registerDuskServiceProviderin your Laravel application

Method 1

We can do it in theconfig/app.phpfileprovidersRegister in array,

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

This method will register globally in Laravel. If you don’t want to register globally, we use method 2 .

Method 2

RegisterAppServiceProviderin the installation environmentDuskServiceProvider

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

Next we installDUSK

php artisan dusk:install

Let’s start our test

First test

First we complete Laravel’s authentication mechanism.

php artisan make:auth

We create aDusktest

php artisan dusk:make LoginTest

The above command will be in## Create aLoginTestclass

browse(function ($browser) { $browser->visit('/') ->assertSee('Laravel'); }); }

• Add test user
  1. Execute the command to create the

  Usertable

  php artisan migrate

  Copy after login
  2.Use

  tinkerCommand to add 10 pieces of test data

  php artisan tinker factory(App\User::class, 10)->create();

  Copy after login
  Of course we can also register ourselves. For testing, you need to know the username and password.
  Email: moocfans@moocfans.cn

  Password: moocfans
  
  

  We add a verification in the

  LoginTestclassUser loginTest case for success and returning the welcome page.

  /** * 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!'); }); }

  Copy after login
  Next we start testing

  php artisan dusk

  Copy after login
  If your database has correct data, the following results will be returned.

PHPUnitthrows an error message to us. Let’s first change the login password to 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!'); }); }

Duskwill put error screenshots directly into\tests\Browser\screenshotsso that everyone can find errors more accurately.

There is a perfect test case, ajax test demo on github
We can download it and use it directly.

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

• Test case execution process
  1. Enter the title

  2. Click the "Add Task" button
  3. Wait for 5 seconds
  4. Then redirect to the task page
  

waitUntilMissingto executeDuskAPI

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

Create this test Use case process.

登录
找到 链接 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 目录中

我们来编辑这个类

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。现在让我们重新运行我们的测试，看看是否一切正常：
和上面测试一样，因此图我就用了同一个。

The above is the detailed content of Detailed introduction to Laravel Dusk browser testing is more elegant. For more information, please follow other related articles on the PHP Chinese website!