🎉

cours3-e2e/cours3.md

@@ -0,0 +1,119 @@
+---
+marp: true
+paginate: true
+---
+
+# R6.06. Maintenance applicative 
+## Cours 3
+
+
+### Maxime Pierront - [contact@pierrontmaxi.me](mailto:contact@pierrontmaxi.me)
+
+---
+
+# Playwright
+## Tests End-to-End or E2E
+
+---
+
+# Qu'est-ce que les Tests End-to-End (E2E) ?
+**Définition** : Les tests E2E valident le flux intégral d'une application depuis le début jusqu'à la fin.
+**Objectif** : Assurer que le flux de travail complet fonctionne comme prévu.
+**Importance** : Identifier les problèmes d'intégration et les bugs dans des situations réelles.
+
+---
+
+# Pourquoi les Tests E2E sont-ils Cruciaux ?
+* Garantissent la cohérence du comportement de l'application.
+* Simulent l'expérience utilisateur réelle.
+* Détectent les problèmes qui pourraient être manqués par les tests unitaires ou d'intégration.
+
+---
+
+# Tests E2E vs. Tests Unitaires vs. Tests d'Intégration
+* Tests Unitaires:
+    * Focus: Fonctionnalités individuelles ou unités de code.
+    * But: Vérifier que chaque partie fonctionne isolément.
+* Tests d'Intégration:
+    * Focus: Interaction entre différentes unités/modules.
+    * But: Vérifier que les combinaisons de parties fonctionnent ensemble.
+* Tests E2E:
+    * Focus: Flux d'application complet.
+    * But: Vérifier que le système fonctionne dans son ensemble.
+
+---
+
+# Qu'est-ce que Playwright ?
+Présentation: Un framework de test automatisé open-source pour le web.
+
+**Avantages** : Prise en charge de plusieurs navigateurs, tests rapides, fonctionne sur tous les OS.
+**Utilisation** : Idéal pour les tests E2E grâce à sa flexibilité et sa facilité d'utilisation.
+
+---
+
+# Playwright Comparé à D'autres Frameworks
+* Comparaison avec Selenium:
+    * Playwright est souvent plus rapide et plus moderne.
+    * Supporte les dernières fonctionnalités des navigateurs web.
+* Comparaison avec Cypress:
+    * Playwright supporte les tests multi-navigateurs.
+    * Plus de flexibilité dans les scénarios de test.
+
+---
+
+# Comment installer et configurer playwright
+
+## Installation
+* Créez un nouveau dossier pour votre projet et naviguez-y `first-steps-playwright`
+* Exécutez la commande d'installation : `npm init -y` 
+
+---
+
+# Création du fichier de test
+* puis `npm init playwright@latest`.
+* Choisir d'un dossier `e2e` à la racine du projet
+* **Télécharger les navigateurs de playwright**
+* Création d'un 2e fichier `test.e2e.spec.js` avec le contenu suivant :
+```js
+const { test, expect } = require('@playwright/test');
+
+test('Test de base sur un site existant', async ({ page }) => {
+    await page.goto('https://example.com');
+    await expect(page).toHaveTitle('Example Domain');
+});
+```
+---
+
+# Execution des tests
+
+* Revenez au terminal et lancez le test avec la commande : `npx playwright test`.
+* *(Optionnel) Ajout d'un raccourcis dans le package.json dans scripts pour lancer les tests plus rapidement*
+* Playwright va ouvrir le navigateur, exécuter le test, puis le fermer automatiquement.
+
+---
+
+# Exemples disponibles
+## Exemple présente dans ici :
+`tests-examples/demo-todo-app.spec.js`
+
+
+---
+
+# Ajout d'un test End-to-End dans le projet
+
+---
+
+# Recap des attendus du projet pour le module maintenance applicative
+
+* Des tests en **TDD**
+* Des tests **E2E**
+
+J'évalurai la qualité des tests de chaque type.
+
+---
+
+# Maintenant Projet !!!
+
+---
+
+## Maxime Pierront - [contact@pierrontmaxi.me](mailto:contact@pierrontmaxi.me)