Tests Automatisés d’une Application React & Laravel – Selenium IDE

Résumé

Projet développé dans le cadre de ma formation en developpement web avancé D-Clic 2025 (OIF).
Il vise à automatiser les tests d’une application web composée d’un frontend React (CRUD clients) et d’un backend Laravel (API clients).

L’objectif principal est de valider la synergie entre les deux couches et d’automatiser différents scénarios d’interaction utilisateur via Selenium IDE.

---

Objectifs atteints

• Automatisation des tests du CRUD côté React
• Automatisation des tests des endpoints API côté Laravel
• Vérification de l’intégration front ↔ back
• Ajout d’assertions pour contrôler les résultats des actions enregistrées
• Identification et correction des anomalies détectées
• Documentation complète du processus et des tests exécutés

---

Contenu du projet

• Le dépôt contient les éléments suivants :
• API_CLIENTS/ Backend Laravel (API clients)
• CRUD_APP/ Frontend React (CRUD clients)
• TestsCRUDClient.side Scénarios de test Selenium IDE
• Rapport_CRUDClient.pdf Rapport PDF des tests automatisés

---

Technologies utilisées

• React JS – Application CRUD Client
• Laravel 10 – API REST pour la gestion des clients
• Selenium IDE – Enregistrement et exécution des tests automatisés
• Thunderclient / Postman – Vérifications API complémentaires
• MySQL – Base de données pour l’API clients

---

Architecture générale

• CRUD_APP/ : interactions interface utilisateur (création, affichage, mise à jour, suppression)
• API_CLIENTS/ : gestion des requêtes API et persistance des données
• TestsCRUDClient.side : scripts Selenium IDE enregistrant
  • navigation,
  • saisies,
  • validations,
  • assertions.

Les tests couvrent les principales fonctionnalités et valident la communication correcte entre React et Laravel.

---

Scénarios testés avec Selenium IDE

• Navigation entre les pages React
• Création d’un client
• Mise à jour d’un client
• Suppression d’un client
• Vérification des retours API après chaque action
• Assertions sur les éléments visibles et résultats attendus

---

Documentation associée

• Rapport_CRUDClient.pdf

• Rapport PDF du projet : Rapport_CRUDClient

[Note : Réactualisez votre page en cas d'erreur d'ouverture du pdf]

Ce fichier contient :

• les captures d’écran des tests
• les résultats d’exécution
• les anomalies détectées
• les corrections apportées
• l’évaluation globale de la couverture des tests

---

⚙️ Installation et exécution

1. Cloner le projet

git clone https://github.com/adjagbafortune/react-laravel-selenium-tests.git

2. Lancer le frontend

cd CRUD_APP
npm install
npm run dev

3. Lancer le backend Laravel

cd API_CLIENTS
composer install
php artisan key:generate
php artisan serve

[Note : Le dossier vendor/ n’est pas inclus dans ce dépôt.
Il sera automatiquement recréé après la commande composer install.]

4. Exécuter les tests Selenium IDE

• Ouvrir TestsCRUDClient.side depuis Selenium IDE
• Lancer l’ensemble des scénarios enregistrés

Compétences démontrées

• Automatisation de tests d’applications web
• Utilisation de Selenium IDE (enregistrement, assertions, exécution)
• Validation des flux Front ↔ API
• Manipulation d’un CRUD complet React + Laravel
• Analyse et correction des anomalies
• Documentation structurée des tests

👤 Auteur

Fortuné
Développeur Web – Programme D-Clic 2025 (OIF)