Créer facilement des tests fonctionnels avec Cypress
Fabien, Architecte web 10 mars 2020
Fabien, Architecte web 10 mars 2020
Durant la période de consolidation de l'un de nos projets client, nous nous sommes demandé quel outil utiliser pour réaliser les tests fonctionnels.
Nous avons finalement choisi Cypress - une solution open-source - et vous expliquons pourquoi dans cet article.
Nous avons l’habitude de séparer les tests en deux catégories (même s’il en existe davantage) : les tests unitaires et les tests fonctionnels.
Il existe deux types de tests fonctionnels : les tests fonctionnels de progression et les tests fonctionnels de non régression.
Afin de réaliser les tests fonctionnels, nous avions besoin d’un outil qui :
Notre équipe technique étant habituée à PHP et Symfony, nous nous sommes d'abord orientés vers cet écosystème.
Nous y avons trouvé deux outils populaires :
La librairie Panther avait tout pour répondre à notre besoin. Elle permet en effet de créer des tests fonctionnels en simulant un navigateur et tester le résultat des scripts JavaScript.
De plus, elle permet l'utilisation de librairies natives à Symfony auxquelles nous sommes habitués.
Cependant, le fait que le WebDriver ne supporte pas les requêtes POST nous a assez vite bloqués.
Finalement, ça a été l’occasion de tester un outil de l’écosystème JavaScript : Cypress.
Cypress est plus qu’une librairie, c’est un framework de tests frontend. Il est exécuté dans le navigateur avec un accès bas niveau (accès à la console, aux événements AJAX, au DOM) sans WebDriver.
Il utilise de nombreuses librairies JS connues telles que :
Cypress détecte automatiquement les navigateurs disponibles. Il est capable de lancer les tests dans Electron, Chrome mais aussi depuis la version 4 dans Firefox et Edge en version Chromium.
Le test runner
Le développement de tests fonctionnels est assez visuel avec Cypress grâce à son test runner.
Pour le lancer, il suffit de modifier le fichier package.json afin d'ajouter le script comme précisé dans la documentation
{
"scripts": {
"cypress:open": "cypress open"
}
}
Puis, lancer la commande...
npm run cypress:open
... pour afficher le test runner :
Nous avons, entre autres, accès à la liste des tests, le choix du navigateur et un récapitulatif de la configuration. Un clic sur un test pour le lancer :
A gauche, on retrouve le log de tout ce qui est fait et à droite la prévisualisation du test :
Le test runner peut aussi nous faciliter la création des tests grâce à la possibilité de récupérer le sélecteur d’un élément :
Après avoir collé, on obtient dans cet exemple :
cy.get('#email1')
Son intégration complète dans le navigateur permet d’avoir accès à la console pour déboguer les tests.
Des scénarios lisibles
Les tests écrits avec Cypress sont lisibles et faciles à comprendre grâce aux librairies JS incluses.
///
describe('Post Resource', function() {
it('Creating a New Post', function() {
cy.visit('/posts/new')
cy.get('input.post-title')
.type('My First Post')
cy.get('input.post-body')
.type('Hello, world!')
cy.contains('Submit')
.click()
cy.url()
.should('include', '/posts/my-first-post')
cy.get('h1')
.should('contain', 'My First Post')
})
})
À noter sur l’écriture des scénarios :
La configuration de Cypress
La configuration est réalisée via le fichier cypress.json qui permet de configurer entre autres :
Cypress gère aussi la notion d’environnement, pour écraser la configuration par les paramètres associés au bon environnement.
Le dashboard Cypress
Un dashboard en ligne est disponible pour centraliser les résultats des tests :
Nous avons accès :
Le dashboard est disponible en version payante mais aussi en version gratuite de façon limitée.
Les autres fonctionnalités disponibles dans Cypress
Cypress permet aussi de contrôler tout le cycle de vie de requête AJAX / XHR en écoutant les appels réseaux.
Il peut bien sûr être exécuté dans un environnement de CI. Dans ce cas, le test runner graphique n’est pas lancé, mais un log résumé sera affiché
Dans un écosystème Javascript, Cypress peut aller encore plus loin avec :
Difficile de faire la liste exhaustive des fonctionnalités offertes par Cypress dans un seul article tellement elles sont nombreuses. Voici néanmoins un résumé des avantages majeur de Cypress, selon notre équipe :
