Comment piloter Chrome avec Behat ?

Source https://www.pxfuel.com/en/free-photo-oclmc

Suite au succès de mon précédent tutoriel sur Behat, ce tutoriel est le premier d’une série consacrée au pilotage des navigateurs.

J’utilise le projet todo list disponible sur GitHub pour ce tutoriel.

Choix du navigateur

Avant de commencer, il est nécessaire de choisir le navigateur à utiliser pour l’exécution des tests. Pour ce premier tutoriel, nous allons utiliser Chromium sous Linux.

Il est possible de piloter un grand nombre de navigateurs pour ordinateur ou smartphone. Ce sera l’objet de prochains tutoriels.

Durée estimée : 1 heure
Il est parfois nécessaire d’exécuter le Javascript présent dans vos pages HTML pendant les tests d’acceptation. Voici comment piloter Chromium.

Lancement du navigateur

Les navigateurs basés sur Chromium peuvent être pilotés directement par Behat grâce à l’extension Mink et le pilote Chrome « dmore/chrome-mink-driver ».

Avant de lancer Behat, il est nécessaire de lancer le navigateur avec les bonnes options pour que Behat puisse l’utiliser.

Chromium via snap

Commandes pour installer Snapd et Chrmium : apt-get install snapd
snap install core chromium

Le binaire à utiliser dans la commande ci dessous est : /snap/bin/chromium

Exécuter cette commande dans un terminal pour utiliser Chromium ou Chrome installé sur le système. Il faudra le laisser ouvert pendant toute la durée des tests.

Commande pour Linux

chromium --enable-automation --disable-background-networking --no-default-browser-check --no-first-run --disable-popup-blocking --disable-default-apps --disable-translate --disable-extensions --no-sandbox --enable-features=Metal --remote-debugging-port=9222 https://127.0.0.1 

Commande pour macOs

/Applications/Chromium.app/Contents/MacOS/Chromium --enable-automation --disable-background-networking --no-default-browser-check --no-first-run --disable-popup-blocking --disable-default-apps --disable-translate --disable-extensions --no-sandbox --enable-features=Metal --remote-debugging-port=9222 https://127.0.0.1

Commande pour Windows

"C:\Program Files\Google\Chrome\Application\chrome.exe" --enable-automation --disable-background-networking --no-default-browser-check --no-first-run --disable-popup-blocking --disable-default-apps --disable-translate --disable-extensions --no-sandbox --enable-features=Metal --remote-debugging-port=9222 --window-size=1280,1024 https://127.0.0.1

Pour mettre fin à l’exécution du navigateur, appuyer sur Ctrl + C.

Pour exécuter Chromium sans la fenêtre, ajouter l’option --headless.

Configurer le projet

Ajouter l’extension « dmore/behat-chrome-extension » à votre projet et activer l’extension dans la configuration de Behat.

Ce tutoriel part du principe que vous avez déjà installé Behat tel que présenté dans le précédent tutoriel. Si ce n’est pas le cas, réaliser l’installation avant de continuer.

Ajouter l’extension Behat et le driver Mink au projet:

composer require --dev dmore/behat-chrome-extension

Dans le fichier behat.yml.dist, ajouter la configuration suivante:

default:
    extensions:
        DMoreChromeExtensionBehatServiceContainerChromeExtension: ~
        BehatMinkExtension:
            base_url: "https://127.0.0.1:8000/"
            javascript_session: chrome_headless
            sessions:
                chrome_headless:
                    chrome:
                        api_url: "http://127.0.0.1:9222"
                        validate_certificate: false

Configuration des scénarii

Pour exécuter des scénarii avec un navigateur piloté, il est nécessaire d’ajouter le tag @javascript au début du fichier de fonctionnalité ou d’un scénario en particulier.

Exécuter les tests

Exécuter les tests

Le navigateur est déjà lancé, il est nécessaire la lancer le serveur web.

Pour cela j’utilise Rymfony (vidéo de présentation). Pour le lancer, exécuter APP_ENV=test rymfony serve -d depuis le dossier racine du projet.

Le projet utilise une base de données SQLite. Si votre projet a besoin d’un serveur MariaDb ou Postgres, lancez-le pour que votre projet ait accès aux données.

Voici le résultat en vidéo

Pour vous montrer le résultat obtenu, voici la vidéo de la réalisation de ce tutoriel sur le projet Todo list

Voir la vidéo : https://www.youtube.com/watch?v=VKZXb5yFYMA

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.