Cypress : notre top 5 des fonctions pratiques de tests

Cypress est un outil très intéressant pour améliorer la qualité d’un service ou d’un produit Web. Dans le précédent tutoriel, vous avez découvert comment intégrer Cypress sur un projet existant et effectuer votre premier test. Dans cet article, je vais vous montrer les Top 10 des fonctions pratiques à utiliser avec Cypress.

L’objectif de cet article : obtenir des tests de meilleure qualité pour vos projets !

Jérémy

Top 5 des fonctions pratiques avec Cypress

Aller sur une page

Pour demander à Cypress de se rendre sur une page spécifique de votre application, il faut utiliser la fonction suivante :

cv.visit(<url>);

La fonction visit prend en paramètre une chaîne de caractères. Celle-ci correspond à l’URL souhaitée.

Exemples :

cv.visit('https://github.com/les-enovateurs/phalcon-nova-mooc');
cv.visit('./accueil');

Il est possible d’insérer une URL complète (premier cas) ou une URL relative (deuxième cas). Pour utiliser une URL relative, il faut définir une URL de base dans le fichier cypress.json.

{
    "baseUrl": "http://localhost"
}

Vérifier l’URL actuelle avec Cypress

Afin d’éviter une grosse perte de temps à résoudre un bug inexistant, je vous conseille de vérifier régulièrement l’URL courante sur lequel se trouve Cypress. Lorsqu’on débute dans le monde des tests, on a tendance à oublier nos redirections de sécurité. Comme telle adresse IP, autorisée à accéder à l’API.

cy.url().should('include', '/utilisation/edition');

Tout d’abord, on récupère l’URL courante avec la fonction url. Ensuite, on s’assure du contenu avec la fonction should (cette fonction, vous allez la voir souvent). Cette fonction prend deux paramètres : le premier correspond au critère / validateur et le second à la valeur que l’on doit vérifier. Pour consulter la liste des critères / validateurs, c’est par ici.

Vérifier le titre (title) HTML de la page

Si vous aimez être rassuré (ou survérifier), cette fonction peut vous intéresser. L’idée : vérifier le contenu du title HTML.

cy.title().should('include', 'Utilisateur - Edition');

C’est le même principe qu’avec la fonction url() sauf qu’ici, il suffit simplement d’utiliser la fonction title().

Récupérer un élément du DOM avec Cypress

Cette fonction est très importante : elle permet de cibler un élément de la page HTML pour en faire ensuite ce que vous voulez (cliquer dessus lorsque c’est un bouton, saisir du texte…)

cv.get(<selecteur>);

Le sélecteur est une chaîne de caractères qui fait office de filtre. La fonction get récupère tous les éléments qui correspondent au filtre indiqué par le développeur. Si vous êtes familier de JQuery, alors vous avez de la chance car c’est la même syntaxe.

Exemples :

cy.get(":input[name='password']");

Avec cette instruction, on récupère le champ (input) qui possède un attribut (name) dont la valeur est égale à password.

cy.get("#bouton_valdiation");

Dans cet exemple, on récupère un élément dont l’ID est égal à bouton_validation.

Saisir du texte dans un champ

C’est plutôt sympa de voir cette fonction à l’œuvre. Cypress saisit lettre après lettre le (ou les) terme(s) indiqué(s).

cy.get(<element de type input>)
   .type(<texte à saisir>);

La fonction type prend en paramètre une chaîne de caractères, celle-ci sera écrite dans le champ indiqué par la fonction get. Et maintenant que vous avez pris le réflexe de survérifier, vous pouvez utiliser la fonction should.

Exemple :

cy.get(":input[name='title']")
  .type('Livre - Phalcon 3 - Développez des applications web complexes et performantes en PHP')
  .should('have.value', 'Développez des applications web complexes et performantes en PHP');

Ici la fonction should permet de s’assurer que la valeur saisie est bien présente.

Bonus : Cliquer sur un bouton

Dans une application Web, il faut cliquer sur différents bouton afin de valider un formulaire, lancer des opérations…

cy.get(<élément cliquable>).click()

Il suffit donc de récupérer un élément avec la fonction get, puis d’utiliser la fonction click.

Conclusion

Vous connaissez désormais tous les outils pour écrire des tests de qualité. Votre application sera plus robuste, les erreurs humaines seront limitées et vos clients seront heureux. Si vous souhaitez aller plus loin dans les tests, je vous propose cet autre tutoriel sur la validation avant commit.

Et vous, quel est votre Top 5 des fonctions utiles de Cypress ?