Introduction
L’informatique est aujourd’hui un pilier de notre société. Tous les jours, dans nos diverses activités professionnelles ou personnelles, nous utilisons parfois sans même nous rendre compte un bon nombre d’outils numériques.
Pendant de nombreuses années, l’assurance qualité était plus développée dans les secteurs proposant des produits de consommation purs ou des objets physiques, devant respecter des normes et standards, dépendant tous de leur secteur d’activité ou encore du consommateur ciblé (enfant, personnes âgées, professionnel de santé, etc..).
Néanmoins, l’assurance qualité a depuis pris son importance dans le monde de l’informatique. En effet, il est aujourd’hui impensable de laisser passer de nouvelle feature ou amélioration de logiciel/site web, sans assurer que la qualité de la précédente version du système ciblé ne soit pas détériorée. Ces processus de qualité veillant à la satisfaction de l’utilisateur peuvent être couteux pour une entreprise, aussi bien en tant que ressource financière ou humaine. C’est pour cela aujourd’hui que je voulais vous présenter Cypress, cet outil open source écrit en JavaScript, facilitant la vie de nombreuses entreprises et acteurs du web.
Pourquoi Cypress ?
Quand on parle QA dans le domaine du web, on pense assez souvent au testeur, passant une grande partie de son temps à répéter en boucle, les mêmes suites de tests de régressions afin de pouvoir confirmer que les nouvelles modifications apportées au système ne créent pas de défaut ou de régression. Si placer une équipe quotidiennement sur ces mêmes tâches peut être extrêmement chronophage et couteux, il existe aujourd’hui des solutions pour faciliter la vie de vos testeurs tout en gardant un certain niveau de qualité.
Je vais donc aujourd’hui vous présenter l’outil Cypress, acteur phare et récent du monde du test, cet outil en JavaScript est devenu un incontournable en terme de tests automatisés Front-end.
Il est néanmoins important de savoir que Cypress peut tout à fait être utilisé pour des tests api, bien que son utilité principale ne soit pas cette dernière catégorie de test.
Cypress comporte plusieurs aspects positifs, il permettra à vos équipes de développer des scénarios automatisés permettant de dérouler des tests plans sans actions humaines ou presque. Je dis « ou presque » car il est tout de même important de noter que Cypress ne pourra en aucun cas à lui tout seul remplacer une équipe QA.
En dehors de la rédaction des cas tests, de l’assimilation des spécifications techniques associées ou encore des relevés de bug à faire tout au long du déroulement du projet, il faut aussi prendre en compte que les tests automatisés doivent, eux aussi, être maintenus pour être optimaux. Ils permettront néanmoins, une fois vos suites de tests bien avancées et automatisées, de déplacer des ressources QA sur d’autres parties de votre projet.
Cypress est donc une boite à outil pour réaliser vos tests « end-to-end ». Pour rappel, les tests e2e consistent à tester la totalité de notre application du début à la fin pour s’assurer que les cas utilisateurs de notre projet se comportent comme prévu. Cela garantit que tous les éléments du système fonctionnent ensemble correctement.
L’objectif principal de nos tests « end-to-end » est de tester l’expérience de l’utilisateur final en simulant des utilisateurs réels.
Cypress c’est aussi la possibilité d’implémenter nos suites de tests dans une chaine d’intégration continue, permettant d’automatiquement vérifier une partie de notre application ayant été modifié.
Implémenter Cypress
Cypress est vraiment très simple à installer. Il vous suffit d’exécuter la commande suivante depuis votre gestionnaire de package, à la racine de votre projet.
Avec npm : npm install Cypress --save-dev
Avec Yarn: yarn add Cypress -D
Une fois l’installation terminée, il vous suffira d’ouvrir votre invite de commande dans votre projet et de taper la commande suivante :npx Cypress open
Cette commande démarrera l’interface de test de Cypress.
Vous devriez trouver plusieurs exemples de test intégrés afin de commencer votre projet. N’hésitez pas à naviguer dans l’arborescence pour comprendre comment est structuré Cypress.
Et voilà ! Cypress est installé sur votre machine, il ne manque plus qu’à lire un peu de doc ! Ici même !
Les bonnes pratiques liées à Cypress
Page Object
Le Design pattern Page Object est utilisé en automatisation des tests afin d’améliorer la maintenance des tests et éviter la duplication du code. Il est d’ailleurs souvent utilisé pendant le développement de l’UI des sites web.
Le but principal des Page Object est de rassembler plusieurs objets et comportements liés à une même page, en utilisant des méthodes qui permettront d’accéder aux différents éléments graphiques ou actions d’un utilisateur.
Pour résumer, les Page Object permettent de regrouper les différentes actions utilisateurs liées à une page web, et dans notre cas les utiliser pour développer nos scénarios de tests automatisés.
Un autre avantage des Page Object est de faciliter la maintenabilité de nos suites de tests automatisés, car, si des IDs, ou tout autres éléments liés à une page venait à changer, nous aurions besoin uniquement de modifier les Page Object pour adapter de nouveau le code de nos tests. Nous évitons ainsi de devoir re-modifier tous nos cas de tests impactés par ces changements.
Voici un petit schéma pour simplifier mes propos.
Vous l’aurez donc compris, les Page Object c’est la vie !
Les data-testid
Les data-testid font partie des bonnes pratiques à appliquer afin de vous simplifier la vie lors de la réalisation de vos suites de tests avec Cypress.
En effet, ils permettront d’accélérer le développement des tests en facilitant l’accès aux différents objets du DOM que l’on veut sélectionner pour nos tests. Grâce au sélecteur proposé par Cypress, nous pourrons spécifier le type d’objet que nous souhaitons sélectionner et préciser son data-testid, afin que Cypress interprète le plus vite possible l’objet dont il a besoin pour dérouler le scénario.
Attention ! Il est important de bien définir un ID unique pour chaque data-testid afin de ne pas créer de conflit dans le comportement de nos tests automatisés.
Voici un exemple de code simplifié utilisant les data-testid et les Page Object :
Tout d’abord, voici notre page HTML, elle contient une URL redirigeant vers notre site web. Sur cette URL est appliquée un DataTestId unique, permettant de faciliter la sélection de cet élément dans le DOM.
<html>
<body>
<div>
<a href="https://www.attineos.com" data-testid="app-url-id">Link</a>
</div>
</body>
</html>Voyons maintenant un exemple simplifié, d’un fichier de Page Object. Bien évidemment, dans un cas réel, ce fichier contiendrait une multitude d’autres objets liés aux actions de la page ciblée.
export default class OurApp {
clickAppUrl() {
return cy.get('[data-testid=app-url-id]').click();
}
}Nous déclarons donc une class « OurApp » contenant notre méthode « clickAppUrl() », utilisée pour cliquer sur notre balise <a>, en sélectionnant directement son ID.
Il est aussi tout à fait possible de créer un fichier contenant tous nos DataTestId afin de l’utiliser comme référence pour nos Page Object, permettant encore une fois de simplifier la maintenance de nos tests en évitant la redondance de code.
Voici un exemple d’appel de DataTestId depuis un fichier externe :
import { AppIds } from 'dataTestIds';
export default class OurApp {
clickAppUrl() {
return cy.get(`[data-testid=${AppIds.Url.OurApp}]`).click();
}
}Et pour finir, voici désormais notre test case, il comporte un test basique, permettant de cliquer sur l’URL de notre site web.
import { OurApp } from 'pageObjects/ourApp';
const OurApp = new OurApp();
describe('React our website URL elements', () => {
it('Click our URL with data-testId', () => {
OurApp.clickAppUrl();
});
});Vous l’aurez compris, Cypress est d’autant plus intuitif et performant lorsque l’on évite la redondance de code. Cela nous facilitera grandement la tâche et permettra une meilleure lisibilité dans le code tout en rendant la maintenance de la suite de test beaucoup plus simple.
Les points faibles de Cypress ?
Rien n’est parfait dans notre monde, c’est pour cela qu’il me semblait important d’évoquer quelques points faibles de Cypress.
Il y a quelques mois encore, j’aurais forcément parlé de la problématique que représente le multi-domaine avec Cypress.
En effet, précédemment, il était totalement impossible de naviguer entre plusieurs domaines en réalisant des tests automatisés avec Cypress, empêchant par exemple les testeurs de certains projets, d’utiliser cet outil.
J’ai comme exemple le client avec lequel je travaille actuellement, qui a pour objectif la vente d’email marketing.
Pendant un bon moment, nous étions bloqués par la possibilité d’aller valider un email dans une boite mail. Car impossible pour Cypress de changer de domaine durant la suite de test.
Mais depuis une récente mise à jour, il est enfin possible de réaliser des scénarios automatisés en cross-domaine sur Cypress ! Grâce à la mise à jour 9.6.0 !
Cypress est aussi un peu difficile d’accès pour certains testeurs, puisqu’il s’agit d’un premier pas vers du développement en JavaScript. Il est parfois nécessaire de proposer des formations ou auto-formations en ligne afin d’avoir les connaissances requises pour mettre en place un projet avec Cypress.
Conclusion
Cypress est un outil génial pour créer des tests automatisés End to End. Il permet aussi d’éviter la redondance des tests pour le testeur, qui trop souvent mène à des défaillances par faute d’attention. Il est bien connu dans notre métier, qu’à force de répéter la même tâche, des automatismes se créent, menant parfois à des pertes de qualité sur les plateformes.
Cypress est aussi un outil simple d’apprentissage, sa prise en main est généralement appréciée des testeurs, car il permet de réaliser beaucoup de choses grâce à ces nombreux outils intégrés.
Alors si jamais vous n’aviez pas encore essayé, toutes les informations à propos de Cypress sont présentes ici : Cypress.io
Restez à l’affut ! Nous publierons prochainement un article détaillant de multiples mécanismes et outils proposé par Cypress afin de nous faciliter la tâche dans la création de nos suites de tests automatisés. À très bientôt donc !
