Aller au contenu
PROJET WEB DYNAMIQUE

Laravel Dusk

Laravel Dusk

Introduction à Laravel Dusk

Qu'est-ce que Laravel Dusk ?

Laravel Dusk est un outil de test automatisé pour les interfaces utilisateurs, spécialement conçu pour les applications Laravel. Il permet de simuler les interactions des utilisateurs avec une application web dans un navigateur réel, en utilisant ChromeDriver pour manipuler les éléments du navigateur. Cette approche assure que les tests reflètent fidèlement les actions des utilisateurs.

Avantages de l'utilisation de Laravel Dusk

L'utilisation de Laravel Dusk présente plusieurs bénéfices clés pour le développement d'applications web :

  • Tests automatisés de bout en bout : Dusk facilite l'automatisation des interactions utilisateurs, telles que cliquer sur des liens ou remplir des formulaires.
  • Intégration fluide : Étant intégré dans l'écosystème Laravel, Dusk est particulièrement accessible pour ceux qui sont déjà familiers avec ce framework.
  • Débogage efficace : La fonctionnalité de capture d'écran de Dusk permet de détecter rapidement les erreurs.
  • Sécurité renforcée : En testant des scénarios d'interaction utilisateur réels, Dusk aide à identifier et corriger les vulnérabilités avant le déploiement.

Nous explorerons ensuite comment installer Laravel Dusk, configurer l'environnement de test et créer des tests pour garantir la qualité et la robustesse de vos applications w

Installation de Laravel Dusk

Prérequis

Avant d'installer Laravel Dusk, assurez-vous que votre environnement de développement répond aux exigences suivantes :

  • Laravel : Une installation existante de Laravel, de préférence la dernière version pour bénéficier de toutes les fonctionnalités et améliorations de sécurité.
  • Composer : Utilisé pour gérer les dépendances de Laravel, y compris l'installation de Dusk.
  • Navigateur Chrome : Nécessaire pour ChromeDriver, qui est utilisé par Dusk pour automatiser les tests dans un navigateur.

Étapes d'installation

Pour installer Laravel Dusk, suivez ces étapes simples :

  1. Ajout de Dusk à votre projet Laravel : Ouvrez votre terminal et exécutez la commande suivante à la racine de votre projet Laravel :

    composer require --dev laravel/dusk

    Cette commande installe Laravel Dusk comme une dépendance de développement.

  2. Configuration de Dusk : Après l'installation, exécutez la commande suivante pour publier les assets de Dusk et configurer votre projet :

    php artisan dusk:install

    Cette commande crée le répertoire tests/Browser où vous placerez vos tests de navigateur, et configure également quelques autres fichiers essentiels pour le fonctionnement de Dusk.

  3. Mise à jour des variables d'environnement : Assurez-vous de configurer l'environnement de test approprié dans votre fichier .env pour éviter toute interaction avec vos données de production lors de l'exécution des tests.

Avec Laravel Dusk correctement installé et configuré, vous êtes prêt à commencer à créer des tests automatisés pour votre application. La section suivante détaillera comment configurer votre premier test et utiliser efficacement Dusk pour améliorer la qualité de votre application.

Utilisation de Laravel Dusk

Configuration initiale

Avant de commencer à écrire des tests avec Laravel Dusk, il est essentiel de comprendre la structure de base et la configuration initiale :

  1. Dossier des tests : Les tests Dusk se trouvent dans le dossier tests/Browser. Chaque fichier de test doit étendre la classe BrowserTestCase, qui fournit diverses méthodes pour interagir avec le navigateur.

  2. Fichier DuskTestCase : Le fichier DuskTestCase.php dans le dossier tests est le point de départ de tous les tests Dusk. Il contient la configuration nécessaire pour démarrer et fermer le navigateur. Veillez à vérifier que le chemin du pilote ChromeDriver est correctement configuré ici.

Création de tests basiques

Pour créer un test simple avec Laravel Dusk, procédez comme suit :

  1. Création d'un nouveau test : Utilisez Artisan pour générer un nouveau test :

    php artisan dusk:make UnTest

    Cela créera un nouveau fichier de test dans tests/Browser nommé UnTest.php.

  2. Écriture d'un test : Ouvrez UnTest.php et ajoutez une fonction de test. Par exemple, pour tester si la page d'accueil de votre application charge correctement :

    it('displays the Laravel text on the home page', function () {
    $this->browse(function ($browser) {
        $browser->visit('/')
                ->assertSee('Laravel');
    });
});

    Cette fonction utilise le navigateur pour visiter la page d'accueil (/) et vérifie que le texte 'Laravel' est présent.

Exécution des tests

Pour exécuter vos tests Dusk, utilisez la commande suivante dans votre terminal :

php artisan dusk

Cette commande lancera tous les tests situés dans le dossier tests/Browser. Vous pouvez également spécifier un chemin vers un test spécifique si vous souhaitez exécuter un seul test.

En suivant ces étapes, vous pouvez configurer, écrire et exécuter des tests basiques avec Laravel Dusk. La section suivante abordera des fonctionnalités plus avancées pour maximiser l'efficacité de vos tests automatisés.

Fonctionnalités avancées de Laravel Dusk

Tests avec authentification

Laravel Dusk facilite le test des fonctionnalités qui nécessitent une authentification utilisateur. Voici comment vous pouvez tester les scénarios authentifiés :

  1. Authentification d'un utilisateur : Vous pouvez utiliser la méthode loginAs pour simuler l'authentification d'un utilisateur avant de réaliser des actions spécifiques :

    use App\Models\User;

it('allows authenticated user to see the dashboard', function () {
    $this->browse(function ($browser) {
        $user = User::find(1); // Assurez-vous que cet utilisateur existe dans votre base de données de test
        $browser->loginAs($user)
                ->visit('/dashboard')
                ->assertSee('Dashboard');
    });
});

Interaction avec JavaScript

Laravel Dusk est particulièrement utile pour tester des applications qui utilisent intensivement JavaScript. Voici comment interagir avec des éléments JS :

  1. Cliquer sur des éléments JavaScript : Par exemple, pour cliquer sur un bouton qui ouvre un modal via JavaScript :

    it('displays the correct content in the JavaScript modal', function () {
    $this->browse(function ($browser) {
        $browser->visit('/page-with-modal')
                ->click('#open-modal-button') // Assurez-vous que l'ID est correct
                ->waitForText('Modal Content')
                ->assertSee('Modal Content');
    });
});

Capture d'écran et débogage

Laravel Dusk permet de prendre des captures d'écran en cas d'échec des tests, ce qui est très utile pour le débogage :

  1. Prendre une capture d'écran : Vous pouvez configurer Dusk pour prendre une capture d'écran automatiquement lorsqu'un test échoue ou manuellement dans vos scripts de test :

    it('captures a screenshot and verifies non-existent content', function () {
    $this->browse(function ($browser) {
        $browser->visit('/some-page')
                ->screenshot('name-of-screenshot') // Sauvegarde la capture d'écran dans le dossier tests/Browser/screenshots
                ->assertSee('Some content that does not exist');
    });
});

En maîtrisant ces fonctionnalités avancées, vous pouvez étendre significativement la couverture de vos tests automatisés, assurant une plus grande stabilité et fiabilité de vos applications web. La conclusion suivante résumera les points clés abordés et fournira des ressources supplémentaires pour approfondir votre maîtrise de Laravel Dusk.

Configuration d’un environnement dédié à Dusk

Création d’un .env.dusk.local

Pour éviter de polluer votre environnement de développement standard (déjà suffisamment bancal, j’imagine), il est conseillé de créer un fichier .env.dusk.local. Celui-ci contiendra une configuration spécifique exclusivement réservée à vos tests Dusk. Par exemple :

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:0hDqTLQR7MnO4xtc7cFXeiTzZQ7PUj2eijGpU4cbYzA=
APP_DEBUG=true
APP_TIMEZONE=UTC
APP_URL=http://dusk.test

APP_LOCALE=en
APP_FALLBACK_LOCALE=en
APP_FAKER_LOCALE=en_US

APP_MAINTENANCE_DRIVER=file

PHP_CLI_SERVER_WORKERS=4

BCRYPT_ROUNDS=12

LOG_CHANNEL=stack
LOG_STACK=single
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

DB_CONNECTION=sqlite
DB_DATABASE="C:/laragon/www/dusk/database/test.sqlite"

SESSION_DRIVER=database
SESSION_LIFETIME=120
SESSION_ENCRYPT=false
SESSION_PATH=/
SESSION_DOMAIN=null

BROADCAST_CONNECTION=log
FILESYSTEM_DISK=local
QUEUE_CONNECTION=database

CACHE_STORE=database
CACHE_PREFIX=

MEMCACHED_HOST=127.0.0.1

REDIS_CLIENT=phpredis
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=log
MAIL_HOST=127.0.0.1
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="hello@example.com"
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false

VITE_APP_NAME="${APP_NAME}"

DUSK_HEADLESS_DISABLED=true

Points-clés :

  • URL dédiée : Ajustez APP_URL afin d’utiliser un hôte virtuel créé par Laragon, Laravel Herd ou un autre outil. Cela permettra à vos tests Dusk de s’exécuter proprement sur un environnement isolé, au lieu de polluer votre configuration principale.
  • Base de données SQLite dédiée : La ligne DB_DATABASE="C:/laragon/www/dusk/database/test.sqlite" est un exemple de configuration pour utiliser une base de données SQLite réservée aux tests. Créez manuellement ce fichier. Ainsi, vous n’aurez pas à exécuter vos migrations complètes à chaque test, ce qui accélère le processus.
  • DUSK_HEADLESS_DISABLED=true : Mettre cette variable à true permet de voir Chrome s’ouvrir pendant les tests. Parfait pour les âmes inquiètes qui ont besoin de constater visuellement le désastre qu’elles sont en train de commettre. Ajoutez des ->pause(1000) dans vos tests pour ralentir l’exécution et observer ce qu’il se passe.

Nettoyage de la base de données entre chaque test

Pour éviter que les données s’accumulent et donner l’illusion que vous savez garder un environnement propre, vous pouvez utiliser le DatabaseTruncation. Cela évite de devoir relancer toutes les migrations et les seeders entre chaque test, et donc de perdre un temps précieux à réimporter vos données.

Dans votre fichier tests/Pest.php, ajoutez :

pest()->extend(Tests\DuskTestCase::class)
    ->use(Illuminate\Foundation\Testing\DatabaseTruncation::class)
    // ->use(Illuminate\Foundation\Testing\DatabaseMigrations::class)
    ->in('Browser');

DatabaseTruncation va vider les tables entre chaque test, ce qui est beaucoup plus rapide qu’une migration complète.

Exemple de test avec pauses

Voici un exemple de test, parce qu’apparemment il vous faut tout sous le nez :

test('example', function () {
    $user = User::factory()->create();

    $this->browse(function (Browser $browser) use ($user) {
        $browser
            ->loginAs($user)
            ->visit('/profile')
            ->pause(1000) // On attend 1 seconde pour admirer le "chef-d’œuvre"
            ->assertSee('Profile Information');
    });
});

Maintenant, vous avez tout ce qu’il vous faut pour créer un environnement Dusk propre, dédié, et observer en direct les résultats de vos tests. Utilisez .env.dusk.local, configurez une base de données test, nettoyez-la entre chaque exécution, et réglez votre Chrome pour qu’il n’exécute pas vos tests en mode invisible, histoire que vous puissiez enfin voir de vos yeux vos échecs majestueux. Enjoy.

Gestion de ChromeDriver

  • Détection automatique de la version :

    php artisan dusk:chrome-driver --detect

    Cette commande tente de détecter la version de Chrome installée sur votre machine et télécharge la version correspondante de ChromeDriver. Parfait pour les rois de l’improvisation.

  • Installer la dernière version compatible :

    php artisan dusk:chrome-driver

    Sans argument, cette commande télécharge la version de ChromeDriver la plus adaptée à votre environnement.

  • Forcer l’installation d’une version spécifique :

    php artisan dusk:chrome-driver <version>

    Remplacez <version> par un numéro de version pour imposer vos choix rétrogrades (ex : 114).

  • Installer toutes les versions disponibles :

    php artisan dusk:chrome-driver --all

    Vous voulez tout télécharger, juste au cas où ? Soyez mon invité. C’est clairement excessif, mais bon, faites donc.

  • Aide et options supplémentaires :

    php artisan dusk:chrome-driver --help

    Si vous êtes encore perdus, c’est ici que ça se passe. Lire la doc, quelle idée révolutionnaire !

Conclusion

Résumé des points clés

Laravel Dusk est un puissant outil de test automatisé pour les applications Laravel, permettant de simuler des interactions utilisateurs dans un navigateur réel. Nous avons exploré son installation, la configuration initiale, et la création de tests de base. Nous avons également abordé des fonctionnalités avancées telles que les tests avec authentification, l'interaction avec JavaScript, et la capture d'écran pour le débogage.

Ressources supplémentaires pour approfondir

Pour ceux qui souhaitent approfondir leurs connaissances et compétences avec Laravel Dusk, voici quelques ressources utiles :

  • Documentation officielle de Laravel Dusk : La source la plus complète et à jour pour apprendre à utiliser Laravel Dusk. Disponible sur le site web de Laravel.
  • Cours et tutoriels en ligne : De nombreux cours en ligne offrent des tutoriels détaillés sur Laravel Dusk, souvent avec des exemples pratiques et des projets.
  • Communautés et forums : Rejoindre des communautés en ligne, comme Stack Overflow ou les forums Laravel, peut être très bénéfique pour obtenir de l'aide, partager des expériences et apprendre des meilleures pratiques.

En intégrant Laravel Dusk dans votre flux de travail de développement, vous pouvez non seulement améliorer la qualité et la performance de vos applications, mais aussi anticiper et résoudre les problèmes avant qu'ils n'affectent les utilisateurs finaux. Cela fait de Laravel Dusk un investissement précieux pour tout projet Laravel soucieux de maintenir un haut standard de qualité.

Liens utiles