Tests automatisés sur plusieurs navigateurs

Les tests sur plusieurs navigateurs sont indispensables de nos jours, mais cela vaut-il la peine d'automatiser ces tests ? Nous devrions certainement y réfléchir. L'article suivant peut vous aider à prendre cette décision. Nous vous montrerons comment minimiser les inconvénients et comment tirer parti des avantages de cette solution. Vous apprendrez comment configurer ce type de tests dans Codeception et où obtenir les navigateurs que vous souhaiterez utiliser dans les tests.

Tests multi-navigateurs

Le test multi-navigateur (c'est-à-dire le test sur divers navigateurs) est aujourd'hui l'un des aspects les plus importants de la création de toute page web ou application web. Tout développeur responsable doit prendre en compte la compatibilité de sa page avec les navigateurs utilisés par les utilisateurs. Bien que les écarts entre navigateurs soient beaucoup plus petits qu'avant, nous pouvons encore assez souvent rencontrer un cas d'interprétations différentes du code JavaScript ou qu'une version donnée du navigateur ne prendra pas en charge un fragment spécifique de notre CSS. Nous devons également garder à l'esprit que nos utilisateurs n'utiliseront pas toujours la dernière version d'un navigateur donné. C'est pourquoi il sera si important de vérifier plusieurs versions d'un navigateur donné.

Toutes ces analyses de trafic sur notre page peuvent nous amener à établir une liste vraiment large de navigateurs et d'appareils que nous devrions tester pour nous assurer de fournir à nos utilisateurs une page de la plus haute qualité services Drupal. Une question se pose ici : si je fais toujours la même chose sur tous les appareils et attends le même effet, n'est-il pas judicieux que des tests automatisés m'aident à cet égard ? Je crois que c'est quelque chose qui mérite réflexion. Il est également bon de calculer les coûts et les avantages d'une telle solution.

Tous les exemples décrits ci-dessous seront basés sur Codeception, mais rien ne vous empêche de transférer ces solutions dans votre technologie. Si vous ne savez pas ce qu'est Codeception et comment le configurer dans votre projet, assurez-vous de lire comment automatiser les tests dans la console Docker.

Environnements

Dans cet article, nous partons du point où nous avons un projet opérationnel avec un navigateur configuré.

Codeception a prévu que les utilisateurs voudraient exécuter des tests dans différentes configurations, alors dans notre fichier de configuration (par exemple acceptance.suite.yml) nous avons la possibilité de remplacer les paramètres par défaut. Un exemple peut être le désir d'utiliser plusieurs navigateurs différents, comme sur l'illustration ci-dessous :

Dans la section "env", vous pouvez définir des paramètres sous n'importe quel nom (phantom, chrome, firefox ici) qui remplacent la configuration par défaut déclarée précédemment.

Lorsque la configuration générale du test est déjà derrière nous, nous pouvons passer aux fichiers spécifiques avec les tests. Dans ce cas, nous pouvons attribuer l'annotation appropriée – comme dans l'exemple ci-dessous – et décider quels tests doivent être exécutés dans un environnement donné.

Maintenant, nous pouvons facilement basculer entre les configurations et choisir quels tests doivent être exécutés. Pour ce faire, il suffit de lancer nos tests en ajoutant le paramètre --env avec le nom de l'environnement spécifique à la commande qui l'exécute. Basé sur l'article précédent, ce sera par exemple :

dcon ‘test --env chrome’

Lorsque nous voulons exécuter des tests en utilisant le navigateur Chrome. Des guillemets ont été ajoutés pour que la console Docker traite le paramètre env comme partie de la commande de test, et non comme un paramètre séparé.)

Nous pouvons également effectuer des tests sur plusieurs environnements en exécutant la commande :

dcon ‘test --env chrome --env phantom --env firefox’

ou combiner les paramètres avec la commande :

dcon ‘test --env chrome,mobile --env phantom,desktop --env firefox,desktop’

Il est également utile de mentionner que nous pouvons faire référence à l'environnement actuellement défini dans le test de cette manière :

Cela nous donne la possibilité d'effectuer des actions spécifiques en fonction du paramètre du navigateur, et donc de gérer toute exception résultant de différences que nous connaissons et qui sont acceptables.

Images Docker pour Selenium

Puisque nous savons déjà comment le configurer pour différents environnements, il est utile de se poser les questions suivantes :

1. Dois-je avoir tous les navigateurs sur mon ordinateur ?
2. Comment décider facilement quelle version sera testée maintenant ?

Ici, par exemple, les images docker fournies par Selenium viennent à notre aide. Actuellement, elles permettent de construire un conteneur avec une version sélectionnée du navigateur Chrome, Firefox ou Opera prêt à faire des tests dessus. C'est vraiment une bonne solution car changer la version du navigateur ne nécessite que de changer le numéro dans le tag de l'image (nous pouvons également construire et définir plus d'une version).

En outre, nous pouvons utiliser le hub pour construire toute une base de données de différentes versions de navigateurs que nous aurons à disposition pour les tests. Je recommande d'expérimenter avec la création de vos propres structures, de préférence en utilisant le fichier docker-compose. Le projet est bien documenté et continuellement développé. Récemment, il est devenu possible d'enregistrer vos tests. Pour ceux qui créent de petits projets, il est important de savoir que toutes ces images sont entièrement gratuites à utiliser et à accéder. Le plus gros inconvénient est le nombre limité de navigateurs disponibles.

BrowserStack

Dans le cas où nous souhaitons avoir accès à plus de navigateurs ou d'appareils, diverses plateformes qui offrent la possibilité de se connecter à une configuration donnée (appareil/système d'exploitation/navigateur avec un choix de différentes versions) sont une bonne alternative. Chez Droptica, nous avons décidé d'utiliser BrowserStack. L'avantage de cette solution est la facilité d'intégration avec Codeception et notre connaissance approfondie de l'outil que nous avons déjà utilisé pour des tests manuels.

Grâce à l'utilisation de cette technique, nous avons souvent accès à des centaines voire plusieurs milliers de configurations système différentes. La valeur ajoutée est également l'accès au panneau d'administration, où nous pouvons voir les résultats actuels et archivés de nos tests et les enregistrements de leur progression. Choisir cette option nécessitera cependant d'inclure les dépenses sous forme d'accès à une telle plateforme dans le budget du projet.

Avantages et inconvénients des tests automatisés sur différents navigateurs

Un avantage indéniable de l'utilisation de tests automatisés sur divers navigateurs est de fournir au département QA un outil de haute qualité qui soutient considérablement leur travail, et ainsi contribuer à améliorer la qualité globale du produit final.

Cela raccourcira certainement le temps que l'équipe de testeurs doit passer à effectuer des tests manuels. Si nous ne vérifions pas automatiquement les différentes combinaisons de navigateurs, notre équipe devra s'en occuper.

Quant aux inconvénients – tout d'abord, il faut du temps pour préparer et maintenir une telle solution. Permettez-moi de vous rappeler que nous parlons du temps passé uniquement à ajouter la possibilité de tester sur plusieurs navigateurs. Le temps passé à écrire et préparer les tests est un autre problème. Cependant, en écrivant, nous pouvons tomber sur des cas de différences de navigateurs qui doivent également être traités.

Un autre inconvénient sera le temps nécessaire pour effectuer les tests automatisés, qui sera plus long en ajoutant un autre navigateur. Il convient toutefois de garder à l'esprit que dans ce cas, l'alternative est d'effectuer ces tests manuellement, ce qui nous demande également du temps.

Après avoir considéré les avantages et les inconvénients, nous pouvons décider si cela sera rentable pour notre projet de lancer des tests automatisés sur plusieurs navigateurs, mais avant d'en arriver là, essayons d'équilibrer la balance en faveur des tests.

Exécution parallèle, ou comment réduire les inconvénients

Il semble assez évident que si nous voulons exécuter nos tests sur plus d'un navigateur, leur temps d'exécution augmentera, mais est-ce vraiment obligatoire ?

C'est là que l'Exécution parallèle, qui consiste à effectuer plusieurs tests simultanément, peut nous aider. Grâce à l'utilisation d'images docker et à la configuration appropriée du projet, nous pouvons réduire considérablement le temps nécessaire aux tests. Désormais, le temps nécessaire à l'exécution de nos tests n'a pas à augmenter de manière si drastique chaque fois que nous souhaitons y ajouter un autre navigateur ou une version différente.

Tests visuels, ou comment utiliser les avantages

L'aspect le plus courant, qui diffèrera selon le navigateur, sera l'aspect visuel, et c'est sur lui que nous mettons souvent le plus l'accent lors de tels tests. Cependant, c'est aussi le type de tests où il est facile de rester dans une routine et d'omettre un détail. Par conséquent, il semble judicieux d'utiliser une machine pour aider dans ces tests.

Comme je l'ai décrit dans l'un des articles précédents, chez Droptica nous utilisons Visualception pour les tests visuels automatisés. Il en va de même pour plusieurs navigateurs car rien ne change dans la configuration de Visualception elle-même. Nous avons un rapport distinct pour chaque environnement (semblable à celui montré ci-dessous).

Passer en revue un tel rapport est certainement beaucoup plus facile et agréable que de comparer les différences soi-même, où – malgré une attention vigilante – il est possible de négliger les changements minimes que le processus automatisé détectera et mettra en évidence. Un cas intéressant est un test qui m'a aidé à détecter une réduction minime de la qualité des images sur une page, ce qui m'aurait normalement échappé.

Conclusions

Que des tests soient nécessaires sur votre projet ou non n'est pas évident, cela doit être équilibré et parfois analysé dans le cadre de consultation de Drupal pour voir si les avantages dépassent les coûts qui doivent être engagés.

l'Exécution parallèle vous aidera à minimiser les inconvénients de l'augmentation du temps nécessaire pour effectuer des tests automatisés pour plusieurs configurations.

Les tests visuels sont un candidat idéal pour effectuer des tests automatisés sur plusieurs navigateurs.

Résumé

Donc, pour répondre à la question posée dans l'introduction de ce texte, à savoir s'il vaut la peine d'automatiser les tests – je crois que oui. Je vous encourage à prendre cela en considération, car les avantages décrits dans le texte peuvent avoir des bénéfices mesurables.