une nouvelle génération de tests de bout en bout / Blogs / Perficient

Qu’est-ce que le cyprès

Cypress est un framework de test de bout en bout (e2e) moderne basé sur JavaScript, conçu pour automatiser les tests Web en exécutant des tests directement dans le navigateur. Cypress est devenu un outil populaire pour les applications Web en raison d’un certain nombre d’avantages distinctifs tels qu’une interface conviviale, une exécution rapide des tests, la facilité de débogage, la facilité d’écriture de tests, etc.

Ceux qui ont déjà eu une expérience avec ce framework de test connaissent probablement ses avantages, qui permettent de garantir que les projets sont couverts par des autotests fiables et de haute qualité. Cypress dispose d’une documentation bien développée, l’une des meilleures du secteur, avec des recommandations utiles pour les débutants, qui sont constamment améliorées, ainsi que d’une vaste communauté d’utilisateurs. Cependant, malgré la commodité, la simplicité et un démarrage rapide, lorsque nous parlons de tests Cypress, nous parlons toujours du code. À cet égard, pour travailler efficacement, le personnage derrière Cypress nécessite non seulement une compréhension des tests logiciels en tant que tels, mais aussi les bases de la programmation, et être plus ou moins à l’aise avec JavaScript/TypeScript.

Pourquoi Cyprès

En règle générale, pour tester vos applications, vous devrez suivre les étapes suivantes :

• Lancez l’application
• Attendez que le serveur démarre
• Effectuer des tests manuels de l’application (en cliquant sur les boutons, saisissez un texte aléatoire dans les champs de saisie ou soumettez un formulaire)
• Validez que le résultat de votre test est correct (tels que des changements de titre, d’une partie du texte, etc.)
• Répétez ces étapes après de simples modifications de code.

Répéter ces étapes encore et encore devient fastidieux et prend trop de temps et d’énergie. Et si nous pouvions automatiser ce processus de test ? Grâce à cela, vous pouvez vous concentrer sur des choses plus importantes et ne pas perdre de temps à tester l’interface utilisateur encore et encore.

C’est là que Cypress entre en jeu. Lorsque vous utilisez Cypress, la seule chose que vous devez faire est :

• Écrivez le code de votre test (cliquer sur un bouton, saisir du texte dans les champs de saisie, etc.)
• Démarrer le serveur
• Exécuter ou réexécuter le test

C’est ça! La bibliothèque Cypress s’occupe de tous les tests pour vous. Il vous indique non seulement si tous vos tests ont réussi ou non, mais il indique également quel test a échoué et pourquoi exactement.

Et le sélénium ?

Attendez, mais nous avons déjà Selenium, est-ce toujours d’actualité ?

Selenium est resté le roi des tests automatisés pendant plus d’une décennie. Je me souviens de moi-même en 2015, créant un puissant wrapper d’interface utilisateur pour Selenium WebDriver afin d’automatiser et de simplifier ses opérations pour les utilisateurs non techniques. L’application est nommée fardeau et est toujours disponible avec son code source. Mais en ce qui concerne Cypress – il offre déjà une interface utilisateur puissante dès la sortie de la boîte, et bien plus d’outils et d’intégrations utiles – continuez simplement à lire pour le trouver ci-dessous.

Le cyprès est le La prochaine génération plateforme de tests Web. Il a été développé sur la base de Mocha et est un framework de test de bout en bout basé sur JavaScript. C’est en cela que cela diffère de Selenium, qui est un framework de test utilisé pour l’automatisation du navigateur Web. Selenium WebDriver contrôle le navigateur localement ou à distance et est utilisé pour tester l’automatisation de l’interface utilisateur.

La principale différence est que Cypress s’exécute directement dans le navigateur, tandis que Selenium est externe au navigateur et le contrôle via WebDriver. Cela seul permet à Cypress de gérer parfaitement les opérations et les attentes asynchrones, qui étaient toujours des problèmes pour Selenium et nécessitaient un échafaudage maladroit autour de la gestion des erreurs associées.

Dans cet esprit, comparons Cypress vs Selenium ligne par ligne :

Selenium s’adresse davantage aux spécialistes de l’automatisation de l’assurance qualité, tandis que Cypress s’adresse uniquement aux développeurs pour améliorer l’efficacité du TDD. Selenium a été introduit en 2004, il bénéficie donc d’un plus grand soutien écosystémique que Cypress, qui a été développé en 2015 et continue de se développer.

Installation et première exécution

Vous devez avoir Node.js et comme Cypress est livré avec le module npm.

npm -i init
npm install cypress -- save -dev

Avec Cypress lui-même, vous souhaiterez probablement installer le plugin XPath, sinon vous êtes limité aux seuls localisateurs CSS.

npm install -D cypress-xpath

Une fois prêt, vous pouvez l’exécuter :

npx cypress open

De là, vous verrez deux écrans : Tests E2E et Tests de composants.

La plupart du temps, vous aurez probablement affaire à des tests E2E. En gros, c’est là que vous choisissez le navigateur souhaité et exécutez vos tests :

Par défaut, vous trouverez une documentation en direct sous la forme d’un ensemble de tests pré-écrits utiles exposant le meilleur de l’API Cypress en action. N’hésitez pas à modifier, copier et coller selon vos besoins.

Voici comment Cypress exécute les tests à partir de l’interface utilisateur sur un exemple d’exécution de test :

Mais bien sûr, dans un scénario basique, vous pouvez l’exécuter à partir de la console. Vous pouvez même transmettre un fichier de spécifications de test spécifique à exécuter :

npx cypress run --spec .\cypress\e2e\JumpStart\JumpStart.cy.js

Test des composants

Cette fonctionnalité a été récemment ajoutée et est restée longtemps en avant-première. Maintenant, une fois la version bêta terminée, jetons un coup d’œil à ce qu’est le test de composants.

Au lieu de travailler avec l’ensemble de l’application, grâce aux tests de composants, vous pouvez simplement connecter un composant de manière isolée. Cela vous fera gagner du temps en téléchargeant uniquement les pièces qui vous intéressent, et vous permettra de tester beaucoup plus rapidement. Vous pouvez également tester différentes propriétés du même composant et voir comment elles s’affichent. Cela peut être très utile dans les situations où de petits changements affectent une grande partie de l’application.

En plus d’initialiser les paramètres, Cypress créera plusieurs fichiers de support, l’un des plus importants est component.tssitué dans le dossier cypress/support.

import { mount } from 'cypress/react18'
 
declare global {
 namespace Cypress {
   interface Chainable {
     mount: typeof mount
   }
 }
}
 
Cypress.Commands.add('mount', mount)
 
// Example of usage:
// cy.mount(MyComponent)

Ce fichier contient la fonction de montage de composants pour le framework utilisé. Cypress prend en charge React, Angular, Svelte, Vue et même des frameworks comme Next.js et Nuxt.

Caractéristiques du cyprès

1. Voyage dans le temps
2. Débogabilité
3. Attentes automatiques (attentes intégrées)
4. Résultats de cohérence
5. Captures d’écran et vidéos
6. Tests multi-navigateurs – localement ou à distance

Je souhaite me concentrer sur certaines de ces fonctionnalités.

Voyage dans le temps. Il s’agit d’une fonctionnalité impressionnante qui vous permet de voir l’état actuel de votre application à tout moment pendant qu’elle est testée.

Débogabilité. Votre code de test Cypress s’exécute dans la même boucle d’exécution que votre application. Cela signifie que vous avez accès au code exécuté sur la page, ainsi qu’aux éléments que le navigateur met à votre disposition, comme document, windowet debugger. Vous pouvez également tirer parti .debug() fonction pour inspecter rapidement n’importe quelle partie de votre application pendant l’exécution d’un test. Attachez-le simplement à n’importe quelle chaîne de commandes Cypress pour avoir un aperçu de l’état du système à ce moment-là :

it('allows debugging like a pro', () => {
  cy.visit('/location/page')
  cy.get('[data-id="selector"]').debug()
})

Attentes automatiques. C’est un avantage clé par rapport à Selenium, Cypress est intelligent pour connaître la vitesse à laquelle un élément s’anime et attendra qu’il cesse de s’animer avant d’agir contre lui. Il attendra également automatiquement qu’un élément devienne visible, soit activé ou qu’un autre élément ne le recouvre plus.

Résultats de cohérence. En raison de son architecture et des nuances d’exécution, Cypress contrôle entièrement l’ensemble du processus d’automatisation de haut en bas, ce qui le place dans la position unique de pouvoir comprendre tout ce qui se passe dans et en dehors du navigateur. Cela signifie que Cypress est capable de fournir des résultats plus cohérents que tout autre externe outil de test.

Captures d’écran et vidéos. Cypress peut travailler sur des captures d’écran et des vidéos. On peut capturer à la fois la page complète et la capture d’écran d’un élément particulier avec la commande de capture d’écran dans Cypress. Cypress dispose également de la fonctionnalité intégrée permettant de capturer les captures d’écran des tests ayant échoué. Pour capturer une capture d’écran d’un scénario particulier, nous utilisons la commande capture d’écran.

describe('Test with a screenshot', function () {
   it("Test case 1", function () {
      //navigate URL
      cy.visit("https://microsoft.com/windows")

      //complete page screenshot with filename - CompletePage
      cy.screenshot('CompletePage')

      //screenshot of particular element
      cy.get(':nth-child(3) > section').screenshot()
   });
});

Les captures d’écran produites apparaissent dans le dossier captures d’écran (dans le dossier plugins) du projet, mais cela est configurable à partir des paramètres globaux.

La capture vidéo Cypress s’exécute pour les tests. Activez-le depuis cypress.config.ts :

import { defineConfig } from 'cypress'

export default defineConfig({
  video: true,
})

Veuillez vous référer au fonctionnaire Documentation qui explique comment utiliser des captures d’écran et des vidéos avec Cypress.

Intégration des actions GitHub

Cypress permet bien d’exécuter des tests dans Cypress à l’aide de GitHub Actions.

Pour ce faire sur le serveur GitHub Action, vous devez d’abord installer tout le nécessaire. Nous devons également déterminer quand nous voulons exécuter des tests (par exemple, exécutez-les à la demande ou à chaque fois qu’un nouveau code est introduit). C’est ainsi que nous définissons progressivement à quoi ressembleront les actions GitHub. Dans GitHub Actions, ces plans sont appelés « workflows ». Les fichiers de workflow se trouvent sous .github/workflows dossier. Chaque fichier est un YAML avec un ensemble de règles configurant quoi et comment sera exécuté :

name: e2e-tests
on: [push]
jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          start: npm start

Regardons ce qui se passe dans ce fichier. Sur la première ligne, nous donnons un nom à l’action. Cela peut être n’importe quoi, mais il vaut mieux être descriptif.

Sur la première ligne, nous donnons un nom à l’action. Dans la deuxième ligne nous définissons l’événement sur lequel ce script doit être exécuté. Il existe de nombreux événements différents, tels que push, pull_request, scheduleou workflow_dispatch (qui permettent de déclencher une action manuellement).

La troisième ligne précise la ou les tâches à effectuer. Ici, nous devons déterminer ce qui doit être fait. Si nous partions de zéro, c’est ici que nous courrions npm install pour installer toutes les dépendances, exécuter l’application et exécuter des tests dessus. Mais comme vous pouvez le constater, nous ne partons pas de zéro, mais utilisons des actions prédéfinies. Au lieu de cela, nous pouvons réutiliser des macros créées précédemment. Par exemple, cypress-io/github-action@v5 exécutera npm install, mettra correctement en cache Cypress (donc l’installation sera plus rapide la prochaine fois), démarrez l’application avec npm start et exécutez npx cypress run. Et tout cela avec seulement quatre lignes dans un fichier YAML.

Limites du cyprès

Rien n’est idéal sur Terre, Cypress présente donc également certaines limitations principalement dues à son architecture unique :

1. On ne peut pas utiliser Cypress pour piloter deux navigateurs en même temps
2. Il ne prend pas en charge les multi-onglets
3. Cypress prend uniquement en charge JavaScript pour créer des cas de test
4. Cypress ne prend pas en charge les navigateurs comme Safari et IE pour le moment
5. Lire ou écrire des données dans des fichiers est difficile
6. Prise en charge limitée des iFrames

Conclusion

Les tests sont une étape clé du processus de développement car ils garantissent le bon fonctionnement de votre application. Certains programmeurs préfèrent tester manuellement leurs programmes car l’écriture de tests nécessite beaucoup de temps et d’énergie. Heureusement, Cypress a résolu ce problème en permettant au développeur d’écrire des tests en peu de temps.