#DevoxxFR

Rodolphe Bung

Développeur depuis 2005

 

Jordan Nourry

Développeur depuis 2009

@rodbung

rbung

@JkNourry

#DevoxxFR

Le programme

(3h30, mais on prendra le temps de manger quand même 😅)

• Un peu de théorie (juste un peu) 📚
• Pris en main de Cypress (installation, interface) 👨‍💻👩‍💻
• Tester une navigation à travers le site
• Tester unitairement une page
• Prendre en charge les requêtes XHR 😎
• Faire une commande custom
• CICD et le dashboard service
• Et d'autres choses si le temps nous le permet 🎁

#DevoxxFR

Pré-requis

• Pouvoir se connecter à internet
• Une installation Node.js récente
• Git pour pouvoir cloner le repo
• Votre éditeur préféré (VSCode ? 😘)

#DevoxxFR

Si vous connaissez déjà Cypress, n'hésitez pas à donner un coup de main aux autres 🙏

 

#DevoxxFR

Faire des tests E2E ...

#DevoxxFR

Selenium 🐘

#DevoxxFR

#DevoxxFR

#DevoxxFR

#DevoxxFR

#DevoxxFR

#DevoxxFR

Cypress 🚀

I see it .. I like it .. I want it .. I got it

#DevoxxFR

C'est quoi ?

• Initié par Brian Mann en 2014 👨‍💻
• Public beta depuis octobre 2017 🤘
• Sorti de la beta en septembre 2018 🚀

#DevoxxFR

Expérience développeur

😍

#DevoxxFR

#DevoxxFR

#DevoxxFR

Ce qui est inclus

• Mocha
• Sinon
• Chai / Chai-jQuery / Sinon-Chai
• Lodash

https://docs.cypress.io/guides/references/bundled-tools.html

#DevoxxFR

Mise en route

• Cloner le repository
• Installer les dépendances
• Lancer l'application web
• Naviguer sur le site et voir les différentes fonctionnalités

#DevoxxFR

Les fonctionnalités

• Voir les articles
• Voir un article
• Login
• Poster un commentaire sur un article
• Effacer son commentaire sur un article
• Modifier son profil via les settings

#DevoxxFR

Cypress

• Cypress est déjà en dépendances de développement
• Lancer l'UI via                         ou

#DevoxxFR

Les scénarios générés par Cypress

#DevoxxFR

L'interface

#DevoxxFR

Test de navigation

• Parcourir les principales fonctionnalités de l'application
• Ne mock rien (ou bien le moins possible)
• Assertions grossières

 

 

But : s'assurer que notre site répond aux besoins principaux des utilisateurs

#DevoxxFR

Ce qu'on va apprendre

 

• cy.visit
• cy.click
• cy.get
• le selector playground
• les assertions

#DevoxxFR

Test login

S'assurer que la fonctionnalité de login est complètement opérationnelle

 

• Tester l'affichage
• Cas d'erreurs
• Cas passant

#DevoxxFR

Ce qu'on va apprendre

 

• les hooks (beforeEach, ...)
• factoriser du code afin que nos tests soient DRY

#DevoxxFR

Test en isolation

S'assurer que la page article est complètement opérationnelle

 

• Tester l'affichage
• Assertions fines (auteur, contenu de l'article, etc.)
• Les cas limites (erreur 404, 500 ou temps de réponses importants du serveurs

#DevoxxFR

Ce qu'on va apprendre

 

• Intercepter les requêtes XHR
• Pouvoir jouer sur le contenu des réponses
• Pouvoir jouer sur le statut des réponses

#DevoxxFR

Faire une custom command

S'affranchir de la mire d'authentification pour utiliser les fonctionnalités en mode authentifié

 

• Refactorer le test existant avec notre custom command pour qu'il s'exécute plus rapidement

#DevoxxFR

Ce qu'on va apprendre

 

• cy.request
• faire une custom command aux petits oignons 👌
• utiliser la custom command dans notre test

#DevoxxFR

Intégration continue

Exécuter les tests en mode headless

 

• Utilisation de la commande cypress run
• Découverte du dashboard
• Enregistrer nos tests
• Utilisation de CircleCI
• Démonstration du mode parallèle

#DevoxxFR

https://twitter.com/Cypress_io/status/1117848316912422913

#DevoxxFR

Conclusion 😪

#DevoxxFR

Ce qu'on a appris

• Installer Cypress
• Implémenter différents types de tests
• Utiliser l'interface de Cypress
• Intercepter / Mocker les requêtes XHR
• Implémenter une custom command
• Utiliser le mode headless
• Utiliser le dashboard
• Mettre en place une intégration continue avec CircleCI

#DevoxxFR

C'est pas fini !

• Tester unitairement ses composants
  • angular, react, vue, hyperapp, svelte
• Tester visuellement
  • cypress-image-snapshot, Applitools, Percy
• Cucumber
• Typescript
• D'autres customs commands
  • cy-view, cypress-testing-library

https://docs.cypress.io/plugins/

#DevoxxFR

La roadmap

https://youtu.be/FfqD1ExUGlw

#DevoxxFR

La communauté

https://www.npmtrends.com/cypress

#DevoxxFR

La communauté

https://2018.stateofjs.com/front-end-frameworks/other-libraries/

#DevoxxFR

Des inconvénients ? 👿

• Pas de support de plusieurs onglets/fenêtres
• Support d'autres navigateurs (ça arrive 🤞)
• Faire tourner les tests en parallèle en local
• Seulement JavaScript

#DevoxxFR

Ressources 📚

● Documentation officielle

● Les recettes

● Conférence Assert(JS) 2018 1/2

● Conférence Assert(JS) 2018 2/2

● Conférence JSConf Iceland 2018

● Automated Testing for the Modern Web

● End to End testing with Cypress sur egghead.io

● Get the latest updates from Cypress

#DevoxxFR

Merci ! 🙏

Faites des tests E2E ! 💪

@rodbung

https://github.com/JKratus/Cypress-Devoxx-Hands-on-Lab

https://slides.com/rodolphebung/cypress-devoxx-hands-on-lab

@JkNourry