🙇🏿 🐀 ↔️ Créez votre premier test Cypress 🚪 🦈 👩🏻‍🏭

Bonjour à tous!

Je m'appelle Roman Mostafin. Je suis un testeur automatisé chez Clover et j'écris généralement des autotests en pytest + sélénium. Récemment, notre équipe de développement front-end a commencé à utiliser Cypress pour écrire des tests d'interface utilisateur sur le projet Smart Locomotive pour automatiser les tests de régression. Je me suis porté volontaire pour les aider et j'ai été imprégné de cette technologie. Dans cet article, je vais parler de Cypress et comment créer mon premier test dessus.

Cypress est un cadre relativement nouveau pour l'écriture de tests Javascript. Il déploie son navigateur et injecte des tests dans le code des pages.

Cypress présente les avantages suivants:

prend en charge l'écriture de tests modulaires, d'intégration et de bout en bout,
a une bonne documentation
dispose d'une interface conviviale et intuitive pour le lancement, la visualisation et le débogage,
possède des utilitaires utiles pour simplifier l'écriture des tests.

En conséquence, nous avons un cadre universel et pratique pour écrire différents types de tests.

Théorie

Pour écrire un test, six fonctions de base sont requises. Considérez-les et quelques arguments pour eux, qui sont nécessaires à titre d'exemple.

1. cy.visit ()

Cette méthode permet d'accéder à la page de l'application. Comme argument, il prend une chaîne avec l'adresse de la page d'application:

cy.visit(‘http://test.app.com’);

2. cy.get ()

Cette méthode est utilisée pour obtenir un élément du modèle DOM d'une page Web. Il prend les arguments suivants:

localisateur d'élément - l'adresse à laquelle l'élément peut être trouvé;
timeout - temps pendant lequel le cyprès cherchera un élément sur la page (par défaut, il est de 4 secondes).

cy.get(‘div[class=”topbar”]’, {timeout: 3000})

3. .type ()

La méthode .type est utilisée pour remplir des formulaires de texte et divers champs. Il a les arguments suivants:

Le texte à saisir est le texte dans une représentation sous forme de chaîne. De plus, le texte peut indiquer des commandes clavier mises en évidence avec des accolades;
timeout - le délai avant d'exécuter la commande type.

cy.get(‘input’).type(‘Hello world’, {timeout: 3000})

4. cy.wait ()

Cette méthode est utilisée pour arrêter temporairement l'exécution des commandes. Il peut également être utilisé pour attendre la fin des requêtes HTTP. Il a l'argument timeout - directement le timeout.

cy.wait(3000)

5. cy.fixture ()

Cette méthode est utilisée pour obtenir des données de test. Accepte le nom du fichier json en entrée.

6. cy.should ()

Méthode de vérification de l'expression. Il accepte les arguments suivants:

une commande de comparaison est une condition à laquelle un élément sera vérifié;
résultat attendu - le résultat attendu de la vérification.

Entraine toi

Prenons le formulaire d'autorisation Yandex et, à titre d'exemple, nous vérifierons l'autorisation avec une connexion inexistante et l'autorisation avec un mot de passe inexistant. Pour ce faire, effectuez les préparatifs préliminaires:

1. Créez un dossier pour le nouveau projet.

2. Accédez au dossier du projet et exécutez la commande pour installer Cypress:

npm install cypress --save-dev

3. Exécutez la commande cypress:

npx cypress open

4. Après le démarrage, assurez-vous que la hiérarchie suivante apparaît dans le répertoire du projet:

Vous devez maintenant créer un appareil. Nous en avons besoin pour séparer les données du test du test lui-même.

1. Créez un fichier 'cypressTest.json' dans le dossier fixtures avec le contenu suivant:

2. Ensuite, créez un fichier avec le nom 'habr_cypress_test.spec.js' dans le dossier d'intégration:

3. Faites une description de tout le cas de test en utilisant la fonction ' décrire ':

4. A l'intérieur de la fonction' décrire 'nous allons créer nos tests. Nous allons écrire le titre du premier
test:

5. L'étape suivante consiste à écrire l'appel de données à partir du luminaire:

Et enfin, nous créons le test lui-même, en utilisant la connaissance des fonctions Cypress.

Par analogie, nous créons le deuxième test.

Nous allons dans l'application Cypress, trouvons notre test et cliquons sur son nom.

Ensuite, la page du navigateur exécutant Cypress s'ouvre et le test démarre: à gauche dans une colonne séparée, vous pouvez voir les étapes détaillées du processus. Vous devez attendre la fin du test.

Félicitations, vous avez écrit vos premiers tests Cypress!

PS

Je tiens à remercier notre équipe front-end, et en particulier Adele Khamatova, pour leur aide dans l'apprentissage de Cypress sur le projet.

Créez votre premier test Cypress