Du end-to-end testing avec Cypress

De Elina Chréa dans Technique

28 sept 2018

En matière de tests, on a toutes sortes de catégories qui s’offrent à nous : tests unitaires, tests d’intégration, tests de charge, etc.

Nous allons nous intéresser aujourd’hui au end-to-end testing, ou tests de bout-en-bout, et plus précisément à son implémentation avec Cypress.

Définition

Commençons par une définition plus claire du end-to-end testing.

Il s’agit d’une méthodologie qui consiste à vérifier que le comportement de l’application corresponde à celui prévu du début à la fin, c’est-à-dire qu’un utilisateur aura bien toutes les informations qu’il devrait avoir lors de sa navigation.

L’idée est donc d’automatiser les navigateurs afin de dérouler tous les cas de scénario qu’un utilisateur pourra effectuer.

Voyons ce que propose Cypress, framework Javascript de test de bout-en-bout.

Source : https://www.cypress.io/how-it-works/

A la lecture du schéma ci-dessus, Cypress semble simplifier la mise en place de tests end-to-end. Qu’en est-il vraiment ?

 

Installation de Cypress

Sans pour autant tourner cet article en tutorial, voici les commandes qui suffisent à installer Cypress :

  • Dans le dossier souhaité (de préférence à la racine du projet) :

npm install cypress --save-dev

  • Pour lancer l’outil Cypress :

Sous Windows : .\node_modules\.bin\cypress open
Sous un autre OS : ./node_modules/.bin/cypress open

La première exécution de cette commande génère un dossier “cypress” avec les 4 dossiers nécessaires au fonctionnement de l’outil, avec des exemples dans chaque dossier :

La commande ouvre également une fenêtre Cypress listant l’ensemble des tests définis dans le dossier “integration” (pour l’instant je n’ai que les exemples par défaut) :

En cliquant sur un test (par exemple actions.spec.js), cela lance son exécution sous Chrome.

Et voilà, le tour est joué !

Ensuite, il suffit de s’inspirer des tests existants et de la documentation pour réaliser ses premiers tests.

 

Premiers pas avec Cypress

Par exemple, si on veut tester une authentification qui échoue, on va pouvoir vérifier que le DOM contient bien du contenu attendu :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
describe('Tekcollab', function() {
it('Error login', function() {
cy.visit('http://localhost:8082/tekcollab')
cy.get('#loginInput')
    .type('ELINA')
.should('have.value', 'ELINA')
cy.get('#loginInput')
    .type('password')
cy.get('input[type=submit]')
.click()
cy.contains('Identifiant ou mot de passe invalide')
})
})

Si vous êtes déjà familier avec les frameworks de test, la syntaxe vous dira peut-être quelque chose.

En effet, les mots-clés “describe()” et “it()” sont issus de la syntaxe de Mocha et Cypress utilise l’écriture de Chai pour les assertions (“.should()“).

L’exécution du code précédent se présente de la manière suivante :

Ici, je fais une vérification simple sur le contenu, mais je pourrais très bien pousser et vérifier que ma div d’erreur est présente et que c’est dans celle-ci que mon erreur est contenue.

 

Interception de requêtes

On peut aller plus loin en interceptant des appels AJAX par exemple et en simulant leurs retours. Pour cela, Cypress se base sur le framework Sinon.

On va utiliser des fixtures, c’est-à-dire des données statiques, que l’on va écrire dans des fichiers “.json” et qui doivent se situer dans le dossier “fixtures” généré par Cypress. Ces fixtures représentent des données fictives pouvant être retournées par un appel WS, ce qui est très utile si on souhaite limiter le temps d’exécution des tests.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
describe('Tekcollab', function() {
it('Login', function() {
cy.server()
cy.route('/tekcollab/formulaire/BROUILLON*', 'fx:brouillons.json')
.as('brouillons')
cy.route('/tekcollab/formulaire/TERMINE*', 'fx:termines.json')
.as('termines')
cy.visit('http://localhost:8082/tekcollab')
cy.get('#loginInput')
    .type('ELINA')
.should('have.value', 'ELINA')
cy.get('#j_password')
    .type('***************')
cy.get('input[type=submit]')
.click()
cy.contains('Brouillons')
})
})

Ce code donne le résultat suivant :

On distingue bien les éléments mockés avec le mot-clé “STUB”.

De plus, comme j’ai utilisé la commande “as” (“.as('brouillons')” et “.as('termines')”) pour définir un libellé à mon jeu de données, mon élément est mis en évidence.

Petit zoom sur la capture précédente pour vous mettre en évidence tout ça :

 

Je ne vais pas aller dans le détail de l’implémentation, mais d’autres mocks peuvent être intéressants :

  • Simulation d’un grand nombre de données pour tester la pagination
  • Simulation d’une latence côté serveur (temps de réponse d’une requête lent) pour tester le comportement de l’application et définir où il serait pertinent de mettre en place des loaders
  • Simulation d’une erreur HTTP (404, 500) pour vérifier que les pages d’erreur s’affichent comme prévu

 

Que faut-il retenir ?

Cypress présente plusieurs avantages :

  • Facile à installer
  • Rapide d’exécution : le navigateur lancé qui exécute les tests étant à l’écoute du fichier Javascript décrivant les tests, un enregistrement de fichier suffit à relancer les tests du fichier
  • Full Javascript : pas de dépendance externe
  • Pas de dépendance avec le code : on pourrait très bien s’amuser à tester une application sur un environnement de recette, ou en prod
  • Sauvegarde de l’état du DOM à chaque étape : on peut ainsi s’assurer que les bons éléments s’affichent à une étape précise de la navigation

Il s’agit d’un outil open-source qui propose également un service de tableau de bord pour gérer les tests et faciliter l’intégration continue (enregistrements vidéo, capture d’écran, logs, etc.). Ce service devient payant au-delà d’un seuil d’utilisation.

L’inconvénient principal de Cypress est que, pour l’instant, l’outil ne fonctionne que sous Chrome, Chromium et Canary, mais l’équipe travaille sur le support de Firefox, ou encore de IE.

Si vous souhaitez avoir des informations à jour à ce sujet, vous pouvez vous rendre sur la source officielle.

Pour une initiation vidéo de Cypress, je vous invite à visionner la conférence de Rodolphe Bung lors du Devoxx 2018 :

Et pour plus d’informations, rendez-vous sur le site du projet : https://www.cypress.io/ !

Il ne vous reste plus qu’à tester l’outil de votre côté !

Commentaire

× sept = 56

iMDEO recrute !

REJOIGNEZ-NOUS

A la recherche de nouveaux talents (développeurs web et mobile, chefs de projet,...)

Voir les annonces