Rodolphe BUNG
Software developer
Cypress - Hands-on lab 👨💻👩💻
Rodolphe Bung
Développeur depuis 2005
Jordan Nourry
Développeur depuis 2009
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 🎁
Pré-requis
Si vous connaissez déjà Cypress, n'hésitez pas à donner un coup de main aux autres 🙏
Faire des tests E2E ...
Selenium 🐘
Cypress 🚀
I see it .. I like it .. I want it .. I got it
C'est quoi ?
- Initié par Brian Mann en 2014 👨💻
- Public beta depuis octobre 2017 🤘
- Sorti de la beta en septembre 2018 🚀
Expérience développeur
😍
Ce qui est inclus
C'est parti !
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
npm installnpm start
git clone https://github.com/JKratus/Cypress-Devoxx-Hands-on-LabLes 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
Cypress
- Cypress est déjà en dépendances de développement
- Lancer l'UI via ou
npx cypress opennm run cypress:openLes scénarios générés par Cypress
L'interface
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
Ce qu'on va apprendre
- cy.visit
- cy.click
- cy.get
- le selector playground
- les assertions
Test login
S'assurer que la fonctionnalité de login est complètement opérationnelle
- Tester l'affichage
- Cas d'erreurs
- Cas passant
Ce qu'on va apprendre
- les hooks (beforeEach, ...)
- factoriser du code afin que nos tests soient DRY
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
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
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
Ce qu'on va apprendre
- cy.request
- faire une custom command aux petits oignons 👌
- utiliser la custom command dans notre test
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
Conclusion 😪
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
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
La roadmap
La communauté
La communauté
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
Ressources 📚
Merci ! 🙏
Faites des tests E2E ! 💪
Bonus 🎉
Test unitaire d'un composant
Instancier un composant et valider son affichage avec Cypress
Test de régression visuelle
Utiliser Percy.io pour faire du test visuel
- Créer un compte (15 jours d'essai)
- Créer une organisation
- Créer un nouveau projet
- Mettre le PERCY_TOKEN en variable d'environnement
- Utiliser cy.percySnapshot()
Exécuter une commande
Pouvoir exécuter une commande système via Cypress
cy.exec(command)
cy.exec(command, options)Cypress Devoxx - Hands-on lab
By Rodolphe BUNG
Cypress Devoxx - Hands-on lab
A Cypress hands-on lab for Devoxx 2019
