Cypress c’est quoi ?

A quoi sert Cypress ?
Comment je peux l’utiliser sur mon site internet, solution saas ?
Nous allons nous efforcer de répondre à ces questions dans cet article.

Test unitaire

Un test unitaire va vous permettre de vérifier des unités individuelles (1 fonction unique, 1 class, …). Pour cela vous fournissez 1 entrée et vérifiez que la sortie est bien conforme au résultat attendu.
NB : une fonction courte = un test unitaire simple 🙂

Cypress n’est pas là pour réaliser des tests unitaires.

Test d’intégration

Vérifier que l’ensemble du code fonctionne correctement.
Ici on ne teste plus uniquement une fonction, classe, etc …
Mais la globalité.

Test fonctionnel

Aussi appelé « Test de bout en bout », « End to end » ou « e2e ».

Il s’agit des tests que Cypress va s’occuper.
Donc avec Cypress vous allez pouvoir vérifier des scénarios complets en contexte réel.

Exemple vous pouvez réaliser un scénario qui va :

• Ce connecter sur votre solution SAAS.
• Cliquez sur un client de votre solution CRM.
• La fiche du client est bien chargée.

Exemple pour un site eCommerce (back) :

• Ce connecter sur votre site eCommerce.
• Cliquez sur « nouveau produit » de votre solution eCommerce.
• Remplir les informations de votre produit (Nom, description, prix, catégorie, …).
• Sauvegarder.
• Visualisation de la fiche produit.
• Vérifier l’exactitude des données ajoutés précédemment.

Exemple pour un site eCommerce (front) :

• Accéder à l’url du site eCommerce.
• Recherche un produit X.
• Ajouter une quantité de 2.
• Ajouter au panier.
• Allez sur le panier.
• Vérifier que le produit X est présent avec une quantité de 2.
• Passer au tunnel d’achat.
• Ajouter un code promo.
• Payer le panier avec Stripe.

Cypress vous permet de réaliser cela, ainsi que :

• Du test multi-navigateur (chrome, firefox, edge, electron, canary, …), pour vérifier si votre site internet, solution saas, application mobile se comporte comme prévu du début à la fin.
  En savoir +
• L’intégration des tests fonctionnels dans votre CI
  (Jenkins, Travis CI, Circle CI, Docker).
  En savoir +
• 1 prise de screenshot lorsqu’un test est en erreur.
• 1 prise d’une vidéo permettant de retracer l’erreur.
  En savoir +
• Le déploiement d’un rapport d’erreur sur un dashboard.
  Cela permettra aux membres de votre équipe de mieux comprendre l’origine d’un point bloquant (image, vidéo, …).
• L’exécution des tests en parallèle.
• etc …

Les sites sont de plus en plus complexe et demande un temps conséquent pour la réalisation de tests. Les tests fonctionnels sont importants car ils sont les seuls tests vous permettant de vérifier le bon déroulement de l’application d’un point de vue métier.

Je dois faire quoi alors ?

1er Etape : Vous devez installer Cypress.
npm install cypress
En savoir +

2ème Etape : Vous devez écrire vos tests Cypress.
Cf documentation

3ème Etape : Exécuter vos tests Cypress depuis l’interface graphique ou en headless (=uniquement dans votre terminal).

4ème Etape : Consulter votre dashboard pour voir les points bloquants.

Commandes Cypress à retenir

Pour exécuter les tests :

$(npm bin)/cypress run
# ou
./node_modules/.bin/cypress run
# ou
npx cypress run
# ou 
npm run cypress:open

Pour exécuter les tests sur le navigateur Firefox :

cypress run --browser firefox

Pour exécuter le test lorem.js :

cypress run --spec "cypress/integration/lorem.js"

Pour supprimer le cache de Cypress :

cypress cache clear
cypress install

Pour exécuter les tests Cypress + Dashboard :

cypress run --record --key votre_key_a_placer_ici

# tip - pour ne pas indiquer la key à chaque fois :
# export CYPRESS_RECORD_KEY=votre_key_a_placer_ici
# cypress run --record

En savoir +

Fichier environnement Cypress

Fichier cypress.json :
projectId est utilisé pour le Dashboard « made in Cypress ».

{
   "viewportWidth": 1280,
   "viewportHeight": 1020,
   "baseUrl": "http://urlDeVotreSite.com",
   "defaultCommandTimeout": 20000,
   "videoUploadOnPasses": false,
   "env" : {
       "maVariable01"  : "aaa",
       "maVariable02"  : "bbb",
       "maVariable03"  : "ccc"
   },
   "projectId": "xxxxxx"
}

Fichier cypress.env.json :
Ce fichier vous permet de surcharger la config de base cypress.json.

{
    "maVariable01"  : "aaa",
    "maVariable02"  : "bbb",
    "maVariable03"  : "ccc"
}

Exemple de code Cypress

Attendre 2 secondes :

cy.wait(2000)

Attendre 10 secondes que la class soit trouvée :

cy.get('.maClass', { timeout: 10000})

Remplir un champ :

cy.get("#formClient .email").type("contact@tld.com")

Remplir un champ et soumettre le formulaire :

cy.get("#formClient .email").type("contact@tld.com{enter}")

Soumettre un formulaire :

cy.get("#formClient").submit()

Trouver un champ disposant d’un data-xxx :

// <div data-xxx="abc">Lorem ipsum</div>
cy.get('[data-xxx="abc"]')

Voir plus d’exemples de code Cypress

Utiliser un faker avec Cypress

Installer le faker :

yarn add cypress faker --dev

Importer le dans votre code :

import faker from "faker"

L’utiliser dans votre code :

faker.internet.email()
faker.internet.password()

Documentation faker : Github, Marak, Generator.

Autres solutions de test fonctionnel

Puppeteer est une solution intéressante à suivre, dans le cas où Cypress a attriré votre attention sur la réalisation de test e2e :

• https://pptr.dev/
• https://github.com/puppeteer/puppeteer