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 register DuskServiceProvider in your Laravel application

Method 1

We can do it in the config/app.php fileprovidersRegister 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

Register AppServiceProvider in 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 a Dusk test

php artisan dusk:make LoginTest

The above command will be in## Create a LoginTest class

<?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(&#39;/&#39;)
                    ->assertSee(&#39;Laravel&#39;);
        });
    }

in the #tests\Browser

directory. Note: A user is required to log in. We have added a test user.

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

  User table

  php artisan migrate

  2.Use

  tinker Command to add 10 pieces of test data

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

  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

  LoginTest classUser login Test 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!');
      });
  }

  Next we start testing

  php artisan dusk

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

Note that the chrome version needs to be >54

Failed test

We can deliberately modify an error The test case,

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

The username and password do not match. So there is an error message.

Dusk will put error screenshots directly into \tests\Browser\screenshots so that everyone can find errors more accurately.

Testing Ajax calls

#Dusk Of course, you can also test ajax calls.

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

The process of creating a new test case, create a test case

php artisan dusk:make CreateTaskTest

Then edit the test case

  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
  

We can also use

waitUntilMissing to execute 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(&#39;/tasks/create&#39;)
                    ->type(&#39;title&#39;, &#39;My Task&#39;)
                    ->press(&#39;Add Task&#39;)
                    ->waitUntilMissing(&#39;.btn-primary&#39;)
                    ->assertPathIs(&#39;/tasks&#39;);
        });
    }
}

For more APIs, please check out the Laravel 5.4 documentation

Looking at another example

#Modal dialog box binds your login EMail

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 目录中

我们来编辑这个类

<p   style="max-width:90%">public function url(){<br/>    return &#39;/tasks/create&#39;;<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。现在让我们重新运行我们的测试，看看是否一切正常：
和上面测试一样，因此图我就用了同一个。

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!