Automatisez des tests fonctionnels pour le web avec Cypress

Rédigez les données

Dans la première partie, nous avons exploré en profondeur les critères qui déterminent l'automatisation de vos tests.

Maintenant, armé de ces connaissances, vous êtes prêt à plonger dans l'étape suivante : la rédaction et l'automatisation des tests à l'aide de scripts. Mais tout d’abord, il faut créer des données à tester.

Vous pouvez rédiger vos données de plusieurs manières. Tout comme le fait la documentation de Cypress, nous classons ici ces méthodes des moins recommandées aux meilleures options : 

Faker est un exemple de datafactory. Il facilite la génération de données aléatoires telles que les noms, les adresses, les numéros de téléphone, les adresses e-mail, les mots de passe, etc. Il permet de spécifier des règles et des modèles pour générer des données qui correspondent à des besoins spécifiques.

En utilisant Faker, vous pouvez rapidement créer des ensembles de données fictives réalistes sans avoir à les saisir manuellement ou à les extraire d'une source de données réelle. Cela peut être utile pour effectuer des tests avec des données variées et couvrir différents scénarios.

Vous pouvez installer Faker avec cette ligne de commande :

npm install @faker-js/faker --save-dev

Voici le code pour créer un faux utilisateur, par exemple :

import { faker } from '@faker-js/faker'; //Vous avez besoin d’importer la librairie
const randomName = faker.person.fullName(); //créer un nom+prénom
console.log('Name:', randomName); //peut retourner par exemple ‘Christine Dupont’

Mais vous pouvez également utiliser Faker dans beaucoup d’autres contextes, comme :

const animal = faker.animal.bear(); //créer un animal 
const password = faker.internet.password(); //créer un mot de passe
const email= faker.internet.email(); //créer un email
const message= faker.lorem.sentences(); //créer des phrases

Créez les variables d’environnement

Dans Cypress, une variable d'environnement est une variable que vous pouvez définir à l'extérieur de votre code de test et qui peut être utilisée pour stocker des valeurs spécifiques à votre environnement de test. Ces variables sont souvent utilisées pour stocker des informations sensibles, telles que des identifiants, des clés d'API, des URL ou d'autres paramètres de configuration. Elles sont aussi utiles si vous changez fréquemment d’environnement, si des valeurs sont différentes d’un développeur à l’autre ou encore plus simplement, si ces dernières évoluent souvent. 

Voici trois cas d'utilisation courants des variables d'environnement dans Cypress :

1. Paramètres de configuration : Vous pouvez utiliser des variables d'environnement pour stocker des paramètres de configuration spécifiques à votre environnement de test. Par exemple, vous pouvez définir une variable d'environnement baseURL qui contient l'URL de base de votre application à tester. Cela vous permet de configurer dynamiquement l'URL en fonction de l'environnement de test (par exemple, développement, intégration, production).

2. Informations d'identification : Si votre application nécessite une connexion ou une authentification, vous pouvez utiliser des variables d'environnement pour stocker les informations d'identification (nom d'utilisateur, mot de passe, clés d'accès, etc.) nécessaires pour se connecter à l'application lors des tests.

3. Paramètres sensibles : Dans certains cas, vous pouvez avoir besoin de stocker des informations sensibles, telles que des clés d'API ou des tokens d'authentification, qui ne doivent pas être exposées dans votre code source. En utilisant des variables d'environnement, vous pouvez stocker ces informations en dehors de votre code de test et les charger dynamiquement lors de l'exécution des tests.

Prenons un exemple : vous voulez définir la base URL de votre application.

Pour naviguer sur une page web, vous devez faire :  cy.visit('https://dev3.exemple.com')

Le mieux est de stocker cette variable globalement, non ? Surtout que l’URL semble prédire au moins trois environnements de développement différents.

Voyons comment définir une variable d'environnement. Vous avez 5 choix possibles :

1. Dans votre fichier de configuration cypress.config.js :

const { defineConfig } = require('cypress')

module.exports = defineConfig({

    env: {

        baseURL: 'https://exemple.com',

    },

})

Votre appel Cypress sera  Cypress.env('baseURL')  .

2. Dans un fichier cypress.env.json créé au préalable.

Il faut créer un fichier cypress.env.js au même niveau que le fichier cypress.config.js. Il ressemblera alors à ceci :

{
    baseURL: 'https://exemple.com',
}

Votre appel Cypress sera  Cypress.env(‘baseURL’)  .

Bien vu. L'utilisation d'un fichier séparé tel que cypress.env.json pour stocker vos variables d'environnement peut être plus appropriée lorsque vous avez besoin de gérer des configurations spécifiques à différents environnements ou lorsque vous préférez garder vos variables d'environnement bien organisées et séparées du fichier de configuration principal. 

En utilisant cypress.env.json, vous pouvez avoir plusieurs fichiers de configuration pour différents environnements (par exemple, cypress.env.dev.json, cypress.env.test.json, cypress.env.prod.json) et basculer facilement en fonction de l'environnement que vous ciblez. 

De plus, cela permet de garder vos variables d'environnement hors du code source, ce qui peut être souhaitable pour des raisons de sécurité.

3. Exporter en tant que CYPRESS_*

L'option CYPRESS_ est une méthode pour définir les variables d'environnement lors de l'exécution des tests. Cette approche permet de spécifier des variables d'environnement directement en ligne de commande lors du lancement de Cypress. Il suffit de faire précéder le nom de la variable par CYPRESS_.

4. Directement dans la ligne de commande avec  -- env

L'option --env permet de définir des variables d'environnement lors de l'exécution des tests Cypress à partir de la ligne de commande ou de votre configuration de test. Vous pouvez utiliser --env suivi d'une chaîne JSON pour spécifier les variables d'environnement.

Votre ligne de commande sera

npx cypress run --env baseUrl=https://exemple.com

Votre appel Cypress sera  Cypress.env(‘baseURL’)

5. Directement dans la configuration du test.

Par exemple :

it('smoke test navigation',
    {
        env: {
            baseURL: 'https://exemple.com',
        },
    },
    () => {
        cy.visit(Cypress.env(baseURL));
        cy.getElementByName("signup-title").should("be.visible").and("contain", "Sign Up");
    }
)

À vous de jouer !

L’objectif de cet exercice est de vous familiariser avec l’utilisation de la bibliothèque JavaScript Faker.js pour générer des données factices et les utiliser pour remplir le formulaire de contact du projet Tech&Buy.

Ce formulaire contient :

1. Un nom.

2. Une adresse e-mail.

3. Un message (de moins de 250 caractères).

Vous devez donc créer 3 constantes avec faker, une constante par champ. Vous pouvez également les afficher dans un  console.log  afin de voir le résultat.

Consultez la suggestion de corrigé.

En résumé

• Il y a cinq façons de créer un jeu de données pour les tests : en passant par l’UI, avec des requêtes pour les créer en base de données, par appel API si vous avez un backend, en vidant et remplissant la base de données, et par datafactory.

• Faker.js est un datafactory utile qui permet de créer des données rapidement et aléatoirement.

• Il faut créer des variables d’environnement afin de stocker des paramètres de configuration spécifiques, les informations d'identification et les paramètres sensibles.

• Les variables d'environnement peuvent être définies de cinq façons différentes : dans le fichier de configuration, dans un nouveau fichier cypress.env.json, dans la ligne de commande avec CYPRESS_* ou - - env et directement dans le test.

 Après toutes ces explications, il est temps de créer votre premier test avec Cypress, qu’en pensez-vous ?