Table des matières

• Qu'est-ce que Cypress Commands ?
• Commandes d'interaction de l'interface utilisateur fournies par Cypress
• Commande de clic droit Cypress
• Commande de double clic Cypress
• Cypress Cliquez sur la commande
• Commande de déclenchement de cyprès
• Commande de type cyprès
• Commande de sélection de cyprès
• Commande de vérification de cyprès
• Cypress Effacer la commande
• Les commandes Cypress sont-elles asynchrones ?
• Commandes personnalisées Cypress
• Chaîner les commandes d'assertion dans Cypress
• Écraser les commandes Cypress existantes
• Commandes chaînées Cypress
• Commande personnalisée parent dans Cypress
• Commande personnalisée enfant dans Cypress
• Double commande personnalisée dans Cypress
• Commandes personnalisées Cypress avec exemple
• Commandes d'importation Cypress
• Commande personnalisée Cypress IntelliSense

Qu'est-ce que Cypress Commands ?

Cypress nous fournit des API et des méthodes pour interagir avec l'interface utilisateur de l'application. Ils sont connus sous le nom de Cypress Commands et facilitent l'interaction de l'application Web. Toutes les commandes disponibles ont des méthodes intégrées et nous n'appellerons les méthodes que dans nos cas de test. Les commandes Cypress simuleront une action similaire à un utilisateur essayant d'effectuer des opérations sur l'application.

Commandes d'interaction de l'interface utilisateur fournies par Cypress

Il existe différentes commandes fournies par Cypress qui interagissent avec l'interface utilisateur. Nous allons examiner la liste de toutes les commandes en détail.

• .Cliquez sur()
• .dblclick()
• .clic-droit()
• .taper()
• .dégager()
• .Chèque()
• .décocher()
• .sélectionner()
• .déclencheur()

Cypress Cliquez sur la commande

.Cliquez sur() – Cette commande est de cliquez n'importe quel élément du DOM.

Voici les syntaxes de la commande click

.click() 

.click(options) 

.click(position) 

.click(position, options) 

.click(xCoordinate, yCoordinate) 

.click(xCoordinate, yCoordinate, options) 

Comme vous pouvez le voir ci-dessus, le clic accepte des paramètres comme choix, poste, et les coordonnées.

Options

Les options possibles qui peuvent être passées au clic sont

positions

Les différents types de positions qui peuvent être passés à .click() sont

• centre (défaut)
• à gauche
• bon
• top
• en haut à gauche
• en haut à droite
• bas
• en bas à gauche
• en bas à droite

Exemple

cy.get('btn').click() //cliquer sur le bouton cy.get('btn').click({ force: true }) //cliquer sur le bouton en passant l'option 'force' comme true cy. get('btn').click('bottomRight') // en cliquant sur le bouton en bas à droite cy.get('btn').click(10, 70, { force: true }) // en cliquant sur le bouton avec valeur de position et force vraie

Commande de double clic Cypress

Le double clic peut être obtenu en utilisant dblclick() syntaxe dans Cypress.

Syntaxe

.dblclick()
.dblclick(position)
.dblclick(x, y)
.dblclick(options)
.dblclick(position, options)
.dblclick(x, y, options)

Options

.dblclick() accepte toutes les options acceptées par .click(). Vous pouvez trouver les options dans la section ci-dessus.

positions

Toutes les positions possibles qui sont spécifiées dans .click() sont également disponibles pour dblclick(). La liste des postes se trouve dans la section ci-dessus.

Exemple

cy.get('button').dblclick() // Double-clic sur le bouton cy.focused().dblclick() // Double-clic sur l'élément avec le focus cy.contains('Home').dblclick() // Double-clic cliquez sur le premier élément contenant 'Home' cy.get('button').dblclick('top') // Double-cliquez sur le bouton en position haute cy.get('button').dblclick(30, 10) // Double-cliquez sur les coordonnées de 30 et 10

Commande de clic droit Cypress

Cette commande Cypress, fait un clic droit sur l'élément DOM .rightclick() la commande n'ouvrira pas les menus contextuels du navigateur.rightclick() est utilisé pour tester la gestion des événements liés au clic droit dans l'application, tels que contextmenu.

Syntaxe

.rightclick()
.rightclick(position)
.rightclick(options)
.rightclick(position, options)
.rightclick(x, y)
.rightclick(x, y, options)

Options

Comme nous l'avons vu plus haut, toutes les options acceptées par .click() la commande peut être configurée avec .rightclick() commande aussi.

positions

Toutes les positions possibles qui peuvent être transmises au .rightclick() est le même que le .click() mentionné ci-dessus.

Exemple

cy.get('.welcome').rightclick() // Clic droit sur .welcome cy.focused().rightclick() // Clic droit sur l'élément avec le focus cy.contains('January').rightclick() / / Clic droit sur le premier élément contenant 'Janvier' cy.get('button').dblclick('topRight') // Double clic sur le bouton en haut à droite cy.get('button').dblclick(80, 20 ) // Double clic sur les coordonnées 80 et 20

Commande de type cyprès

.type() La commande entre une valeur dans un élément DOM.

Syntaxe

.type(text)
.type(text, options)

Arguments

.type() accepte la chaîne comme argument. Valeurs transmises à .type() peut inclure l'une des séquences de caractères spéciaux ci-dessous.

Options

On peut passer les objets comme options pour modifier le comportement par défaut de .type()

Exemple

Voyons des exemples pour .type() commander

cy.get('textarea').type('Hey there') // entrez la valeur dans la zone de texte cy.get('body').type('{shift}') //active la touche shift cy.get ('body').type('{rightarrow}') //type event flèche droite 

Cypress Effacer la commande

La commande Effacer effacera les valeurs dans la zone de saisie ou le champ de texte.

Syntaxe

La syntaxe de la commande clear est la suivante.

.clear()
.clear(options)

Options

Nous examinerons les options qui peuvent être transmises au .clear() commander.

Exemple

Examinons les exemples pour une commande claire

cy.get('[type="text"]').clear() // Effacer l'entrée de type text cy.get('textarea').type('Welcome!').clear() // Effacer textarea cy .focused().clear() // Effacer l'entrée/la zone de texte ciblées

Commande de vérification de cyprès

La commande de vérification vérifiera ou, en termes plus simples, cochera les cases à cocher ou les boutons radio. Vous pouvez décocher les cases à cocher ou les boutons radio en utilisant le bouton .uncheck() commander.

Syntaxe

Nous comprendrons la syntaxe de la commande check dans Cypress.

//Syntax for check command
.check()
.check(value)
.check(options)
.check(values, options)

//Syntax for uncheck command
.uncheck()
.uncheck(value)
.uncheck(options)
.uncheck(values, options)

Options

Les options possibles qui peuvent être passées aux commandes cocher/décocher sont les mêmes options que la commande clear listée ci-dessus

Exemple

Nous examinerons l'exemple de la façon dont nous pouvons utiliser les commandes check et uncheck.

cy.get('[type="checkbox"]').check() // Vérifier l'élément de la case à cocher cy.get('[type="radio"]').first().check() // Vérifier la première radio element cy.get('[type="radio"]').check('Male') //Vérifier l'élément radio qui a Male cy.get('[type="checkbox"]').uncheck() / /Décochez l'élément de case à cocher cy.get('[type="radio"]').uncheck() //Décochez le premier élément radio cy.get('[type="checkbox"]').uncheck('Breakfast') // Décochez l'élément petit-déjeuner

Commande de sélection de cyprès

La commande select Cypress vous permet de sélectionner des éléments dans un étiqueter.

Syntaxe

Voici la syntaxe de la commande select

.select(value)
.select(values)
.select(value, options)
.select(values, options)

Options

Nous pouvons passer dans les options pour modifier le comportement par défaut de la commande select.

Exemple

Examinons des exemples pour la commande select

cy.get('select').select('butterfly') // Sélectionne l'option 'butterfly' cy.get('select').select(0) // sélectionne l'élément d'index 0 cy.get('select ').select(['parrot', 'peacock']) //sélectionne l'option perroquet et paon

Commande de déclenchement de cyprès

La commande de déclenchement permet de déclencher n'importe quel événement sur l'élément.

Syntaxe

Nous allons voir la syntaxe pour accéder à la commande trigger

.trigger(eventName)
.trigger(eventName, position)
.trigger(eventName, x, y)
.trigger(eventName, position, options)
.trigger(eventName, options)
.trigger(eventName, x, y, options)

Option

La commande de déclenchement accepte toutes les options mentionnées pour .clear() commander. De plus, il existe quelques options que nous pouvons configurer et qui sont répertoriées ci-dessous.

Exemple

Laissez-nous différentes façons d'utiliser .trigger() dans le code.

cy.get('a').trigger('mouseover') // Déclenche l'événement mouseover sur un lien cy.get('.target').trigger('mousedown', { button: 0 }) //mousedown déclenché à bouton 0 cy.get('button').trigger('mouseup', topRight, { bubbles: false }) //mouseup déclenché sur la position topRight avec la définition de bubble comme false

Les commandes Cypress sont-elles asynchrones ?

Toutes les commandes Cypress sont asynchrones. Ils sont mis en file d'attente pour une exécution ultérieure et n'attendront pas la fin des commandes. La commande Cypress ne fait rien au moment de son invocation, au lieu de cela, elle l'enregistre pour plus tard pour exécution. Vous pouvez comprendre le comportement asynchrone de Cypress ici

Commandes chaînées Cypress

Dans Cypress, nous pouvons utiliser une série de commandes pour interagir avec des éléments dans DOM. Il est impératif de comprendre comment fonctionne l'enchaînement des commandes en interne. Si nous enchaînons des commandes dans une ligne particulière, alors Cypress gérera une promesse basée sur la chaîne de commandes et produira une commande basée sur le sujet de la commande suivante, jusqu'à ce que la chaîne de commandes se termine ou qu'une erreur se soit produite.

Cypress nous permet de cliquer sur un élément ou de taper dans des éléments en utilisant le .click() or .type() commandes en obtenant les éléments en utilisant cy.get() or cy.contains(). Voyons un exemple simple d'enchaînement de commandes

cy.get('textarea').type('Comment allez-vous ?')

Dans l'exemple ci-dessus, cy.get() est une commande Cypress et .type() est une autre commande, où nous enchaînons le .type() commande sur le cy.get() commande, lui disant de taper le sujet qui est cédé à partir de la cy.get() élément. De même, nous pouvons enchaîner toutes les commandes dont nous avons parlé ci-dessus.

Chaîner les commandes d'assertion dans Cypress

Semblable à l'enchaînement de plusieurs commandes à l'aide de Cypress, nous pouvons également enchaîner des assertions avec des commandes. Les assertions sont des commandes qui vous permettent de décrire le attendu l'état ou le comportement de l'application. Cypress attendra que les éléments atteignent l'état attendu, et le test échouera si les assertions échouent. Nous verrons comment utiliser les commandes de chaînage pour affirmer un élément.

cy.get('button').should('be.disabled') //attend si le bouton doit être désactivé cy.get('form').should('have.class', 'form-vertical') / /expect if the form should have class as 'form-vertical' cy.get('input').should('not.have.value', 'Name') // affirme si l'entrée ne doit pas avoir la valeur 'Name '

Comme indiqué ci-dessus, nous utilisons le cy.get() commande et en l'enchaînant avec le .should() commande d'assertion pour attendre le comportement basé sur le résultat. De cette façon, nous pouvons utiliser la chaîne commandes d'assertion dans Cypress.

Commandes personnalisées Cypress

Cypress nous fournit des API pour créer des commandes en fonction de nos besoins. La commande personnalisée Cypress est similaire aux commandes par défaut préexistantes, sauf qu'elle est défini par l'utilisateur. Avec des commandes personnalisées, nous pouvons jouer avec les commandes et les enchaîner en fonction de notre cas d'utilisation. Les commandes personnalisées Cypress sont utiles dans notre flux de travail si vous avez besoin de les réutiliser encore et encore dans les tests.

Voyons la syntaxe pour créer une nouvelle commande personnalisée dans Cypress.

Cypress.Commands.add(name, callbackFn)
Cypress.Commands.add(name, options, callbackFn)
Cypress.Commands.overwrite(name, callbackFn)

où les arguments sont les suivants

prénom – Le nom de la commande dans la chaîne que nous voulons ajouter ou écraser

rappelFn – Cette fonction prend un argument passé à la commande

Options – Passer n'importe quel objet options pour définir le comportement de la commande

Notes : les options ne sont prises en charge que pour les commandes d'ajout et ne prend pas en charge les commandes d'écrasement

Les options qui prevSubject accepte sont les suivants

• false – ignorer les sujets précédents (commande parent)
• true – accepter les matières précédentes (commande enfant)
• optional – indiquez si vous souhaitez démarrer une nouvelle chaîne ou utiliser une chaîne existante (double commande)

Commande personnalisée parent dans Cypress

Nous verrons comment ajouter une commande parent personnalisée dans Cypress. La commande parent commencera toujours une nouvelle chaîne de commandes, même si vous avez enchaîné une commande précédente. La commande précédemment enchaînée sera ignorée et une nouvelle commande sera toujours enchaînée. Certaines des commandes parentes sont cy.visit(), cy.get(), cy.request(),cy.exec(), cy.route()

Exemple

Nous verrons un exemple de la façon d'écrire une commande personnalisée parent dans Cypress

Cypress.Commands.add('clickLink', (label) => { cy.get('a').contains(label).click() }) // en cliquant sur le lien "Buy Now" cy.clickLink('Buy À présent')

Dans l'exemple ci-dessus, 'cliquez surLien' est le nom de notre commande personnalisée. Il recherchera le étiquette. A la ligne 2, la commande obtient 'a', et recherchez le lien qui contient l'étiquette et cliquez sur l'élément. cy.clickLink() exécutera l'action dans le fichier de test et cliquera sur le "COMMANDER MAINTENANT" lien.

Commande personnalisée enfant dans Cypress

Les commandes enfant personnalisées dans Cypress sont enchaînées à une commande parent ou à une autre commande enfant. Le sujet de la commande précédente sera cédé à la fonction de rappel.

Certaines des commandes Cypress pouvant être enchaînées en tant que commande enfant sont .click(), .trigger(), .should(), .find(), .as()

Exemple

Nous examinerons un exemple sur la façon de chaîner une commande personnalisée enfant

Cypress.Commands.add('forceClick', {prevSubject: 'element'}, (subject, options) => { // envelopper le sujet existant et faire quelque chose avec cy.wrap(subject).click({force:true }) }) //accès au forceClick dans le fichier de test cy.get("[data-test='panel-VALUES']").forceClick();

Dans l'exemple ci-dessus, nous nommons notre commande personnalisée comme 'forceCliquez'. Nous passons l'argument prevSubject à l'élément et enveloppons le sujet existant. Avec cy.wrap(), nous forçons à cliquer sur le sujet. Ensuite, dans le fichier de test, nous accédons à la commande personnalisée, 'forceCliquez' sur un cy.get() commander.

Doubles commandes personnalisées dans Cypress

Les commandes personnalisées doubles sont hybrides entre une commande parent et une commande enfant. Vous pouvez commencer une nouvelle chaîne de commandes ou enchaîner une commande existante. Les commandes doubles sont utiles si nous voulons que notre commande fonctionne de différentes manières avec ou sans le sujet existant.

Certaines des commandes qui peuvent être utilisées pour les commandes doubles sont cy.contains(), cy.screenshot(), cy.scrollTo(), cy.wait()

Exemple

Voyons un exemple d'utilisation de deux commandes personnalisées

Cypress.Commands.add('getButton', { prevSubject: 'facultatif' }, (sujet) => { if (sujet) { cy.get(sujet).get('btn').its('bouton'); } else { cy.get('btn').its('bouton'); } })

Dans certains cas, nous devrons récupérer le bouton du texte à l'aide de getButton qui acquerra tout le bouton de l'élément. Nous pouvons maintenant utiliser getButton pour enchaîner avec l'élément parent ou enchaîner l'élément enfant, où il peut invoquer les éléments du parent.

Depuis l' prevSubject est facultatif, nous pouvons soit passer le sujet en argument, soit invoquer la commande sans le sujet dans le fichier de test comme ci-dessous

cy.getButton() // sans le sujet cy.get('#loginBtn').getButton() // avec le sujet

Écraser les commandes Cypress existantes

Nous pouvons écraser les commandes Cypress déjà existantes et modifier le comportement afin d'éviter de créer une autre commande qui tentera d'utiliser la commande d'origine à la fin.

Certaines des commandes Cypress d'origine qui peuvent être écrasées sont cy.visit(), cy.type(), cy.screenshot(), cy.contains()

Exemple

Voyons un exemple sur la façon dont nous pouvons écraser le Cypress existant commander.

Cypress.Commands.overwrite('contains', (originalFn, subject, filter, text, options = {}) => { // détermine si un argument de filtre a été passé if (typeof text === 'object') { options = text text = filter filter = undefined } options.matchCase = false return originalFn(subject, filter, text, options) } )

Comme nous l'avons vu plus haut, nous utilisons le Cypress.Commands.overwrite pour modifier la commande Cypress existante. Nous nommons notre commande personnalisée comme contains et nous passons des arguments pour déterminer si l'argument du filtre est passé.

Commandes d'importation Cypress

Dans cette section, nous allons comprendre comment importer des commandes Cypress.

Nous devons créer nos commandes personnalisées Cypress dans le cyprès/support/commandes.js déposer. Nous allons ajouter les commandes personnalisées dans le fichier command.js et les importer dans notre fichier de cas de test pour l'utiliser.

Commandes personnalisées Cypress avec exemple

Nous comprendrons comment créer une commande personnalisée et l'utiliser dans notre fichier de spécifications avec un exemple en temps réel.

Comme nous l'avons vu ci-dessus, nous devons ajouter de nouvelles commandes personnalisées sous le commandes.js déposer. Dans ce fichier, ajoutons une commande personnalisée pour une fonction de connexion

Cypress.Commands.add("login", (nom d'utilisateur, mot de passe) => { //ajout d'une nouvelle commande nommée login cy.get('[id=Email]').clear(); cy.get('[id =Email]').type(nom d'utilisateur); cy.get('[id=Mot de passe]').clear(); cy.get('[id=Mot de passe]').type(mot de passe); cy.get( '[type=soumettre]').click(); });

Dans le code ci-dessus, nous nommons notre commande personnalisée comme vous connecter. Dans la commande personnalisée, nous avons ajouté les étapes consistant à effacer le champ du nom d'utilisateur et à saisir la valeur dans le champ de texte. De même, nous effaçons le champ et ajoutons le mot de passe dans le champ du mot de passe. Plus tard, nous cliquons sur le bouton soumettre. Il s'agit d'une simple commande personnalisée qui accepte deux arguments : nom d'utilisateur et mot de passe. Nous transmettrons la valeur du nom d'utilisateur et du mot de passe dans notre fichier de spécifications.

Créons maintenant un fichier de spécification nommé customCommand.spec.js dans le dossier d'intégration. Notre fichier de spécifications contiendra le code suivant

décrire("Exemple de commandes personnalisées", () => { it("devrait se connecter à l'aide des commandes personnalisées", () => { cy.visit("https://admin-demo.nopcommerce.com/"); cy .se connecter("[email protected]", "admin"); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });

Comme nous l'avons vu ci-dessus, nous accédons à notre commande personnalisée en tant que cy.login() , où nous passons les valeurs du nom d'utilisateur et du mot de passe.

Cypress Commandes personnalisées IntelliSense

IntelliSense fournit des suggestions de code intelligentes dans l'IDE ou l'éditeur de code directement pendant que nous écrivons des tests. Cela aide en affichant une fenêtre contextuelle qui affiche la définition de la commande, un lien vers la page de documentation et des exemples de code. Si nous utilisons un éditeur de code moderne comme Visual Studio Code ou IntellJ, alors IntelliSense sera très utile.

IntelliSense utilise Typescript pour comprendre et afficher la syntaxe. Si nous écrivons des commandes personnalisées et fournissons des définitions TypeScript pour les commandes personnalisées, nous pouvons utiliser les triples barres obliques pour afficher IntelliSense, même si notre projet utilise uniquement JavaScript.

Pour configurer IntelliSense, nous devons décrire le code dans cyprès/support/index.d.ts fichier.

// définitions de type pour l'objet Cypress "cy" /// déclarer l'espace de noms Cypress { interface Chaînable { /** * Connexion avec identifiants * @example * cy.login(username,password) */ login(username: String, password: String): Chainable } }

Maintenant, nous devons informer nos fichiers de spécifications qu'il existe des définitions Typescript dans le index.d.ts déposer. Ainsi, au début de notre fichier de spécifications, ajoutez le code ci-dessous pour permettre à IntelliSense de nous fournir des suggestions.

// les définitions de type pour les commandes personnalisées telles que "login" // se résoudront en "cypress/support/index.d.ts" //

Comme nous l'avons vu ci-dessus, IntelliSense nous fournit l'argument que nous avons fourni dans notre fichier command.js et aide à la saisie semi-automatique.

Aishwarya Lakshmi

Salut… Je m'appelle Aishwarya Lakshmi, j'ai terminé mon B.Tech et j'ai près de 2 ans d'expérience dans le domaine des tests. Je suis un passionné de tests et passionné par les tests et j'aime explorer de nouvelles choses dans mon domaine et les partager avec mes pairs. J'aime écrire des blogs pendant mon temps libre de la manière la plus simple mais efficace. En tant que testeur, j'aime avoir les choses à la perfection, je souhaite donc à mes lecteurs d'avoir une parfaite compréhension de la technologie. Je me tiens au courant des nouvelles technologies liées aux tests et passe du temps à les comprendre. Je suis heureux d'aider les étudiants à comprendre les concepts des tests.