Testez son site Drupal 8 avec JavaScript et le navigateur Chrome
Drupal 8.6 inclus désormais Nightwatch.js, un outil de tests automatisés supportant JavaScript avec un navigateur. C'est une bonne nouvelle, parce que la méthode actuelle pour tester JavaScript se base sur PHPUnit ce qui peut poser des problèmes dans certaines condition d'intégration continue et écrire des tests pour JavaScript en PHP peux s'avérer limitant et peu pratique pour les développeurs frontend.
Cet ajout fait partie de l'initiative Drupal 8 Modernize Drupal's JavaScript. Soyons honnête, je ne suis pas très familier avec l’écosystème Node.js et suis plutôt un observateur, mais introduire des outils modernes et robustes pour des pratiques communes dans l'industrie est toujours une bonne idée !
En cherchant un peu sur Google on peut dire que la hype commence, mais depuis Drupal 8 c'est un peu toujours les montagnes russes des émotions... Waouh quel super nouvelle méthode / nouvel outil / initiative dans Drupal 8 ! Oh mais il n'y a pas d'interface de gestion, une documentation minimaliste, des fonctionnalités absentes alors quelles étaient dans Drupal 7....
Donc pour l'instant la documentation Nightwatch.js est plutôt légère, vous pouvez trouver le minimum dans /core/tests/README.md et une maigre page de manuel JavaScript testing using Nightwatch.js.
On considérera que l'intégration de cet outil de test de bout-en-bout dans Drupal 8.6+ en est à ses débuts et ne sera pas utilisable en production avant au moins Drupal 8.7 comme on peux le constater avec ce problème.
Même si Nightwatch.js permet d'utiliser plusieurs navigateurs pour les tests, avec Drupal 8.6+ on ne peut actuellement utiliser que Chrome / Chromium. Il y a également un travail en cours pour faciliter les tests en intégrant des commandes Nightwatch.js spécifiques pour Drupal.
Pour cet article j'utilise ce patch pour ajouter le support d'installation par profile Support install profile and language code params in drupalInstall Nightwatch command. C'est un peu un minimum pour tester un vrai site, cela permet par exemple d'utiliser le profile config_installer pour installer un vrai site en production.
Le reste de cet article vas tenter de définir une méthodologie simple et pratique pour lancer rapidement un premier test sans avoir à installer les outils Node.js et même Drupal en se basant sur Gitlab-ci ou Docker.
Utiliser Gitlab Ci avec Drupal 8 pour exécuter des tests sous Nightwatch.js
Pour lancer vos tests Nightwatch.js avec Gitlab Ci vous pouvez utiliser la configuration toute prête de mon projet Gitlab Ci for Drupal 8, cette configuration inclus une tâche pour Gitlab-ci spécifique à Nightwatch.js, de base cette tâche lance les tests avec les outils définis dans Drupal 8 core web/core/package.json.
J'utilise une image Docker qui inclus tous les outils Node, Yarn et les services Gitlab Ci avec Mariadb parce que c'est beaucoup plus rapide pour un vrai site qu'avec SQLite.
Malheureusement pour l'instant Gitlab CI ne permet pas d'utiliser correctement Selenium standalone Chrome driver pour avoir accès à un navigateur, parce que le service ne peux pour l'instant pas accéder facilement à l'hôte, voir Accessing a Docker container service from another container service.
Il y a des solutions mais trop complexe ou tricky, donc pour l'instant la meilleur solution est d'inclure le service (Selenium Server ou Chromedriver et Chromium) dans l'image Docker utilisée pour lancer les tests. Heureusement avec un peu de chances ce problème sera peut-être bientôt résolu si ce MR est validé.
Voici un condensé de la configuration Gitlab-ci pour lancer les tests Nightwatch.js
Nightwatch Js:
image: mogtofu33/drupal8ci:8.6-selenium
/** ... Build + setup actions ... **/
services:
- mariadb:latest
script:
- cp .gitlab-ci/.env.ci ${WEB_ROOT}/core/.env || true
- cd ${WEB_ROOT}/core
- yarn install
- yarn test:nightwatch --skiptags core
variables:
MYSQL_ALLOW_EMPTY_PASSWORD: "1"
MYSQL_DATABASE: "drupal"
Cela fonctionne correctement comme vous pouvez le voir sur ce résultat de tâche. Mais supposons que vous voulez lancer tout cela localement sans installer un serveur web, une base de données, Node et tous les outils et même Drupal 8 ?
Tester Drupal 8 en local avec Docker
La solution pour lancer tous les tests localement sans installation est d'utiliser Docker avec Docker-compose puis de lancer une image avec tous les outils pré-installés.
J'utilise Ubuntu ou cela fonctionne très bien, ça devrait bien fonctionner sur Mac mais probablement pas sous Windows.
J'ai construit une image Drupal basé sur l'image officielle Docker Drupal image avec un peu de customisation, nos outils de tests et plus. L'objectif est d'avoir une image rapide à utiliser, robuste et surtout facile à maintenir.
Avec ou sans Drupal en local
Cette image Docker contient Drupal, Google Chrome et Chromedriver dans sa version 8.6+ ainsi qu'une variante sans Drupal, cela permet de tester facilement un projet, un module ou thème custom. Si vous utilisez cette image sans Drupal inclus vous devez télécharger Drupal avec composer, le mieux est d'utiliser le Drupal template project.
Si vous testez seulement votre code personnalisé, le code Gitlab CI inclus ce patch Support install profile and language code params in drupalInstall Nightwatch command.
Récupérer les fichiers
Depuis mon projet Gitlab CI for Drupal 8 project, vous pouvez trouver un fichier pour docker-compose avec tous ce qu'il faut, ce fichier doit être placé au même niveau que votre code qui doit être avec l'arborescence web/modules/custom ou votre Drupal dans le dossier ./drupal.
pour seulement du code personnalisé, récupérer tout les fichiers du projet et remplacez web/... avec votre code ou utilisez l'exemple de module et thème inclus comme point de départ.
Lancer l’environnement Drupal 8
La stack docker utilise les images officiels pour Mariadb.
Nous allons utiliser Docker Compose pour lances la stack
docker-compose up -dVous pouvez visiter cette adresse pour tester que Drupal fonctionne
- http://localhost:88 (Doit montrer la page d'installation de Drupal 8)
Visitez cette adresse pour tester Chromedriver
Utiliser Nightwatch.js pour lancer les tests JavaScript
Vous pouvez lancer les tests Nightwatch.js, par exemple ceux inclus dans Drupal core avec Docker. Éventuellement ajoutez --verbose pour afficher plus d'informations
docker exec -it ci-drupal yarn test:nightwatch tests/Drupal/Nightwatch/Tests/exampleTest.jsBien sur le mieux est de lancer vos tests, notez que le dossier de travail de Docker est ./core, vous pouvez utiliser comme exemple le code inclus dans le projet Gitlab, il se base sur un Drupal installé avec le profile standard et produit des captures d'écrans pour test.
docker exec -it ci-drupal yarn test:nightwatch ../modules/custom/my_d8_module/tests/src/Nightwatch/Tests/exampleTest.jsOu une autre approche est d'utiliser un @tag spécifique pour vos modules, cela permet de lancer tous vos tests en une fois
docker exec -it ci-drupal yarn test:nightwatch --tag my_moduleOu lancez tous les tests présents dans les modules / thèmes sauf core avec --skiptags
docker exec -it ci-drupal yarn test:nightwatch --skiptags coreLes résultats seront enregistrés dans le dossier ./reports.
quelques astuces pour utiliser Nightwatch.js avec Drupal 8
Vous pouvez modifier le fichier core/.env pour adapter la résolution d'affichage de Chrome (Mon image utilise 1920x1080px, la résolution par défaut de Chromedriver est 1360 x 1020 (?))
Pendant les tests vous pouvez redimensionner le navigateur pour avoir des captures avec différentes résolutions en utilisant le code browser.resizeWindow(375, 812). Prendre des captures d'écran est très simple avec le code browser.saveScreenshot(`${browser.screenshotsPath}/my_screenshot.jpg`)
Pour une utilisation plus poussée visitez Nightwatch.js API, Nightwatch.js commands et Drupal sample tests est une bonne source d'inspiration.
Des suggestions ? Postez un commentaire !
Si vous avez besoin d'aide pour le test d'un projet, je propose mes services d'expert Drupal 8 en tant qu'indépendant, vous pouvez me contacter depuis ce formulaire pour un devis gratuit.