Cypress est un framework de test robuste de bout en bout conçu pour les applications Web. Il est conçu pour rendre les tests simples et fiables, permettant aux développeurs et aux ingénieurs QA de tout tester, des interactions simples aux flux de travail utilisateur complexes. Avec Cypress, vous pouvez créer des tests qui simulent les actions des utilisateurs, vérifier les comportements front-end et garantir la fonctionnalité de l'interface utilisateur avec une configuration minimale.

À quoi sert le cyprès ?

Cypress est principalement utilisé pour les tests de bout en bout dans les applications Web, mais il est également efficace pour l'intégration et les tests unitaires dans l'environnement front-end. Voici quelques cas d'utilisation courants :

• Automatisation des flux d'utilisateurs : testez des flux d'utilisateurs complexes, tels que l'authentification, l'envoi de formulaires et les transactions de commerce électronique.

• Test de conception réactive : Cypress permet de tester sur différentes tailles de fenêtre, ce qui le rend idéal pour les tests de conception réactive.

• Tests de régression : en automatisant vos cas de test, vous pouvez rapidement vérifier que les nouvelles modifications de code n'ont pas introduit de bogues.

• Test des composants d'interface utilisateur : Cypress peut être utilisé avec des outils tels que Storybook pour valider les composants frontaux de manière isolée, garantissant qu'ils fonctionnent comme prévu dans divers scénarios.

Cypress fournit un tableau de bord et une CLI puissants qui permettent une intégration transparente dans les pipelines CI/CD, ce qui en fait un choix incontournable pour les tests automatisés et continus dans le développement Web moderne.

Exécuter des tests avec Cypress

Les tests peuvent être exécutés dans Cypress de deux manières principales : à l'aide du Test Runner (GUI) et de l'interface de ligne de commande (CLI).

Voici un guide rapide des deux méthodes :

Utilisation du Test Runner (GUI) :

Pour utiliser Cypress Test Runner de manière interactive avec l'application Cypress Real World, suivez ces étapes. Cette application fournit un exemple solide de tests Cypress en action, avec des scénarios pour l'inscription des utilisateurs, la connexion et les flux de transactions.

Prenons comme exemple l'exemple d'application de Cypress « Cypress Real World App ».

Configurer et exécuter localement l'application Cypress Real World :

Voici les premières étapes de configuration de l'exemple d'application

git clone https://github.com/cypress-io/cypress-realworld-app
cd cypress-realworld-app
yarn

//run the app
yarn dev

Ouvrir Cypress Test Runner :

Maintenant, pour ouvrir Cypress Test Runner en mode interactif :

Exécutez la commande :

npx cypress open

Cela lancera l'interface graphique de Cypress Test Runner, où vous pourrez afficher et sélectionner les tests à exécuter.

En cliquant sur E2E, vous pouvez voir ce tableau de bord qui contient la liste complète des tests sous cypress/tests.

Créons un nouveau test appelé custom.spec.ts dans notre répertoire sous cypress/tests/ui/custom.spec.ts

describe("User Sign-up and Login", function () {
    beforeEach(function () {
      // Seed the database before each test
      cy.task("db:seed");

      // Intercept signup and login API calls
      cy.intercept("POST", "/users").as("signup");
      cy.intercept("POST", "/graphql").as("gqlRequests");
    });

    it("should redirect unauthenticated user to signin page", function () {
      cy.visit("/personal");
      cy.location("pathname").should("equal", "/signin");
    });

    it("should allow a visitor to sign-up, login, and logout", function () {
        const userInfo = {
          firstName: "Bob",
          lastName: "Ross",
          username: "PainterJoy90",
          password: "s3cret",
        };

      // Sign-up User
      cy.visit("/signup");

      cy.getBySel("signup-first-name").type(userInfo.firstName);
      cy.getBySel("signup-last-name").type(userInfo.lastName);
      cy.getBySel("signup-username").type(userInfo.username);
      cy.getBySel("signup-password").type(userInfo.password);
      cy.getBySel("signup-confirmPassword").type(userInfo.password);
      cy.visualSnapshot("About to Sign Up");
      cy.getBySel("signup-submit").click();
      cy.wait("@signup");

      // Login User
      cy.visit("/signin");
      cy.login(userInfo.username, userInfo.password);


      // Verify successful login
      cy.location("pathname").should("equal", "/");

1. Configuration (beforeEach) : avant chaque test, la base de données est prédéfinie pour démarrer avec un état cohérent, et les appels d'API pour l'inscription et les requêtes GraphQL sont interceptés à des fins de surveillance.

2. Tests :

* **Redirect for Unauthenticated User**: Checks if an unauthenticated user visiting a restricted page (`/personal`) is redirected to the `/signin` page.

* **Sign-up, Login**: A new user is signed up, logged in, and logged out. The test verifies the user can register, sign in by being redirected to `/signin`.

Chaque test garantit des fonctionnalités critiques pour une gestion de compte sécurisée et conviviale.

Remarque : Essayez d'ajouter un flux de déconnexion et de nom d'utilisateur incorrect à ce

Exécution de tests à partir de la CLI :

Dans les environnements CI ou pour l'exécution de tests par lots, la CLI offre une approche rationalisée. Exécutez tous les tests ou spécifiez des fichiers de test individuels :

npx cypress run

npx cypress run --spec "cypress/tests/ui/custom.spec.ts"

Avantages du cyprès

Cypress est connu pour son exécution rapide, sa facilité de configuration et ses puissantes fonctionnalités de test. Voici quelques principaux avantages :

• Rechargements en temps réel et tests interactifs : Cypress fournit un retour instantané en rechargeant les tests au fur et à mesure que des modifications sont apportées, donnant ainsi aux développeurs un aperçu immédiat du comportement de l'application.

• Tests sans flocons : Grâce à son architecture unique, Cypress réduit les flocons dans les tests, rendant les résultats de vos tests plus fiables.

• Attente automatique : Cypress attend que les éléments se chargent, répondent et s'affichent, vous n'avez donc pas besoin d'ajouter d'attentes explicites.

• Assertions et moqueries intégrées : Cypress est livré avec un riche ensemble d'assertions et d'outils pour se moquer des réponses de l'API et simuler les interactions des utilisateurs.

Tout comme Cypress prend en charge des tests E2E efficaces en automatisant les interactions des utilisateurs, Keploy apporte une dimension puissante aux tests en se concentrant sur le backend.

Cypress brille dans la vérification du frontend et de l'expérience utilisateur, tandis que Keploy le complète en générant et en maintenant automatiquement des tests API sans avoir besoin de scripts supplémentaires.

Keploy est particulièrement efficace pour capturer les interactions du monde réel et les transformer en tests exécutables, garantissant ainsi la cohérence du backend et la fiabilité des données à mesure que les applications évoluent.

• Plate-forme de tests automatisés : Keploy se concentre sur la génération automatique de tests pour les services backend, en particulier les interactions avec l'API et la base de données.

• Capturer et rejouer : Keploy capture le trafic du monde réel et le rejoue dans des environnements de test, créant ainsi des cas de test réels.

• Génération de tests sans code : conçu pour être facile, il génère des tests sans nécessiter de scripts personnalisés.

Tests E2E avec Keploy :

• Tests E2E centrés sur l'API : automatise les tests de bout en bout pour les composants backend, garantissant que la fonctionnalité backend est vérifiée dans son ensemble.

• Détection et relecture d'erreurs : capture les demandes/réponses d'API, rejoue les interactions et détecte les régressions plus tôt.

• Validation cohérente des données : suit les réponses et les modifications du flux de données, garantissant ainsi l'exactitude des déploiements.

• Intégration transparente : s'intègre facilement aux pipelines CI/CD, aidant les équipes à automatiser les contrôles E2E des modifications backend.

Il existe de nombreux outils dans cet espace, chacun de ces outils offre des fonctionnalités adaptées à différents types d'environnements de test, des tests spécifiques au navigateur dans Puppeteer à la compatibilité entre navigateurs dans Playwright et Selenium.

Le choix du bon outil dépend en fin de compte de vos besoins en matière de tests et des exigences de votre application.

FAQ

Cypress peut-il être utilisé pour les tests backend ?

Cypress est avant tout un outil de test frontal. Bien qu'il puisse interagir avec les API back-end et les réponses simulées, il n'est pas conçu pour des tests back-end approfondis. Pour les tests spécifiques au backend, des outils tels que Keploy peuvent compléter Cypress en fournissant des capacités de tests unitaires et d'intégration pour les fonctionnalités côté serveur.

Cypress prend-il en charge les tests multi-navigateurs ?

Oui, Cypress prend en charge Chrome, Edge et Firefox. Cependant, sa prise en charge est limitée par rapport à des outils comme Selenium ou Playwright, qui offrent une compatibilité plus large entre navigateurs.

Comment Cypress gère-t-il les tests d'API ?

Cypress peut effectuer des tests API en effectuant des requêtes HTTP directement à partir du code de test. Vous pouvez utiliser cy.request() pour valider les réponses de l'API, ce qui facilite le test des API dans le même cadre de test de bout en bout.

Comment puis-je déboguer les tests Cypress ayant échoué ?

Cypress fournit par défaut des journaux détaillés et des captures d'écran, et Test Runner vous permet d'interagir visuellement avec vos tests. Vous pouvez ajouter .only pour isoler les tests ayant échoué, utiliser cy.pause() pour arrêter l'exécution et utiliser Chrome DevTools pour un débogage plus approfondi.