Cypress : tests automatisés de débutant à pro + framework | Vasile Vasluian | Skillshare
Recherche

Vitesse de lecture


1.0x


  • 0.5x
  • 0.75x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Cypress : tests automatisés de débutant à pro + framework

teacher avatar Vasile Vasluian

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      1. Introduction.

      1:27

    • 2.

      2. Installer le code de Visual Studio et Node.js

      3:45

    • 3.

      3. Préparer le projet à partir de zéro.

      5:01

    • 4.

      4. Les bases de JavaScript pour ce cours.

      8:28

    • 5.

      5. Types de sélecteurs CSS et comment trouver des sélecteurs dans le DOM.

      9:10

    • 6.

      6. Le premier test dans Cypress.

      4:32

    • 7.

      7. Interagir avec les éléments Web dans Cypress : actions essentielles.

      12:51

    • 8.

      8. Comment extraire du texte d'un élément Web.

      3:57

    • 9.

      9. Assertions dans Cypress.

      4:57

    • 10.

      10. Comment ajouter des captures d'écran et des enregistrements vidéo aux tests.

      6:04

    • 11.

      11. Exercice pratique 1.

      8:58

    • 12.

      12. Exercice pratique 2.

      11:35

    • 13.

      13. Exercice pratique 3.

      4:05

    • 14.

      14. Refactorisation et astuces pour des exercices pratiques.

      4:48

    • 15.

      15. Structure générale d'un framework et de sa mise en place.

      7:47

    • 16.

      16. Mettre en œuvre le modèle d'objet Page dans le framework Cypress.

      11:02

    • 17.

      17. Tester la page de login.

      10:30

    • 18.

      18. Tester la page des produits.

      6:21

    • 19.

      19. Créer et utiliser des commandes personnalisées dans Cypress.

      8:05

    • 20.

      20. Générer et paramétrer des rapports dans Cypress.

      6:50

    • 21.

      21. Ajouter et paramétrer des scripts personnalisés dans Cypress.

      6:16

    • 22.

      22. Résumé.

      2:55

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

7

apprenants

--

projet

À propos de ce cours

Ce cours vous guidera à travers une maîtrise complète du framework Cypress, en vous apprenant à tirer parti de toutes ses fonctionnalités essentielles. Cypress est un outil moderne basé sur JavaScript qui inclut tout ce dont vous avez besoin dès le début : un test runner, des bibliothèques d'assertion, des reporters, et bien plus encore. Cette installation tout-en-un rend Cypress extrêmement rapide et efficace ! Même si vous êtes débutant en JavaScript, vous n'avez pas à vous inquiéter. Rédiger des tests automatisés dans Cypress ressemble davantage à suivre une séquence de commandes simples pour interagir avec le navigateur, plutôt qu'à la programmation traditionnelle. Il s'agit principalement d'une approche de script dans la structure fournie par Cypress.

Nous commencerons par mettre en place l'environnement de test et nous familiariserons avec les commandes et les actions de base de Cypress. Vous apprendrez également à vous identifier et à travailler avec les sélecteurs d'éléments Web dans le DOM.

En plus des meilleures pratiques en matière de tests automatisés, nous nous pencherons sur des sujets avancés, tels que la création d'un cadre de test en utilisant le modèle d'objet Page, une approche commune dans les projets du monde réel. Vous découvrirez comment ajouter des captures d'écran et des enregistrements vidéo à vos tests, ainsi que comment paramétrer les rapports de vos suites.

À la fin de ce cours, vous aurez les compétences, le savoir-faire et l'assurance nécessaires pour maîtriser Cypress !

Rencontrez votre enseignant·e

Teacher Profile Image

Vasile Vasluian

Enseignant·e
Level: All Levels

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. 1. Introduction.: Bonjour et bienvenue. Ce cours est conçu pour vous emmener étape par étape dans le monde de Chypre, vous fournissant les compétences et la confiance nécessaires pour gérer des projets de test de mots réels, que vous débutiez ou que vous souhaitiez passer au niveau supérieur. Tu es au bon endroit. un bref aperçu de ce que vous apprenez dans chaque section. Dans la première section, nous vous expliquerons comment installer et configurer tout ce dont vous avez besoin pour démarrer votre voyage à Chypre. À la fin de cette section, votre environnement sera prêt à passer aux tests. Ensuite, nous allons configurer un projet Cypress à partir de zéro. En cours de route, vous découvrirez les sélecteurs CSS, leurs types et comment les utiliser efficacement, compétences essentielles pour travailler avec des éléments Web Cette section aborde en profondeur l'interaction avec les éléments du Web. Vous apprendrez à effectuer des actions telles que cliquer, taper, etc., ainsi qu'à vérifier les comportements et les états pour garantir une couverture de test fiable. Dans la quatrième section, vous allez appliquer ce que vous avez appris grâce à des leçons pratiques interactives. Nous verrons également comment capturer captures d'écran et des vidéos pour améliorer vos tests Cypress, en fournissant des informations claires lors du débogage Et dans la dernière section, vous allez créer un framework Cypress complet imitant les flux de travail de projets du monde réel Nous implémenterons le modèle d'objet de page, intégrerons un outil de reporting personnalisé et configurerons des scripts pour rationaliser vos tests. Rendez-vous dans les prochaines leçons. 2. 2. Installer le code de Visual Studio et Node.js: Bienvenue à la deuxième leçon. Dans cette leçon, nous allons configurer tout ce dont vous avez besoin pour commencer à travailler avec Chypre. À la fin de cette leçon, votre environnement de développement sera entièrement configuré et prêt à fonctionner. Commençons par installer Nod Jazz. Vous devriez donc utiliser Google Nod Jz. Nous devrions ouvrir le premier lien, pas .org. Et ici, nous devons toujours télécharger la version LTC. Une fois le téléchargement terminé, nous devons suivre les instructions en cliquant simplement sur OK. Ouvrons donc ce fichier et continuons, continuons. Acceptez l'installation. Ils demandent le mot de passe. Ouais. L'installation s'est donc terminée avec succès. Nous pouvons fermer, et ils me demandent si je veux transférer ça à Ben. Ensuite, il y a le code Visual Studio ou le code VS. Essayons donc le code de recherche Visual Studio. C'est parti pour le premier lien sur code.visualstudood.com le premier lien sur code.visualstudood.com Et ici, comme je travaille sur une machine Mac, je vais voir le téléchargement pour Mac. Si vous comptez travailler depuis un ordinateur Windows, vous devriez voir Dolod pour Windows Et si vous utilisez une machine Linux, je n'en suis pas sûr. Cliquez sur Télécharger. Une fois le téléchargement terminé, nous pouvons ouvrir ce fichier. La même situation se produira sur l'ordinateur Windows. Je vais le déplacer vers les applications. Une fois le processus d'installation terminé, nous pouvons ouvrir l'application de code Visual Studio. Dans la liste de toutes les applications, nous devons cliquer sur Visual Studio Code. Et ici, vous devriez voir une page d' accueil si ce n'est pas la première fois que vous installez le code Visual Studio sur votre machine. Enfin, parlons du gestionnaire de packages NTM or not qui est fourni avec les nodejs que nous avons déjà installés et constitue une porte essentielle pour gérer les packages et la bibliothèque Nous utiliserons NTM pour installer Cypress et d'autres outils tout au long de ce cours Vérifions maintenant la version de notre package NPM. Tout d'abord, nous devons ouvrir un terminal. Nous pouvons utiliser le terminal de code VS depuis le terminal de menu, en cliquant sur Nouveau terminal ou nous pouvons ouvrir le terminal de notre machine. Donc, dans le terminal, nous devons taper NPM moins V. Et ici, en fonction de votre version, vous devriez voir la version que vous installez Si vous recevez un message d'erreur, cela signifie que quelque chose s'est mal passé lors de l'installation du package Nod Jz C'est donc tout pour configurer notre environnement de développement. Nous allons arrêter No Jazz, configurer le code de Visual Studio et aborder brièvement MBM, et aborder brièvement MBM qui est fourni avec le code non Dans la leçon suivante, nous aborderons l'installation de Cyprus et la mise en œuvre de notre premier projet . On se voit là-bas. 3. 3. Préparer le projet à partir de zéro.: Bon retour. Dans cette leçon, nous allons créer notre premier projet Cypress Et à la fin de cette leçon, vous aurez un projet Cypress entièrement fonctionnel configuré et prêt à écrire votre premier test automatique J'ai déjà créé un dossier et je vais ouvrir ce dossier dans mon application de code Visual Studio cet effet à partir du fichier de menu, qui est un dossier ouvert. Et voici mon projet Cypress et je clique sur Ouvrir. On me demande si c'est un Trust Outer, parce que c'est moi. L'étape suivante sera d'ouvrir le terminal depuis le terminal Menu, puis de cliquer sur Nouveau terminal. Nous allons maintenant initialiser un nouveau projet No tapant NPM Le PM vous posera quelques questions sur votre projet, comme le nom de la version, vous pouvez appuyer sur Entrée et tout laisser par défaut. Ensuite, PM créera un package uniquement dans un fichier, qui gérera les dépendances de votre projet. Donc le nom du package Yenerersion Yenter Discretion Yenter Everything par défaut, à la fin, tapez Oui Ici, nous pouvons constater que nous avons reçu notre colis très bientôt. Ici, nous allons gérer nos dépendances. Il est maintenant temps d' installer Cypress. Pour cela, revenons à notre terminal. Et ici, nous devons taper la commande. NPM install Cypress, dash, dash, save dash d. Cette commande indique à Ambien de télécharger et d'installer Cyprus tant que dépendance de développement pour Et une fois l'installation terminée, Chypre sera ajoutée à nos projets, et non des modules ici. Et aussi dans le package, le fils, nous devrions observer la nouvelle dépendance Cypress Attendons l'installation. L'installation est complète et ici en profondeur la dépendance, nous pouvons observer le Cypress et la version de Cyprus Et aussi dans les modules de nœuds, nous devrions avoir ici quelque part Chypre. Oui, nous l'avons. Oui, mais ne t'inquiète pas pour ce dossier. Nous n'allons pas travailler avec cela. Maintenant que Cypress est installé, configurons la structure du projet Cypress Pour cela, nous devrions ouvrir pour la première fois l'application chypriote. Pour cela, retournez au terminal et ouvrez MP Cypress. Cliquez sur Enter. Cette commande ouvre le lanceur de tests Cypress Et oui, on nous demande ici de choisir entre un bout à l'autre et des composants. Nous allons continuer de bout en bout, et nous choisissons Chrome. Si vous n'avez pas Chrome, veuillez étudier. Et ici, on nous demande si nous voulons avoir les exemples de base de Cypress, nous choisirons d'avoir des exemples OK, j'ai compris. Revenons au code de Visual Studio. Et comme nous pouvons le constater après l' ouverture du Cypress, un pli portant leur nom Cypress a été automatiquement ajouté ici avec bout en bout, nous conserverons ici nos tests, montage des données de test et le support également pour les données de configuration et de test. Cliquons sur l'un de ces tests pour vérifier si les tests sont en cours d'exécution et si nous avons tout installé correctement. Choisissons-en un. Disons la traversée. Est-ce que c'est important ? Et comme vous pouvez le constater, Cypress est incroyablement intuitif montre exactement ce qui se passe à chaque étape du test Cela facilite grandement le boguage et le développement Web Ici, si nous ouvrons un test, nous pouvons voir ce qui s'est passé à chaque étape. Très puissant, très intuitif. Vous disposez désormais d'un environnement de test entièrement fonctionnel avec Cypress installé et prêt à fonctionner Dans les prochaines leçons, nous allons écrire vos premiers pas et explorer les différentes commandes que vous utiliserez pour interagir avec votre application Web Rendez-vous dans la prochaine leçon. 4. 4. Les bases de JavaScript pour ce cours.: Bon retour. Dans cette leçon, nous aborderons les concepts essentiels de Javascript que vous devez comprendre pour écrire un test Cypress efficace Même si vous débutez dans le domaine de la programmation, ne vous inquiétez pas, nous allons commencer par les bases et nous allons le développer à partir de là. Pour cette leçon, nous devons installer l' extension de code Visual Studio. Donc pour cela, nous devrions aller dans l'onglet extension et taper ici code runner. Et nous devons installer cette extension Run install. Cette extension nous aidera à exécuter du code JavaScript dans le fichier. Commençons par la syntaxe de base de JavaScript. Voici un exemple simple de journal de console. Cette ligne de code affiche le mot « hello word ». Essayons de l'exécuter. Donc, après avoir installé notre extension d'exécution de code, nous devrions avoir ici un bouton de code, et si nous appuyons dessus, nous verrons ici le résultat de notre code. Habituellement, nous utilisons Consolod pour le bogue. Ensuite, nous allons discuter de ce qu'est une variable et à quoi elle sert. En gros, nous avons trois types de variables. Le premier est déclaré avec var, second ED et le dernier avec const Habituellement, nous n'utiliserons que le plomb et le const et j' expliquerai chacun d'eux plus tard. La première, déclarée avec var, est une variable disponible dans le monde entier. Le second déclaré avec let n'est disponible qu'à l'intérieur du bloc de code. C'est Block Scope. Et la dernière variable déclarée avec le coût est également disponible à l'échelle du bloc, mais cette variable ne peut pas être modifiée. Il s'agit donc d'un bloc de code, d'une portée de bloc. C'est quelque chose qui est déclaré à l'intérieur des bretelles Carly. Nous en reparlerons plus tard. Ainsi, comme nous l'avons dit, une variable var a une portée globale. Nous avons donc déclaré ici que c'était dans notre champ de compétence. Voici nos bretelles Carly, du nom de voiture Ellie Et maintenant, nous voulons créer une console pour cela, pour cette navigation. Mais après cela, en dehors de ce bloc de code, nous essayons également de créer une console. Nous devrions donc voir dans la console As car la VR a une portée mondiale. Allons-y. Oui, voici le résultat Allie et Allie. Parlons maintenant des variables let. Il s'agit uniquement d'une lunette de visée, ce qui signifie qu'ils ne seront disponibles qu'à l'intérieur de ces bretelles Carl Nous avons donc déclaré ici notre âge variable, qui est de 25 ans, et nous avons créé ici le journal de la console. Nous essayons également de créer un journal de console en dehors de ce bloc de code. Donc, dans la sortie, nous devrions voir les 125 premiers, et après cela, nous devrions voir erreur de référence car l'âge n'est pas défini. Essayons de le gérer. Donc, comme je l'ai dit, nous avons ici les 25 premiers et ensuite, nous avons une référence ici. L'âge n'est pas défini car l'âge n'est disponible ici que dans ce bloc de code. Enfin, nous avons notre variable de coût, qui est également limitée par blocs, comme let, mais sa valeur ne peut pas être réaffectée Essayons donc de comprendre. Ici, nous avons déclaré qu'un coût variable est étudiant avec la valeur true parce qu'il s'agit d'un étudiant. Ensuite, nous essayons de créer un journal de console ici et nous aurons le résultat. Laissez-moi commander cette ligne. Nous devrions avoir le résultat « vrai ». Et si je n'arrive pas à trouver cette ligne et que j' essaie de sortir la variable étudiée en dehors de ce bloc, je devrais recevoir une référence ici. Essayons de l'exécuter. Ici, nous pouvons observer que nous avons le premier journal de console avec la sortie true. Ensuite, nous recevons une erreur de raffinement parce qu'elle est étudiée et qu'elle n' est pas définie en dehors de la portée de ce bloc. Et essayons de réaffecter une valeur à une variable const. Laissez-moi commander cette ligne. Ici, nous allons essayer de faire tomber un élève, mais nous déclarons déjà que c'est vrai. C'est effacer la sortie et essayer de le faire. Nous recevons donc ici l'assignation d'erreur à une variable constante, ce qui est impossible, et nous avons la ligne de code. Nous ne pouvons pas attribuer la valeur false à un étudiant auquel la valeur true a déjà été attribuée. Les fonctions sont un autre concept fondamental de JavaScript. Une fonction est un bloc de code conçu pour exécuter une tâche spécifique et qui peut être utilisé dans l'ensemble de votre code. Nous avons défini ici une fonction appelée grit qui prend un nom comme paramètre et renvoie un message d'accueil Nous appelons ensuite cette fonction et stockons la valeur dans un message variable allumé. Ensuite, nous imprimerons ce message sur la console. Essayons de comprendre ce qui sera imprimé ici. Nous avons donc le nom hello plus et nous recevons un paramètre nommé Alice. Donc, dans le résultat, nous aurions dû imprimer Hello Alice et signe d'exclamation. Essayons donc de le gérer. Comme nous pouvons le voir, nous avons ici Hello Alice. Si nous mettons ici un autre nom, le deuxième, nous aurons le nom hello en second. Les objets permettent de regrouper des données connexes et de fonctionner ensemble. En Javascript, un objet est un ensemble de propriétés et chaque propriété est une valeur clé par. Ici, nous avons déclaré un objet, une personne et à l'intérieur d'un bloc de porte-cartes à code. Nous avons décidé d'avoir une valeur clé pers comme N qui est John H, qui est 25. Et aussi pour un objet, on peut déclarer une méthode, une fonction, une action. Et notre personne peut utiliser une grille, et à l'intérieur de la grille, nous avons une fonction qui dit bonjour et ce nom. Ce mot clé signifie que nous utiliserons le nom attribué à l'intérieur cet objet dans ce bloc de code. Essayons donc de consigner cet objet par des inconvénients. Ici, nous pouvons voir que nous avons un objet avec toutes ces valeurs clés par nom, âge et grille en tant que fonction. Nous pouvons également attribuer une propriété spécifique à cet objet. Ici, nous essayons d'attribuer au journal des inconvénients le nom de la personne. Essayons de le faire fonctionner et nous verrons ici John. Nous pouvons également appeler une fonction au sein d'un objet. Ici, nous essayons d'appeler la fonction de grille à partir de notre objet personnel. Comme vous pouvez le voir, la première ligne du journal de la console est notre objet, après le nom de la propriété, et à la fin, nous avons notre fonction, qui est hello jour. Ici, nous pouvons terminer notre leçon où nous avons discuté de ce qu'est une variable, ce qu'est un objet et de ce qu'est une fonction. Rendez-vous dans la prochaine leçon. 5. 5. Types de sélecteurs CSS et comment trouver des sélecteurs dans le DOM.: Bonjour. Dans cette leçon, nous aborderons le sélecteur CSS, un outil clé que vous utiliserez pour identifier et interagir avec les éléments de la page À la fin de la leçon, vous les utiliserez en toute confiance Tout d'abord, parlons de ce que sont les sélecteurs CSS. Les sélecteurs CSS sont des potiers utilisés pour sélectionner et styliser les éléments d'une page Web Dans le contexte de Chypre, nous utilisons ces sélecteurs pour cibler des éléments pour nos tests Par exemple, si vous souhaitez cliquer sur un bouton, saisir du texte dans un champ de saisie ou vérifier le contenu d'un titre, vous devez utiliser le sélecteur CSS pour cibler cet élément spécifique Parlons maintenant sélecteurs CSS les plus populaires et de la formule générale, comment trouver un sélecteur CSS formule générale du sélecteur CSS est composée d'une balise, qui peut être une entrée, bouton, une sélection Div, etc., l'attribut, qui peut être une classe, un texte, un nom, un ID, et le nom de l'attribut, qui peut être tout Discutons de la recherche de sélecteurs CSS par classe. Nous avons ici un exemple de DIV, qui possède une classe nommée class name. Si nous voulons trouver cet élément, ce DIV, nous pouvons utiliser point et classe N. Le point ne fonctionnera que pour les classes ou les sss sélectionnés par classe Ou nous pouvons utiliser la formule générale, qui est tag Name, dans notre cas, est D ici, l' attribut dans notre cas, l'attribut est class, l'attribut est class, et le nom de l'attribut dans notre cas est le nom de classe. Le suivant est celui des sélecteurs CSS par ID. Ici, nous avons un bouton avec l'ID, MID et un SMS d'envoi. Pour trouver un sélecteur CSS par AD, nous pouvons utiliser cette formule Nous pouvons utiliser has et le nom de l'identifiant. Et dans notre cas, c'est « has » et « MAD ». L'objet avec has ne peut être utilisé que pour le sélecteur d'identifiant. En ce qui concerne les sélecteurs CSS, pour le sélecteur CSS de classe, nous pouvons l'utiliser Mais pour le sélecteur d'ID, nous pouvons utiliser has, et nous pouvons également utiliser la formule générale pour trouver un sélecteur CSS Ici, nous pouvons utiliser le nom du tag qui est button. Ensuite, nous utilisons l'attribut, qui est ID dans notre cas, ID du bouton et le nom de l'attribut, qui est mon ID. Et c'est ainsi que nous luttons contre un sélecteur CSS. La prochaine consiste à combattre les sélecteurs CSS par attribut. Dans cet exemple, nous avons une entrée avec un texte de type et un nom nom d'utilisateur. Nous utilisons une formule générale, le nom du tag. balise l'entrée, l'attribut est le nom et le nom de l'attribut est le nom d'utilisateur. Voici le tag, voici l'attribut et le nom de l'attribut. Et le dernier que je peux dire le moins populaire est le sélecteur CSS par balises, où nous pouvons trouver par paragraphe, dans notre cas, nous avons un paragraphe, le moins populaire est le sélecteur CSS par balises, où nous pouvons trouver par paragraphe, dans notre cas, nous avons un paragraphe, et nous pouvons trouver tous les paragraphes de la page où nous pouvons trouver tous les boutons et toutes les entrées Encore une chose ici. Lorsque nous utilisons cette formule générale, nous pouvons l'utiliser sans le tag, mais il est plus sûr de l'utiliser avec le tag. Entraînons-nous un peu sur la façon de trouver cet élément. Pour cet exercice, nous allons utiliser la documentation Cypress, par exemple Cypress Et si vous voulez voir la structure interne de cette page, vous devez cliquer avec le bouton droit de la souris et inspecter. Maintenant, vous devez accéder à l'onglet des éléments. Si vous souhaitez trouver l' emplacement exact d'un élément Web, vous pouvez cliquer sur ce bouton de sélection, puis cliquer sur l' élément dans la page. Et votre position sera mise en évidence. Essayons donc de trouver un sélecteur CSS par classe. Si vous voulez commencer à rechercher les éléments de la page, vous devez cliquer sur Contrôle plus C. Contrôle plus F. Maintenant, une barre de recherche apparaît ici. Essayons donc de trouver le sélecteur CSS par classe pour cette entrée d'e-mail abord, nous allons cliquer sur ce bouton Sélectionner, puis cliquer sur notre élément, et ici nous pouvons observer que nous avons une classe deux classes. Copions-les donc. Et collons ici. Dans notre cas, nous avons deux classes. Essayons de trouver le premier en utilisant la méthode des points. Lorsque nous utilisons la méthode des points, nous pouvons observer que nous avons dix éléments de même classe. Cela signifie donc que nous devrions également utiliser le second. Copions et lorsque vous avez deux classes, vous pouvez les concaténer en utilisant Donc, pour le moment, nous avons nos éléments un ou un, ce qui signifie que l' élément est unique et que ce sélecteur CSS est bon à utiliser pour nos tests Essayons de trouver également le même élément en utilisant la deuxième méthode ou trouvant un sélecteur CSS, la formule générale Donc, dans notre cas, la formule générale sera l'attribut, la balise, qui est entrée, entre crochets, et ici nous devrions écrire le type d'attribut, qui est égal à la classe et l'attribut dans notre cas, c'est ça. Donc un ou un, ce qui signifie que l' élément est unique et que nous pouvons l'utiliser dans nos tests. Continuons en recherchant un sélecteur CSS par identifiant. Je veux trouver l'emplacement de cette saisie de mot de passe. Trouvons donc cet emplacement, cet attribut. Ici, nous pouvons observer que nous avons une entrée avec l' identifiant et le mot de passe. Ainsi, dans la barre de recherche, nous pouvons mettre has et le nom de l'identifiant, qui est le mot de passe 1. Nous pouvons observer qu' il s'agit d'un attribut unique, ce qui signifie qu'il s'agit d'un attribut unique peut être utilisé dans notre test. Essayons également de trouver la deuxième méthode en utilisant la formule générale. Il s'agit de l'entrée, de l'ID, du mot de passe égal un, du sélecteur CSS unique Essayons également de supprimer le nom du tag, qui est l'entrée, et nous pouvons également observer l'élément est également unique et peut être utilisé sans le nom du tag. Ensuite, essayons de trouver par différents attributs, ce qui n'est ni un identifiant ni une classe. Trouvons le sélecteur correspondant à ce bouton d'envoi. Je vais cliquer sur le bouton de recherche sur cet élément. Nous pouvons observer qu' il s'agit d'un bouton de type submit et d'une classe. Trouvons par type. Donc, contrôlez C, nous avons notre barre de surtension et la formule générale sans type de balise identiques, et le nom a été soumis. À partir de là, tapez et nommez, puis soumettez. Et nous avons l'un d'un, ce qui signifie un sélecteur unique unique, qui peut être utilisé dans nos tests C'est tout pour la leçon d'aujourd'hui où nous apprenons à utiliser, à écrire, comme je l'ai dit, sélecteur et à trouver l'élément b dans la page Ces compétences sont essentielles pour rédiger des tests Cypress efficaces Nous allons utiliser ces compétences dans la prochaine leçon, voir cela ici. 6. 6. Le premier test dans Cypress.: Bonjour. Dans cette leçon, nous allons écrire et exécuter un test Cypress simple Créons d'abord un nouveau dossier dans le dossier Anton où nous conserverons nos tests. Donc, nouveau dossier, nommons-le. D'abord. Exemples, et nous devrions créer un fichier avec l' extension, si point Gs. C'est l'extension du Cypress. Nouveau dossier ? Tout d'abord, testez donc dot js. Ici, il s'agit d'un simple test Cypress qui visite un site Web et vérifie si le titre de ce test contient un texte spécifique Je vais donc utiliser l' exemple de point Cypress point AO, et je vais vérifier si le titre de ce site Web est Cypress do to kitchen sink J'ai également ajouté un commentaire sur la première ligne qui aidera notre éditeur de code à comprendre que nous utilisons Cypress et nous donnera une complication automatique de nos commandes Découvrons la structure de ce fichier. Nous utilisons describe afin de regrouper les tests associés. Imaginez-le comme un dossier sur votre machine dans lequel vous séparez les photos de votre anniversaire de celles de votre diplôme, disons. Ainsi, nous pouvons séparer nos tests de connexion de notre test de page d'accueil dans le même fichier. Dans le bloc de description, nous avons une fonction informatique, et chaque fonction informatique représentera un test Cypress distinct Vous pouvez en ajouter d'autres, et celui-ci sera un autre test qui vérifiera quelque chose de différent. Permettez-moi de le supprimer pour instant Chypre possède de nombreuses fonctions par défaut, et pour y accéder, nous devons lier cette fonction à l'objet global si. Par exemple, pour la méthode visit, nous lions cette méthode à l'objet siglob, et cette méthode nous visitons ce C'est le site web de Chypre. La méthode title est également liée au CI de l'objet si Et cette méthode permet d'obtenir le titre de la page. La part égale du tournage est une affirmation. Et ici, nous vérifions si le titre est correct. Il est maintenant temps de faire notre test. Ouvrons donc un terminal à partir du nouveau terminal, et ici nous devrions ouvrir Chypre. Pour cela, il faut écrire Bs, Chypre ouverte. Oui, et pour terminer, commencez à tester et voici notre premier test. Cliquons dessus et attendons l'exécution. Nous pouvons observer ici toute l'action. La première est la visite, puis nous extrayons le titre, et à la fin, nous vérifions si notre valeur attendue est égale à la valeur réelle. Si notre assertion échoue, nous recevrons une erreur avec les informations. Essayons d'ajouter quelque chose de différent ici. Mettons le numéro deux. Et ici, nous observons que nous attendons un certain temps, et après cela, nous apprenons que vous vous attendiez à avoir cuisine Cypress yo équivalent à un évier de cuisine Cypress Ayo C'est tout pour le cours d'aujourd'hui. Nous venons d'écrire et d'exécuter notre premier test Cypress. Félicitations et à bientôt dans les prochains cours. 7. 7. Interagir avec les éléments Web dans Cypress : actions essentielles.: Bon retour. Aujourd'hui, nous allons commencer à apprendre l'un des aspects les plus importants des tests à Chypre , à savoir l'interaction avec les éléments. Aujourd'hui, vous allez apprendre à rechercher des éléments sur une page et à effectuer des actions telles que cliquer, taper et sélectionner. Commençons. Ici, nous avons un champ de saisie, et nous voulons taper du texte. Commençons donc. Essayons de trouver le sélecteur CSS pour cet élément. Nous pouvons essayer de trouver par identifiant, contrôlant F et en utilisant le hachage et en envoyant un e-mail Une histoire amusante. D'accord. Maintenant que nous avons trouvé notre sélecteur, nous pouvons essayer de trouver et de taper le texte Ici, j'ai créé une description, et à l'intérieur de la description, j'ai un test qui visite notre site Web et après cela, à partir de l'Object CI global, nous utilisons le G commun dans la méthode get, nous donnons le sélecteur CSS de notre élément Ensuite, une fois que nous avons trouvé notre élément, nous tapons un texte à l'intérieur de cet élément. Ouvrons donc le Cypress et essayons d'exécuter un scénario de test. Et Big Cypress, ouvrez. Laisse-moi le sauvegarder. Ouais Il interagit donc avec les éléments. La première action consiste à visiter le site Web. La seconde est d'utiliser la méthode commune G. Nous combattons notre élément. On voit qu'il est mis en évidence. Et après cela, à l' aide de caractères courants, nous tapons notre texte. Il est parfois plus facile de trouver un élément en fonction du texte qu'il contient plutôt que de ses sélecteurs CSS C'est là qu'intervient la commande Contains. Nous avons donc ici un bouton avec le texte, cliquez pour activer la fenêtre contextuelle Et lorsque nous cliquons dessus, une fenêtre contextuelle s'affiche, qui contient un certain texte Je veux donc aller visiter cette page. Après cela, trouvez ce bouton par texte, et après avoir cliqué dessus, je veux vérifier que la fenêtre contextuelle contenant ce texte s'affiche. Passons donc au code Visual Studio. Ici, j'ai une fonction informatique, qui est un cas de test. Et dans le cas de test, visitons d' abord notre page. Ensuite, à l'aide de la commande, la commande contient, nous trouvons le bouton par texte, puis nous cliquons dessus. Après avoir cliqué sur ce bouton, nous essayons de rechercher la fenêtre contextuelle par texte, et nous affirmons que nous vérifions que cette fenêtre contextuelle est visible Alors laissez-moi garder ça, et passons au Cypress Nous observons ici que nous l'avons exécuté. Après cela, avec la commande Ctys, nous avons trouvé notre bouton Après cela, nous avons cliqué dessus, et après avoir cliqué, la fenêtre contextuelle s'est affichée. L'étape suivante consiste à rechercher la fenêtre contextuelle par texte. Et la dernière consiste à vérifier que notre fenêtre contextuelle s'affiche Pour des structures de page plus complexes, où vous devez rechercher des éléments dans d'autres éléments, vous pouvez utiliser la commande find. Cela est particulièrement utile lorsqu'il s'agit d'éléments imbriqués J'ai donc six boutons, et je veux cliquer sur le dernier. Lorsque je clique sur le bouton, une fenêtre contextuelle s'affiche avec le texte cliqué Permettez-moi donc d'ouvrir les éléments et d'essayer de trouver le localisateur de cet élément Nous pouvons donc observer ici que tous ces éléments sont à l'intérieur de cette Div. Ce que je vais faire, c'est trouver le div avec la méthode get, et après cela, je vais rechercher uniquement le dernier élément dans le div. Passons donc au code Visual Studio. Voici donc un autre cas de test. Nous sommes en train de visiter le site Web. Après cela, je recherche, j'obtiens le div qui a de vraies étiquettes. Classe Action Labels. Ensuite, je fouille dans le DIV, tous les avantages que nous avons ici, soit six spas Ensuite, je dis à Chypre que je veux avoir que le dernier jeu et je clique dessus Après avoir cliqué sur cet élément, je trouve la fenêtre contextuelle et je valide que le texte cliqué sur ma fenêtre contextuelle contient du texte Alors allons-y. Faisons ce test. Permettez-moi de sauvegarder et nous pouvons observer ici que nous avons visité la page. Après cela, nous avons constaté que Dev, nous pouvons observer que tous les éléments sont mis en évidence. Ensuite, nous trouvons les spas, tous les spas. Ici, nous avons 66 spas. Et à l'aide de la dernière commande, nous n'avons surligné que la dernière et nous n'avons cliqué que sur la dernière Ensuite, nous avons vérifié que notre fenêtre contextuelle contient le texte sur lequel vous avez cliqué De plus, si nous voulons cliquer sur le premier élément, nous pouvons utiliser la première commande. Alors voyons voir. Ici, seul le premier est mis en évidence. Supposons également que nous voulions cliquer sur le second, nous pouvons utiliser la commande égale et, dans le champ égal, nous devrions donner l'index. Mais notre commande d'égalité est basée sur zéro, zéro indice et le décompte commence à zéro. 01, et celui-ci sera le deuxième élément. Alors économisons. Et ici, lorsqu'il est égal à un, ce sera le deuxième élément. est un autre sujet important boutons radio et des cases à cocher est un autre sujet important. Nous avons donc ici quelques cases à cocher et quelques boutons radio. Je veux cliquer pour cocher le bouton radio et cocher et cocher cette case. Essayons donc de trouver le sélecteur pour la case à cocher. Ici, nous pouvons essayer de trouver par valeur. Contrôlons F et valeur. Nous avons quatre éléments. Nous pouvons d' abord utiliser le commun pour cela. Et pour notre bouton radio, essayons de trouver ici que nous avons AD, et je pense que AD est unique, unique en son genre. Passons donc au code de Visual Studio. Ici, nous avons un test où nous nous rendons en premier. Ensuite, nous trouvons notre bouton radio par identifiant, qui est unique, puis à l' aide de la vérification de méthode, nous vérifions ce bouton radio. Ensuite, nous allons trouver la première case à cocher et nous allons la cocher. Après cela, nous voulons le décocher. Ouvrons donc le Cypress et le Big Cypress Papen. Et sélectionnez notre test. Nous avons donc d'abord visité le site Web. Ensuite, nous avons découvert que notre bouton est surligné ici. Ensuite, nous l'avons vérifié. Et maintenant, nous pouvons observer que notre bouton radio est coché. La prochaine consiste à trouver nos cases à cocher. Nous en avons trois ici, et nous avons dit que nous voulions vérifier uniquement le premier, qui est mis en évidence ici. Après cela, nous avons vérifié et nous pouvons observer ici que le premier est vérifié. Et l'action suivante a été de le décocher. Nous pouvons donc constater ici que cela n'est pas contrôlé. La dernière action pour aujourd'hui consiste sélectionner une option dans une liste déroulante. Essayons donc d'abord de trouver cette liste déroulante, cet argument de sélection. Ici, nous pouvons observer que nous avons une sélection et qu'à l'intérieur, nous avons toutes ces options. Nous voulons donc trouver la sélection, puis nous allons sélectionner des éléments à l'aide de la sélection commune en utilisant le nom de l'option. Essayons donc de trouver par classe. Je vais utiliser uniquement le premier, le second. Action. Disons qu'il s'agit d'une sélection. Oui, nous en avons ici un. Et après cela, l'option sera sélectionnée par le bouton Oh, passons au code Visual Studio. Voici mon cas de test avec le select. Nous avons visité le site Web et après cela, nous avons trouvé l'élément sélectionné, puis, à l'aide de la sélection commune, nous indiquons l'option que nous voulons sélectionner. Alors, sauvegardons et vérifions le résultat. Nous avons donc trouvé ici l'entrée de sélection et, à l'aide de la méthode de sélection, nous avons sélectionné l'option souhaitée. Essayons maintenant de tous les exécuter, et nous voyons que nous avons testé pour G et que le type contient, puis cliquez sur Rechercher et cliquez, vérifiez et sélectionnez. Tous ces cas de test ont quelque chose en commun , à savoir la première étape, visitez le site Web. Dans ce cas, nous pouvons extraire cette étape de visite en dehors de notre test et la mettre à l'intérieur avant chaque bloc de code. Essayons donc de le faire avant. Avant chacune d'entre elles. C'est la syntaxe. Donc, ici, avant chacun, nous ajoutons quelque chose qui sera exécuté avant chaque fonctionnement avant chaque cas de test. Permettez-moi donc de le supprimer de tous les cas de test. Et maintenant, avant chaque test, nous devrions visiter le site Web. Nous allons donc enregistrer et vérifier les résultats. Nous pouvons donc observer ici qu' avant la première étape du premier test, nous avons visité le site Web. va de même pour le second et pour chacun d'entre eux. C'était donc tout pour le cours d'aujourd'hui. J'espère que vous avez apprécié. Rendez-vous dans les prochaines leçons. 8. 8. Comment extraire du texte d'un élément Web.: Bonjour, dans cette leçon, nous aborderons un scénario de test très courant, qui consiste à extraire du texte d'un élément Web Dans un environnement de test réel, vous allez vérifier le texte très souvent. Passons à l'éditeur de code. Donc, ici, j'ai déjà créé un nouveau dossier et un nouveau fichier pour extraire le texte d'un élément Web, et j'ai ajouté un test. Dans notre test, je souhaite donc accéder au site Web sourcedmo.com et vérifier le logo à partir du texte, à partir du Copions donc d'abord notre URL. Passons au code Visual Studio et ci point Visit et à notre lien. Le suivant, nous devrions trouver le logo, le sélecteur CSS du logo Ainsi, en cliquant avec le bouton droit sur Inspecter, nous pouvons constater que notre logo a une classe. Essayons donc le contrôle F, et essayons de trouver par point de classe et par nom de classe. Donc, je reçois le nom de la classe. Et à l'étape suivante, nous devrions utiliser la clause DN, et à l'intérieur, nous devrions stocker notre objet. Nous pouvons lui donner un nom. Donnons-lui un logo. Objet du logo. Nous pouvons maintenant extraire le texte de cet objet de logo. Je vais créer un inconvénient et je l'appellerai texte du logo. À partir de notre objet, objet logo, j'appellerai la méthode du texte. Cette méthode extraira le texte et le prononcera dans notre constante. Maintenant, si nous voulons vérifier si notre logo contient le texte attendu, nous pouvons utiliser expect here, nous devons donner le texte du logo, et le texte de notre logo doit être égal à, voyons, gonfler b. D'accord. D'accord. Faisons des économies, ouvrons Chypre et Big Cypress. Pour Cron, extrayez le texte et notre fichier. Nous naviguons et ensuite, nous extrayons le texte de ce logo et l' Une autre façon de faire la même assertion peut également être d'obtenir notre élément et d'utiliser should assertion should have the text Sword labs. Observons donc. Nous avons ensuite navigué, nous avons fait la première assertion et la seconde C'est ainsi que nous pouvons extraire simplement le texte d'un élément b et valider que notre texte est le bon. Rendez-vous dans No pleasans. 9. 9. Assertions dans Cypress.: Bonjour. Dans la leçon d'aujourd'hui, nous allons parler de ce que sont les assertions de Chypre En ce qui concerne la documentation chypriote, qui est très bien décrite et assez détaillée, je vous recommande vivement de lire cette assertion de documentation décrivant l'état souhaité d'un élément. Chypre a de nombreuses assertions implicites. De nombreuses commandes ont une assertion intégrée par défaut. Par exemple, la commande visit attendra que la page soit chargée ou la commande get attendra que l'élément existe dans le doom Essayons de comprendre comment fonctionne la méthode CI get à partir de notre exemple. Nous visitons ici le site Web de démonstration des sources et nous essayons de trouver un élément par identifiant qui n'existe pas. Essayons donc de trouver cet identifiant, identifiant inexistant sur la page principale et zéro ou zéro. Ainsi, le Cypress réessaiera automatiquement et attendra que le temps d'attente par défaut soit de 4 secondes. Et après cela, nous échouons. Essayons donc d'ouvrir et de courir. Gagnons encore une fois, sauvegardons et faisons notre test. Ici, nous avons exécuté la visite de première ligne, et ensuite, notre méthode G, faisons-le encore une fois. Notre méthode get attend et réessaie jusqu'à ce qu'elle trouve l'élément pour lequel elle recevra un délai d'expiration ici Le délai par défaut est donc de 4 secondes, mais dans notre méthode get, nous pouvons fournir notre délai d'attente en millisecondes Donc, si nous voulons attendre un élément pendant 10 secondes, nous pouvons fournir 10 000 millisecondes Donc, ici, nous pouvons observer que G prend beaucoup plus de temps que 10 secondes. Et après cela, cela a échoué, et ici dans l' année, nous pouvons constater qu'il nous reste 10 secondes. Nous avons ici une liste de toutes les assertions disponibles à Chypre. Et pour chaque assertion, nous avons les deux options en utilisant commandes Cypress should ou en utilisant expect Passons maintenant au code Visual Studio et essayons d'utiliser la même assertion. Mais avec les deux options, nous devrions et nous attendons à ce que nous utilisions une assertion pour vérifier la classe. Celui-là, nous le devrions et nous y attendions. Nous allons donc accéder à la démo de S, et nous voulons vérifier que notre bouton de connexion contient cette classe. J'ai déjà préparé le code, nous sommes donc en train de naviguer. Ensuite, j' extrais la valeur et je enregistre sur notre bouton de connexion par identifiant, en enregistrant cette variable, puis utilisant expect that login button to have class et notre nom de classe Et la deuxième option en utilisant should est également d'extraire et d'enregistrer C Je reçois notre bouton et je devrais avoir la classe et le nom de notre classe Passons maintenant à notre coureur et essayons de faire notre test. Donc, après avoir visité la page, nous avons trouvé notre bouton et avons affirmé que notre bouton avait une action de type « bouton d'envoi » et « bouton d'action ». La même chose que nous avons faite en utilisant la commande Cyprus devrait. Résumons ce que nous avons appris sur l'assertion. À Chypre, nous avons deux types d' assertions. Nous devrions nous y attendre, mais les deux obtiennent le même résultat. Si vous souhaitez en savoir plus sur l'assertion chypriote, vous pouvez consulter la documentation chypriote sur l'assertion C'est très clair et intuitif. Rendez-vous dans les prochains cours. 10. 10. Comment ajouter des captures d'écran et des enregistrements vidéo aux tests.: Bonjour. Dans la leçon d'aujourd'hui, nous allons apprendre à réaliser des captures d'écran et des vidéos à Chypre. La fonctionnalité de capture d'écran à Chypre est très simple. À partir de l'Object CI global, vous devez appeler la capture d'écran de la méthode. C'est ça. La méthode de capture d'écran peut prendre quelques paramètres tels que le nom du fichier et les options de cette liste. Ici, nous pouvons avoir quelques options telles que la capture de la page d'automne. Literie, temps mort, et une dioption très intéressante est le remplacement, qui est faux par défaut Mais si nous le définissons sur true, si nous exécutons le même test plusieurs fois, nous n'aurons pas de copies de captures d'écran Essayons d'ajouter quelques captures d'écran dans notre test. Après avoir accédé à la page, cela provient de l'Object CI global, d'une capture d'écran et d' une autre capture d'écran après avoir cliqué sur le bouton de connexion Capture d'écran CI. Nous ne donnons donc ici aucun nom ni aucune option. Disons qu'après la visite, nous avons fait une capture d'écran, et une autre après avoir cliqué sur la page de connexion Passons donc au code de Visual Studio. Ici, nous pouvons observer qu'un nouveau dossier, des captures d'écran ont été créés. Et dans ce dossier, nous avons nos captures d'écran. Nous n'avons fourni aucun nom ni aucune option. Et Chypre, par défaut, a créé le nom de la capture d'écran en divisant le nom de la combinaison et le nom du test Essayons maintenant d'ajouter le nom des captures d'écran. Donc, écran de la première page, et sauvegardons. Nous pouvons donc constater ici que nous avons ajouté deux nouvelles captures d'écran. Supprimons maintenant ce dossier. Supprimer. OK. Une autre fonctionnalité importante de la capture d'écran est donc que nous pouvons créer une capture d'écran d'un élément spécifique. Dans notre cas, essayons de faire une capture d'écran uniquement de cet élément de ce bouton. Donc, après CIG et notre élément, nous ne pouvons pas faire de capture d'écran. Donnons-lui un nom Bouton de connexion. Faisons notre test en cours ici. Jetons donc un coup d'œil à notre dossier de captures d'écran. Ici, nous n'avons que la capture d'écran du bouton de connexion. Il est temps d'apprendre comment démarrer l'enregistrement vidéo pour notre test. Dans notre dossier Cypress contenant nos tests, nous avons un fichier de configuration, Cypress Config dogs Pour démarrer l'enregistrement vidéo de notre test, nous devons ajouter ci-dessous la configuration de définition dans la configuration de définition, un nouveau paramètre vidéo et le définir sur true. C'est tout ce que vous devez faire pour enregistrer vos tests. Un autre point important à propos l'enregistrement vidéo est que l'enregistrement ne démarre que lorsque vos tests sont exécutés sans avertissement à partir de la ligne de commande Donc, si je le sauvegarde et que je fais nos tests, rien ne se passera. L'enregistrement ne démarrera pas car lorsque nous sommes en train de courir, nous pouvons observer notre déroulement d'essai. Pour exécuter notre test à partir de la ligne de commande, nous devons d'abord copier le PAP dans notre test Je vais donc copier le chemin relatif et dans le terminal, je vais taper PX, Cypress Run, dash dash, spec et Ibec, et je mettrai le PP après avoir Ici, nous verrons les journaux et exécuterons le démarrage Cypress Headless en utilisant navigateur Electron et il a trouvé une capture d'écran et une vidéo adaptées Ici, nous pouvons observer le nom une capture d'écran, une vidéo de la suite et le nom du test. Les résultats sont donc un test de 3 secondes , des captures d'écran et une vidéo. Maintenant, nous pouvons observer que nous avons un nouveau dossier vidéo et à l'intérieur de ce dossier, nous avons notre vidéo. Nous pouvons donc observer notre test. Résumons notre leçon. Pour la capture d'écran, ajoutez simplement méthode de capture d'écran par points CI dans votre test. Et pour la vidéo, il suffit d'ajouter nouveau paramètre video T dans le fichier de configuration Cypress C'est tout pour le cours d'aujourd'hui. Rendez-vous dans les prochaines vidéos. 11. 11. Exercice pratique 1.: Bon retour. Dans cette section de notre cours, nous allons faire un peu de pratique. Comment cela va-t-il fonctionner ? Je vais vous présenter le cas que je souhaite automatiser. Ensuite, vous mettez une vidéo en pause et vous essayez de l' automatiser vous-même. Une fois que vous aurez terminé avec l'automatisation, passez à la vidéo et comparez votre implémentation avec la mienne. Commençons par notre premier cas de test. Tout d'abord, nous allons accéder au site Web de démonstration des sources. Ensuite, nous allons nous connecter en utilisant l' utilisateur standard et le mot de passe secret. En cliquant sur la page de connexion. Après nous être connectés, nous devons affirmer que nous devons vérifier que nous avons été redirigés vers la page principale des produits. Suggérez que nous puissions vérifier ici que ce produit textuel est présent. L'étape suivante consiste à ajouter le dernier produit à la carte en cliquant sur ce bouton. Après cela, nous devons affirmer que ce bouton a été supprimé et que l'ajout à la carte n'est pas présent. La prochaine étape sera d'accéder à la page de la carte en cliquant sur ce bouton, et à la fin, nous devrions affirmer que le TM a été ajouté à la carte J'ai donc ajouté ici toutes les étapes. Vous pouvez maintenant mettre la vidéo en pause et revenir une fois la mise en œuvre terminée. La première étape sera donc de naviguer. Ensuite, laissez-moi faire le logo. Après cela, en cliquant avec le bouton droit de la souris et en inspectant, trouvons le sélecteur pour le nom d'utilisateur et le mot de passe Nous avons donc ici l'ID, le contrôle F, et trouvons par ID égal et la valeur ID l' une d'un nom d'utilisateur. OK, donc cIPTG le nom d'utilisateur et le type de méthode. Tapons ici le mot de passe utilisateur standard, et trouvons également le sélecteur de mot de passe Ici, essayons de trouver Let's Taper par nom. Et ici, nous avons un nom. Passe l'un des deux. Donc, CI obtient le mot de passe, et nous allons taper la source secrète du mot de passe. OK, la prochaine étape serait de cliquer sur le bouton de connexion. Ici, nous allons par type soumettre. Essayons de trouver un type et soumettons-en un. OK ? Action. Cliquez. OK, alors maintenant essayons de le lancer et de voir si tout va bien. P cyprès ouvert pour ouvrir la Chypre, bout à bout, rouleau Et notre dossier devrait être consacré aux pratiques et aux exercices. Alors, courons. Nous avons la visite. Nous avons le login. Nous sommes maintenant sur cette page. Maintenant, après la journalisation, acceptons que ce texte soit présent. Ici, nous pouvons essayer par test de données, qui est le titre. Test de données, et c'est le premier titre. OK. Essayons donc de faire en sorte que CI get ait du texte Products. Sauvegardons et observons les résultats. Nous avons donc le produit d' assertion. OK, maintenant, après m'être connecté, permettez-moi de tout supprimer. Nous devrions ajouter le dernier. Trouvons maintenant le sélecteur correspondant à ce bouton. Ici, nous avons l' identifiant, le test de données. OK, voyons quel est le bouton et l'identifiant. Je vais copier la pièce d'identité. C'est long, des frais de contrôle pour cela, pour cette entrée. Donc ID, et on peut aussi dire qu'il s'agit d'un bouton. OK. Si tu fais un jeu de mots, nous allons cliquer sur ce bouton. Après avoir cliqué sur ce bouton, nous devons accéder à la page de la carte. Laissez-moi trouver le sélecteur pour For the card. OK, pour le test des données, nous sommes là. Test égal. Moi. OK. Quelque chose ne va pas. Faisons-le encore une fois. Nous avons ici une pièce d'identité. W par classe. Essayons par classe. OK, l'un des deux. Copiez ce S get click. OK. Sauvegardons et vérifions les résultats. Donc, après l'avoir ajouté au panier, nous avons trouvé le bouton du panier, nous avons cliqué et nous avons été redirigés vers cette page Nous devons maintenant affirmer que le projet ou notre produit a été ajouté à la carte. OK, donc récupérons l'élément de données du sélecteur. Faisons un test de données. Sans téléphone. OK. OK, maintenant extrayons le texte. Ensuite, nous aurons un article provenant d'une voiture. Maintenant, enregistrons notre texte dans un texte constant, un élément de coût, un nom, article provenant de la voiture et un texte de méthode. OK, nous avons maintenant le texte de l'article. Validons-le en utilisant le nom de l'élément attendu, le nom du texte de l'élément égal et copions le nom à partir d'ici. OK. Sauvegardons et vérifions les résultats. Après avoir navigué, nous saisissons cet élément, enregistrons le texte et affirmons que le texte C'était donc tout pour cet exercice. J'espère que tes résultats sont apparemment les mêmes. Rendez-vous dans la prochaine leçon. 12. 12. Exercice pratique 2.: Bonjour et bon retour. Continuons avec pratique avec notre deuxième leçon. Je vais vous présenter ce que nous voulons automatiser et après cela, vous mettrez la vidéo en pause et essaierez de le faire vous-même. Ensuite, continuez la vidéo et vérifiez les résultats. Comparez votre code avec ce que je vais essayer d'automatiser. Passons donc à ce scénario. Nous allons d'abord accéder à la démo source. Ensuite, nous nous connecterons avec l'utilisateur standard. La prochaine étape sera d'ajouter deux articles à la carte. Ensuite, nous devons vérifier que l'icône de la carte d'achat est bien deux car nous avons ajouté deux articles à la carte. La prochaine action sera de cliquer sur le menu, d' ajouter avant le droit en haut de l'État Après cela, nous devrions vérifier que cette icône a disparu. Nous n'avons aucun article sur la carte. La prochaine étape sera de trier ici du plus bas au plus haut. Après cela, nous devrions effectuer un rechargement, un rechargement de page. Et la dernière sera de vérifier une fois de plus que le numéro de l'icône a disparu. Et c'est tout. Passons donc au code de Visual Studio. Je note donc ici toutes les étapes. Laissez-moi créer deux trous sur la carte. OK. Donc, pour ce qui est de la marchandise, je vais reprendre le journal en partie de la dernière vidéo parce que c'est pareil. OK, maintenant nous avons le login. L'étape suivante est celle de la carte. Cherchons les localisateurs de ces boutons. Nous pouvons donc constater ici que nous avons un identifiant. OK. Contrôle T. Trouvons un identifiant. OK, l'un des cinq. C'est une bonne chose. Si cela apparaît et que nous allons passer au formulaire, cliquez sur Action. OK. Cliquons maintenant sur le deuxième bouton de la voiture. Ici, prenons-le par son nom. OK. N est égal à la valeur. Ci point G, et action, cliquez. OK, essayons de courir pour voir si tout va bien maintenant et laissons Cypress ouvert Et pour terminer, la ligne OK, nous avons des exercices, c'est le même fichier que la dernière fois. J'ai donc navigué dans la connexion. Après cela, le premier est ajouté à Card Potter et le second. OK. Ensuite, la prochaine étape sera de vérifier ce numéro. Je peux les numéroter. Voici donc deux éléments, et essayons de trouver le sélecteur CSS Ici, nous avons une page de panier d'achat. Claus et test de données, essayons par classe, très bien. Frais de contrôle plus l'appel et le nom du cours, l'un ou l'autre. OK. Essayons maintenant d'extraire pour enregistrer cet objet, puis nous allons extraire le texte. Ensuite, faites vos achats. Icône de carte rose. OK. Maintenant, nous sauvegardons cet article ici. Et maintenant, créons une constante. Nombre d'articles contenus dans la carte. OK, et c'est égal au texte du titre du panier. C'est ainsi que nous avons écrit le texte. Et maintenant, utilisons le nombre attendu de l' assertion. Égal et le nombre doit être deux car seuls deux sont surlignés. OK, voyons voir. Nous obtenons donc cet article et nous nous attendons à ce qu'il y en ait deux. OK. Voyons donc quelle est la prochaine étape après vérification. Nous devons cliquer sur la configuration et vérifier que cette icône a disparu. OK ? Donc, avant de cliquer sur la configuration, nous devons ouvrir ce menu. Et ici, notre menu contient v. Voyons voir. Nous avons un test de données ici. OK. Essayons de trouver par un test à points. OK, sur un drapeau, c'est bon. Cliquez. Ce clic ouvrira le menu, et une fois notre menu ouvert, cliquons sur Réinitialiser l'état du chiot OK. Alors ici, essayons de trouver par texte. Donc, si vous voulez trouver le CI qui contient notre bureau, essayons de cliquer sur Voyons si cela fonctionnera OK, nous avons donc un problème. Examinons le problème. Menu ouvert du test des données. Et notre erreur est de dire ce film parce que cet élément est recouvert par un autre élément. C'est un problème très courant. Et ici, le Cypress fournit une solution à ce problème Ici, nous pouvons utiliser la force par le biais de cette force. Nous cliquerons même si l'objet est recouvert. Essayons donc d'ajouter ici la force. OK. Le clan est double. OK. Sauvegardons et voyons les résultats. Bon, maintenant nous avons le même problème à cause du contenu. D'accord, utilisons également la force true. Bon, maintenant notre test est passé. L'étape suivante consiste à trier les éléments de bas en haut, à recharger la page et à vérifier Maintenant, après le réglage, nous devons vérifier que cette icône a disparu. OK, donc si nous voulons vérifier que quelque chose a disparu, nous pouvons obtenir ce sélecteur de classe d'éléments et affirmer qu'il n'est pas visible ou qu'il n'existe pas Devrait, et essayons de ne pas exister, quitter. OK. Nous pouvons donc réserver notre passe d'essai car cet élément n'existe pas dans notre destin OK. L'étape suivante consiste à trier. OK, essayons de trier du plus bas au plus haut. Ici, nous pouvons observer que nous avons un type d'élément de sélection sélectionné. Donc, pour ce type de sélection avec option, nous devons utiliser la méthode spéciale de sélection par nom. Allons, prenons par classe. OK. Essayons par classe. Ci TTG, par classe, nous mettrons un. dans la voie de classe et dans la sélection de la méthode spéciale, et ici nous devrions fournir la valeur du texte OK, la valeur du texte est donc comprise entre faible et élevée. OK. Disons, voyons les résultats. OK, maintenant c'est du plus bas au plus haut. C'est une bonne chose. La prochaine étape sera de recharger la page. Pour cela, nous pouvons utiliser la méthode par défaut de rechargement du CI. Cette méthode permet de recharger la page. Vérifions-le. OK. Nous pouvons donc voir ici la méthode de rechargement Et la dernière, la dernière étape consiste à vérifier une fois de plus que notre page de panier d'achat n'existe pas. OK, copions-le, et mettons-le à la fin, d'accord ? Voyons voir. OK, donc notre test est réussi. C'est une bonne chose. OK, regardons encore une fois ce que nous avons fait. Nous avons donc navigué sur notre site Web. Ici, nous avons le login. Ensuite, nous avons ajouté deux articles à la carte. Il suffit de cliquer sur le suivant cocher l'icône du panier. C'est égal à deux, nous avons ouvert le menu et cliqué sur l'état de configuration Nous rencontrons maintenant des problèmes parce que les éléments étaient recouverts par autre chose, et pour cela, nous avons utilisé la force pour effectuer le clic même si l'élément est recouvert par autre chose. Dans le dernier cas, nous avons vérifié que icône de la page du panier avait disparu après avoir configuré l'application. Et nous utilisons la méthode de sélection pour sélectionner le tri des prix du plus bas au plus élevé, rechargé la page et vérifié une fois de plus que le panier est toujours vide OK, c'était donc tout pour le cours d' aujourd'hui. J'espère que cela vous a plu. On se voit dans le prochain. 13. 13. Exercice pratique 3.: Bon retour. Il s'agit de la dernière vidéo de notre série d'exercices où nous allons effectuer un test simple. Nous essaierons de nous connecter avec l'utilisateur bloqué et de vérifier votre message. Nous allons donc naviguer en saisissant le nom d'utilisateur d'un journal, la source secrète du passeport. Et après avoir cliqué sur le bouton de connexion, nous devons affirmer qu'un message d'erreur s'est affiché. Passons donc au code de Visual Studio. Créons un nouveau test. Je me connecte avec un utilisateur déconnecté. OK. Trouvons donc encore une fois, les localisateurs Créons par identifiant, contrôlons les frais. pièce d'identité. Tu peux l'utiliser comme ça. Donc, je comprends. Tapez. Utilisons l'option d'exclusion de l'utilisateur. OK. D'accord, donc avant cela, nous devrions visiter le site Web sur lequel nous devons naviguer allons copier l'URL. OK. Tapons maintenant pour trouver le localisateur du mot de passe. Également par identifiant. Et utilisons comme ça le point de police du mot de passe. OK. Mettez de côté ce GD et saisissez le mot de passe, c'est de la sauce secrète OK. Et la prochaine étape sera de cliquer sur le bouton de connexion. Passons également à AD. Écrivons un identifiant comme ça. Ce type d'identifiant, un parmi un, neuf. Asseyez-vous Ga. Et nous sommes en train de cliquer. OK, donc économisons, vérifions les résultats et exploitons le fonctionnement de Cypress depuis le terminal pour passer aux tests, puis commençons les exercices quotidiens OK, nous avons donc navigué en tapant le nom d'utilisateur, le chemin d'accès et en cliquant sur oggi Nous devons maintenant affirmer ce dernier point. OK. Permettez-moi donc d'essayer de trouver l'assertion, le sélecteur pour cela Ici, nous avons un test de données. Nous avons également un bouton, et nous avons le test. Essayons de rechercher par texte en utilisant le contrôle contains. C. Essayons donc de faire en sorte que le CI qui contient soit visible. OK. OK, nous avons donc notre bureau où tout est vert. C'était donc tout pour le prix d'aujourd'hui. Elle a été courte. Rendez-vous dans le prochain où nous ferons un peu de refactorisation, et je vous montrerai comment vous pouvez écrire ce test encore plus facilement en utilisant Cypress 14. 14. Refactorisation et astuces pour des exercices pratiques.: Bon retour. Dans cette leçon, je vais vous montrer comment nous pouvons améliorer le processus de rédaction des scénarios de test ou comment nous pouvons procéder à une petite refactorisation Donc, si nous examinons notre test, nous pouvons constater que la partie connexion est presque présente dans chaque test, uniquement dans le dernier, qui concerne un utilisateur verrouillé. Dans ce cas, nous pouvons mettre un avant chaque hook qui effectuera la connexion à tous nos tests. Essayons donc de le faire. Nous devrions utiliser avant chaque. C'est la syntaxe. OK. À partir du test, nous pouvons simplement effectuer le contrôle et mettre ce code avant chaque visite, puis nous utiliserons le mot de passe et le mot de passe en cliquant sur le bouton d'envoi, et nous vérifierons que nous sommes bien sur la page principale du produit. OK, maintenant nous pouvons supprimer partiellement le journal de tous les tests. Sauvegardons, ouvrons le Cypress et ouvrons le Cypress B. Et des tests, des exercices ronds. Ils fonctionnent donc vite, et nous pouvons observer ici que nous les avons maintenant avant chacun d'eux. C'est notre hook qui effectue la phase de connexion de nos tests. Bon, maintenant, je vais vous montrer une autre fonctionnalité très importante d' Util Cyprus qui vous aidera à écrire encore plus facilement votre test OK, donc je vais sauter cet onglet pour tous les tests. Permettez-moi simplement de le commenter, et je créerai un nouveau test. Un. OK, je vais juste faire quelques calculs. Permettez-moi donc de copier la partie assise et ensuite, nous le ferons avec la sauvegarde de Cypress Nous avons donc fait ici la partie visite. Maintenant, Chypre a ce bouton, et si vous cliquez sur ce bouton, vous cliquerez ensuite sur l'élément b dans lequel vous souhaitez trouver le sélecteur CSS Ici, Cybers vous donnera le sélecteur CSS pour cet élément Et en voici la copie. Maintenant, les Cybers vous donneront le CIG, donc je vais y retourner, il suffit de copier-coller ce que j'ai reçu et nous allons taper ici Permettez-moi de copier l'utilisateur des normes. OK. Trouvons maintenant le sélecteur pour le second OK, laisse-moi cliquer dessus. Nous avons le mot de passe. OK. Donc, j'ai oublié que nous l'avions copié. Tapez Sauce secrète. OK, maintenant c'est bon pour le bouton de connexion. Tu vois, je reçois un bouton de connexion. Control V, cliquez. OK. Essayons de courir et de voir. OK, maintenant nous procédons à la connexion. Ensuite, nous pouvons trouver le test de données, le sélecteur CSS pour tous les éléments de la page Essayons donc d'ajouter un élément à la page. Cliquons. Tout d'abord, nous devons cliquer sur ce bouton puis sur l'élément be. Nous avons ici le test des données pour nos deux boutons de voiture. Copions-le, copiez-le. Ensuite, collez-le ici et exécutez-le. Le déclic. Nous allons donc vérifier les résultats. Ici, nous l'avons réalisé. Oui, nous avons ajouté la carte. C'est une autre fonctionnalité intéressante des cybers qui nous aide à accélérer notre processus de rédaction des kits de test Voilà pour la leçon de goût. Rendez-vous dans la section suivante. 15. 15. Structure générale d'un framework et de sa mise en place.: Bonjour, et bienvenue dans la section du cours où nous allons créer un cadre d'automatisation similaire à ceux utilisés dans les projets du monde réel. Tout d'abord, ici, j'ai ouvert un dossier qui a été créé sur mon bureau. Et dans ce dossier, nous conserverons toutes nos données de test. Ensuite, depuis le terminal, ouvrons un nouveau terminal et exécutons le terminal dans le nouveau dossier, nous devrions y exécuter MBM Cette commande nous aidera à créer un package son, dans lequel nous stockerons des informations sur le projet. Complétons donc le cadre des noms de packages. Cyprès. Désolé, le nom ne peut plus contenir la lettre Capta OK. Cadre. Cyprès. OK ? La version sera une description à 100 %. Frame Framework. Chypre. Tu l'as fait ? OK. Point d'entrée. OK. Commande de test, d'accord. Tout le monde utilise des mots clés vides ou une licence, et oui. OK. Nous pouvons donc observer ici toutes nos données, notre nom, notre version, notre description, nous pouvons les modifier si vous le souhaitez. Et tout le reste n'a pas vraiment d'importance pour nous en ce moment. Prochaine étape, nous devons installer Chypre. Vous allez donc installer Cyprus, je vais le rechercher sur Google. Et le premier lien serait vers la documentation de Chypre. Et voici notre script que nous devons exécuter dans notre terminal. Je vais donc le copier. Et depuis le terrain, laissez-moi dégager la sterne. Je vais placer NBN Istyle Cypress Dev. Ce Cypress Dev montre où nous devons installer la dépendance Permettez-moi donc de cliquer sur Entrée et d'attendre un peu. Au bout de quelques secondes, j'ai tout installé. J'ai le nouveau dossier de dépendance, de package, de log Json et de modèles de nœuds. Il est temps d'ouvrir Cypress pour la première fois. Donc, clarifions-le et pour l'ouvrir, I N Cypress open avons suivi ces étapes Nous avons suivi ces étapes au début du cours, mais c'est pareil. Donc ici, tout n' est pas configuré, nous allons choisir de bout en bout. Ici, tout restera comme ça. J'ai une petite description de chaque dossier, mais continuons. Moi Oui, utilisons quelques exemples pour vérifier que nous avons tout installé. Correct. Il suffit donc de cliquer sur le premier. Oui, tout est vert, qui signifie que nous avons tout installé, c'est correct. Maintenant, quittons le Cypress et revenons au code de Visual Studio Nous avons ici la structure par défaut de base que Chypre crée automatiquement après votre première course. Ici, nous avons dans le dossier Cypress, accessoires de bout en bout et un support Dans le dossier de bout en bout, nous conserverons tous nos tests. Créons donc deux nouveaux dossiers. Pour notre framework, nous allons automatiser le framework de démonstration source que nous utilisons le site Web de démonstration source que nous avons utilisé dans notre cours. Créons donc des dossiers. En gros, nous allons faire des tests pour la page de connexion et pour la page principale des produits. Créons donc un test de démonstration de la source. Épinglons-le comme ça. OK. Nous n'avons pas vraiment besoin de ces deux dossiers, mais gardons-les ici juste un moment. Bien, ajoutons deux fichiers ici pour le test de connexion dotc point gs. OK. Voici des tests pour la connexion et pour le produit. Tests et citations. Je les laisserai vides, mais nous ajouterons quelques tests plus tard. Dans le dossier de support, vous verrez que nous conserverons nos sélecteurs CSS qui nous aideront à les utiliser et à mieux les organiser. Créons donc deux fichiers. Pour chaque page de notre site Web, nous aurons un fichier distinct. Donc, pour la page de connexion, nous aurons un fichier avec tous les sélecteurs que nous utiliserons pour la page des produits, un autre fichier pour la page de la carte, un autre, etc. Le premier sera donc le script dactylographié de connexion. Créons d'abord un dossier et nommons-le objet de page, et nommons-le objet de page car nous utiliserons un modèle de conception qui est un objet de page. Je l'expliquerai plus tard. Déplaçons notre identifiant dans l'objet de page. OK. Et renommons-le ainsi que la page de connexion et la page de connexion OK. Et page de produits. À propos de la page Modèle de conception d'objets, nous en parlerons dans les prochaines leçons. Et jetons un coup d'œil au dossier Commons. Ici, nous pouvons ajouter nouvelles commandes que nous pouvons utiliser dans tous nos tests. Nous en parlerons dans les prochaines vidéos. Et à Chypre, de bout en bout, nous ajoutons ici la vidéo de notre test, mais nous utiliserons également ce fichier pour ajouter des rapports de test pour nos tests. Et c'est ce que nous ferons dans les prochaines leçons. C'est la structure de base principale du framework Cypress qui est très similaire à un framework utilisé dans des projets du monde réel Nous avons donc ici notre fichier dans lequel nous allons conserver les tests. Nous avons un fichier dans lequel nous conserverons les sélecteurs CSS ainsi qu'un fichier important pour ajouter des commandes et le fichier de configuration C'était tout pour le cours d'aujourd'hui. À bientôt. 16. 16. Mettre en œuvre le modèle d'objet Page dans le framework Cypress.: Bon retour. Dans la leçon d'aujourd'hui, nous allons parler du modèle de conception d' objets de page et façon dont nous pouvons l' implémenter pour notre site Web. Troisièmement, examinons la première page que nous voulons automatiser. À partir de là, pour écrire nos scénarios de test d'automatisation, nous aurons besoin du sélecteur CSS pour la saisie utilisateur, pour le mot de passe et pour le bouton de connexion Maintenant, renommons ces fichiers depuis TS, c'est l'extension de quatre TypeScript, nous utilisons ici C'est la bonne extension. OK. Maintenant, discutons un peu du fichier BageObject. L'objet de notre page de connexion doit contenir les sélecteurs pour tous les éléments Web que nous allons utiliser à partir de cette page, action qui peut être effectuée avec ces éléments Web Par exemple, avec cette entrée de nom d'utilisateur, nous pouvons effectuer le type ici. Ainsi, dans cette classe du fichier objet de cette page, nous devrions avoir le sélecteur pour cet élément et l'action qui peut être effectuée avec cet élément Commençons maintenant par créer notre fichier objet de première page. À partir des fichiers par défaut, je copierai ce commentaire qui nous aidera à compléter automatiquement depuis le Cypress OK, donc tout, tous les sélecteurs CSS et toutes les actions devraient se trouver dans une seule classe L'une des classes est le modèle de notre objet de page. Alors laissez-moi créer notre classe. Je vais utiliser le mot clé Export car à l'aide de ce mot clé Export, nous pouvons utiliser l'objet de la classe en dehors de ce fichier. Exportez donc la classe, et nommons-la comme page de connexion. Nous devons maintenant créer un objet qui regroupera tous nos sélecteurs CSS Alors laissez-moi le renommer. Page de connexion : les éléments. OK. Donnons ici un nom à notre premier élément Web, qui est la saisie du nom d'utilisateur. Appelons-le donc quelque chose comme saisie du nom d'utilisateur. Et la syntaxe ici est simple. Nous donnerons ici le nom que nous avons mis depuis le début, CIG, à l'intérieur duquel nous ajouterons notre sélecteur CSS Maintenant, allons-y. Trouvons le sélecteur CSS pour le nom d'utilisateur. OK ? Ici, nous avons un test d'identification et de données. D'accord, utilisons un identifiant pour cela. Application de contrôle. OK. Je ne l'ai pas copié. Utilisateur alors. OK. Donc, l'un d'un, copiez-le. Et mettons-le ici. Bon, nous avons maintenant le premier élément. OK. Ajoutons également pour le mot de passe et pour le bas de connexion. Mot de passe, saisie. La syntaxe est la même. La seule différence réside dans les sélecteurs. OK. Trouvons le sélecteur correspondant à celui-ci Mot de passe également fourni par AD. OK, utilisons l'identifiant ici. Mot de passe, copions-le. OK. Et pour le bouton de connexion, nous devrions également avoir ici un identifiant. Oui, bouton de connexion. Sympa. OK, l' un des deux. Copions. Et ajoutons le sélecteur de boutons de connexion. Bouton de connexion. Même syntaxe. Donc je comprends. D'accord, nous avons maintenant les sélecteurs pour tous les éléments que nous allons utiliser au début Après avoir ajouté tous nos éléments Web, il est temps d'ajouter les méthodes pour nos éléments, les actions qui peuvent être effectuées avec nos éléments. Ainsi, pour le premier élément Web, qui est la saisie par l'utilisateur, nous pouvons effectuer une saisie. Donnons donc un nom à notre action, quelque chose comme Yenter user inter user name OK ? Et c'est une méthode. Et dans ce champ, nous devons taper un nom d'utilisateur. Et ce nom d'utilisateur, ce sera une chaîne. Notre méthode, notre action prendront comme argument un nom d'utilisateur, d'accord ? Nous devons donc maintenant utiliser cet objet pour accéder à notre élément. Cet objet est donc utilisé avec ce clavier après notre objet. Et à partir de cet objet, nous avons notre nom d'utilisateur saisi, en tant que méthode et notre type d'action. Et pour le type, nous utiliserons le nom d'utilisateur. OK. Maintenant, nous pouvons faire la même chose avec le mot de passe Year. Je vais simplement le copier ainsi que le mot de passe, ici nous avons le mot de passe et aussi ces éléments de connexion, type de saisie du mot de passe et le mot de passe. OK, la dernière action sera de cliquer sur le bouton de connexion. Permettez-moi donc de créer une méthode qui sera de cliquer sur le bouton de connexion. OK, notre méthode ne reçoit rien parce que nous ne faisons que cliquer, pas taper. Et voici notre objet qui contient tous les éléments, notre bouton de connexion et notre action. Cliquez. OK. Nous avons maintenant des actions distinctes pour saisir le nom d'utilisateur, saisir le mot de passe et cliquer sur le bouton de connexion. Nous pouvons les regrouper pour n'avoir qu'une seule méthode, qui s'appellera login. Créons donc une méthode de connexion. Et pour la connexion, nous avons besoin d'un nom d'utilisateur et d'un mot de passe. Donc, dans le login, nous allons d'abord saisir le nom d'utilisateur. Entrez le nom d'utilisateur. Et voici le nom d'utilisateur. OK, alors nous allons entrer le mot de passe, et nous allons entrer le mot de passe que nous allons donner lors de nos tests. Et le dernier cliquera sur le bouton de connexion. Maintenant, résumons ce que nous avons ici. Nous avons un cours avec une page de connexion. Dans notre page de connexion, nous avons tous les objets, à savoir le nom d'utilisateur, le mot de passe et le login. Et pour chacun des éléments, nous avons leur action. Ici, nous pouvons taper quelque chose. Ici, nous pouvons cliquer. Nous devons saisir le nom d'utilisateur, saisir le mot de passe et cliquer sur le bouton de connexion. À la fin, nous regroupons toutes ces actions en une seule grande action que nous effectuerons lors de la connexion à l'application. Nous devons maintenant créer le même fichier objet de page pour la page des produits. À partir de là, nous aurons besoin de ce bouton de sortie de la carte, ce bouton de suppression et du bouton de carte. J'ai déjà tout ajouté ici. Je vais juste expliquer ce que nous avons. C'est donc presque pareil qu'ici, nous avons des éléments pour le bouton AT Cart du sac à dos pour celui-ci. Nous avons un bouton pour retirer le sac à dos. Après avoir cliqué sur Atocar, nous avons le bouton Supprimer, et nous avons le bouton Panier, qui est une classe Trouvez-le, contrôlez les frais. Donc celui-ci. Ouais. Donc, à partir des méthodes, nous avons une action de méthode qui vérifie que le bouton de la carte existe. Seuls les éléments, le bouton de la carte et notre assertion devraient être visibles. De plus, nous avons ajouté un sac à dos à la carte, en cliquant simplement sur ce bouton. Et le dernier consiste à vérifier que bouton de suppression du sac à dos apparaît après avoir cliqué sur le bouton Ajouter à la carte. C'est donc essentiellement tout pour les leçons d'aujourd'hui. Leçon. Nous avons deux objets de page avec des éléments et leurs actions. Nous rédigerons quelques tests dans la prochaine leçon, alors à bientôt. 17. 17. Tester la page de login.: Bonjour, je me réjouis de votre retour. Dans la leçon d'aujourd'hui, nous allons ajouter des tests pour la page de connexion, en utilisant l'objet de page que nous avons créé dans la version précédente. Nous allons donc utiliser les objets de page de connexion et de page proto. Passons maintenant au test de connexion CI et commençons ce commentaire qui nous aidera à corriger automatiquement les erreurs. Créons maintenant une suite de tests. Je vais le décrire. Nous donnons le nom « tests de page de connexion ». Et à l'intérieur de celui-ci, nous ajouterons notre test. Créons notre premier test, qui sera enregistré avec des résidus de maïs. OK. Et la première étape sera le CI Vs. Nous allons accéder à notre application de démonstration source Permettez-moi donc de copier ce chemin. OK. Sans modèle d'objet de page, nous trouverions simplement le sélecteur CSS, l'ID pour cela et nous ferons point Cici. Ici, nous aurons un identifiant, et nous utiliserons le type ou Mais maintenant, nous avons déjà défini tous nos sélecteurs SS ici même avec CI G. Donc, dans cette classe de page de connexion, nous avons tout ce dont nous avons besoin Nous avons nos sélecteurs et notre méthode. Donc, pour utiliser tout ce que nous avons à l'intérieur, nous devons créer un objet de cette classe. Créons donc un objet de cette classe qui contiendra tout ce que nous avons dans cette classe de page de connexion. Nous avons donc ici le mot-clé export, ce qui signifie que nous pouvons l'utiliser dans une page en dehors de ce fichier. Permettez-moi donc de créer cette connexion égale à Nouvelle page et page de connexion. Ici, nous avons Autoiput. Voici le chemin d'accès à notre fichier. Nous pouvons prendre en charge la page Objects Login page d'assistance Object Login. Donc, il suffit de cliquer dessus obtenir une importation automatique comme ça. Nous pouvons donc maintenant utiliser les méthodes définies dans leur intégralité depuis la page de connexion. Donc, après avoir visité la page, nous saisissons le nom d'utilisateur et le mot de passe. Point de la page de connexion YenerUsername. Et ici, notre méthode de nom d'utilisateur demande un nom d'utilisateur. Donc, lorsque nous l'utilisons, nous devons donner un nom d'utilisateur. Passons au Visual de Google Chrome et copions ce nom d'utilisateur. OK. Donc, après avoir saisi le nom d'utilisateur, entrons le mot de passe, page de connexion, entrez le mot de passe. Donc, pour le mot de passe, c' est pareil. Notre mot de passe demande un mot de passe, OK, qui sera utilisé pour saisir le mot de passe saisi ici. Donnons donc le mot de passe. C'est un secret. Ça va, ça fait Et la dernière touche consiste à cliquer sur le bouton Connexion, qui ne reçoit rien Il suffit de cliquer sur le bouton à partir d'ici. OK, donc partons du terminal, partons du terminal, du nouveau terminal, et passons à MP Cypress, Copan Nous allons tester ce que nous avons ici. Et pour terminer les tests de connexion. Notre test a donc réussi, nous avons la partie visite. Ensuite, nous saisissons le nom d'utilisateur, le mot de passe et cliquons sur le bouton de connexion. Ajoutons maintenant une autre assertion pour vérifier que nous nous sommes retrouvés sur la page des produits. Donc, sur la page des produits, nous avons ce bouton de carte. C'est ainsi que nous pouvons vérifier qu'après la connexion, nous le redirigeons vers la page des produits. Nous l'avons déjà sur la page des produits, nous avons le bouton de la carte et nous avons une action, une assertion qui vérifie que ce bouton de la carte est visible. Nous devons donc maintenant utiliser ces éléments et ces méthodes dans nos tests de journalisation et de journalisation. Donc, pour cela, nous devrions créer un autre produit principal nouvelle page de produit égale et également. Nous devrions avoir une nouvelle importation. Maintenant, à partir de cette page de produits, nous devons utiliser le bouton de la carte qui existe, ce qui revient simplement à affirmer que ce bouton est visible La page du produit sur le bouton de la carte existe donc. Sauvegardons cela et passons au pour vérifier les résultats. OK, donc après avoir cliqué, nous sommes redirigés vers la page des produits, et nous avons ici l'affirmation que ce produit est visible. Ajoutons un autre test qui vérifiera ce qui se passera si nous essayons de nous connecter avec nos propres informations d'identification. Copions donc celui-ci et ne le consignons qu'avec des informations d'identification incorrectes. Donc, une sauce secrète. OK, allons-y. OK, donc après avoir cliqué, nous ne sommes pas redirigés vers la page du produit. Nous recevons un message d'erreur. Nous devons maintenant affirmer cette erreur d'erreur. Essayons de le reproduire manuellement. Je vais ajouter quelque chose comme ça. Trouvons le sélecteur CSS correspondant à cette erreur. Nous avons une erreur de test de données. OK. Contrôlons F. Data. Voilà, d'accord, c'est l'un d'entre eux. Ajoutons ce sélecteur à l'objet de notre page de connexion Donc message d'erreur, la syntaxe est la même. Du côté qui va droit. Et voilà, mettons notre message. Et pour ce message d'erreur, nous pouvons créer ici une méthode, mais nous pouvons l'utiliser à partir des éléments de cette page de connexion. Essayons de faire quelque chose comme ça. Ainsi, après avoir cliqué, nous nous connectons, les éléments de la page de connexion , le message d'erreur et notre assertion devraient être visibles. OK, alors lançons OK, message d'erreur n'est pas une fonction. Je ne l'ai pas enregistré ici. OK, c'est l'erreur. D'accord, maintenant tout fonctionne correctement, mais nous ne pouvons pas enregistrer automatiquement le fichier Donc, une fois que nous aurons modifié quelque chose, il sera sauvegardé automatiquement Mais je vais l'enregistrer manuellement, mais vous pouvez faire quelque chose comme ça. Résumons ce que nous avons fait dans la leçon d'aujourd'hui. Nous avons donc ajouté deux tests qui testent la fonctionnalité de connexion, l' un avec des informations d'identification correctes et le second avec des informations d'identification incorrectes Nous visitons le Bige. Ensuite, nous avons créé deux objets de notre Bage, des objets pour le sac de connexion et la page des produits À l'intérieur de ces objets. Nous avons tous les éléments Web et toutes les actions disponibles pour ces éléments Web. Nous pouvons également améliorer nos tests en les plaçant avant chacun d'eux, car avant chaque test, nous visitons la démonstration de la sauce. Essayons donc de le faire. Avant chacune, il y a la syntaxe. OK, alors retirons-le d'ici. Et à partir de là, ajoutez-le ici. Supprimons uniquement et enregistrons-le manuellement. Nous avons maintenant deux tests qui se visitent avant chacun et avec le vert. C'était tout pour le cours d'aujourd'hui. On se voit dans le prochain. 18. 18. Tester la page des produits.: Bonjour, et bon retour. Dans la leçon d'aujourd'hui, nous allons ajouter quelques tests pour la page des produits. Passons au fichier de test du produit. Et ici, les étapes sont similaires. En ce qui concerne la page de connexion. Tout d'abord, j'ai beaucoup de choses à venir qui vous aideront à passer à la saisie automatique. Ensuite, je créerai une suite de tests pour la page des produits, et à l'intérieur de celle-ci, nous pourrons ajouter notre test. La première étape sera d'ajouter un produit, la carte. D'accord, donc au début, nous devrions simplement visiter notre site Web. OK, alors j'ai oublié d' ajouter OK, maintenant, je pense que c'est bon. Copions l'URL. Et après cela, nous devrions faire l'enregistrement. Pour la partie connexion, nous devrions avoir tout ce que nous avons dans la page de connexion, l'objet de page. Créons maintenant cet objet, connexion, nouvelle page de connexion identique. Et nous avons ici importé. La page de connexion crée maintenant la produits, la page des produits. Eh bien, aucune page produit. OK. Nous avons donc ici deux objets dans lesquels tout est contenu. Ensuite, il y a l'importation. Maintenant, nous allons procéder à la connexion. Nous pouvons le copier du test précédent. Ici, c'est simple, entrez le nom d'utilisateur, le mot de passe et cliquez sur le bouton de connexion, l'étape suivante consiste à cliquer après avoir effectué la connexion, laissez-moi effectuer la connexion. Nous devons cliquer sur le bouton «   Ajouter à la carte » , que nous avons déjà créé ici. Nous avons un sac à dos au niveau du bouton de la carte et du bouton de retrait. Passons donc au code de Visual Studio. Et depuis la page des produits, cliquez sur Ajouter une carte. Réajoutons donc à la carte ici. Nous allons appliquer la méthode du clic. OK. Après cela, essayons d'abord de lancer le test pour voir si tout va bien. Et jusqu'à la fin, page de démarrage et de produits. Nous effectuons la visite, la connexion, et nous cliquons sur ce bouton. OK, après avoir cliqué, nous devons vérifier que suppression du bouton de suppression apparaît. Donc, pour cela, nous avons également le bouton de retrait du sac à dos, et nous avons une méthode qui vérifie que le bouton de retrait du sac à dos est visible. Utilisons donc cette méthode. Pour la page du produit, nous vérifions que le bouton de suppression du sac à dos apparaît, puis exécutons-le et vérifions-le. Nous avons donc une affirmation selon laquelle il vérifie que ce bouton de suppression apparaît. Ajoutons donc une autre vérification : nous vérifierons que ce numéro de carte, le numéro de page de la carte, est mis à jour. Essayons donc d'ajouter quelque chose à la carte, et trouvons le sélecteur CSS correspondant Nous observons ici que nous avons une classe de carbage d'achats. Essayons de le trouver avec un point. Du carbage de courses, l'un d'entre eux. Ajoutons ce sélecteur CSS à la page des produits, page Object Donc, le numéro de page Carb Carb. OK, la syntaxe est similaire. Ici, nous avons le point CI GAD. Ensuite, notre page de panier d'achat. OK. Maintenant, enregistrons-le, passons aux tests des produits et essayons de faire notre assertion. Donc, depuis la page des produits, nous avons ici des éléments, et à l'intérieur des éléments, nous avons un numéro de page en dur. Et nous pouvons utiliser notre méthode qui doit contenir du texte, et essayons-en une. Sauvegardons-le. Nous pouvons maintenant observer que nous avons la dernière assertion qui vérifie que nous avons ajouté un élément à la carte. Résumons maintenant ce que nous avons fait dans la leçon d'aujourd'hui. Nous avons donc créé une nouvelle suite de tests pour la page des produits. Nous avons ajouté ces deux objets à nos cours. Nous avons créé un nouveau test dans lequel nous avons effectué la partie visite, la partie journalisation. Après cela, nous avons ajouté un sac à dos à la voiture, vérifiez que le bouton de suppression est apparu. Et vérifiez que le numéro de page de la carte a été remplacé par un. Nous pouvons donc ajouter ici de nombreux autres cas liés à la page du produit. Nous avons juste besoin d'ajouter d'autres sélecteurs CSS si nous en avons besoin. C'était donc tout pour la leçon d' aujourd'hui. J'espère que cela vous a plu. On se voit la prochaine fois. 19. 19. Créer et utiliser des commandes personnalisées dans Cypress.: Bon retour. Dans cette vidéo, nous verrons comment ajouter une méthode globale ou une action dans le dossier commons. Nous pouvons donc ajouter ici une méthode qui sera utilisée dans l'ensemble de notre framework. Voyons maintenant ce qu' est une méthode globale. Chaque méthode modifiée par rapport à l'objet global CI, des méthodes telles que visit, get ou contains, peut être utilisée partout si elles sont modifiées par l'objet global CI. D'après nos tests, nous pouvons observer que dans chaque test, nous avons la fonctionnalité de connexion ici et ici. Nous allons donc maintenant ajouter make this login function en tant que méthode globale qui peut être utilisée en chaîne à partir de l'objet global CI. Dans le dossier CommansFolder, nous avons déjà ici quelques exemples de connexion, mais créons notre propre méthode. Donc, pour ce qui est de la syntaxe, nous allons simplement suivre la syntaxe de Hell cypress point commands point Add, et le nom login pour accéder à la source À partir de là, notre méthode recevra un e-mail et le mot de passe comportera un nom d'utilisateur et un mot de passe. Nom d'utilisateur Mot de passe. OK ? Donc, dans cette commande, nous avons notre identifiant. Sur l'objet de la page de connexion, nous avons déjà une méthode qui reçoit le nom d'utilisateur et passe et exécute toutes ces actions. Essayons donc d'y ajouter cette méthode. Tout d'abord, nous devons créer l'objet de cette classe. Donc, laissez la page de connexion être égale à la nouvelle page de connexion. Donc oui, ici nous devons tout importer ici. Et à partir de la connexion, à partir de l'objet de la page de connexion, nous allons utiliser la commande, la méthode login qui reçoit ici le nom d'utilisateur et le mot de passe. Nom d'utilisateur et mot de passe, et pour le nom d'utilisateur, nous les utilisons dans la commande de saisie du nom d'utilisateur et mot de passe dans la commande Entrez le mot de passe. Donnons donc le nom d'utilisateur et le mot de passe. Oui, supprimons tout. Donc, nous n'allons pas le supprimer, le supprimer comme ça. OK, donc ici, nous suivons simplement cette syntaxe, changeons le nom en login pour source up et nous recevons le nom d'utilisateur et le mot de passe, l'objet créé dans cette classe, et nous utilisons la méthode spéciale action login, qui reçoit le nom d'utilisateur et le mot de passe. Maintenant, si nous allons sur la page de test du produit ici, nous avons la fonctionnalité de connexion. D'accord, nous devons également visiter car avant de cliquer et de taper nom d'utilisateur et le mot de passe, nous devons visiter la page. Alors avant cela, ajoutons la visite. OK, sauvegardons-le. Et essayons simplement de commenter que nous avons dit qu'une méthode globale, une action globale peut être enchaînée à partir de l'objet global CI Donc, à partir de CI, point et Low, connectez-vous. Identifions-nous pour accéder aux sources. côté ce nom d'utilisateur pour accéder à la source, et nous recevrons le nom d'utilisateur et le mot de passe. OK, pour le nom d'utilisateur, nous allons utiliser le premier, utilisateur Lou Standard et la sauce secrète. OK, utilisateurs standard et applications secrètes. OK. Maintenant, essayons de sauvegarder l'application Ambigu Cypress. Nous allons tester Chrome. Des tests de produits, d'accord ? Nous effectuons donc la connexion depuis notre objet, et le reste du test reste intact. Et les connexions à partir des commandes globales. Une autre amélioration que nous pouvons ici concerne l'URL de base. Ainsi, dans tout notre framework, nous utilisons la même URL de base, source demo. pouvons donc également observer ici que nous vendons des démos de source. Juste après cela, nous utilisons carte d'inventaire ou quelque chose comme ça. Ainsi, dans le cas où nous avons une URL de base, nous pouvons mettre cette URL de base dans notre fichier de configuration. Passons donc à la configuration de Cybers, et dans Yen to Yend, nous pouvons ajouter une URL de base Et pour cela, nous pouvons définir cette URL de base pour notre sauce DMU. allons donc enregistrer cela et OK, Nous allons donc enregistrer cela et OK, donc après l'avoir enregistré à tous les endroits où nous utilisons l'URL de base, nous pouvons mettre sur le tiret la barre oblique inverse, uniquement la barre oblique inverse Et le Cypress recherchera base dans l'URL de base de configuration de Cypress Nous allons donc l'enregistrer et essayer de tester notre produit. Nous observons donc ici que nous visitons un lien vide, mais que nous allons le rechercher. Essayons de faire la même chose avec le reste des tests dans les tests log in. Nous sommes en train de visiter Let's Delete et nous ne laissons que la barre oblique inverse OK, économisons et exécutons-les. Connectez-vous aux tests. Oui, donc ici et avant chaque URL, nous visitons une URL vide, mais le cyberus sait que nous allons les trouver. Résumons donc ce que nous avons fait dans la leçon d'aujourd'hui. Nous avons ajouté une commande dans le dossier des commandes. n'est que dans ce dossier que nous pouvons effectuer une commande globale. La syntaxe ressemble à ça. Nous donnons le nom que notre méthode utilisera comme paramètres. Nous avons un nom d'utilisateur et un mot de passe. Nous avons créé l'objet de notre page de connexion. Nous avons visité la page et après cela, nous avons créé le nom d'utilisateur YenerPassword, puis nous avons cliqué sur le bouton de connexion C'était tout pour le cours d'aujourd'hui. À bientôt. 20. 20. Générer et paramétrer des rapports dans Cypress.: Bon retour. Dans cette leçon, vous allez apprendre à ajouter des rapports pour vos suites de tests. Donc, dans notre recherche dans CyprRports, nous trouverons que la documentation de Cypress recommande Nous allons donc copier ce nom et essayer MoCA awesome installé. Et le premier lien sera l'instruction sur la façon dont nous pouvons installer ce rapport. Donc, si nous faisons défiler l'écran vers le haut, nous devrions avoir ici la commande pour installer cet outil. Donc MPM install save D MOCA Dans le code Visual Studio, ouvrons le nouveau terminal Et ici, collons cette commande et BM installons en toute sécurité. Alors allons-y. Et nous devrions voir que tout est bien installé maintenant et que le backer est juste sur fichier, nous devons observer le nouvel outil installé Outre Cypress, nous devrions avoir notre outil de reporting. Nous devons maintenant demander à Chypre d'utiliser cet outil de rapport. Donc, dans le GS de Chypre, nous devons taper reporter et notre laboratoire de journalistes. En outre, dans la documentation de cet outil, Mocoo propose de nombreux autres paramètres et options de configuration Mais je vais simplement les copier-coller car il y a beaucoup de configurations. J'ai donc ajouté ici toutes ces options. Nous montrons ici où enregistrer le rapport. Si nous pouvons remplacer les rapports, les formats dont nous avons besoin (HTML et Gson), le nom du fichier, l' horodatage Ne t'inquiète pas. Je vais vous donner le lien vers le dépôt Github où se trouvera tout le contenu de ce cours et où vous n'aurez pas besoin de tout mémoriser Nous avons donc maintenant notre rapport avec de nombreuses options, beaucoup de configurations. Chypre ne générera des rapports que lorsque nous effectuerons notre test depuis le terminal. C'est la même chose que pour les captures d'écran. Les captures d'écran ne sont pas générées lorsque nous exécutons notre test à partir de l'application d'interface utilisateur. Maintenant, essayons de gérer notre bureau. Œufs MP Cypress. Courez, nous ferons tourner tout ce que nous avons à la fin Nous avons ici notre costume et deux costumes par défaut de Chypre. Nous avons 222 suites, et cela prendra un peu de temps. Attendons donc les résultats. C'est donc le résultat de notre test. Nous avons quelques tests qui ont échoué. Observons maintenant que nous montrons ici que nos rapports doivent être enregistrés dans le dossier Cybrusrports Voici donc CyberReports. Nous devrions avoir 22 fichiers HTML et 22 fichiers Json. Dévoilons-les dans le Finder et ouvrons un fichier HHTML Nous pouvons donc observer ici que chaque fichier représente une combinaison de test. L'étape suivante du processus de génération du gros rapport consiste à fusionner tous ces fichiers Json, 22 en un seul gros fichier, car il est plus facile de regarder un gros rapport que 22 séparés Pour cela, nous devons exécuter une commande. Je veux dire que c'est une longue commande, je vais juste la copier en me basant sur la copie. Donc, en gros, nous utilisons ici Moca merge qui fusionnera tout avec l'extension son, et nous créerons un gros fichier qui s'appellera Merge Report Jason Exécutons donc cette commande, et attendons un peu. Ici, nous pouvons observer que nous avons un gros fichier de rapport de fusion. Et nous avons ici un résumé de 22 combinaisons, 136 tests, combien sont les meilleurs, ceux échoué ou se sont pliés, etc. L'étape suivante consiste à générer à partir de ce gros fichier Json, h TML, un gros rapport Voici donc également une très longue commande. Je vais juste le copier-coller et le mettre ici. Allons-y. Nous avons donc enregistré le rapport et le chemin d'accès à ce rapport. Nous avons donc un nouveau dossier, rapport HTML de fusion, et voici notre rapport. Dévoilons-le dans le Finder et ouvrons-le. Ouvrons-le donc. Ouais. Voici notre gros fichier de rapport, et il contient de nombreux filtres. Nous pouvons afficher uniquement le message ou nous pouvons afficher uniquement les échecs, beaucoup de filtres, nous pouvons filtrer par combinaison par nom de test, etc. De plus, à partir de là, nous pouvons les trier. Et pour celui qui a échoué, nous pouvons observer le message d'erreur. Nous pouvons également ajouter des captures d'écran si nous les avons dans notre test. Donc, en gros, c'est à cela que devrait ressembler un gros rapport à la fin. Résumons maintenant ce que nous avons ajouté ici. Donc, dans un premier temps, nous avons installé la chanson Moca. Ensuite, nous avons ajouté de nombreuses options pour ce journaliste. L'étape suivante consiste à exécuter les tests depuis le terminal. Ensuite, nous avons beaucoup de petits rapports. L'étape suivante consiste à fusionner tous ces fichiers Json de rapports en un seul gros fichier Json Et le dernier provient de ce fichier Json, nous devrions générer un gros fichier e-mail de hachage Je sais que toutes ces commandes sont très longues et qu'il est difficile de les écrire. Mais dans la prochaine leçon, je vais vous montrer comment nous pouvons faciliter la génération de rapports, à bientôt. 21. 21. Ajouter et paramétrer des scripts personnalisés dans Cypress.: Bonjour, et bon retour. Dans la leçon précédente, nous avons appris comment ajouter un rapport Cypress pour notre test Et dans la leçon d'aujourd'hui, nous apprenons à nous faciliter la tâche et à nous simplifier la vie en tant que test lors de la génération de rapports. Je vais donc supprimer ces dossiers car il est volumineux et exécution prend beaucoup de temps, et je passerai bientôt à la configuration de Cypress Tout d'abord, voyons ce qu'est un script dans notre contexte. Lorsque nous exécutons notre test Cypress depuis le terminal, nous exécutons un script Donc, dans ce cas, essayons d'exécuter le MPX Cypress Et par défaut, Cypress utilisera le navigateur Electron. Mais si nous voulons utiliser un certain navigateur, nous pouvons utiliser l'option PZ, et nous pouvons l'indiquer à partir de et nous avons également une option intitulée Cette option nous montrera le processus d'exécution. Essayons donc de faire nos tests. Nous avons ici toutes ces informations, et nous observons ici tous ces tests. Cela fait partie du test par défaut et de nos tests. Maintenant, comment pouvons-nous ajouter ces scripts dans notre version ? En gros, nous allons ajouter toutes ces commandes que nous avons utilisées dans le terminal dans leçon précédente dans un format plus simple. Nous allons accéder au fichier Json de package, et ici, dans l'option inside scripts, nous pouvons ajouter nos scripts personnels. Donc, pour le script précédent que nous avons utilisé pour exécuter le test depuis le terminal et avec le navigateur, nous pouvons l'ajouter ici. Fuyez et nous pouvons. OK, donc tout est terminé. Courez. Et ici, nous pouvons avoir notre script. En fait, c'était MPX, Cypress Run, il y a un soutien-gorge et un n et aussi Maintenant, si nous voulons appeler pour exécuter ce script, nous pouvons simplement exécuter MPM run et le nom de notre script Nous avons donc maintenant le MP E Cypress Run. Nous avons le texte indiquant que nous exécutons ce script. En d'autres termes, si nous avons une commande longue et compliquée, nous pouvons l'enregistrer ici et lui donner un nom. Et après cela, lorsque nous voulons l'exécuter, nous l'appelons simplement par son nom et la commande entière sera exécutée. C'est donc plus simple. Alors laisse-moi tout arrêter ici. Je vais donc ajouter ici les commandes permettant générer la capture d'écran , de gérer les fichiers son dans un seul gros fichier et de générer un rapport hushmil Ici, j'ai ajouté notre grosse commande longue qui fusionne tous les fichiers ison dans un seul gros fichier son de fusion Et la prochaine consiste à générer un rapport ushmail à partir de ce gros rapport de fusion bientôt Essayons maintenant de tout exécuter depuis le terminal à l'aide de scripts. Le premier sera MPM Run et notre script nail. Alors allons-y, et attendons les résultats. OK, nous avons donc ici nos résultats. Nous avons échoué au test, et nous avons effectué un test de trajectoire. Après l'exécution, nous pouvons constater que dans notre fichier de rapports, nous avons tous ces petits rapports. Après la course, la prochaine étape consiste donc gérer nos gisons dans un seul gros ison Je vais donc copier le nom de notre script, il est très long . Je vais le gérer. Permettez-moi de clarifier MPM Run, ainsi que notre nom. Et nous observons ici que nous avons exécuté tout ce long script en l'appelant par son nom. Et dans notre dossier de rapports, nous avons fusionné les rapports du plus petit. La dernière étape consiste à générer un rapport de silence par e-mail à partir du rapport Json Numéro et nom du MPM. Ici aussi, nous observons ce que nous avons exécuté et nous avons notre rapport. Maintenant, si nous allons ici et révélons dans Finder, révélons dans le Finder. Nous avons ici notre rapport avec tous les résultats et tout est en place. Résumons donc ce que nous avons fait dans la leçon d'aujourd'hui. abord, un script est une commande à laquelle on donne un nom, puis on appelle simplement la commande par son nom, et il est beaucoup plus facile de sauvegarder la commande ici même, si elle est longue et que nous l' utilisons très souvent. Nous avons donc ajouté le nom, la commande, et après cela, nous appelons simplement la commande depuis le terminal. Ne vous inquiétez donc pas pour le code. J'ajouterai le lien vers le référentiel Github contenant tout, toutes les commandes et tout le framework au début du cours On se voit donc dans la prochaine leçon. 22. 22. Résumé.: Hey, bon retour. Résumons la création de notre framework et notre processus. Au début, nous avons créé notre package uniquement sur fichier en exécutant dans notre terminal le MDM commun qu'il contient Ici, nous stockons notre dépendance et nos scripts ainsi que toutes les informations, les métadonnées sur le framework telles que la description de la version, et nous pouvons ajouter ici de nombreuses autres options. Ensuite, nous avons installé Chypre et ouvert Chypre pour la première fois. Après avoir ouvert le Cyprus pour la première fois, nous avons cette structure par défaut, ce dossier Cypress, Dwards de bout en bout où nous avons les tests Cypress par défaut Et ici aussi, nous avons ajouté un dossier de démonstration SOS latéral, nous avons ajouté notre suite de tests. Mis à part le montage, nous avons de nombreux exemples, mais nous ne les avons pas utilisés. Le dossier suivant est le support dans lequel nous avons créé l'objet de page. Dossier contenant deux fichiers, un fichier par page Web. Donc pour la page de connexion, un fichier pour la page du produit, un autre fichier. Dans chaque fichier objet de page, nous avons créé une classe avec notre sélecteur CSS et les méthodes d'action disponibles que nous pouvons utiliser avec ces sélecteurs Dans le dossier Commons du fichier Commons, nous avons ajouté une méthode globale qui peut être utilisée dans tous les fichiers enchaînés par CI CI global Object Dans notre cas, nous avons créé Login et nous les utilisons, je crois, dans les tests de produits. Oui, nous utilisons les méthodes globales. Une autre étape très importante de notre framework et configuration a été le processus d'ajout de notre rapport, que nous avons ajouté en l' installant, puis nous avons configuré ce framework dans configurations de Chypre avec de nombreuses options et paramètres Et la dernière étape a consisté à ajouter les scripts. Nous avons ajouté notre script pour exécuter le test, gérer les résultats et générer le magnifique rapport. est donc tout ce que vous devez savoir pour pouvoir créer votre propre framework chypriote qui peut être utilisé dans des applications Word réelles. J'espère que cela vous a plu. Rendez-vous dans la prochaine leçon.