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.