Eine ausführliche Einführung in das Testen des Laravel Dusk-Browsers ist eleganter

Wenn Sie Ihre Anwendung mit Laravel 5.4 starten, stellt uns Laravel Dusk eine API zum Testen im Browser zur Verfügung. Wenn Sie sie natürlich mit anderen Browsern verwenden möchten, können Sie Selenium verwenden . 】Wenn Ihre Umgebung Laravel 5.4 unterstützt, besteht der erste Schritt darin, eine Demo zu installieren. Wir verwenden Composer, um Laravel zu installieren

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

Installieren Sie Laravel Dusk

composer require laravel/dusk

RegistrierenDuskServiceProvider In Ihrer Laravel-Anwendung gibt es zwei Methoden

Methode 1

Wir können config/app.phpprovidersArray in der -Datei registrieren Laravel,

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

Diese Methode wird global in Laravel registriert. Wenn Sie sich nicht global registrieren möchten, verwenden wir Methode 2.

Methode 2

Registrieren AppServiceProvider in der InstallationsumgebungDuskServiceProvider

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

Als nächstes installieren wir DUSK#

php artisan dusk:install

Lasst uns unseren Test starten

Der erste Test

Zuerst vervollständigen wir den Authentifizierungsmechanismus von Laravel.

php artisan make:auth

Wir erstellen einen Dusk Test

php artisan dusk:make LoginTest

Der obige Befehl befindet sich in testsBrowser Erstellen Sie eine LoginTest Klasse im Verzeichnis

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

Hinweis: Für die Anmeldung ist ein Benutzer erforderlich. Wir haben einen Testbenutzer hinzugefügt.

• Testbenutzer hinzufügen

  1 Führen Sie den Befehl aus, um die User-Tabelle zu erstellen

  php artisan migrate

  2 um 10 Tests hinzuzufügen Datentinker

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

  Selbstverständlich können wir uns auch selbst registrieren. Zum Testen müssen Sie den Benutzernamen und das Passwort kennen.
  E-Mail: moocfans@moocfans.cn

  Passwort: moocfans
  
  

  Wir fügen eine Verifizierung in der Klasse

  LoginTestBenutzeranmeldung erfolgreich hinzu Und geben Sie den Testfall der Begrüßungsseite zurück.

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

  Als nächstes beginnen wir mit dem Testen

  php artisan dusk

  Wenn Ihre Datenbank korrekte Daten enthält, werden die folgenden Ergebnisse zurückgegeben.

Beachten Sie, dass die Chrome-Version >54 erfordert

Test fehlgeschlagen

Wir können einen Fehler absichtlich ändern Testfall,

gibt uns die ausgegebene Fehlermeldung. Ändern wir zunächst das Login-Passwort auf 1PHPUnit

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

Benutzername und Passwort stimmen nicht überein. Es kommt also eine Fehlermeldung.

fügt den Fehler-Screenshot direkt in Dusk ein, damit jeder den Fehler genauer finden kann. testsBrowserscreenshots

Ajax-Aufrufe testen #

Dusk Natürlich können Sie auch Ajax-Aufrufe testen.

Es gibt einen perfekten Testfall, eine Ajax-Testdemo auf Github.
Wir können ihn herunterladen und direkt verwenden.

Der Prozess zum Erstellen eines neuen Testfalls, Erstellen eines Testfalls

php artisan dusk:make CreateTaskTest

Bearbeiten Sie dann den Test Fall

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

• Testfallausführungsprozess
  1. Geben Sie den Titel ein

  Klicken Sie auf die Schaltfläche „Aufgabe hinzufügen“
  3 5 Sekunden
  4. Dann zur Aufgabenseite weiterleiten
  

Wir können auch

verwenden, um waitUntilMissings API auszuführenDusk

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

Weitere APIs finden Sie in der Laravel 5.4-Dokumentation

Sehen Sie sich ein weiteres Beispiel an #

Binden eines modalen Dialogfelds an Ihre Anmelde-E-Mail

Der Prozess diesen Testfall zu erstellen.

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

Das obige ist der detaillierte Inhalt vonEine ausführliche Einführung in das Testen des Laravel Dusk-Browsers ist eleganter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!