Tests de cyprès Ecom

Tests E2E avec Cypress vous apprend à effectuer des tests de bout en bout (E2E) à l'aide de Cypress , l'un des outils les plus populaires pour les tests automatisés en JavaScript, en particulier pour les applications Web. Je vais vous expliquer tous les concepts et étapes en détail.

---

Que sont les tests E2E ?

Les

Les tests de bout en bout (E2E) sont des tests automatisés qui vérifient le comportement complet d'une application, du début à la fin, simulant l'interaction de l'utilisateur avec l'interface. Ces tests sont importants car ils valident que toutes les parties de l'application fonctionnent correctement ensemble, comme prévu, dans un environnement réel.

Cyprès : qu'est-ce que c'est et comment ça marche ?

Cypress est un outil de test automatisé d'applications Web. Il est conçu pour être facile à utiliser, puissant et rapide. Il vous permet d'écrire des tests qui interagissent avec l'interface utilisateur de l'application de la même manière qu'un utilisateur le ferait, en cliquant sur des boutons, en remplissant des formulaires, en validant des textes et bien plus encore.

Quelques fonctionnalités importantes de Cypress :

• Tests en temps réel : il exécute les tests dans le navigateur lui-même, vous permettant de voir les tests en cours d'exécution.
• Facilité de configuration : Aucune configuration compliquée requise pour commencer.
• Exécution rapide : étant donné que Cypress s'exécute dans le navigateur, l'exécution des tests est plus rapide par rapport aux autres outils de test E2E.
• Intégration CI/CD : il s'intègre facilement aux pipelines CI/CD pour l'automatisation des tests.

---

Procédure pas à pas du module 34

1. Conceptualisation de l'outil Cypress

Cypress est un outil de test automatisé pour les applications Web, principalement pour les tests E2E. Il est conçu pour interagir directement avec le code de l'application dans le navigateur, rendant les tests plus efficaces.

2. Installer Cypress sur la machine

Pour commencer à utiliser Cypress, vous devez l'installer dans votre projet. Voici la commande d'installation :

npm install cypress --save-dev

Cela installera Cypress en tant que dépendance de développement dans votre projet.

3. Démarrer Cypress

Après avoir installé Cypress, vous pouvez l'ouvrir à l'aide de la commande suivante dans le terminal :

npm install cypress --save-dev

Cela ouvrira Cypress Test Runner où vous pourrez voir les tests en cours d'exécution dans le navigateur. Il crée également un dossier cyprès dans votre projet, où tous les tests et configurations sont stockés.

4. Utiliser la fonction décrire pour regrouper les tests

Dans Cypress (et Jest), nous utilisons describe pour regrouper plusieurs tests qui font partie de la même suite ou module. Cela permet d'organiser les tests de manière plus structurée.

npx cypress open

Dans l'exemple ci-dessus :

• describe est utilisé pour regrouper les tests liés à la connexion.
• il définit une épreuve spécifique au sein du groupe. Ce qui suit à l'intérieur est le code qui effectue la vérification (étapes de test).

5. Utiliser la fonction it

La fonction it est utilisée pour définir des cas de test individuels. Chaque cas de test doit être indépendant et représenter une fonctionnalité ou un comportement spécifique de l'application.

6. Récupérer des éléments avec la fonction cy.get

La fonction cy.get est utilisée pour sélectionner les éléments de la page avec lesquels interagir dans les tests.

Exemple :

describe('Teste de Login', () => {
  it('Deve realizar o login com sucesso', () => {
    cy.visit('https://exemplo.com/login');
    cy.get('input[name="username"]').type('usuario');
    cy.get('input[name="password"]').type('senha123');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

Ici, cy.get recherche l'entrée avec name="username" et le bouton de soumission avec type="submit", puis effectue les actions de type et cliquez.

7. Introduction à VScode et à la saisie semi-automatique

Vous pouvez utiliser VSCode pour modifier vos tests et profiter de la saisie semi-automatique de Cypress, qui facilite l'écriture correcte de tests en suggérant des méthodes et des commandes au fur et à mesure que vous tapez.

8. Utiliser des relations hiérarchiques

Cypress vous permet de sélectionner des éléments en fonction de la hiérarchie des pages, en utilisant des sélecteurs CSS plus complexes. Par exemple, vous pouvez sélectionner un bouton qui se trouve à l'intérieur d'un div avec une classe spécifique :

cy.get('input[name="username"]').type('usuario');
cy.get('button[type="submit"]').click();

9. Construire des tests de filtrage

Un exemple de test de filtrage serait de vérifier si, lors de l'application d'un filtre, la liste des éléments est correctement mise à jour. Cypress vous permet d'effectuer facilement ce type de test, en interagissant avec les filtres et en vérifiant les résultats.

cy.get('.modal').find('button').click(); // Encontra o botão dentro de .modal e clica

10. Utilisation de la fonction beforeEach

La fonction beforeEach est utile pour configurer l'état de l'application avant chaque test. Ceci est particulièrement important lorsque vous devez vous assurer que l'application est dans un état initial avant d'exécuter le test.

npm install cypress --save-dev

11. Connaître le type de retour de Cypress

Cypress utilise Promises pour gérer le temps asynchrone, mais il gère automatiquement ces promesses, ce qui simplifie les tests. Il n'est pas nécessaire d'utiliser wait ou .then() dans de nombreux cas car Cypress gère cela en interne.

12. Organiser le code pour réduire les lignes

Garder les tests organisés et réutilisables est essentiel. Vous pouvez créer des fonctions d'assistance et réutiliser des extraits de code.

Exemple :

npx cypress open

13. Connaître les fonctionnalités supplémentaires de Cypress

• Prendre des captures d'écran : Cypress peut automatiquement prendre des captures d'écran pendant les tests. Cela vous aide à visualiser ce qui s'est passé lorsqu'un test a échoué.

describe('Teste de Login', () => {
  it('Deve realizar o login com sucesso', () => {
    cy.visit('https://exemplo.com/login');
    cy.get('input[name="username"]').type('usuario');
    cy.get('input[name="password"]').type('senha123');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

• Générer des rapports : Cypress vous permet de générer des rapports d'exécution de tests, ce qui facilite l'analyse des résultats.

• Cypress Run : Pour exécuter les tests en mode headless (sans interface graphique), utilisez la commande :
  

cy.get('input[name="username"]').type('usuario');
cy.get('button[type="submit"]').click();

• HTTP Request Mocking : Vous pouvez simuler les réponses du serveur avec Cypress, sans avoir à passer de vrais appels. Ceci est utile pour tester des scénarios avec des données spécifiques.

cy.get('.modal').find('button').click(); // Encontra o botão dentro de .modal e clica

14. Installation d'un opérateur de service simulé (MSW)

Mock Service Worker est un outil qui vous permet d'intercepter les requêtes HTTP dans vos tests. Il peut être utilisé avec Cypress pour simuler des requêtes et contrôler les réponses.

cy.get('.filter').select('Option 1');
cy.get('.item-list').should('have.length', 5);

Ensuite, vous pouvez configurer les gestionnaires de réseau pour intercepter les requêtes.

---

Conclusion

Dans le module 34, vous avez appris à utiliser Cypress pour effectuer des tests E2E sur votre application, en vous assurant qu'elle fonctionne correctement dans des situations d'utilisation réelles. Vous avez appris à configurer Cypress, à écrire des tests, à interagir avec les éléments de la page et à utiliser des fonctionnalités telles que beforeEach, cy.get, des captures d'écran, des rapports et bien plus encore. Ces tests sont cruciaux pour garantir que votre application fonctionne correctement et que de nouveaux bugs ne soient pas introduits.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!