RAPPORT TECHNIQUE
PRÉSENTÉ À L’ÉCOLE DE TECHNOLOGIE SUPÉRIEURE
DANS LE CADRE DU COURS GTI795 PROJET DE FIN D'ÉTUDES EN GÉNIE DES TI
PFE 006- Cadriciel de test automatisé (Smart Consulting)
Auteurs
Patrick Domingues - DOMP30069801
Thamer Aissaoui - AIST15088305
Siham Bounafa - BOUS06517708
Rosalie Morin - MORR21549609
DÉPARTEMENT DE GÉNIE LOGICIEL ET DES TI
Professeur-superviseur
Alain April
MONTRÉAL, 10 AOÛT 2022
ÉTÉ 2022
Auteurs : [Link], [Link], [Link], [Link]
REMERCIEMENTS
Monsieur Alain April, nous vous remercions pour votre patience et votre soutien tout au long
de cette session. Vous nous avez guidé dans nos apprentissages, vous avez été disponible et
présent à nos réunions Scrum pour nous orienter. Lors de ce projet, vous nous avez aidé à nous
rendre compte que la phase d’analyse et conception d’un nouveau projet est plus importante
que l’implémentation.
L’équipe TAF (Lionel, Mohamed, Theo et Bader), un grand merci pour l’aide et le temps que
vous nous avez consacré.
Auteurs : [Link], [Link], [Link], [Link]
TABLE DES MATIÈRES
Page
INTRODUCTION
- Contexte
- Problématique
- Plan du rapport 3
CHAPITRE 1 PRÉSENTATION DU CADRICIEL ET SES OBJECTIFS 4
1.1 Le cadriciel de tests automatisés
1.2 Besoins du client et objectifs du projet
1.3 Hiérarchie de la solution
CHAPITRE 2 PLANIFICATION DES TÂCHES ET ORGANISATION DES LIVRABLES
2.1 Approche Agile/SCRUM 9
2.2 Les outils techniques
CHAPITRE 3 ARCHITECTURE DÉTAILLÉE DE LA SOLUTION 12
4.1 Description de l'architecture et l'interaction entre les différents composants. 12
CHAPITRE 4 CONCEPTION ET DÉMO 13
5.1 Conception UX/UI
5.2 Code HTML/CSS/JS
5.3 Intégration Angular
CHAPITRE 5 PRÉSENTATION DES DÉFIS MAJEURS RENCONTRÉS 30
6.1 Sur le plan Formations
6.2 Sur le plan technologies
6.3 Sur le plan gestion de tâches et coordination.
CONCLUSION 34
Auteurs : [Link], [Link], [Link], [Link]
Auteurs : [Link], [Link], [Link], [Link]
LISTE DES FIGURES
Page
Figure 1.1: Processus de test automatisé du logiciel
Figure 1.2: Hiérarchie de la solution, schéma de navigation
Figure 1.3: Diagramme de composants
Figure 2.1: Aperçu de notre tableau de bord
Figure 4.1: Schéma modèle MVC
Figure 5.1: Ecran Accueil: liste des projets
Figure 5.2: Édition des suite de tests.
Figure 5.3: Création d’un projet.
Figure 5.4: Création d’une suite de tests.
Figure 5.5: Création d’un cas de test.
Figure 5.6: Écran Accueil: liste des projets
Figure 5.7: Édition des suite de tests.
Figure 5.7: Création d’un projet.
Figure 5.8: Création d’une suite de tests.
Figure 5.9: Création d’un cas de test..
Figure 5.10: Interactions entre les différentes parties de frontend
Auteurs : [Link], [Link], [Link], [Link]
INTRODUCTION
L'assurance qualité logiciel est devenue de plus en plus une nécessité dans la validation du
fonctionnement du logiciel et la vérification des exigences client.
L'assurance qualité logiciel représente un ensemble de tâches nécessaires pour garantir le bon
fonctionnement de tout nouveau logiciel ou nouvelle version d'un logiciel en production afin
qu'ils soient conformes aux exigences établies.
Dans le but d'obtenir des résultats concrets, efficaces et rapides, les équipes d’assurance qualité
optent de plus en plus pour l’automatisation des tests. Dans cette optique, nous avons pour but
de créer un outil (c.-à-d. un logiciel) qui permet à un utilisateur de créer lui-même une suite de
tests automatisés, à l’aide d’une interface web. L’objectif de ce prototype logiciel est de réduire
une grande partie des efforts consacrés à la rédaction de tests, en automatisant ce processus.
Auteurs : [Link], [Link], [Link], [Link]
2
Plan de travail
En adoptant la méthode Scrum, nous avons défini des sprints de 2 semaines et en fonction nous avons réparti les jalons de notre
projet. Le tableau ci-après affiche l’échéancier qui à été établi ainsi que les livrables attendus.
# Commence Termine Tâches/Jalon Livrable(s)/Artéfacts Responsable(s)
1 06 Mai 2022 Rencontre – client Tous
1.1 06 Mai 2022 23 Mai 2022 Apprentissage du langage Gherkin Tous
1.2 24 Mai 2022 10 Juin 2022 Apprentissage du langage Angular Tous
1.3 02 Juin 2022 Remise du plan de projet Plan de projet Tous
2 10 Juin 2022 Rencontre – professeur superviseur Tous
2.1 10 Juin 2022 24 Juin 2022 Participation à la conception Tous
2.2 24 Juin 2022 Apprentissage SeleniumGrid Tous
3 22 Juillet Validation de la conception des Tous
2022 écrans et répartition des tâches
pour le développement
3.1 22 Juillet 05 Août 2022 Réalisation des interfaces liste Les interfaces liste Projets/suites Thamer
2022 Projets/suites de tests de tests
22 Juillet 05 Août 2022 Réalisation des interfaces de Les interfaces de création d’un Siham
2022 création d’un nouveau Projet/suite nouveau Projet/suite de tests et
de tests et cas de test cas de test
22 Juillet 05 Août 2022 Réalisation des interfaces Ajout Les interfaces Ajout Test Rosalie
2022 Test Plan/Test Suite/Test Case Plan/Test Suite/Test Case
22 Juillet 05 Août 2022 Réalisation de l’interface l’interface Préférences Patrick
2022 Préférences
4 10 Août 2022 Présentation Présentation Tous
5 20 Août 2022 Remise du travail Rapport
3
CHAPITRE 1 PRÉSENTATION DU CADRICIEL ET SES OBJECTIFS
1. Le cadriciel de tests automatisés
Effectuer des tests manuellement nécessite beaucoup d’effort.
Ce projet vise à expérimenter comment améliorer la situation en automatisant le processus.
C'est vrai qu’il existe beaucoup de Framework pour automatiser des cas de tests mais certes, chaque
entreprise a ses propres besoins et défis, Smart Consulting nous a invité à participer à cette expérience
unique en collaboration avec d’autres équipes et étudiants de maîtrise de l'ÉTS.
Lorsque nous développons un logiciel ou une application, planifier une phase de test dans le cycle de
vie du développement logiciel est crucial. En fait, tester c’est tout simplement vérifier la qualité, la
fiabilité et la durabilité de son logiciel.
Les équipes chargées d’effectuer les tests s’efforcent de détecter des erreurs avant la production, mais
celles-ci peuvent toujours se glisser… La méthode manuelle a ses limites. On ne vous apprend rien,
mais livrer son logiciel avec des anomalies impacte l’image de marque de l'entreprise, d'où vient l’idée
d’automatiser les tests.
Aujourd’hui, l’automatisation des tests est le moyen le plus efficace d’améliorer la qualité, la
performance et la rentabilité de toute application logicielle. Elle redéfinit la manière dont les ingénieurs
effectuent les opérations de test. Cela dit, la tâche la plus difficile pour tout projet est de décider si
l’automatisation des tests est nécessaire ou non. Si oui, alors quels outils doit-on choisir ?
Le marché de l’informatique offre beaucoup d’outils d’automatisation . Mais , tous les outils ne
s’adaptent pas totalement aux conditions préalables du projet. Il peut être nécessaire d’examiner de près
les spécificités et exigences du projet pour choisir l’outil parfait.
Cependant, analyser et choisir l’outil qui répond le mieux à un besoin spécifique est un grand défi.
Alors c’est quoi un test automatisé qui entre autres fait l'objet d'un cadriciel de test:
Le test automatisé est une méthode de test lors de laquelle des outils automatisés exécutent des scénarios
de test prédéfinis, comparant les résultats attendus du produit développé aux résultats obtenus. Si le
scénario de tests parvient à s'exécuter sans erreur, alors le test est considéré comme passé avec succès.
4
Dans un environnement agile, impliquant des changements récurrents sur le produit, cela signifie que
les scripts de tests doivent être régulièrement maintenus.
La maintenance de l’outil de test fait partie du processus de test automatisé du logiciel comme indiqué
dans la figure 1.1:
Figure 1.1: Processus de test automatisé du logiciel
2. Besoins du client et objectifs du projet
Le but du projet de fin d’études est de contribuer à la conception de cet outil, notamment sur
le plan Front end, qui nous permettra de :
- Implémenter des tests de manière automatisés, avec seulement quelques requis en termes de
paramètres à changer, ce qui fait que la solution devrait être paramétrable pour répondre aux
exigences de changement de l’environnement de production et de déploiement.
- Documenter ces tests automatisés en ajoutant des commentaires identifiant chaque étape, et
décrivant les étapes d’un test,
- Exécuter et voir l’état des tests automatisés, permettant de démarrer la suite de tests, et de
pouvoir les monitorer au fur et à mesure si nécessaire,
5
- Enfin Générer des rapports de tests automatisés, montrant les statistiques quant au nombre de
tests réussi/échoués, et les endroits d'échecs
Le front end ou l’interface utilisateur de cette solution présente une passerelle afin
d’achever ces objectifs, le mandat de notre PFE étant de participer à bâtir la partie
Front-end.
3. Hiérarchie de la solution
Pour ce qui est de l’hiérarchie de la solution, l'utilisateur se rend sur la page d’accueil, il a le choix de
s’inscrire ou de se connecter.
Une fois connecté, l’utilisateur a le droit d’effectuer une série d'opérations appelés en anglais CRUD
qui est l'acronyme de Create, Update et Delete.
Pour cela, l'utilisateur va pouvoir consulter la liste des projets, des plans de tests, des suites de tests et
des cas de tests, comme indiqué dans la figure 1.2:
6
Figure 1.2: Hiérarchie de la solution, schéma de navigation
Un projet est défini comme étant l’ensemble d’un ou plusieurs plans de test.
Un plan de test pourrait contenir une ou plusieurs suite de tests. Quant à elle, une suite de tests contient
un ou plusieurs cas de tests.
Afin d'être exécuté proprement, un cas de test doit respecter l’ordre et l'enchaînement des étapes (steps).
la figure 1.3 défini un projet d’une méthode schématique encapsulée
Figure 1.3: Diagramme de composants
7
CHAPITRE 2 PLANIFICATION DES TÂCHES ET ORGANISATION
DES LIVRABLES
Le Projet étant encore dans ses débuts, les besoins du client ne sont pas stable et de ce fait, les
spécifications sont sujet à plusieurs modifications. Afin de pouvoir assurer une bonne gestion
de notre travail tout en répondant aux exigences du client.
2.1 Approche Agile/SCRUM
Dans le but de s’adapter aux différents changements, nous avons opté pour l’approche Scrum,
qui est une méthode agile dédiée à la gestion de projets informatiques actualisés régulièrement,
privilégie la communication et facilite la réorientation.
Cette méthode est la plus adaptée à notre projet puisque nous étions plus dans la phase de
conception et qui permettait à notre équipe de travailler en étroite collaboration avec le client
pour la validation du concept adopté.
Elle représente une approche dynamique et participative, composée de différentes phases
permettant de repartir sur de nouvelles bases en cas de changement.
Nous avons remplacé les “daily meeting” par une rencontre d’équipe hebdomadaire durant
laquelle les membres de l’équipe discutent de ce qui a été fait, ce qui reste à faire ainsi que les
points bloquants.
8
Aussi, nous avons planifié des réunions scrum avec le client chaque deux semaines, le but de
ces réunions est de valider la réalisation de l’objectif du sprint qui a été défini.
2.2 Les outils techniques
2.2.1 Trello
Afin de pouvoir gérer toutes les activités et les maintenir à jour, nous avons choisi l'utilisation
du tableau de bord Trello, qui permet une prise en main rapide et facile et une traçabilité des
actions menées.
le tableau trello représente le projet et les tâches sont représentées par des cartes, le tableau est
réparti selon 3 étapes: les tâches à faire / celles en cours et finalement les tâches terminées ou
validées.
9
Le tableau de bord Trello était accessible par notre équipe ( Étudiants de PFE) et l’équipe qui
représente le client Smart Consulting ( Étudiants de maîtrise). De ce fait, il a été réparti en 4
colonne de tâches, une première colonne “idée” comporte les cartes des idées proposées et
maintenues. Au début de chaque sprint et lors de la réunion de planification, nous choisissons
les idées à traiter, les cartes correspondantes sont ainsi déplacées vers la colonne “Backlog”.
Les tâches du backlog sont distribuées aux membres des deux équipes. Chaque développeur
déplace sa tâche vers la colonne “en cours” une fois qu' il l'a entamé et vers la colonne
“Terminée”.
Figure 2.1: Aperçu de notre tableau de bord
2.2.2 Discord
Le moyen de communication adopté pour assurer une bonne collaboration est “Discord”. Le
serveur est composé de différentes rubriques dont la rubrique “Docs” dans laquelle nous
partagions les différents documents nécessaires à la réalisation de nos tâches.
10
CHAPITRE 3 ARCHITECTURE DÉTAILLÉE DE LA SOLUTION
4.1 Description de l'architecture et l'interaction entre les différents composants.
Notre application web comporte différents composants qui doivent communiquer entre eux de
manière structurée. Afin de répondre à cette exigence et bien organiser notre code, nous avons
choisi d’appliquer le patron “modèle-vue-contrôleur (MVC)” qui est un modèle architectural
qui sépare une application en trois composants logiques principaux : le modèle, la vue et le
contrôleur. Chacun de ces composants est conçu pour gérer des aspects de développement
spécifiques de notre application. MVC est l'un des frameworks de développement Web
standard les plus fréquemment utilisés pour créer des projets évolutifs et extensibles.
Figure 4.1: Schéma modèle MVC
Modèle: Le modèle représente les données et les règles métiers. C'est dans ce composant que
s'effectuent les traitements liés au cœur du métier.
Vue: représente l'interface utilisateur. Elle n'effectue aucun traitement, elle se contente
simplement d'afficher les données que lui fournit le modèle. Il peut tout à fait y avoir plusieurs
vues qui présentent les données d'un même modèle.
11
Contrôleur: Le contrôleur se charge d'intercepter les requêtes de l'utilisateur, d'appeler le
modèle puis de rediriger vers la vue adéquate. Il ne doit faire aucun traitement. Il ne fait que
de l'interception et de la redirection
CHAPITRE 4 Conception et démo
Nous avons participé essentiellement à réaliser 3 parties majeures du Front-end
1. Conception UX/UI
L’UX Design, aussi appelé User Expérience design, est une technique de conception qui se concentre
sur l’expérience des utilisateurs.
c’est entre autres le processus de création de conceptions d'interaction fondées sur des preuves entre
des utilisateurs humains et des produits ou des sites Web
Son but est d’optimiser l’expérience des clients concernant tous les aspects qui interviennent entre la
marque et le consommateur.
Les décisions de conception en matière de conception UX sont motivées par la recherche, l'analyse des
données et les résultats des tests plutôt que par les préférences et les opinions esthétiques.
Contrairement à la conception d'interface utilisateur , qui se concentre uniquement sur la conception
d'une interface informatique, la conception UX englobe tous les aspects de l'expérience perçue d'un
utilisateur avec un produit ou un site Web, tels que sa convivialité , son utilité, son opportunité , sa
perception de la marque et ses performances globales.
La conception UX est également un élément de l'expérience client (CX), qui englobe tous les aspects
et étapes de l'expérience client et de l'interaction avec une entreprise.
Le prototypage et conception des croquis font partie de cette technique.
12
Le croquis suivant décrit écran Accueil qui liste les projets ainsi quelques informations
Figure 5.1: Ecran Accueil: liste des projets
Comme mentionné précédemment, un projet peut contenir plusieurs suite de tests, ainsi, l’utilisateur
peut exécuter toute la suite en cliquant sur le bouton “jouer” (play), il peut également éditer ou
supprimer un projet, a noter que la suppression d’un projet ne résulte pas nécessairement à la
suppression des suite de tests.
Un autre croquis qui décrit l’édition des suite de tests:
13
Figure 5.2: Édition des suite de tests.
Pour se faire, l’utilisateur peut supprimer ou éditer les cas de tests, il est alors possible de visualiser
l'état de progression de la suite, ainsi l’état de chaque cas de test: Success/ Fail.
Pour créer un projet, un utilisateur authentifié doit l’assigner à un responsable et ajouter une
description.
Figure 5.3: Création d’un projet.
Pour créer une suite de tests, un utilisateur authentifié doit l’assigner à un responsable et ajouter une
description.
14
Figure 5.4: Création d’une suite de tests.
15
Pour créer un cas de test, un utilisateur authentifié doit définir dans l'ordre les étapes d’exécution,
celui-ci va être respecté lors de l'exécution de la suite de tests.
Figure 5.5: Création d’un cas de test.
2. Code HTML/CSS/JS
Il n'existe pas encore de formule ou d'application appropriée capable de traduire parfaitement un design
en code. L'industrie travaille depuis un certain temps à perfectionner cette fonctionnalité. Même s'il y
a de bons progrès en la matière, il n'existe toujours pas d'outil parfait capable de créer une application
à partir du design.
Dans cette section nous allons convertir nos mockups en code HTML/CSS/JS manuellement afin de
pouvoir intégrer ces modules dans la framework Angular.
La transformation du croquis de liste des projets en code HTML/css et JS aboutit au résultat suivant:
Figure 5.6: Écran Accueil: liste des projets
16
L'aspect HTML est un aspect plus convivial et les utilisateurs peuvent avoir plus de familiarité avec cet aspect.
Figure 5.7: Édition des suite de tests.
La transformation du reste des croquis est présentée comme suit:
Figure 5.7: Création d’un projet.
17
Figure 5.8: Création d’une suite de tests.
Figure 5.9: Création d’un cas de test..
18
3. Intégration Angular
l'étape finale de notre participation à ce projet consistait à intégrer les mockups et le code dans la
framework Angular, pour se faire il va falloir créer un composant (component) pour chaque écran:
Chaque composant Angular va intégrer le code html/css spécifique pour chaque écran, ensuite appeler
le service requis à l'interaction avec le backend:
19
Ensuite faut créer les services qui vont pouvoir injecter des interaction de type http request avec des
différents API y compris celle du back end
20
Pour récapituler, les éléments Vues (Views) sont représentés par nos écrans convertis en HTML/CSS,
ils sont ensuite, intégrés dans des modules composants (components) pour enfin communiquer avec
des API externes via des Services:
Figure 5.10: Interactions entre les différentes parties de frontend
Auteurs : [Link], [Link], [Link], [Link]
Auteurs : [Link], [Link], [Link], [Link]
Auteurs : [Link], [Link], [Link], [Link]
Auteurs : [Link], [Link], [Link], [Link]
Auteurs : [Link], [Link], [Link], [Link]
Auteurs : [Link], [Link], [Link], [Link]
