Accueil Technologies Cypress – Installation sur un projet Web (PHP / Phalcon)
Cypress - Mise en place de tests sur un projet Web (PHP - Phalcon)

Cypress – Installation sur un projet Web (PHP / Phalcon)

par Jérémy PASTOURET

Écrire des tests ne doit pas être si fastidieux que cela. Cypress est un outil dont on vous a déjà parlé précédemment. L’objectif de cet article est de vous mettre le pied à l’étrier, même si nous savons bien qu’écrire tous les tests d’une application peut prendre du temps. Nous vous proposons tout d’abord de mettre en place un système de test. Puis d’écrire les tests relatifs à vos nouveaux développements. De cette manière, votre application gagnera progressivement en qualité, sans vous faire perdre trop de temps.

Pré-requis de la mise en place d’un système de tests

Bannière Rechercher

Pour cet article, nous allons prendre comme exemple un projet Web disponible sur GitHub. Ce projet Open Source est découpé en deux : une partie API, et une autre Front-End.

Elles sont toues deux écrites en PHP avec le framework Phalcon.

Cypress fonctionne avec tout type de projet Web : il suffit seulement que le projet soit accessible à travers un navigateur web.

Pour suivre ce tutoriel, vous avez deux solutions :

  • Vous servir du même projet (le projet GitHub est complet : si vous souhaitez refaire les manipulations, il faut supprimer le répertoire cypress et les fichiers package.json, package-lock.json et cypress.json).
  • Prendre l’un de vos propres projets.
  • Faire les deux (commencer par le même projet puis reproduire la même chose sur vos projets).

Vous devez aussi avoir installé NodeJS et NPM. Pour cela, rendez-vous sur le site officiel.

Installation de Cypress

Bannière développeurs

Ouvrez un terminal, et placez vous dans le répertoire du projet Web à tester. Cypress fonctionne avec NodeJS, il faut donc initialiser le projet avec NPM. Cette opération n’est pas nécessaire si le projet Web en question est déjà écrit en NodeJS. Lancez donc la commande suivante :

npm init

Puis suivez les instructions du programme d’initialisation. Il y a deux manières de procéder :

  • En lisant et en remplissant correctement les informations (le projet est propre).
  • Ou alors en appuyant sur la touche Entrée pour mettre la valeur par défaut. A la fin, il faudra valider la configuration en tapant le terme “yes“. Cette façon de faire est plus rapide et permet d’effectuer un POC rapide.
phalcon-nova-mooc git:(master)  npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (phalcon-nova-mooc) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: (https://github.com/les-enovateurs/phalcon-nova-mooc.git) 
...

Ensuite, nous allons installer Cypress en lançant la commande suivante :

npm install cypress

Le résultat obtenu devrait être similaire à celui-ci :

  phalcon-nova-mooc git:(master)  npm install cypress
npm WARN deprecated request@2.88.0: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN lifecycle The node binary used for scripts is /snap/bin/node but npm is using /snap/node/2310/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> cypress@4.1.0 postinstall /home/les_enovateurs/Workspace/LesEnovateurs/phalcon-nova-mooc/node_modules/cypress
> node index.js --exec install


Cypress 4.1.0 is installed in /home/les_enovateurs/.cache/Cypress/4.1.0

npm notice created a lockfile as package-lock.json. You should commit this file.
+ cypress@4.1.0
added 201 packages from 136 contributors and audited 278 packages in 6.685s
found 0 vulnerabilities

Cypress est maintenant installé.

Vérification et lancement de Cypress

Bannière Les actions

Pour s’assurer que Cypress a été correctement installé, il suffit de lancer la commande suivante :

npx cypress open

La commande prend un peu de temps à s’exécuter, car Cypress crée des fichiers d’exemples qui pourront vous aider par la suite. Au bout d’un court moment, une fenêtre s’ouvre :

Cypress test runner

Cliquez sur le bouton Ok, got it! Puis si le cœur vous en dit, vous pouvez essayer un des exemples de Cypress. Ils marchent tous, car leurs scripts d’exemples testent leur propre site web. Par exemple, si vous double-cliquez sur action.spec.js, une fenêtre de test se déclenche.

Lancement de test avec Cypress

Création du premier test

Bannière problème

Pour créer votre propre test, rendez-vous dans le répertoire cypress puis integration. A l’intérieur, créez un fichier nommé action.js. A l’intérieur de celui-ci, collez le contenu suivant :

describe('Mon premier test', function() {
  it('Visite la page d\'accueil', function() {
    cy.visit('http://127.0.0.1/')
  })
})

Remplacez l’URL http://127.0.0.1/ par l’adresse web de votre application/site présent sous Docker ou sur votre machine.

Ensuite, retournez sur la première fenêtre ouverte de Cypress : vous y verrez notre nouveau fichier nommé action.js. Cypress détecte automatiquement la présence d’un nouveau fichier. Il ne vous reste plus qu’à double-cliquer sur notre nouveau script : Cypress vérifie alors que votre site est bien actif.

Test de la page d'accueil avec Cypress

Conclusion

Bannière conclusion

Dès maintenant, vous savez comment initialiser un système de test avec Cypress. Dans le prochain article, nous vous présenterons ses fonctions les plus utiles. En tout cas, sachez que cette technique fonctionne avec tous types de projets Web. Si vous rencontrez des soucis, les commentaires sont à votre disposition.

Vous pourriez aussi aimer

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.