Nuxt.js 3 : Automatisation des tests de bout en bout avec Cypress

Mise à jour le 25 Nov 2024

Introduction

Dans un environnement de développement web toujours plus complexe et interactif, garantir la qualité et la fiabilité des applications est essentiel. Les tests de bout en bout (E2E) jouent un rôle clé en validant le fonctionnement global de l’application, depuis l’interface utilisateur jusqu’aux systèmes sous-jacents, en reproduisant les actions réelles des utilisateurs. Parmi les outils les plus performants pour automatiser ces tests, Cypress se distingue par sa simplicité d’utilisation, sa rapidité et ses fonctionnalités avancées, offrant ainsi une solution idéale pour optimiser le processus de vérification.

Prérequis

Avant de commencer, il est essentiel d’avoir un projet Nuxt.js 3 déjà initialisé avec un formulaire d’inscription fonctionnel. Si besoin, référez-vous à nos articles Initialisation d’un projet Nuxt.js 3 optimisé avec Bootstrap et Création d’un formulaire d’inscription avec Vee-Validate, où nous abordons la mise en place du projet ainsi que la configuration d’un formulaire robuste et validé dynamiquement.

Use Case

Nous allons utiliser Cypress pour automatiser les tests end-to-end et valider le bon fonctionnement des principales fonctionnalités d’une application Nuxt.js. Ces tests se concentrent sur deux aspects essentiels :

1. Vérification de la page d’accueil, afin de s’assurer que la page s’affiche correctement avec les éléments essentiels, tels que le titre, garantissant ainsi une première impression fluide et satisfaisante pour l’utilisateur.
2. Tests complets du formulaire d’inscription, en vérifiant que tous les champs requis, notamment le nom d’utilisateur, l’e-mail, le mot de passe et la confirmation du mot de passe, sont visibles et accessibles. Les tests valident également l’inscription d’un utilisateur avec des données conformes, en assurant un retour positif ou une redirection correcte. De plus, la gestion des erreurs est vérifiée pour des cas invalides, comme un format d’e-mail incorrect ou des mots de passe non correspondants.

En combinant ces scénarios, Cypress reproduit les interactions utilisateur réelles, depuis la consultation de la page d’accueil jusqu’à l’utilisation des fonctionnalités clés, comme l’inscription. Cette approche permet d’assurer une expérience utilisateur fluide, d’identifier les anomalies avant la mise en production et de renforcer la qualité globale de l’application.

Installation

Pour installer Cypress dans votre projet, exécutez la commande suivante dans votre terminal à la racine de votre projet :

yarn add cypress --dev

Cette commande ajoute Cypress en tant que dépendance de développement (--dev) dans votre fichier package.json.

Configuration

Après l’installation, un dossier cypress sera créé à la racine de votre projet. Il comprend :

• fixtures/ : Stocke des données statiques utilisées dans les tests.
• e2e/ : Contient les fichiers de tests E2E.
• support/ : Regroupe des fichiers pour configurer Cypress et ajouter des fonctions réutilisables.

Ajoutez un fichier cypress.config.js à la racine du projet avec la configuration suivante :

import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000', // The URL of your Nuxt.js application
    setupNodeEvents(on, config) {
      // Add plugins or event listeners here if needed
    },
  },
});

Le fichier définit la configuration de Cypress pour l’application, en spécifiant l’URL de base comme http://localhost:3000 et en permettant l’ajout de plugins ou d’événements personnalisés via la fonction setupNodeEvents.

Création des Scripts de Test

La prochaine étape consiste à créer des scripts de test dans le dossier cypress/e2e, qui est l’emplacement par défaut pour organiser les tests de bout en bout dans Cypress. Ce dossier contiendra les scripts qui simuleront les interactions des utilisateurs avec votre application et permettront de valider le bon fonctionnement des principales fonctionnalités.

Créez un fichier index.cy.js dans le dossier cypress/e2e pour tester l’affichage de la page d’accueil. Ce test vérifiera que la page se charge correctement et que le titre attendu est bien présent.

describe('Dashboard Page', () => {
  it('Should visit the dashboard and check if the title is correct', () => {
    cy.visit('/') // URL of the dashboard page
    cy.contains('Introduction') // Verify specific text
  })
})

Pour tester le formulaire d’inscription, créez un fichier signin.cy.js dans le dossier cypress/e2e. Ce test vérifie si le formulaire s’affiche correctement, si les champs sont accessibles et si l’inscription fonctionne avec des données valides ou non valides.

describe('Sign Up Form Test', () => {
  beforeEach(() => {
    // Visit the signup form page
    cy.visit('http://localhost:3000/signup') // Replace with the URL of your signup page
  })

  it('should display the signup form correctly', () => {
    // Verify that the form fields are present
    cy.get('input[name="username"]').should('be.visible')
    cy.get('input[name="email"]').should('be.visible')
    cy.get('input[name="password"]').should('be.visible')
    cy.get('input[name="confirmPassword"]').should('be.visible')
    cy.get('button[type="submit"]').should('be.visible')
  })

  it('should register a user successfully', () => {
    // Fill in the fields with valid data
    cy.get('input[name="username"]').type('testuser')
    cy.wait(1000) // Wait 1 second
    cy.get('input[name="email"]').type('[email protected]')
    cy.wait(1000) // Wait 1 second
    cy.get('input[name="password"]').type('Password123!')
    cy.wait(1000) // Wait 1 second
    cy.get('input[name="confirmPassword"]').type('Password123!')
    cy.wait(1000) // Wait 1 second

    // Submit the form
    cy.get('button[type="submit"]').click()

    // Verify redirection or success message appearance
    // Replace the line below with what matches the redirection or success message in your app
    // cy.url().should('include', '/') // For example, the user's dashboard URL after successful signup
    cy.contains('Sign Up').should('be.visible') // Verify the page displays a welcome message
  })

  it('should show an error for invalid email format', () => {
    // Fill in the form with an invalid email
    cy.get('input[name="username"]').type('testuser')
    cy.wait(1000) // Wait 1 second
    cy.get('input[name="email"]').type('invalid-email')
    cy.wait(1000) // Wait 1 second
    cy.get('input[name="password"]').type('Password123!')
    cy.wait(1000) // Wait 1 second
    cy.get('input[name="confirmPassword"]').type('Password123!')
    cy.wait(1000) // Wait 1 second

    // Submit the form
    cy.get('button[type="submit"]').click()

    // Verify the error message for the invalid email
    cy.contains('Invalid email address.').should('be.visible') // Replace with your app's specific error message
  })

  it('should show an error for password mismatch', () => {
    // Fill in the form with mismatched passwords
    cy.get('input[name="username"]').type('testuser')
    cy.wait(1000) // Wait 1 second
    cy.get('input[name="email"]').type('[email protected]')
    cy.wait(1000) // Wait 1 second
    cy.get('input[name="password"]').type('Password123!')
    cy.wait(1000) // Wait 1 second
    cy.get('input[name="confirmPassword"]').type('DifferentPassword123!')
    cy.wait(1000) // Wait 1 second

    // Submit the form
    cy.get('button[type="submit"]').click()

    // Verify the error message for mismatched passwords
    cy.contains('Passwords do not match.').should('be.visible') // Replace with your app's specific error message
  })
})

  

Ces tests utilisent plusieurs commandes Cypress pour simuler des interactions avec l’interface utilisateur et valider les comportements attendus. La commande cy.visit(url) permet de charger la page du formulaire d’inscription en utilisant l’URL spécifiée. Ensuite, cy.get(selector) est utilisée pour sélectionner les éléments HTML, comme les champs de saisie, en fonction de leur sélecteur CSS. cy.contains(text) permet de vérifier la présence d’un élément contenant un texte spécifique, par exemple, un message de succès ou d’erreur. Pour simuler des actions de l’utilisateur, cy.type(value) est utilisée pour entrer des valeurs dans les champs de saisie, tandis que cy.click() simule un clic sur un élément, comme le bouton de soumission du formulaire. Ces commandes combinées assurent que le formulaire se comporte comme prévu, en vérifiant tant les interactions utilisateur que la gestion des erreurs, ce qui renforce la fiabilité du processus d’inscription.

Exécution des Tests

Pour exécuter vos tests, lancez la commande suivante :

npx cypress open

Cela ouvrira une interface graphique intuitive qui vous permettra de sélectionner et d’exécuter vos tests de manière interactive, facilitant ainsi le processus de validation et de débogage de votre application.

Conclusion

En intégrant Cypress dans votre projet Nuxt.js 3, vous gagnez en confiance dans la qualité de votre application en vérifiant que toutes ses fonctionnalités critiques fonctionnent comme prévu. Cypress simplifie le processus de test grâce à une syntaxe claire, une interface intuitive, et un débogage en temps réel. Avec des tests automatisés, vous pouvez rapidement identifier et corriger les erreurs, réduisant ainsi les risques de déploiement et améliorant l’expérience utilisateur globale.

Alors, qu’attendez-vous pour tester votre application ? 😊

Mame Diarra Diouf

Développeuse Full-Stack à Applize * [email protected] *  Plus de publicationsBiographie

Développeuse Full-Stack avec une spécialisation dans les technologies web et une solide compréhension des enjeux climatiques. Diplômée de l'université Joseph Ki-Zerbo, Ouagadougou, Burkina en Informatique et Changement Climatique. Passionné par la création de solutions innovantes pour lutter contre le changement climatique. Compétences avancées en programmation et en analyse de données, associées à une expérience approfondie dans la modélisation climatique et la recherche scientifique.

• Mame Diarra Diouf

  https://applize.io/author/mame-diarra-diouf/

  

  20 novembre 2024

  Nuxt.js 3 : Optimiser votre site pour le multilingue avec i18n
• Mame Diarra Diouf

  https://applize.io/author/mame-diarra-diouf/

  

  13 novembre 2024

  Nuxt.js 3 : Gestion des États avec Pinia
• Mame Diarra Diouf

  https://applize.io/author/mame-diarra-diouf/

  

  31 octobre 2024

  Nuxt.js 3 : Layout par Défaut avec Navbar et Sidebar Dynamique
• Mame Diarra Diouf

  https://applize.io/author/mame-diarra-diouf/

  

  8 octobre 2024

  Nuxt.js 3 : Création d’un formulaire d’inscription avec Vee-Validate