Auteur/autrice : TheCodM

La phase de tests fonctionnels d’un projet web, aussi appelée recette, est la période la plus délicate d’un projet. En effet, il est difficile de mettre tout le monde d’accord !

Trop d’anomalies (de bugs) ? Le client, donc les futurs utilisateurs, pourrait penser que la qualité de la solution est mauvaise donc rejeter la solution.

Pas assez d’anomalies ? L’équipe de développement, qui sait bien qu’une solution n’est jamais parfaite, va se dire que les utilisateurs ne testent pas et que la mise en production risque d’être catastrophique ! 

… Alors, qui a raison ? Un peu les deux ! En fait, cela dépend :

• Si l’application répond aux besoins (spécifications) et qu’elle fonctionne correctement en termes de performances, j’ai tendance à penser que c’est très bien de trouver de nombreux bugs ! 

• Si une application a de très mauvaises performances, si les bugs ne sont pas résolus rapidement, alors cela peut cacher des problèmes structurels… Ce qui peut devenir très embêtant. 

Dans cet article, nous proposons de faire un tour d’horizon des bonnes pratiques pour réussir votre phase de tests fonctionnels.

Quelle est la différence entre les tests d’intégration et les tests fonctionnels ?

Les tests d’intégration se concentrent sur les interactions entre les composants de l’application, tandis que les tests fonctionnels se concentrent sur le comportement global de l’application du point de vue de l’utilisateur. 

Tests d’intégration :

La première étape est déjà de bien implémenter vos tests unitaires.

Les tests d’intégration examinent ensuite la manière dont les modules, les classes ou les composants interagissent les uns avec les autres. Ils peuvent impliquer plusieurs unités de code, mais ils ne s’étendent pas nécessairement à l’ensemble de l’application.

Imaginons un site web de commerce électronique. Un test d’intégration pourrait vérifier que le panier d’achat, le processus de paiement, et la gestion des produits fonctionnent ensemble correctement. Le test pourrait vérifier que les produits sont ajoutés au panier, que le total est calculé correctement, et que le paiement est effectué sans problème.

Tests fonctionnels :

Les tests fonctionnels vérifient si le logiciel fonctionne conformément à ses spécifications et aux attentes de l’utilisateur. Ils se concentrent sur le comportement fonctionnel de l’application. Ils couvrent l’ensemble de l’application ou d’une fonctionnalité spécifique du début à la fin. Ils examinent les scénarios d’utilisation, les flux de travail et les interactions avec l’utilisateur.

Reprenons l’exemple du site web de commerce électronique. Un test fonctionnel pourrait vérifier l’ensemble du processus d’achat, de la navigation sur le site, en passant par la sélection d’un produit, l’ajout au panier, la création d’un compte client, le paiement, et enfin la confirmation de la commande. Le test s’assurerait que chaque étape se déroule correctement, que les pages s’affichent correctement, que les formulaires fonctionnent, etc.

Comment faire des tests fonctionnels ? 

Il faut d’abord créez une liste de scénarios de test et identifiez les critères de réussite.

Identifiez les scénarios de test qui couvrent toutes les fonctionnalités et les cas d’utilisation critique de votre projet web.

Nous vous recommandons de commencer par le  “happy path”, c’est-à-dire le chemin complet qui permet de faire le tour de l’ensemble des fonctionnalités de l’application sans erreur. 

Par exemple, imaginons un scénario de l’envoi d’un message, le test fonctionnel pourrait prendre la forme suivante (assez simple) : 

1. Connexion à l’Application
L’utilisateur ouvre l’application de messagerie.	La page de connexion s’affiche avec les champs « Nom d’utilisateur » et « Mot de passe ».

2. Authentification
L’utilisateur saisit son nom d’utilisateur et son mot de passe.	Attente : L’application vérifie les informations d’identification. Si elles sont correctes, l’utilisateur est connecté.

3. Accès à la Messagerie
Une fois connecté, l’utilisateur accède à sa boîte de réception.	La boîte de réception s’affiche avec une liste de contacts et des conversations récentes.

4. Nouveau Message
L’utilisateur clique sur le bouton « Nouveau Message » pour commencer une nouvelle conversation.	L’interface de création de message s’affiche avec un champ de destinataire, un champ de message, et un bouton « Envoyer ».

Il est intéressant d’identifier les tests prioritaires car cela vous permet de vous concentrer sur les tests les plus critiques en premier.

Est-il possible d’automatiser les tests fonctionnels ? 

Il est possible d’utiliser des outils pour automatiser les tests fonctionnels comme Selenium ou Cypress.

Attention cependant, automatiser de trop nombreux tests pendant le développement est souvent une erreur. Durant cette phase, l’application peut changer et maintenir ces tests peut se révéler très coûteux.

En revanche, construire un set de tests qui permet de vérifier les fonctionnalités clés de l’application (par exemple la création d’un client, etc.) permet d’éviter de nombreuses régressions. En plus, on intègre alors ces scripts dans le pipeline et on vérifie que les tests se sont bien exécutés. 

Dans cet exemple, le script Selenium remplit un champ et clique sur un bouton.  (Vous aurez besoin de l’extension PHP WebDriver, ainsi que d’un pilote (WebDriver) approprié pour le navigateur que vous souhaitez utiliser (par exemple, Chrome WebDriver).

<?php

require_once('vendor/autoload.php');

use Facebook\WebDriver\Remote\RemoteWebDriver;

use Facebook\WebDriver\WebDriverBy;

// URL du serveur Selenium WebDriver

$host = 'http://localhost:4444/wd/hub';

// Configuration du pilote (dans cet exemple, Chrome)

$capabilities = ['platform' => 'LINUX', 'browserName' => 'chrome'];

// Création d'une instance du navigateur

$driver = RemoteWebDriver::create($host, $capabilities);

//Evidemment, il faut mettre l’URL que vous souhaitez tester

$driver->get("https://www.example.com");

// Identifier un champ de saisie par son ID

$inputField = $driver->findElement(WebDriverBy::id("input_id"));

// Saisir du texte dans le champ

$inputField->sendKeys("Texte à saisir");

// Identifier le bouton de validation

$button = $driver->findElement(WebDriverBy::id("button_id")); 

// Effectuer une action de clic sur le bouton

$button->click();

// c’est juste pour voir le résultat que l’on attend 3s. 

sleep(3);

$driver->quit();

A vous de jouer ! 

Mettez en place l’organisation et outillez la gestion des tickets 

L’organisation de la recette est critique pour le succès du projet.

Planifiez au plus tôt les périodes où vous allez mobiliser les utilisateurs et les livraisons des corrections. Ne tentez pas de faire une recette trop courte même si la mise en production est urgente. C’est un temps incompressible !  

Par ailleurs, oubliez la feuille Excel que l’on s’échange par e-mail… Impossible de travailler avec cela. Il vous faudra nécessairement éduquer un peu vos utilisateurs. Un outil de gestion des anomalies va vous permettre de documenter soigneusement tous les problèmes identifiés, y compris les étapes pour les reproduire et les informations de contexte.

Un bon outil (comme par exemple Jira, Asana ou même des outils un peu plus ancien comme Mantis) va vous permettre de gérer des données comme : 

• Auteur de l’anomalie : le testeur à l’origine du ticket.
• Description de l’anomalie : une description détaillée du problème ou de l’anomalie, y compris les étapes pour la reproduire, les résultats attendus et les résultats observés.
• Le statut de l’anomalie : le statut actuel de l’anomalie, qui peut inclure des états tels que Ouvert, Assigné, En cours de résolution, Résolu ou Fermé. 
• Le niveau de gravité : la gravité de l’anomalie, qui peut être basée sur l’impact sur l’utilisateur ou sur le système. Les niveaux de gravité sont généralement évalués de  Bloquant, Majeur et Mineur.
• Développeur assigné à l’anomalie.
• Historique et gestion des dates : la date de création, la date de dernière modification, …
• Autres fichiers : captures d’écran ou pièces jointes,… 

Un système simple de suivi devra permettre surveiller des indicateurs clés tels que : 

• Suivre le nombre des anomalies par statut par semaine par exemple, 
• D’évaluer le nombre d’anomalie fermée ou ouverte sur la même période, 
• De connaître le nombre de corrections apportées à l’application…

Conclusion : pas de recette miracle pour vos tests fonctionnels

Sans vouloir vous décourager, des études ont montré que, en moyenne, environ 15 à 50 % des bugs sont détectés lors de la phase de tests fonctionels. Cela signifie que même avec des tests fonctionnels rigoureux, de nombreux bugs peuvent passer inaperçus jusqu’à ce que l’application soit utilisée en production.

Est-ce que cela veut dire qu’il faut s’en passer ? Certainement pas ! Les risques potentiels qu’implique une mauvaise gestion de la phase de recette sont nombreux : régressions en production, difficulté de maintenir l’outil à terme. 

Pour finir, j’ai envie de donner quelques conseils aux équipes de développement qui doivent faire tester leur application et livrer leur application : 

• Accompagnez les utilisateurs dans la rédaction des cahiers de tests, c’est souvent la première fois qu’ils doivent rédiger un tel document ; 
• Pour ne pas paniquer les utilisateurs, soyez physiquement là lors des premiers tests surtout si l’environnement est installé pour la première fois, cela vous évitera de vous fâcher avec eux si votre application rencontre des problèmes d’environnement. 

Alors, pour conclure sur un mauvais jeu de mot, il n’y a pas de recette miracle pour faire une recette parfaite ! Mais si vous souhaitez en discuter avec nous, n’hésitez pas à me contacter sur LinkedIn.

Il y a beaucoup de méthodologies de projet web différentes et certains pourraient se perdre dans cette forêt de bonnes pratiques ! Surtout que lorsque l’on ne maîtrise pas très bien ces notions, il y a le risque de passer pour quelqu’un qui n’est pas très moderne par les gourous de ces méthodes ! 

Malgré cet écueil, s’interroger sur ses pratiques, sur la manière d’être le plus efficace, sur ce qui permet d’apporter plus de valeur aux projets est nécessaire. Les méthodologies de projet web évoluent constamment pour s’adapter à la fois aux nouvelles technologies, aux besoins changeants des organisations ou même aux différentes envies des collaborateurs ! 

Alors faisons un tour de ces nouvelles méthodologies de projet web. Ces approches ne s’excluent pas les unes des autres, elles sont même assez complémentaires ! Tant pis pour les puristes, mais grossièrement, le design thinking permet de concevoir un produit, les méthodes agiles de le développer et le DevOps de le mettre en production… 

DESIGN THINKING : un voyage créatif centré sur l’utilisateur, c’est l’art de donner vie à des idées par le prototypage et le test.

Le design thinking est une approche de résolution de problèmes centrée sur l’humain et axée sur la créativité. Elle met l’accent sur la compréhension approfondie des besoins, des motivations et des comportements des utilisateurs finaux pour créer des solutions innovantes et adaptées. Le design thinking est souvent utilisé dans le développement de produits, la conception de services, l’amélioration des processus et la résolution de problèmes complexes. 

Elle comporte trois étapes clés : 

#1 – Idéation : À cette étape, les membres de l’équipe génèrent un grand nombre d’idées de solutions potentielles, souvent par le biais de sessions de brainstorming. L’objectif est de penser de manière créative.

#2 – Prototypage : L’équipe sélectionne ensuite les idées les plus prometteuses et les transforme en prototypes concrets. Les prototypes peuvent être des maquettes, des maquettes numériques, des scénarios d’utilisation, ou d’autres représentations visuelles des solutions potentielles.

#3 – Test et itération : Les prototypes sont ensuite testés auprès des utilisateurs finaux pour recueillir des commentaires et des retours d’information. Ces tests permettent d’identifier ce qui fonctionne et ce qui doit être amélioré. En fonction des résultats, l’équipe itère en modifiant et en améliorant les prototypes.

Cette méthodologie repose sur l’idée que les meilleures solutions émergent lorsque l’on combine une compréhension profonde des besoins des utilisateurs avec un processus itératif de conception et de test. Il encourage la créativité, la collaboration et l’innovation, et peut être appliqué dans de très nombreux domaines, de l’entreprise à l’éducation en passant par le secteur public. Le design thinking permet de résoudre des problèmes de manière holistique et centrée sur l’expérience de l’utilisateur.

MÉTHODOLOGIE AGILE (SCRUM) : adieu la rigidité ! Embrassez l’adaptabilité et la collaboration. Fonctionnez par sprints pour dynamiser votre développement et maximiser la satisfaction client.

SCRUM (qui est la méthodologie agile la plus répandue) est basé sur des principes de travail en équipe, de transparence, d’adaptabilité et d’itérations. Il divise le projet en itérations appelées sprints, généralement de deux à quatre semaines. Chaque sprint se concentre sur la réalisation d’un ensemble de fonctionnalités définies dans un backlog de produit. Les équipes de développement se réunissent régulièrement pour des réunions de planification, de revue et de rétrospective pour s’organiser, inspecter leur travail et s’améliorer continuellement.

SCRUM permet une adaptation continue aux besoins changeants du projet. Les fonctionnalités peuvent être priorisées et ajustées à chaque sprint. Cette méthodologie encourage la collaboration étroite entre les membres de l’équipe et les parties prenantes. Les sprints réguliers permettent des livraisons partielles du produit, ce qui permet de réduire les risques en identifiant rapidement les problèmes et d’améliorer la satisfaction du client grâce à son implication dans le projet. 

Les méthodologies de projet web hybrides combinent des éléments d’approches traditionnelles (comme le modèle en cascade) avec des méthodes agiles pour offrir plus de flexibilité tout en répondant aux exigences de planning ou de budgets.

DEVOPS : l’union sacrée du développement et des opérations, automatisant et fluidifiant le déploiement de vos logiciels pour une performance inégalée.

DevOps vise à intégrer étroitement le développement (Dev) et les opérations (Ops) pour accélérer la livraison de logiciels, améliorer la qualité et automatiser les processus de déploiement. Le DevOps est une approche culturelle, organisationnelle et technique du développement logiciel qui vise à améliorer la collaboration, l’efficacité et la qualité du cycle de vie du développement et de la livraison de logiciels. 

Le DevOps repose sur plusieurs principes clés :

#1 – Collaboration étroite : les équipes de développement et d’exploitation travaillent ensemble de manière étroite et collaborative. Il n’y a plus de silos organisationnels, et les équipes partagent la responsabilité du cycle de vie du logiciel.

#2 – Automatisation : l’automatisation est au cœur du DevOps. Les processus, les tâches répétitives et les opérations sont automatisés autant que possible, ce qui réduit les erreurs humaines, accélère la livraison et assure la cohérence. Les tests unitaires font par exemple souvent parti des automatisations mises en place.

#3 – Livraison continue : le DevOps favorise la livraison continue de logiciels, ce qui signifie que les mises à jour et les fonctionnalités peuvent être déployées fréquemment et rapidement.

#4 – Surveillance et gestion des incidents : les équipes DevOps sont responsables de la surveillance en temps réel des performances et de la disponibilité des applications. En cas de problème, elles sont prêtes à réagir rapidement et à résoudre les incidents.

La mise en oeuvre du DevOps passe par des outils et des pratiques tels que l’intégration continue (CI), la livraison continue (CD), les outils d’automatisation, la gestion de configuration, les conteneurs, l’orchestration de conteneurs, la surveillance des performances, la gestion des incidents, etc. 

Les avantages sont principalement l’amélioration de la qualité du logiciel grâce à des tests automatisés et à des déploiements plus fréquents et la réduction des erreurs humaines grâce à l’automatisation. 

Pour conclure

Nous devons faire un avertissement sur un constat que nous faisons régulièrement : trop de méthodologie tue le projet. Lorsque l’attention de l’équipe est plus centrée sur la bonne exécution de la méthodologie que sur l’aboutissement du projet, le projet est en risque. Alors agir de manière méthodique est très important parce que cela fait gagner du temps et réduit les risques mais il ne faut pas perdre de vue ce que l’on doit faire in fine. 

Finalement chacune des méthodologies décrites se spécialise sur une phase d’un projet : le Design Thinking pour la conception, les méthodologies agiles pour le développement et le DevOps pour la phase de production. Elles sont bien souvent complémentaires ! 

Peut-être que nous allons voir émerger dans un futur proche de plus en plus de méthodologies de projet web intégrant de l’intelligence artificielle et de l’apprentissage automatique dans la gestion de projet. Cela aiderait à prévoir des problèmes potentiels ou d’optimiser des ressources… à suivre donc ! 

Si vous avez un projet et que vous vous interrogez sur quelle méthodologie utiliser, n’hésitez pas à nous contacter !

Quel est le prix d’un projet web ? Voici une question à laquelle nous devons souvent répondre. Et, ce n’est pas si simple, très souvent, la question est posée après une première réunion d’une heure et nous n’avons que quelques éléments à l’esprit… 

Si on devait faire un parallèle, cette question sonne alors un peu comme si vous demandiez chez un concessionnaire : “Quel est le prix d’une voiture ?”. Il vous répondrait : ”C’est-à-dire que cela dépend ! Vous voulez rouler à quelle vitesse ? Quelles options souhaiteriez-vous avoir ?”. La problématique est similaire pour le prix d’un projet web.

---

Prix d’un projet web : les principaux facteurs de coûts 

En effet, le coût d’un projet web peut varier considérablement en fonction de nombreux facteurs, notamment la taille et la complexité du projet, les fonctionnalités requises, la technologie utilisée, le type de prestation que vous souhaitez. 

Pour vous aidez à vous repérer, voici quelques-uns des principaux facteurs qui influencent le prix d’un projet web :

#1 – le nombre et la complexité des fonctionnalités : un site web simple avec des fonctionnalités de base coûtera moins cher qu’un projet avec de très nombreuses fonctionnalités, voire des fonctionnalités complexes (intégrations de solutions externes, algorithmes et calculs, automatisation, …). Attention, le nombre de fonctionnalités souhaitées et la complexité d’un projet ne sont pas toujours corrélées, parfois la majeure complexité d’un projet peut résider dans une seule tâche… Il s’agit donc de faire le maximum d’arbitrage entre coût, pertinence de chaque fonctionnalité et complexité.

#2 – design : un design personnalisé, des animations complexes et d’autres éléments graphiques peuvent aussi augmenter le coût du projet. Au contraire, l’usage de template ou de bibliothèque de composants peuvent permettre des économies de temps et de coût. Au-delà, une recherche en termes UX (user experience) peut aussi alourdir la facture ! 

#3 – la technologie et/ou la plateforme : le choix de la technologie (par exemple, les langages de programmation, les frameworks, les CMS) et la plateforme sur laquelle le site sera construit influencent évidemment le coût. Par exemple, la plupart des développeurs web savent que développer en Java est souvent plus cher que développer en PHP… (je ne vais pas me faire des amis). 

#4 – l’hébergement et l’infrastructure : les coûts d’hébergement, de serveurs et d’infrastructure peuvent varier en fonction des besoins de votre projet.

#5 – La prestation attendue : le coût du développement peut varier d’un prestataire à l’autre. Un freelance vous coûtera moins cher qu’une société (comme la nôtre) mais vous n’aurez pas le même service. Un freelance ne sera pas forcément disponible s’il a un autre contrat par exemple. Le choix entre une approche en régie (obligation de moyen) et une approche au forfait (obligation de résultat) influence aussi les coûts car tout prestataire prévoit une part de risque lorsqu’il s’engage sur un coût forfaitaire.

#6 – La maintenance et le support : n’oubliez pas de prendre en compte les coûts de maintenance continue, de mises à jour de sécurité et de support après le lancement du site.

Le prix d’un projet web peut donc varier considérablement. Avant de commencer votre projet, nous vous recommandons vivement de demander des propositions à plusieurs prestataires et de comparer leurs offres en fonction de vos besoins. 

Ordres de grandeur du prix d’un projet web développé par TheCodingMachine 

Si on devait être parfaitement sincère, parfois, il y a un décalage entre les attentes des clients et le budget qui est en face, refaire Facebook pour 20.000 euros n’est pas raisonnable ! Même si j’admet volontiers que de très bons outils accessibles quasi gratuitement peuvent donner un résultat très correct. C’est le cas de Webflow pour un petit site vitrine par exemple. 

Maintenant, on peut vous donner des ordres de grandeurs de ce que nous faisons régulièrement, comme ça, vous n’aurez pas de surprise : 

#1 – un site institutionnel avec des fonctionnalités spécifiques va vous coûter chez TheCodingMachine au minimum 20.000 / 30.000 euros pour avoir un design sur-mesure et des contenus bien adaptés au SEO. Nous nous positionnons sur ce type de prestations lorsqu’il a des enjeux techniques comme l’intégration avec un extranet par exemple.

#2 – une plateforme web ou une application métier de type MVP va démarrer dans les 50.000 / 60.000 euros. Cela représente une équipe de deux ou trois qui va travailler quelques mois à travers, des ateliers de conception, du design, de la mise en place de l’architecture, le développement, la recette et la garantie. Pour en savoir plus sur les plateformes, nous vous recommandons cet article.

Pour un projet plus important, on va se situer entre 80.000 / 150.000 et il n’y pas vraiment de limite. Par exemple, un de nos projets mobilise plus de 20 personnes à temps plein depuis 3 ans… 

Quelques conseils pour optimiser le prix d’un projet web ! 

#1 – Trouvez la substantifique moëlle de votre business :  Sachez quelle est votre proposition de valeur ! Si vous n’aviez qu’une seule fonctionnalité à proposer dans votre plateforme, ce serait laquelle ? Est-ce que vous vous sentez capable de la vendre sans rien autour ? 

#2 – Ne cherchez pas forcément le moins disant parmi vos prestataires. Un mauvais projet, c’est comme un mauvais recrutement, cela vous coûte le salaire mais surtout le temps que vous y passez !

#3 – Investissez-vous. Plus vous aurez préparé votre projet web, plus vous réduisez le risque et l’incertitude pour votre prestataire chargé du développement… donc plus vous réduisez le prix. Il s’agit d’étudier la concurrence, de réfléchir à la manière dont vous souhaitez que votre plateforme web fonctionne ou de savoir de quels types de design vous souhaitez vous inspirer.

Pour conclure

Difficile d’estimer le prix d’un projet web sans en discuter avec vous. Il y a beaucoup de facteurs à prendre en compte et même si je suis toujours assez surpris de voir des entrepreneurs qui souhaitent investir dans leur business moins que le prix d’une voiture (alors que l’on sait très bien qu’une voiture ne peut rien rapporter…), il est possible d’être malin.

Il ne faut pas non plus rester scotché sur un prix, il faut avancer ! Commencer par une phase de conception avec des ateliers ne vous coûtera pas forcément très cher mais vous permettra de vous mettre en route. En plus, en chemin, vous trouverez peut-être des économies.

Maintenant, si vous souhaitez avoir une estimation personnalisée, n’hésitez pas à nous contacter !