Automatisez des tests fonctionnels pour le web avec Cypress

Ajoutez les attributs data-cy

Dans le chapitre précédent, vous avez vu que Cypress préconise l'utilisation de l'attribut data-* en tant que sélecteur. Dans ce chapitre, vous allez appliquer les bonnes pratiques de Cypress en suivant ces étapes :

• Ouvrez le fichier contact.component.html. 

• Allez dans le menu Edit de VSCode. 

• Cliquez sur Find in Files.

• Dans la boîte de recherche, tapez contact-page.

• Sélectionnez la première proposition. Cela devrait être contact.component.html. 

• La page s’ouvre et vous allez pouvoir modifier vos éléments. 

• Ajoutez les attributs data-cy à vos éléments, comme ci-dessous : 

<div id="contact-page" data-cy="contact-page">
  <section id="contact-form" [formGroup]="form" data-cy="contact-form">
    <h2 data-cy="title-contact-us">Contactez-nous</h2>

    <form>
      <p>
        <label for="name">Nom</label>
        <input type="text" name="name" id="name" formControlName="name" data-cy="name" />
      </p>
      <p>
        <label for="email">Adresse e-mail</label>
        <input type="email" name="email" id="email" formControlName="email" data-cy="email" />
      </p>
      <p>
        <label for="message">Message</label>
        <textarea name="message" id="message" formControlName="message" data-cy="message"></textarea>
      </p>
      <button (click)="send()" data-cy="sendButton">Envoyer</button>
      <p class="success" *ngIf="success" data-cy="successMessage">Message envoyé avec succès.</p>
    </form>
  </section>
  <section id="contact-place" data-cy="contact-place">
    <h2 data-cy="title-where-find-us">Où nous trouver</h2>
    <iframe width="100%" height="280" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
      src="https://maps.google.com/maps?width=100%25&height=600&hl=fr&q=4%20Rue%20de%20la%20R%C3%A9publique,%2030900%20N%C3%AEmes,%20France+(Tech&Buy)&t=&z=15&ie=UTF8&iwloc=B&output=embed"><a
        href="https://www.maps.ie/distance-area-calculator.html">distance maps</a></iframe>
    <p><strong>Tech&Buy</strong></p>
    <div class="contact-address">
      <p data-cy="address">4 Rue de la République<br>30900 Nîmes<br>France</p>
      <button (click)="openItinerary()" data-cy="itinerary-button">Itinéraire</button>
    </div>
  </section>
</div>

• Exécutez à nouveau la commande  docker-compose up  .

• Après la compilation, rendez-vous sur l’URL du formulaire : http://localhost:8080/#/contact. 

• Grâce à l’outil de développement, vous pouvez voir que les data-cy sont présents : 

• Reprenez le test que vous avez écrit précédemment et remplacez les sélecteurs :

describe('contact page', () => {
  it('it navigate to the contact page', () => {
    cy.visit('http://localhost:8080/#/contact')
    cy.get('[data-cy="name"]').type('name')
    cy.get('[data-cy="email"]').type('test@test.fr')
    cy.get('[data-cy="message"]').type('Bonjour, votre site est génial !')
    cy.get('[data-cy="sendButton"]').click()
    
cy.get('[data-cy="successMessage"]').should('be.visible').should('contain', 'Message envoyé avec succès.')
  })
})

• Et le test réussit toujours :

Félicitations, vous avez maintenant réussi un test qui utilise les bonnes pratiques de Cypress !

Retrouvez le détail de cette manipulation en vidéo :

Oui, vous avez raison, il est temps de tester cette faille XSS !

Pour savoir si le formulaire est vulnérable, le test est assez simple du côté de Cypress : il faut entrer  <script>alert('XSS');</script>  dans le champ texte message puis envoyer le formulaire. 

Le test est donc :

it('it did not contain XSS vulnerability', () => {
  cy.visit('http://localhost:8080/#/contact')
  cy.get('[data-cy="name"]').type('name')
  cy.get('[data-cy="email"]').type('test@test.fr')
  cy.get('[data-cy="message"]').type('<script>alert("XSS");</script>')
  cy.get('[data-cy="sendButton"]').click()

  cy.get('[data-cy="successMessage"]').should('be.visible').should('contain', 'Message envoyé avec succès.')
  cy.on('window:alert', () => {
    throw new Error('Une fenêtre d\'alerte s\'est affichée !');
  });
})

S’il y a une faille, vous allez voir un pop-up alert(‘XSS’). Dans le cas du formulaire de Tech&Buy, il ne semble pas contenir de faille XSS. 

Maîtrisez les hooks

Les hooks dans Cypress sont des fonctions spéciales qui vous permettent d'effectuer des actions avant ou après l'exécution de certaines étapes dans vos tests. Ils sont utilisés pour : 

• configurer l'environnement ;

• initialiser des données ;

• nettoyer des ressources ;

• ou effectuer d'autres tâches spécifiques. 

Les hooks aident à maintenir un code de test organisé, réutilisable et efficace.

Voici quelques types de hooks couramment utilisés dans Cypress :

1. before et after : Ces hooks s'exécutent avant et après l'ensemble de vos tests. Ils sont utiles pour des tâches globales comme la configuration initiale et le nettoyage intégral.

before(() => {
// Configuration initiale, par exemple : se connecter à l'application
});


after(() => {
// Nettoyage global, par exemple : se déconnecter et fermer l'application
});

2. beforeEach et afterEach : Ces hooks s'exécutent avant et après chaque test individuel. Ils sont utilisés pour configurer l'état de départ et nettoyer après chaque test.

beforeEach(() => {
// Configuration avant chaque test, par exemple : réinitialiser les données
});


afterEach(() => {
// Nettoyage après chaque test, par exemple : restaurer l'état initial
});

3. beforeAll et afterAll : Ces hooks s'exécutent avant le premier test et après le dernier test d'une suite donnée. Ils sont utiles pour des tâches globales avant de commencer les tests d'une suite et pour le nettoyage final.

beforeAll(() => {
// Tâches globales avant le premier test, par exemple : chargement de données
});


afterAll(() => {
// Nettoyage final après le dernier test, par exemple : sauvegarder les données
});

4. context : Ce hook permet de créer des groupes de tests logiquement organisés. Il peut être utilisé pour encapsuler des étapes communes.

 context('Cas de test pour une fonctionnalité spécifique', () => {
 beforeEach(() => {
  // Configuration spécifique pour ce groupe de tests
 });


 it('Test 1', () => {
  // Test spécifique 
 });


 it('Test 2', () => {
  // Test spécifique
 });


 afterEach(() => {
  // Nettoyage spécifique après chaque test de ce groupe
 });
});

En utilisant les hooks de Cypress, vous pouvez donc :

• structurer vos tests de manière modulaire ;

• éviter la duplication de code ;

• configurer et nettoyer l'environnement de test de manière cohérente ;

• maintenir un flux de travail efficace dans le développement automatisé.

Prenons l’exemple du hook before pour se connecter à l’application. 

Vous pouvez placer le hook before de plusieurs manières :

1. Au niveau global : Vous pouvez le placer au niveau global dans le fichier de configuration cypress/support/index.js pour qu'il s'exécute avant tous les tests de votre suite. Voici un exemple :

// dans le fichier cypress/support/index.js

before(() => { 
// Code à exécuter avant tous les tests 
});

2. Au niveau du bloc describe : Vous pouvez également le placer au niveau d'un bloc describe spécifique pour qu'il s'exécute avant tous les tests contenus dans ce bloc. Par exemple :

describe("Suite de tests", () => {
 // Avant chaque test dans cette suite
 beforeEach(() => {
  // Code avant chaque test
 });
 

 before(() => {
  // Code à exécuter avant tous les tests de cette suite
 });


 it("Test 1", () => {
  // Test 1
 });


 it("Test 2", () => {
  // Test 2
 });
});

3. Au niveau du bloc it : Si vous avez besoin d'un hook before spécifique à un test particulier, vous pouvez le placer directement au niveau de ce test. Par exemple :

it("Test avec before", () => {
 // Test avec son propre before
 // Ce code sera exécuté avant ce test spécifique
before(() => {
  // Code à exécuter avant ce test
 });
});

La bonne pratique de Cypress est de nettoyer l’état de vos tests avant l’exécution de vos tests et donc, de ne pas utiliser after ou afterEach pour nettoyer l’état. 

Allez plus loin avec les spies et les stubs

Dans Cypress, les spies et les stubs sont des fonctionnalités qui permettent de gérer et de contrôler le comportement des appels de fonction et des requêtes réseau pendant les tests automatisés. Ces fonctionnalités sont essentielles pour simuler des comportements spécifiques et isoler les dépendances externes lors de l'exécution des tests.

Un spy (espion) est utilisé pour "espionner" une fonction existante pour voir comment elle est appelée pendant l'exécution des tests sans la modifier. L'idée est d'observer les appels à cette fonction et d'enregistrer des informations à leur sujet, telles que le nombre d'appels, les arguments utilisés et les valeurs de retour. Cela permet de vérifier si la fonction est appelée correctement et de mieux comprendre son comportement pendant le test.

Un stub (substitut) est utilisé pour remplacer une fonction existante par une implémentation alternative pendant l'exécution des tests. Cela vous permet de contrôler le comportement d’une fonction et de simuler différentes situations, comme des réponses de requêtes réseau simulées, sans effectuer réellement ces requêtes. Les stubs vous sont utiles pour créer des scénarios spécifiques sans dépendre d'un serveur externe ou pour simuler des erreurs réseau, par exemple.

 Pour en savoir plus sur les spies et les stubs, consultez la documentation Cypress.

À vous de jouer !

Pour cet exercice, vous devez tester que le formulaire ne s’envoie pas quand il est vide.

Créez votre cas de test.

Indice : vous allez avoir besoin des assertions should(‘have.class’) et should(‘not.exist’). 

Consultez la suggestion de corrigé.

En résumé

• Pour respecter les bonnes pratiques de Cypress, il faut ajouter les sélecteurs dans le code.

• Vous pouvez tester des notions de cybersécurité (faille XSS) avec Cypress.  

• Les hooks de Cypress sont des fonctions spéciales qui permettent d'exécuter des actions avant ou après des étapes spécifiques dans les tests. Ils aident à configurer, nettoyer et structurer l'environnement de test pour maintenir des tests organisés, réutilisables et efficaces.

• Le spy est utilisé pour observer et enregistrer les appels d'une fonction sans la modifier, tandis que le stub est utilisé pour remplacer la fonction par une implémentation alternative afin de contrôler son comportement pendant les tests.           

Vous en savez maintenant plus sur les bonnes pratiques de Cypress, mais comment tester des API ? Vous allez le voir tout de suite dans un nouveau chapitre !