Browser-Tests (Dusk)

Wie Sie mit Laravel Dusk End-to-End-Browsertests auf Basis von ChromeDriver ausführen

​

Was ist Laravel Dusk

Laravel Dusk ist ein E2E-Testwerkzeug, das den Browser tatsächlich steuert und den gesamten Bildschirm prüft.
Standardmäßig können Sie Tests ohne separaten Selenium-Server direkt mit ChromeDriver ausführen.

Die offizielle Dokumentation empfiehlt für neue Projekte auch die Browser-Tests von Pest 4. Diese Seite ist hilfreich, wenn Sie in bestehenden Projekten Dusk nutzen oder gezielt die Dusk-API verwenden möchten.

​

Installation

Installieren Sie zuerst Google Chrome und dann Dusk als Dev-Abhängigkeit.

composer require laravel/dusk --dev
php artisan dusk:install

Zum Anpassen der ChromeDriver-Version:

# Passende Version zum lokalen Chrome ermitteln und installieren
php artisan dusk:chrome-driver --detect

​

Umgebung (.env.dusk.local)

Für Dusk-spezifische Umgebungsvariablen legen Sie im Projekt-Root eine .env.dusk.{environment} an.
Lokal also .env.dusk.local.

APP_URL=http://127.0.0.1:8000
DB_CONNECTION=mysql
DB_DATABASE=app_testing
DB_USERNAME=root
DB_PASSWORD=root

Während des Dusk-Laufs wird .env gesichert und der Inhalt der .env.dusk.local temporär angewendet.

​

Einfacher Browser-Test

Test erzeugen und mit php artisan dusk starten.

php artisan dusk:make LoginTest
php artisan dusk

Nur fehlgeschlagene Tests wiederholen:

php artisan dusk:fails

​

Beispiel

<?php

namespace Tests\Browser;

use App\Models\User;
use Laravel\Dusk\Browser;
use Tests\DuskTestCase;

class LoginTest extends DuskTestCase
{
    public function test_user_can_login(): void
    {
        $user = User::factory()->create([
            'email' => '[e-mail]',
        ]);

        $this->browse(function (Browser $browser) use ($user) {
            $browser->visit('/login')
                ->type('email', $user->email)
                ->type('password', 'password')
                ->press('Login')
                ->assertPathIs('/dashboard')
                ->assertSee('Dashboard');
        });
    }
}

Die häufigsten Aktionen: visit(), type(), press(), assertSee().

In Dusk-Tests verwendet man nicht RefreshDatabase. Verwenden Sie wie in der offiziellen Doku beschrieben DatabaseMigrations oder DatabaseTruncation, um Daten zwischen Tests zurückzusetzen.

​

Page-Object-Muster

Für komplexe Seiten erleichtert dusk:page das Wartungsprofil.

php artisan dusk:page Login

In tests/Browser/Pages/Login.php definieren Sie url() und elements(), die Sie in Tests wiederverwenden.

use Tests\Browser\Pages\Login;

$browser->visit(new Login)
    ->type('@email', '[e-mail]')
    ->type('@password', 'password')
    ->click('@submit')
    ->assertSee('Dashboard');

​

Screenshots und Debugging

Für die Fehlersuche sind Screenshots und Konsolen-Logs wertvoll.

$browser->screenshot('login-failed');
$browser->responsiveScreenshots('login-page');
$browser->screenshotElement('#login-form', 'login-form');
$browser->storeConsoleLog('login-console');

• Screenshots: tests/Browser/screenshots
• Konsolen-Logs: tests/Browser/console

​

Ausführung in CI (GitHub Actions)

Starten Sie in GitHub Actions ChromeDriver und den Laravel-Server, dann php artisan dusk.

name: Dusk tests

on: [push, pull_request]

jobs:
  dusk:
    runs-on: ubuntu-latest
    env:
      APP_URL: http://127.0.0.1:8000
      DB_USERNAME: root
      DB_PASSWORD: root
      MAIL_MAILER: log
    steps:
      - uses: actions/checkout@v5
      - run: cp .env.example .env
      - run: composer install --no-progress --prefer-dist --optimize-autoloader
      - run: php artisan key:generate
      - run: php artisan dusk:chrome-driver --detect
      - run: ./vendor/laravel/dusk/bin/chromedriver-linux --port=9515 &
      - run: php artisan serve --no-reload &
      - run: php artisan dusk

​

Dusk-Ausführungsablauf

​

Offizielle Dokumentation

Laravel Dusk — Offizielle Doku

Details zu allen APIs (Warten, Assertions, Tastatur, iframes u. a.) finden Sie in der offiziellen Dokumentation.