---
tags: Techno
---
# Cypress & Percy
## TODO
- [x] Branche de Jérémie
- [x] Documenter Percy
- [x] Trouver Template projet annexe
- [x] Installer environnement Cypress et Percy
- [x] Repo projet annexe -> Github Perso disponible [ici](https://github.com/TheoLaperrouse/cypress-percy)
- [x] Percy : Integration Github/Gitlab (voir ce qu'on peut faire avec Slack)
- [x] Faire tests sur projet pro
---
## Cypress
Permet de faire des test 'end to end' (De bout en bout, c'est à dire que l'on va crée des scénarios d'utilisation d'une appli web et venir vérifier que tout est fonctionnel).
### Installation
#### Sur projet
Selon si on utilise npm ou yarn pour la gestion des paquets :
- npm install cypress
- yarn add cypress --dev
### Cypress Test Runner
Mettre en place & écrire les tests
### Cypress Dashboard
Lancer les tests en local ou depuis la CI
Possibilité de récupérer les données de tests, des screenshoots et des vidéos sur un Dashboard Cypress.
### Principe
Comment va fonctionner Cypress?
Par de petites actions comme celle ci :
- Ouvrir une page web
- Cliquer sur un élément en particulier
- Rentrer une valeur dans un input
On vient créer différents tests.
On vérifie ensuite que le fonctionnement de l'application est bien en accord avec ce qu'elle doit faire.
### Extension Chrome & Firefox
#### Cypress Scenario Recorder
Permet d'enregistrer des scénarii réalisés "à la main", c'est à dire effectué les actions ci-dessus sur notre navigateur et en sortir un test Cypress directement
Disponible que sur Chrome : https://chrome.google.com/webstore/detail/cypress-scenario-recorder/fmpgoobcionmfneadjapdabmjfkmfekb
### Fonctionnalités Cypress
#### Attente automatique
N'ajoutez jamais d'attente à vos tests. Cypress attend automatiquement les ordres et les assertions avant de passer à autre chose. Fini l'enfer de l'asynchronisation.
#### Snapshot
Cypress prend des clichés au fur et à mesure de vos tests. Il vous suffit de survoler les commandes dans la console pour voir exactement ce qui s'est passé à chaque étape.
#### Rechargement en temps réels
Cypress automatically reloads whenever you make changes to your tests. See commands execute in real time in your app.
#### Debugging
Déboguez directement à partir d'outils familiers comme Chrome DevTools. Les erreurs particulièrement lisibles rendent le debugage plus rapide.
#### Controle du traffic réseau
Contrôle facile sans impliquer le server
Fenêtre Cypress Test Runner.
On peut voir les tests à gauche de l'application et chacune des actions définis dans le test. On peut également voir les requêtes HTTP après l'action et les changements d'URL. (ici le premier get --> lance deux appels à l'API et l'URL change pour aller dans le menu Icon)
Pour chaque action (la sélectionner en cliquant dessus), on peut voir à droite l'application au moment de l'action.
---
## Percy
Permet de faire des reviews visuelles d'une application
### Principe
Prend un screenshoot d'une partie de l'application et l'enregistre.
En effectuant les tests, vérifie s'il diffère de celui d'avant, demande
### SDK pour Cypress disponible
[Documentation](https://docs.percy.io/docs/cypress)
Donne accès à cy.percySnapshot() dans les tests e2e Cypress
#### Installation de Percy sur un projet
```npm install --save-dev @percy/cypress``` or ```yarn add --dev @percy/cypress```
If typeScript :
"types": ["cypress", "@percy/cypress"] in your tsconfig.json file
En haut de cypress/support/commands.js :
import '@percy/cypress';
En haut de cypress/plugins/index.js
let percyHealthCheck = require('@percy/cypress/task')
module.exports = (on, config) => {
on("task", percyHealthCheck);
};
```bash
export PERCY_TOKEN=5a5015821b61acf67bdeda9ebd87e3bac6c6d444b143192ecd29f41b4f378561
```
---
## Test des librairies sur des projets
### Sur projet annexe
On part d'un [template Vue](https://www.creative-tim.com/product/vue-white-dashboard) légérement similaire(Graphique, Menu à Gauche, Action bar)
J'ai exporté ce projet sur un [repo Github](https://github.com/TheoLaperrouse/cypress-percy) disponible ici :
Pour lancer l'application :
```vue-cli-service serve``` ou ```npm start```
Réalisation d'un premier test très simple, aller sur l'acceuil et appuyer sur tous les boutons disponible dans le menu
```javascript=
/// <reference types="cypress" />
describe('Menu', function() {
it('click on all menu tabs', function() {
cy.visit('http://localhost:8080/#/dashboard')
cy.get('.sidebar-wrapper > .nav > .nav-item:nth-child(2) > .nav-link > p').click()
cy.get('.sidebar-wrapper > .nav > .nav-item:nth-child(3) > .nav-link > p').click()
cy.get('.sidebar-wrapper > .nav > .nav-item:nth-child(4) > .nav-link > p').click()
cy.get('.sidebar-wrapper > .nav > .nav-item:nth-child(5) > .nav-link > p').click()
cy.get('.sidebar-wrapper > .nav > .nav-item:nth-child(6) > .nav-link > p').click()
cy.get('.sidebar-wrapper > .nav > .nav-item:nth-child(7) > .nav-link > p').click()
cy.get('.sidebar-wrapper > .nav > .nav-item:nth-child(8) > .nav-link > p').click()
//Percy Snapshot
cy.percySnapshot()
})
})
```
Premiers pas avec Cypress:
1) Dans un premier temps, installer les modules :
```npm install```
2) Lancement du Cypress Test Runner :
```npx cypress open```
3) Cliquer sur le test choisi -> lance un navigateur et le test en visuel
Pour lancer le test spécifique en ligne de commande :
- avec Percy :
```
npx percy exec -- cypress run --spec "cypress/integration/firstTest.spec.js"
```
- sans Percy :
```
cypress run --spec "cypress/integration/firstTest.spec.js"
```
En mode de lancement normal, Cypress enregistre une vidéo pour chaque tests. Pour empêcher ça, mettre vidéo à false dans la config de cypress disponible à la racine du projet.
A chaque fois que l'on va lancer percy, Percy va créer un build avec autant de groupe de snapshots (= même page mais config différentes: navigateur, dimension) que de cy.percySnapshot() disponibles dans les tests.
J'ai créé 4 petits tests pour tester les différents menus de l'application. Cela m'a permis de constater que les valeurs des dashboards changeait
Le tableau de bord Percy ressemble à cela, ici on peut remarquer que les données des widgets ont changé par rapport au premier screenshot. Ces changements sont très visuelles grâce aux calques -> On voit les différences entre les deux snapshot à l'aide du rouge.
On peut également voir les snapshot avec des dimensions différentes et avec des navigateurs différents. Dans notre cas, 4 snapshots par groupe (Mozilla, Chrome, 1280px, 375px...)
Les Snapshots sont rangés par nom de tests
Pour ajouter Percy à la CI : [CI](https://percy.io/organizations/405558ff/integrations/github)
Ajout du repo du projet + link depuis Percy au repo Git
Possibilités de rajouter des WebHook si build OK/failed...
```yaml=
name: CI
on: [push, pull_request]
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v1.0.0
- name: Install
run: npm install
- name: Starting app
run: npm start
- name: Percy Test
uses: percy/exec-action@v0.3.1
with:
command: "cypress run"
env:
PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
```
A chaque Push, le dashboard Percy va se mettre à jour avec les nouvelles snapshots.
Inutile (Github Action le fait très bien):
J'ai fait une petite image docker pour lancer le projet et run la commande qui envoie les snapshot
### Sur projet pro
[Branche de Jérémie]()
#### Comment lancer les tests avec Cypress
Premièrement, lancer la stack
```sh
cd energiency-solution
docker-compose up
```
On peut lancer les tests comme ça:
```sh
yarn e2e:cypress
```
```tip
Select 'Electron' as browser to run a spec file on the Cypress UI.
```
Comme on peut le voir au-dessus, Cypress est déjà présent dans le projet et permet de faire deux tests e2e:
- Un sur la page des logins et permet de voir si un utilisateur avec un mauvais compte est bien refusé et un avec le bon accepté
- Un sur les monitoring
- Un sur les meters
#### Mise en place de Percy
Deux branches, une pour les tests de :
- Nassim : [Branche Nassim]()
- Théo : [Branche Théo]()
On a installé le plugin Percy de Cypress qui permet de rajouter la fonction percySnapshot dans les tests en to end
Pour le moment seulement disponibles en local:
- ```yarn watch:client``` dans energiency-solution
- ```yarn e2e:percy:test```
Les snapshot ne sont prises que dans un navigateur et que en une dimension pour éviter le remplissage trop rapide de l'offre découverte Percy. (5000 snapshots par mois)
Utilisation de l'extension chrome poru faire les tests, plus rapidement.
Ainsi, plusieurs tests ont été créés.
Tests effectués sur différentes parties de l'appli:
- Ajout d'un Tableau de bord Test Percy : Sur les différents menus des réglages d'un dashboard infos/layout/variables et report.
- Panneau de création d'un widget.
- Dashboard Classique.
Si les tests visuels étaient voués à rentrer dans le projet, comment on ferait le process (qui validerait les builds/qui vérifierait/quand). En comptant compte des information qu'on a, les tests visuels prennent un peu de temps, pas être fait(environ 1 minute 30 + temps lancement serveur), snapshoot limité, faut pas que ça soit trop loin dans le process, sinon on doit tout refaire..., on a ces possibilités :
- Au moment de déployer l'environnement, fais les tests visuels directement sur l'environnement de Review.
- Déploiement par les reviewer (un peu trop tard)
- Déploiement par le tâcheur
On a convenu qu'il serait mieux que ça soit une tâche manuel
Problèmes rencontrés :
- Quand lancement en local les îcones ne sont pas présentes sur les snapshots. Pourtant elles le sont en manuel depuis Cypress, elles y sont. Bizarre bizarre. (Voir en changeant le navigateur Chrome -> Firefox)
- Déploiement dans la CI assez compliqué. (Environnement,lancement sur un environnement où il y a des données, que ce soit toujours les mêmes au lancement des tests)
- Wait tout moche à la main à remplacer pas des get(element Vue).should(be.visible) ou des get(UiSpinner).should(not.be.visible)
Pourrait être plus intéressant à mettre dans le projet UI. Il y a un module storybook qui permet de faire automatiquement les tests sur les composants. Cela réglerait les problèmes de données qui sont update sur les environnements de review. Sur UI,
Documentation :
Cypress : https://www.cypress.io/
Percy for Cypress : https://percy.io/
[Vidéo Percy mise en place](https://www.youtube.com/watch?v=y8XtUlm899w)
cy.visit(`/customerCode/dashboards`);
cy.get('.dashboards-grid-item:first .en-drag')
.trigger('mousedown')
.trigger('dragstart');
cy.get('.dashboards-grid-item:last')
.trigger('dragover')
.trigger('mousemove')
.wait(10);
cy.get('.dashboards-grid-item:last')
.trigger('drop')
.trigger('mouseup');
Sign in with Wallet
Connect another wallet