---
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)