詳細介紹Laravel Dusk瀏覽器測試更優雅

當你使用一個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 類別

#

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

注意：登入的話需要用戶，我們已經新增了測試用戶。

• 新增測試使用者

  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(&#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;);
        });
    }
}

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

以上是詳細介紹Laravel Dusk瀏覽器測試更優雅的詳細內容。更多資訊請關注PHP中文網其他相關文章！