Identifiez les sélecteurs
Lorsqu'on teste une interface utilisateur, il faut tout d'abord décider quels éléments on veut tester, et ensuite savoir les identifier.
On utilise donc des sélecteurs pour identifier sur une page web les éléments HTML avec lesquels on souhaite interagir, tels que les boutons, les champs de formulaire, les liens, les tableaux, etc.
Cypress propose plusieurs façons de sélectionner des éléments sur une page web :
Sélection par balise, classe ou ID | Vous pouvez sélectionner un élément en utilisant des sélecteurs CSS classiques tels que le nom de balise, la classe ou l’ID de l’élément.
|
Sélection par attribut | Vous pouvez également sélectionner des éléments en fonction de leurs attributs. Par exemple, pour sélectionner un lien avec un attribut ‘href’ spécifique : |
Sélection par contenu textuel | Vous pouvez sélectionner un élément en fonction de son contenu textuel. Par exemple, pour sélectionner un bouton avec le texte "Valider" : |
Sélection par relation parent-enfant | Vous pouvez sélectionner un élément en fonction de sa relation avec un élément parent. Par exemple, pour sélectionner un paragraphe à l’intérieur d’une div avec une classe spécifique : |
Sélection par index | Vous pouvez sélectionner un élément en fonction de son index parmi un groupe d’éléments correspondant à un sélecteur donné. Par exemple, pour sélectionner le deuxième bouton sur la page : |
Sélection par type d’élément et filtre | Cypress propose des méthodes de filtrage pour affiner davantage vos sélections. Par exemple, |
Il existe cependant une autre méthode, et c’est celle recommandée par Cypress, qui consiste à ajouter des attributs data-* à vos éléments.
Qu'est-ce que l'attribut data-* ?
L'attribut data-* permet de stocker des informations personnalisées sur un élément HTML. C'est un moyen d'ajouter vos propres attributs à un élément pour y sauvegarder des données spécifiques. La partie * de data-* peut être remplacée par n'importe quel nom que vous choisissez. Par exemple, data-id, data-user, data-product, etc. Pour ma part, j’utilise data-cy, pour data-cypress comme : <div data-cy="john_doe">...</div>
Pourquoi utiliser l'attribut data-* avec Cypress ?
Sélecteur spécifique et non ambigu : Les attributs data-* sont spécifiques à votre application et ne risquent pas d'entrer en conflit avec d'autres classes ou d’autres ID CSS. Cela rend vos sélecteurs plus précis et moins susceptibles de changer lorsque vous modifiez la structure CSS ou HTML.
Sélecteur stable : Les attributs data-* sont généralement utilisés pour marquer des éléments importants dans votre application. Contrairement aux classes ou aux ID qui peuvent être ajoutés ou supprimés pour des raisons de style, les attributs data-* sont plus stables et sont moins susceptibles de changer fréquemment.
Lisibilité : Lorsque vous utilisez des sélecteurs basés sur data-*, cela rend votre code plus lisible et compréhensible, car vous pouvez nommer ces attributs d'une manière qui décrit leur fonction ou leur contenu. Cela facilite la collaboration avec d'autres développeurs et la maintenance à long terme de votre code.
Dans certains cas, il est possible que vous n’ayez pas la main sur le code et que vous ne puissiez donc pas ajouter d’attribut pour identifier de façon unique votre élément. Dans ce cas, vous pouvez utiliser d'autres sélecteurs, mais veillez à ne pas utiliser de sélecteurs instables susceptibles de changer, comme les attributs CSS (nom de classe, tag, etc.).
Si ce n’est pas déjà fait, ouvrez votre navigateur et allez sur http://localhost:8080/#/contact.
Puis, ouvrez la console en faisant Ctrl + Maj + J ou clic droit, puis cliquez sur Inspecter. Cette page apparaît :
Dans la partie inférieure de l’écran, vous avez un outil très performant qui peut vous aider à déboguer. Il nous intéresse particulièrement car il va nous permettre d’examiner les éléments HTML. Toujours dans la partie inférieure de l'écran, cliquez sur la flèche en haut à gauche. En survolant les éléments de la page web dans la partie supérieure de votre écran, ceux-ci vont apparaître comme étant sélectionnés et vous allez voir le code HTML correspondant à l’élément en console :
Dans le projet Tech&Buy, on peut donc voir qu’il n’y a pas de data-cy mais des ID. Lors de la rédaction de votre premier test, vous allez voir comment ajouter des data-cy dans le code. Ça tombe bien, c’est la prochaine étape !
Faites un test d'entraînement
Voyons ensemble le processus de création pour votre test d'entraînement. Les premières étapes doivent vous rappeler ce que l’on a vu précédemment lors de l’exécution du test pour créer l’architecture de Cypress.
1. Pour ouvrir l’outil graphique Cypress, exécutez npx cypress open dans VSCode.
2. Cliquez sur le bouton E2E Testing. Comme vous pouvez le voir, il est à présent configuré.
3. Choisissez votre navigateur préféré : je vais prendre Chrome pour les exercices et les captures d’écran.
4. Cliquez sur Start E2E Testing in Chrome.
5. Une nouvelle fenêtre s’ouvre. Vous retrouvez la page des spécifications :
6. Cliquez sur le bouton + New spec en haut à droite de l’écran.
7. Vous avez le choix entre Scaffold example specs, que vous avez vu lorsque vous avez effectué les tests d'exemple, et Create new spec. Choisissez cette option pour créer une nouvelle spec, et donc un nouveau test :
8. Ensuite, vous devez entrer le chemin de votre spec. Nommez-la firstPassedTest.cy.js
9. Cliquez sur Create spec.
10. Un message vous dit que la spec a été créée :
11. Cliquez sur Okay, run the spec.
12. Le test se lance et vous devez avoir ce résultat :
Félicitations, le test a bien été exécuté !
Allez à présent dans VSCode et naviguez dans le dossier e2e. Vous y trouvez votre fichier firstPassedTest.cy.js :
Vous y retrouvez aussi le code que Cypress a généré :
describe('template spec', () => {
it('passes', () => {
cy.visit('https://example.cypress.io')
})
})Quelques explications sur ce code sont nécessaires !
La fonction describe est utilisée pour regrouper un ensemble de tests liés entre eux. On peut les appeler également des suites de tests.
La fonction it est utilisée quant à elle pour écrire un test individuel et elle doit être à l’intérieur d’un bloc describe. Elle permet de spécifier un comportement ou une assertion à tester. On peut également appeler cela un cas de test.
Retrouvez le détail de la création de ce test en vidéo :
Exécutez le test d'entraînement en ligne de commande
Le test peut aussi être exécuté en ligne de commande : voyons comment !
Pour cela, la ligne de commande à exécuter est npx cypress run .
Vous devez obtenir un résultat qui ressemble à cela :
Mais pourquoi il y a tant de fichiers ?
Eh oui, ce résultat est surprenant ! Laissez-moi vous expliquer. Lorsqu’on utilise l’interface graphique de Cypress, un seul fichier de test (spec) est exécuté à la fois. Alors que lorsqu’on utilise la ligne de commande npx cypress run , on exécute tous les fichiers de test présents dans le répertoire de tests. En l'occurrence, ici, le test que vous avez ajouté, firstPassedTest.cy.js, et qui apparaît en premier dans la liste, mais aussi tous les tests d’exemple de Cypress.
L’avantage d’utiliser la ligne de commande est que vous ne pouvez pas interférer dans l’interface graphique, et l’exécution est plus rapide. Utiliser la ligne de commande vous permet aussi de lancer une suite complète de tests en une seule commande. Cela est très pratique pour l’exécution automatisée, les intégrations avec des systèmes de CI/CD (Intégration continue/ Livraison continue) et la réalisation de tests de régression.
Et si on créait un premier test pour le site Tech&Buy ? Allons-y !
Créez votre premier test réel
On rentre maintenant dans le concret et vous allez enfin pouvoir mettre les mains dans le cambouis ! Pour votre premier test réel, vous allez tester la page Contact du site internet Tech&Buy :
Vous pouvez créer un nouveau test avec l’interface graphique, en passant par le bouton New spec.
Vous pouvez aussi créer un nouveau fichier contact.cy.js directement dans le dossier e2e dans VSCode. Cypress rechargera automatiquement l’interface graphique.
1. Cliquez sur New File :
2. Ajoutez le nom contact.cy.js, et voilà !
3. Recopiez ensuite le test de la section Faites un test d'entraînement dans le présent chapitre, et remplacez l’URL à l’intérieur par http://localhost:8080/#/contact.
describe('contact page', () => {
it('it navigate to the contact page', () => {
cy.visit('http://localhost:8080/#/contact')
})
})Mais que testez-vous exactement ? Là, rien du tout, vous voyez bien que vous n’avez pas d’assertion, juste un visit(). Celui-ci vous permet de naviguer vers l’URL que vous avez donnée en paramètre. Il est temps de définir ce test !
Pour cela, dans un premier temps, nous pouvons ajouter la baseUrl de notre site au fichier de configuration Cypress. Vous vous souvenez où il se trouve ?
4. Dans le fichier cypress.config.js, ajoutez la baseUrl ainsi :
const { defineConfig } = require("cypress");
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
},
baseUrl: "http://localhost:8080/"
},
});5. Si ce n’est pas déjà fait, ouvrez votre navigateur et allez sur la page du formulaire de contact : http://localhost:8080/#/contact. Nous avons vu au moment d'identifier les sélecteurs que le code de l’application n’en avait pas.
6. Modifiez le code de votre test pour inclure un nom, une adresse e-mail et un message :
describe('contact page', () => {
it('it navigate to the contact page', () => {
cy.visit('http://localhost:8080/#/contact')
cy.get('#name').type('name')
cy.get('#email').type('test@test.fr')
cy.get('#message').type('Bonjour, votre site est génial !')
cy.contains('Envoyer').click()
cy.get('.success').should('be.visible').should('contain', 'Message envoyé avec succès.')
})
})Le code vous est maintenant familier sauf la dernière ligne : cy.get(‘.success’).should(‘be.visible’).should(‘contain’, ‘Message envoyé avec succès’)
Décryptons-la : vous récupérez d’abord votre élément grâce à cy.get(‘.success’) . Ensuite, vous testez que l’élément est bien visible should('be.visible') et qu’il contient le message spécifié should('contain', 'Message envoyé avec succès.') . C’est notre assertion.
Le résultat de notre test est donc :
Retrouvez le détail de ce premier test réel en vidéo :
Le test utilise des classes, or vous m’aviez dit qu’il ne fallait pas utiliser les classes…
C’est vrai, il ne faut pas utiliser de classes sauf si vous ne pouvez pas faire autrement. En l’occurrence, vous avez le code de Tech&Buy. Vous allez donc pouvoir le modifier afin d’ajouter les attributs data-cy nécessaires. C'est ce que nous allons faire dans le prochain chapitre.
En résumé
Les sélecteurs vous permettent de localiser les éléments de votre choix sur une page web pour interagir avec eux.
Il existe différentes méthodes de sélection d'éléments, y compris par balise, classe, ID, attribut, contenu textuel, relation parent-enfant, index, et type d'élément.
L'utilisation d'attributs data-* est recommandée par Cypress pour des sélecteurs spécifiques et stables.
L'attribut data-* permet de stocker des informations personnalisées sur les éléments HTML.
Pour créer un test avec Cypress, vous pouvez utiliser l'interface graphique ou la ligne de commande, en spécifiant des comportements et des assertions pour tester les éléments de la page.
Vous savez maintenant écrire des cas de test automatisés fonctionnels avec Cypress, mais vous aimeriez appliquer les bonnes pratiques de Cypress. Voyons comment dans le prochain chapitre !
