UI Testing Pragmatique avec Cypress

Apprendre à tester la UI de vos applications Web avec Cypress

  • Imprimer le programme Imprimer le programme
  • Filière :

    Méthodes, Tests, normes

  • Sous-filière :

    Testing logiciel

  • Référence

    DW-CYP

  • Durée

    2 jours (14h)

  • Prix unitaire HT

    1450 €

Objectifs pédagogiques Objectifs pédagogiques

  • Implémenter différents types de test pour vos applications Angular, React, VueJS ou sans framework avec Cypress
  • Tester les interactions réseau
  • Choisir le meilleur type de tests en fonction du contexte
  • Découpler les tests du code afin de réduire les coûts de testing et de maintenance
  • Implémenter des tests maintenables et human-readable

Public cible Public cible

  • Développeurs Web

Pré-requis Pré-requis

Une expérience de testing sera bénéfique afin de bien saisir les bonnes pratiques et astuces exposées lors de cette formation

Programme de la formation Programme de la formation

Introduction au testing

  • Pourquoi tester ?
  • Les différents types de test
  • Les stratégies de testing : cornet de glace, pyramide vs rayon de miel

Cypress Core Features

  • Developer eXperience
  • Rapidité
  • Debuggabilité
  • Retry-ability
  • Cohérence et stabilité

Premier Test

  • Mise en place de Cypress
  • Mise en place de Cypress avec Nx
  • Exercice : Implémenter et lancer un premier test

Fondamentaux Cypress

  • Les commandes
  • Les assertions
  • Exercice : Interagir avec le DOM
  • Debugging
  • Organisation des tests
  • Exercice : Interagir avec les formulaires
  • Variables & aliases

Cypress Network Testing

  • Avantages et inconvénients des différentes techniques
  • Exercice : Intercepter les requêtes
  • Exercice : Utiliser des fixtures
  • Exercice : Utiliser une sandbox

Retour vers le future

  • Exercice : Jouer avec le timer

“Keeping Tests Healthy with DOM Distancing”

  • Tests attributes
  • Cypress Custom Commands
  • Page objects
  • Test Harnesses

Test Harnesses

  • L’histoire des Test Harnesses
  • Comment cela fonctionne
  • Exercice : Utilisation des test harnesses
  • Exercice : Implémentation de test harnesses

Cypress Component Testing

  • Brisons les frontières de l’ »isolated testing” avec Cypress Component Testing
  • Exercice : Isoler et tester un composant avec Cypress
  • Exercice : Réutiliser le test harness

Tester les Interactions

  • Stubs & Spies
  • Exercice : “Overrider” les dépendances avec l’injection de dépendance et les spies
  • Exercice : Tester la communication à base de props, inputs & outputs

Visual Regression Testing

  • Tester la présentation
  • Détecter les régressions visuelles avec Cypress Component Testing & Percy

Automatisation

  • Configuration de la CI
  • Reporters
  • Cypress Dashboard
  • Parallelization