M

MLOG

Français

Un guide complet de Cypress, le puissant framework de test end-to-end, couvrant l'installation, l'écriture de tests, le débogage, l'intégration CI/CD et les bonnes pratiques.

Cypress : Le Guide Ultime des Tests End-to-End pour les Applications Web

Dans le paysage en évolution rapide du développement web d'aujourd'hui, assurer la qualité et la fiabilité des applications web est primordial. Le test End-to-End (E2E) joue un rôle crucial dans la vérification que tous les composants d'une application fonctionnent ensemble de manière transparente du point de vue de l'utilisateur. Cypress est apparu comme un framework de test E2E de premier plan, offrant une expérience conviviale pour les développeurs, des fonctionnalités puissantes et d'excellentes performances. Ce guide complet vous guidera à travers tout ce que vous devez savoir pour démarrer avec Cypress et tester efficacement vos applications web.

Qu'est-ce que Cypress ?

Cypress est un outil de test front-end de nouvelle génération conçu pour le web moderne. Contrairement aux frameworks de test traditionnels qui exécutent les tests dans un navigateur, Cypress fonctionne directement dans le navigateur, vous offrant un contrôle et une visibilité inégalés sur le comportement de votre application. Il est conçu pour être rapide, fiable et facile à utiliser, ce qui en fait un choix populaire auprès des développeurs et des ingénieurs QA du monde entier. Cypress est écrit en JavaScript et s'exécute dans le navigateur, ce qui le rend très performant et offre un accès inégalé aux éléments internes de l'application.

Principaux avantages de l'utilisation de Cypress

Installation et configuration

Il est simple de démarrer avec Cypress. Voici comment l'installer :

  1. Prérequis : Assurez-vous que Node.js et npm (Node Package Manager) sont installés sur votre système. Vous pouvez les télécharger depuis le site web officiel de Node.js.
  2. Installer Cypress : Ouvrez votre terminal ou votre invite de commandes, accédez au répertoire de votre projet et exécutez la commande suivante :
    3. npm install cypress --save-dev
  3. Ouvrir Cypress : Une fois l'installation terminée, vous pouvez ouvrir le Cypress Test Runner en exécutant :
    4. npx cypress open

    Cette commande lancera le Cypress Test Runner, qui fournit une interface graphique pour exécuter et déboguer vos tests.

Écrire votre premier test Cypress

Créons un test simple pour vérifier que la page d'accueil d'un site web se charge correctement. Créez un nouveau fichier nommé `example.cy.js` dans le répertoire `cypress/e2e` de votre projet.


// cypress/e2e/example.cy.js

describe('Mon Premier Test', () => {
  it('Visite le Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

Décomposons ce test :

Exécutez ce test dans le Cypress Test Runner pour le voir en action. Vous devriez voir le navigateur naviguer vers le site web Cypress Kitchen Sink, cliquer sur le lien « type » et vérifier l'URL.

Commandes Cypress

Cypress fournit un large éventail de commandes pour interagir avec votre application. Voici quelques-unes des commandes les plus couramment utilisées :

Ce ne sont là que quelques-unes des nombreuses commandes disponibles dans Cypress. Reportez-vous à la documentation de Cypress pour une liste complète des commandes et de leurs options.

Assertions dans Cypress

Les assertions sont utilisées pour vérifier le comportement attendu de votre application. Cypress fournit un ensemble riche d'assertions intégrées que vous pouvez utiliser pour vérifier l'état des éléments, l'URL, le titre, etc. Les assertions sont chaînées après les commandes Cypress à l'aide de la méthode `.should()`.

Voici quelques exemples d'assertions courantes :

Vous pouvez également créer des assertions personnalisées pour répondre à vos besoins spécifiques.

Meilleures pratiques pour l'écriture de tests Cypress

Le respect des meilleures pratiques peut vous aider à écrire des tests Cypress plus maintenables, fiables et efficaces. Voici quelques recommandations :

Techniques avancées de Cypress

Stubbing et Mocking

Cypress vous permet de simuler des requêtes et des réponses réseau, vous permettant de simuler différents scénarios et de tester la gestion des erreurs de votre application. Ceci est particulièrement utile pour tester les fonctionnalités qui dépendent d'API ou de services externes.

Pour simuler une requête réseau, vous pouvez utiliser la commande `cy.intercept()`. Par exemple, le code ci-dessous simule une requête GET vers `/api/users` et renvoie une réponse simulée :


cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
}).as('getUsers')

Vous pouvez ensuite attendre la requête interceptée à l'aide de `cy.wait('@getUsers')` et vérifier que votre application gère correctement la réponse simulée.

Travailler avec le stockage local et les cookies

Cypress fournit des commandes pour interagir avec le stockage local et les cookies. Vous pouvez utiliser ces commandes pour définir, obtenir et effacer le stockage local et les cookies dans vos tests.

Pour définir un élément de stockage local, vous pouvez utiliser la commande `cy.window()` pour accéder à l'objet window, puis utiliser la méthode `localStorage.setItem()`. Par exemple :


cy.window().then((win) => {
  win.localStorage.setItem('myKey', 'myValue')
})

Pour obtenir un élément de stockage local, vous pouvez utiliser la commande `cy.window()` puis utiliser la méthode `localStorage.getItem()`. Par exemple :


cy.window().then((win) => {
  const value = win.localStorage.getItem('myKey')
  expect(value).to.equal('myValue')
})

Pour définir un cookie, vous pouvez utiliser la commande `cy.setCookie()`. Par exemple :


cy.setCookie('myCookie', 'myCookieValue')

Pour obtenir un cookie, vous pouvez utiliser la commande `cy.getCookie()`. Par exemple :


cy.getCookie('myCookie').should('have.property', 'value', 'myCookieValue')

Gestion des téléchargements de fichiers

Cypress fournit un plugin appelé `cypress-file-upload` qui simplifie les téléchargements de fichiers dans vos tests. Pour installer le plugin, exécutez la commande suivante :

npm install -D cypress-file-upload

Ensuite, ajoutez la ligne suivante à votre fichier `cypress/support/commands.js` :


import 'cypress-file-upload';

Vous pouvez ensuite utiliser la commande `cy.uploadFile()` pour télécharger un fichier. Par exemple :


cy.get('input[type="file"]').attachFile('example.txt')

Travailler avec des IFrames

Tester des IFrames peut être délicat, mais Cypress fournit un moyen d'interagir avec eux. Vous pouvez utiliser la commande `cy.frameLoaded()` pour attendre qu'un IFrame se charge, puis utiliser la commande `cy.iframe()` pour obtenir l'objet document de l'IFrame.


cy.frameLoaded('#myIframe')
cy.iframe('#myIframe').find('button').click()

Cypress et l'intégration continue/le déploiement continu (CI/CD)

L'intégration de Cypress dans votre pipeline CI/CD est essentielle pour assurer la qualité de votre application. Vous pouvez exécuter des tests Cypress en mode sans affichage dans votre environnement CI/CD. Voici comment :

  1. Installer Cypress : S'assurer que Cypress est installé en tant que dépendance dans votre projet.
  2. Configurer CI/CD : Configurer votre pipeline CI/CD pour exécuter les tests Cypress après chaque build.
  3. Exécuter Cypress sans affichage : Utiliser la commande `cypress run` pour exécuter les tests Cypress en mode sans affichage.

Exemple de configuration CI/CD (à l'aide de GitHub Actions) :


name: Cypress Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm install
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

Cette configuration exécutera les tests Cypress chaque fois que du code est envoyé à la branche `main` ou qu'une demande d'extraction est créée par rapport à la branche `main`. L'action `cypress-io/github-action` simplifie le processus d'exécution des tests Cypress dans GitHub Actions.

Débogage des tests Cypress

Cypress fournit d'excellents outils de débogage pour vous aider à identifier et à résoudre les problèmes dans vos tests. Voici quelques conseils pour le débogage des tests Cypress :

Cypress vs. Autres frameworks de test

Bien que Cypress soit un framework de test end-to-end puissant, il est essentiel de comprendre comment il se compare à d'autres options populaires. Voici un bref aperçu :

Le choix du framework dépend des besoins et des exigences spécifiques de votre projet. Cypress est un excellent choix pour les applications web modernes qui nécessitent des tests end-to-end rapides, fiables et conviviaux pour les développeurs.

Exemples concrets de Cypress en action

Explorons quelques exemples concrets de la façon dont Cypress peut être utilisé pour tester différents types d'applications web :

Test d'une application de commerce électronique

Vous pouvez utiliser Cypress pour tester divers flux d'utilisateurs dans une application de commerce électronique, tels que :

Voici un exemple de test Cypress qui vérifie qu'un utilisateur peut ajouter un produit à son panier avec succès :


it('Ajoute un produit au panier', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

Test d'une application de médias sociaux

Vous pouvez utiliser Cypress pour tester les interactions des utilisateurs dans une application de médias sociaux, telles que :

Voici un exemple de test Cypress qui vérifie qu'un utilisateur peut créer une nouvelle publication avec succès :


it('Crée une nouvelle publication', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Hello, world!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Hello, world!')
})

Test d'une application bancaire

Pour les applications bancaires, Cypress peut être utilisé pour tester des fonctionnalités essentielles telles que :

Un test pour vérifier un transfert de fonds pourrait ressembler à ceci (avec une simulation appropriée pour la sécurité) :


it('Transfère des fonds avec succès', () => {
  cy.visit('/transfer')
  cy.get('#recipient-account').type('1234567890')
  cy.get('#amount').type('100')
  cy.intercept('POST', '/api/transfer', { statusCode: 200, body: { success: true } }).as('transfer')
  cy.get('#transfer-button').click()
  cy.wait('@transfer')
  cy.get('.success-message').should('be.visible')
})

Conclusion

Cypress est un framework de test end-to-end puissant et polyvalent qui peut vous aider à assurer la qualité et la fiabilité de vos applications web. Son API conviviale pour les développeurs, ses fonctionnalités puissantes et ses excellentes performances en font un choix populaire auprès des développeurs et des ingénieurs QA du monde entier. En suivant les meilleures pratiques décrites dans ce guide, vous pouvez écrire des tests Cypress efficaces qui vous aideront à détecter les bogues tôt dans le processus de développement et à fournir des logiciels de haute qualité à vos utilisateurs.

À mesure que les applications web continuent d'évoluer, l'importance des tests end-to-end ne fera qu'augmenter. Adopter Cypress et l'intégrer à votre flux de travail de développement vous permettra de créer des expériences web plus robustes, fiables et conviviales.