Browsertests (Dusk)

Wat is Laravel Dusk?

Laravel Dusk is een E2E-testtool die een echte browser bestuurt om je volledige schermen te verifiëren.
Standaard kun je tests uitvoeren met ChromeDriver zonder apart een Selenium-server op te zetten.

De officiële documentatie beveelt voor nieuwe projecten ook de browsertests van Pest 4 aan. Gebruik deze pagina als je Dusk in een bestaand project gebruikt of de Dusk-API wilt gebruiken.

Installatie

Installeer eerst Google Chrome en voeg Dusk toe als development-afhankelijkheid.

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

Wil je de ChromeDriver-versie aanpassen, gebruik dan het commando dusk:chrome-driver.

# Detecteer en installeer de versie die past bij je lokale Chrome
php artisan dusk:chrome-driver --detect

Omgevingsconfiguratie (`.env.dusk.local`)

Om Dusk-specifieke omgevingsvariabelen te gebruiken, maak je in de projectroot een .env.dusk.{environment} aan.
Voor een lokale omgeving gebruik je .env.dusk.local.

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

Tijdens het uitvoeren van Dusk wordt .env geback-upt en wordt de inhoud van .env.dusk.local tijdelijk toegepast.

Basis-browsertests

Genereer een test en voer hem uit met php artisan dusk.

php artisan dusk:make LoginTest
php artisan dusk

Om alleen de gefaalde tests opnieuw uit te voeren:

php artisan dusk:fails

Voorbeeld van basisbewerkingen

<?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' => '[email protected]',
        ]);

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

visit(), type(), press() en assertSee() zijn de meest gebruikte bewerkingen in Dusk.

In Dusk-tests gebruik je geen RefreshDatabase. Gebruik, zoals in de officiële documentatie staat, DatabaseMigrations of DatabaseTruncation om de data tussen tests te initialiseren.

Het page-objectpatroon

Bij het testen van complexe schermen wordt je code beter onderhoudbaar als je met dusk:page page objects maakt.

php artisan dusk:page Login

In tests/Browser/Pages/Login.php definieer je url() en elements(), die je vervolgens in je tests hergebruikt.

use Tests\Browser\Pages\Login;

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

Screenshots en debuggen

Bij het onderzoeken van fouten is het opslaan van screenshots en consolelogs effectief.

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

Screenshots: tests/Browser/screenshots
Consolelogs: tests/Browser/console

Uitvoeren in CI (GitHub Actions)

In GitHub Actions start je ChromeDriver en de ingebouwde server van Laravel voordat je php artisan dusk uitvoert.

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

De uitvoeringsflow van Dusk

Officiële documentatie

Laravel Dusk — officiële documentatie

De volledige Dusk-API (wachten, assertions, toetsenbordacties, iframe-bewerkingen, enz.) vind je in de officiële documentatie.

Architectuur

Database

Eloquent

Beveiliging

Events

E-mail en notificaties

Betalingen

Asynchrone verwerking

Realtime communicatie

Taakplanning

Caching en optimalisatie

Internationalisatie

Bestanden en opslag

Debugging en monitoring

Console en CLI

Performance

Frontend

AI-ontwikkeling

Ontwikkelomgeving

Wat is Laravel Dusk?

Installatie

Omgevingsconfiguratie (`.env.dusk.local`)

Basis-browsertests

Voorbeeld van basisbewerkingen

Het page-objectpatroon

Screenshots en debuggen

Uitvoeren in CI (GitHub Actions)

De uitvoeringsflow van Dusk

Officiële documentatie

Laravel Dusk — officiële documentatie

​Wat is Laravel Dusk?

​Installatie

​Omgevingsconfiguratie (.env.dusk.local)

​Basis-browsertests

​Voorbeeld van basisbewerkingen

​Het page-objectpatroon

​Screenshots en debuggen

​Uitvoeren in CI (GitHub Actions)

​De uitvoeringsflow van Dusk

​Officiële documentatie

Laravel Dusk — officiële documentatie

Wat is Laravel Dusk?

Installatie

Omgevingsconfiguratie (`.env.dusk.local`)

Basis-browsertests

Voorbeeld van basisbewerkingen

Het page-objectpatroon

Screenshots en debuggen

Uitvoeren in CI (GitHub Actions)

De uitvoeringsflow van Dusk

Officiële documentatie