Laravel Dusk ブラウザテストの詳細な紹介がよりエレガントになりました

Laravel 5.4 を使用してアプリケーションを起動すると、Laravel Dusk はブラウザーでテストするための API を提供します。もちろん、他のブラウザーがそれを使用したい場合は、Selenium を使用できます。 】お使いの環境が Laravel 5.4 をサポートしている場合、最初のステップはデモをインストールすることです。Laravel をインストールするには、composer を使用します

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

Laravel Dusk

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(&#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 会把错误截图直接放到 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

方法 1

プロバイダ アレイ が登録されました、

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

このメソッドはLaravelにグローバルに登録されます。グローバルに登録したくない場合は、方法2を使用します。

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

🎜 🎜🎜接続してくださいそしてテストを開始します🎜

最初のテスト

🎜 まず、Laravel の認証メカニズムを完成させます。 🎜

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 &#39;/tasks/create&#39;;<br/>}<br/></p>

🎜注: ユーザーはログインする必要があります。テスト ユーザーを追加しました。 🎜

• 🎜テスト ユーザーを追加します🎜🎜 1. コマンドを実行して User テーブルを作成します🎜

  public function assert(Browser $browser){
      $browser->assertPathIs($this->url());
  }

  🎜 2. tinker テストデータを10個追加するコマンド🎜<pre class="brush:php;toolbar:false;">public function elements(){ return [ &amp;#39;@addTask&amp;#39; =&gt; &amp;#39;.btn-primary&amp;#39;, ]; }</pre>🎜 もちろん自分で登録することもできます。テストするには、ユーザー名とパスワードを知っている必要があります。 🎜🎜メールアドレス: 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');
          });
      }
  }

  🎜次にテストを開始します 🎜rrreee🎜 データベースに正しいデータがある場合、次の結果が返されます。 🎜

🎜🎜🎜Chrome のバージョンは 54 を超える必要があることに注意してください🎜🎜テストの失敗🎜🎜間違ったテスト ケースを意図的に変更することもでき、PHPUnit はエラー メッセージをスローします。まず、ログインパスワードを 1 に変更しましょう🎜rrreee🎜🎜🎜ユーザー名とパスワードが一致しません。したがって、エラーメッセージが表示されます。 Dusk はエラーのスクリーンショットを testsBrowserscreenshots に直接配置するため、誰もがより正確にエラーを見つけることができます。 🎜🎜🎜🎜テストAjax 呼び出し #🎜🎜Dusk もちろん、ajax 呼び出しもテストできます。 🎜完璧なテストケース、ajax テストデモが github にあります 🎜それをダウンロードして直接使用できます。 🎜🎜新しいテストケースを作成するプロセス、テストケースを作成します🎜🎜phpArtisan dusk:make CreateTaskTest🎜🎜🎜🎜次にテストケースを編集します🎜rrreee

• 🎜テストケース🎜🎜 1. タイトルを入力します 🎜 2. [タスクの追加] ボタンをクリックします 🎜 3. 5 秒間待ちます 🎜 4. その後、タスクページにリダイレクトします 🎜

🎜🎜🎜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="margin-bottom: 7px;">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 中国語 Web サイトの他の関連記事を参照してください。