Modèle de Projet Cypress

Introduction

La mise en place de configurations et de bonnes pratiques pour chaque nouveau projet Cypress peut s'avérer fastidieuse. Cela demande du temps et peut entraîner des oublis. Afin de simplifier ce processus, je partage mon modèle de projet Cypress qui sert de point de départ pour éviter de repartir de zéro à chaque fois.

Ce modèle comprend les éléments suivants :

Une architecture Cypress préconfigurée.
Des modèles de fonctions et de commandes Cypress personnalisées prêts à l'emploi.
Une configuration préconfigurée pour l'intégration continue avec CircleCI.
Une configuration fonctionnelle des git hooks pour le formatage systématique du code.
Des exemples d'utilisation de Newman dans le cadre de l'intégration continue.
Des exemples de contrôle des débits réseau lors des tests.
La possibilité de lancer les tests dans un tableau de bord Cypress préconfiguré.

Remarque : Ce projet est un modèle. Il contient plusieurs exemples d'implémentations et des pratiques courantes. Vous devrez l'adapter à votre application et à votre environnement, voire personnaliser complètement les fonctions en fonction de vos besoins (par exemple, en créant des commandes Cypress personnalisées).

Public Cible

Ce modèle sera utile à tout développeur web et testeur souhaitant automatiser les tests d'applications web à l'aide de Cypress.io ou Postman. Un niveau de compétence minimum de débutant est requis, car des ajustements seront nécessaires pour l'adapter à des besoins spécifiques.

Principaux Packages Installés

Ce modèle inclut déjà plusieurs packages importants, notamment :

Cypress
Newman, l'équivalent de Postman en ligne de commande.
ESLint et Prettier pour l'analyse et le formatage du code.
Husky, pour la gestion des git hooks.
Junit Reporter pour générer des rapports de tests au format JUnit.

Prérequis

Avant de commencer, assurez-vous de disposer des éléments suivants :

Un ordinateur (Mac, Windows, Linux).
Node installé.
Visual Studio Code installé.
Git installé.
Postman installé.
Un compte GitHub.
Un compte CircleCI auquel vous vous connecterez avec votre compte GitHub.
Un compte pour le Tableau de Bord Cypress.io.

Assurez-vous que Node et npm sont correctement installés en vérifiant leur version dans votre terminal :

$ node -v
# Exemple : v16.15.0
$ npm -v
# Exemple : 8.5.5

Pour obtenir le modèle et installer les dépendances NPM, suivez ces étapes :

Connectez-vous à votre compte GitHub.
Accédez au projet : Lien vers le projet.
Cliquez sur le bouton "Utiliser ce modèle".
Donnez un nom à votre nouveau projet.
Clonez votre nouveau projet et installez les dépendances :

git clone https://github.com/rwralitera/nom-projet
cd nom-projet
npm install

Vérification Rapide ✅

Pour tester l'installation, ouvrez votre terminal et exécutez la commande suivante :

npx cypress:run

Vous devriez voir Cypress exécuter tous les tests avec succès.

Configuration et Ajustements

Maintenant que vous avez le modèle de projet, vous devrez effectuer quelques modifications pour l'adapter à votre environnement.

Configuration CircleCI

Ce modèle de projet intègre déjà un fichier de configuration config.yml, qui lance automatiquement les tests à chaque push. Pour configurer CircleCI :

Connectez-vous à votre compte CircleCI.
Accédez à l'onglet "Projet".
Cliquez sur le bouton "Configurer le projet" correspondant au bon projet.

Configuration Git Hooks

L'exécution des git hooks se fait grâce au package Husky, dont la configuration de lancement se trouve dans le fichier package.json. Vous trouverez deux étapes :

Le "pre-commit", qui exécute simplement prettier sur tous les fichiers modifiés.
Le "prepare-commit-msg", qui ajoute les initiales de l'auteur du commit prepare-commit-msg.sh.

Vous pouvez éventuellement modifier les branches pour lesquelles ces étapes doivent être exécutées :

if [ -z "$BRANCHES_TO_SKIP" ]; then
	BRANCHES_TO_SKIP=(develop)
fi

Configuration dans les Fichiers JSON

Recherchez le mot-clé XXXXXXX dans les fichiers de configuration et remplacez-le par les valeurs appropriées :

Dans cypress.json, remplacez "projectId" par "ID_PROJET_DASHBOARD_CYPRESS".
Dans develop.json, mettez à jour l'URL pour correspondre à votre environnement de développement.

Configuration dans les Fichiers de Code

Recherchez le mot-clé FIXME dans les fichiers de code et remplacez-le par les valeurs appropriées :

Dans le fichier command.ts, effectuez les ajustements nécessaires pour les URL cibles en fonction de votre environnement.
Dans le fichier _waitLoader.ts, adaptez simplement le sélecteur correspondant au chargement.

rwralitera/cypress-template