L'introduction détaillée aux tests du navigateur Laravel Dusk est plus élégante

Lorsque vous démarrez votre application avec Laravel 5.4, Laravel Dusk nous apporte une API pour tester dans le navigateur. Elle nous donne un ChromeDriver intégré. Bien sûr, si vous souhaitez l'utiliser avec d'autres navigateurs, vous pouvez utiliser Selenium. . 】Lorsque votre environnement prend en charge Laravel 5.4, la première étape consiste à installer une démo Nous utilisons composer pour installer Laravel

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

Installer Laravel Dusk

composer require laravel/dusk

.

Inscrivez-vousDuskServiceProvider dans votre application Laravel, il y a deux méthodes

Méthode 1

On peut config/app.phpproviderstableau dans le fichier S'inscrire dans Laravel,

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

Cette méthode s'enregistrera globalement dans Laravel Si vous ne souhaitez pas vous inscrire globalement, nous utilisons la méthode 2.

Méthode 2

Enregistrez AppServiceProvider dans l'environnement d'installationDuskServiceProvider

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

Ensuite, nous installons DUSK#

php artisan dusk:install

Commençons notre test

Le premier test

Nous complétons d'abord le mécanisme d'authentification de Laravel.

php artisan make:auth

Nous créons un Dusk test

php artisan dusk:make LoginTest

La commande ci-dessus sera dans testsBrowser Créez une classe LoginTest dans l'annuaire

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

Remarque : Un utilisateur est nécessaire pour se connecter. Nous avons ajouté un utilisateur test.

• Ajouter un utilisateur test

  1. Exécutez la commande pour créer la table User

  php artisan migrate

  2. Utilisez la commande tinker. pour ajouter 10 tests Data

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

  Bien sûr, nous pouvons également nous inscrire nous-mêmes. Pour tester, vous devez connaître le nom d'utilisateur et le mot de passe.

  Email : moocfans@moocfans.cn
  Mot de passe : moocfans
  

  Nous ajoutons une vérification dans la classe LoginTest Connexion utilisateur réussie Et renvoyez le cas de test de la page d'accueil.

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

  Ensuite, nous commençons les tests

  php artisan dusk

  Si votre base de données contient des données correctes, les résultats suivants seront renvoyés.

Notez que la version Chrome doit être >54

Échec du test

Nous pouvons délibérément modifier un error Le scénario de test, PHPUnit nous donne le message d'erreur renvoyé. Modifions d'abord le mot de passe de connexion en 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!');
        });
    }

Le nom d'utilisateur et le mot de passe ne correspondent pas. Il y a donc un message d'erreur. Dusk mettra la capture d'écran de l'erreur directement dans testsBrowserscreenshots afin que tout le monde puisse trouver l'erreur avec plus de précision.

Test des appels Ajax #

Dusk Bien sûr, vous pouvez également tester les appels ajax.
Il existe un cas de test parfait, une démo de test ajax sur github
Nous pouvons le télécharger et l'utiliser directement.

Le processus de création d'un nouveau scénario de test, créez un scénario de test

php artisan dusk:make CreateTaskTest

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

• Processus d'exécution du cas de test

  1 Entrez le titre
  2 Cliquez sur le bouton "Ajouter une tâche"
  3. 5 secondes
  4. Puis redirigez vers la page des tâches

Nous pouvons également utiliser waitUntilMissing pour exécuter l'API de 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(&#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;);
        });
    }
}

Pour plus d'API, veuillez consulter la documentation de Laravel 5.4

Regardez un autre exemple #

Lier une boîte de dialogue modale à votre EMail de connexion
Le processus de créer ce cas de test.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!