5. Boutique en ligne
Objectif
Trailhead Shop est une boutique en ligne d’équipement d’expédition : tentes, sacs de couchage, bouteilles isothermes, couteaux, cordes, réchauds, éclairage et sacs à dos. Votre tâche consiste à tester tout le parcours d’achat — de la recherche dans le catalogue jusqu’à la commande et au suivi de son statut — par rapport aux exigences ci-dessous, et à trouver tous les bugs et problèmes d’ergonomie.
Exigences
Généralités :
- La boutique est disponible en français, anglais, russe, allemand et espagnol. Les prix sont en dollars américains ($) dans toutes les versions linguistiques.
- Tout le monde peut parcourir le catalogue et les pages produit. Pour ajouter un produit au panier ou à la liste d’envies, et pour passer commande, il faut se connecter.
- Toutes les données (utilisateurs, paniers, commandes, avis, stocks) sont stockées dans votre navigateur. Le bouton Réinitialiser la boutique du menu Realbugz (le bouton rond « Rb » dans le coin supérieur gauche de la boutique) les supprime toutes et rétablit les stocks initiaux. Ce même menu ouvre ces exigences dans un onglet séparé.
- Toutes les pages sont utilisables sur téléphone (largeur d’écran à partir de 360 px), sans défilement horizontal. Sur téléphone, les filtres sont cachés derrière le bouton Filtres et la navigation derrière le bouton de menu.
- L’en-tête de la boutique contient le logo (mène au catalogue), la recherche, Liste d’envies et Panier avec des compteurs d’articles, ainsi que Se connecter ou le nom de l’utilisateur (mène au compte).
Catalogue :
- Le catalogue contient 64 produits répartis en 8 catégories.
- Une fiche produit affiche une photo, le nom, le prix (et l’ancien prix barré en cas de remise), la note, le bouton Ajouter au panier et le bouton de la liste d’envies.
- Les produits qui ne sont plus en stock portent la mention « Rupture de stock » et ne peuvent pas être ajoutés au panier.
- La recherche porte sur le nom du produit, ne tient pas compte de la casse, ignore les espaces au début et à la fin et se déclenche à partir de 2 caractères. Si rien n’est trouvé, le message « Aucun résultat » s’affiche.
- Filtres : catégorie (plusieurs choix possibles), prix de / à (nombres entiers à partir de 0, « de » non supérieur à « à » ; bornes incluses : un produit dont le prix est exactement égal à la borne est affiché), « En stock uniquement ».
- Tri : par popularité (par défaut), prix croissant, prix décroissant, nom A–Z, note.
- La recherche, les filtres et le tri fonctionnent ensemble. 12 produits par page, avec les numéros de page en bas.
- Au retour d’une page produit, les filtres, le tri et le numéro de page sont conservés.
- Lorsqu’un visiteur non connecté clique sur Ajouter au panier ou sur le bouton de la liste d’envies, la page de connexion s’ouvre ; après la connexion, l’utilisateur revient à la page d’où il venait.
Page produit :
- Fil d’Ariane : Catalogue → Catégorie → Produit.
- Photo, nom, catégorie, prix, description et caractéristiques.
- Stock : « En stock : N pcs » ou « Rupture de stock ».
- Quantité : de 1 à 10, mais pas plus que le stock.
- Un nouveau clic sur le bouton de la liste d’envies retire le produit de la liste d’envies.
- Avis : une note de 1 à 5 étoiles et un texte de 10 à 500 caractères (les espaces au début et à la fin ne sont pas comptés). Seuls les utilisateurs connectés peuvent écrire un avis, un seul avis par produit. La note moyenne est affichée avec une décimale, à côté du nombre d’avis.
Inscription et connexion :
- Nom : 2 à 30 caractères, lettres (latines, y compris les lettres accentuées comme é, ü, ñ, et cyrilliques), espaces et traits d’union.
- E-mail : format valide, unique (sans tenir compte de la casse).
- Mot de passe : 8 à 20 caractères, dont au moins une lettre et un chiffre. Il y a un bouton Afficher.
- La confirmation du mot de passe doit correspondre au mot de passe.
- La case « J’accepte les conditions d’utilisation » est obligatoire.
- Les erreurs s’affichent sous le champ dès que vous le quittez. Après l’inscription, l’utilisateur est connecté.
- Si l’e-mail ou le mot de passe est erroné, le message « E-mail ou mot de passe incorrect » s’affiche (sans préciser lequel des deux).
- L’utilisateur reste connecté après la fermeture de l’onglet, jusqu’à ce qu’il clique sur Se déconnecter.
- Chaque utilisateur a son propre panier et sa propre liste d’envies : après la déconnexion, ils sont masqués ; après la connexion, ils réapparaissent.
Panier :
- Chaque ligne affiche une photo, le nom, le prix unitaire, la quantité (boutons − / + et un champ), le montant de la ligne et un bouton Supprimer.
- Quantité : de 1 à 10 et pas plus que le stock. Toute tentative d’en indiquer davantage affiche le message « Maximum 10 pcs par article et par client » ou « Seulement N pcs disponibles ».
- Ajouter un produit déjà présent dans le panier augmente sa quantité (avec les mêmes limites).
- Un panier vide affiche un message et un lien vers le catalogue.
- Les frais de livraison sont calculés à l’étape du paiement. Tous les montants sont arrondis au cent.
Codes promo :
- Un seul code promo par commande. La casse n’a pas d’importance, les espaces au début et à la fin sont ignorés.
TREK10— 10 % de remise, uniquement sur les articles non remisés.SAVE15— 15 $ de remise si le total des articles est d’au moins 100 $.FREESHIP— livraison par coursier offerte (pas en express).SUMMER24— expiré : le message « Ce code promo a expiré » s’affiche.- Un code inconnu affiche le message « Code promo introuvable ».
Paiement :
- Destinataire (prérempli avec le nom du profil), téléphone (« + » et 10 à 15 chiffres), ville (2 à 50 caractères), rue et numéro (3 à 100 caractères), code postal (5 à 6 chiffres) — obligatoires ; commentaire pour le coursier — jusqu’à 200 caractères, facultatif.
- Livraison : retrait en magasin — 0 $ ; coursier — 10 $, offerte si le total des articles après remise est d’au moins 150 $ ; express — toujours 25 $.
- Mode de paiement : « Carte bancaire en ligne » ou « Paiement à la livraison ».
- Un clic sur Passer la commande crée exactement une commande. La commande reçoit un numéro du type
RB-10001(dans l’ordre), le panier est vidé, le code promo est retiré et le stock est diminué. - Le paiement par carte s’effectue sur la page de la commande tant que son statut est « En attente de paiement » : numéro de carte de 16 chiffres, date d’expiration MM/AA non passée, CVV de 3 chiffres. Utilisez la carte de test 4242 4242 4242 4242.
Statuts de commande :
- « En attente de paiement » — juste après la commande avec « Carte bancaire en ligne ».
- « Payée, en préparation » — après le paiement par carte, ou juste après la commande avec « Paiement à la livraison ».
- « Expédiée » — après « Payée, en préparation », lorsque la commande quitte l’entrepôt.
- « Livrée » — après « Expédiée », lorsque le coursier livre la commande.
- « Annulée » — l’utilisateur a cliqué sur Annuler la commande ; le stock est restitué. Une commande ne peut être annulée qu’avant son expédition.
- La page de la commande affiche l’historique des statuts avec la date et l’heure.
Mon compte :
- Profil : le nom peut être modifié, l’e-mail non. Changement de mot de passe : mot de passe actuel, nouveau mot de passe, confirmation.
- Mes commandes : numéro, date, total et statut ; les plus récentes en premier. Un clic sur une commande en ouvre le détail.
- Liste d’envies : liste des produits, suppression, ajout au panier.
Résultat attendu
Rédigez un rapport de bug détaillé contenant des problèmes clairement identifiés, les étapes de reproduction, les résultats obtenus et attendus, des captures d’écran et une évaluation de l’impact potentiel. Essayez d’appliquer les techniques de conception de tests : valeurs limites, classes d’équivalence, tables de décision et transitions d’état.
Particularités du simulateur :
Cette boutique sert uniquement à l’entraînement : rien n’est vendu et aucun paiement n’est effectué. Tout ce que vous saisissez — comptes, paniers, commandes, avis — est enregistré uniquement dans le stockage local de votre navigateur (localStorage) et reste sur votre ordinateur : aucune donnée n’est envoyée à un serveur. N’utilisez tout de même pas de vraies données de carte, adresses e-mail ou mots de passe.
Dans le coin supérieur gauche de la boutique se trouve un bouton rond « Rb » : c’est le menu Realbugz. Il ouvre ces exigences dans un onglet séparé (pratique pour passer de l’un à l’autre pendant vos tests), le bouton Réinitialiser la boutique supprime toutes les données enregistrées et rétablit les stocks initiaux, et ← Retour à Realbugz vous ramène au site principal.
Il n’y a ni véritable entrepôt ni véritable coursier : la boutique les simule. Une commande passe à « Expédiée » 15 minutes après « Payée, en préparation », puis à « Livrée » un jour après « Expédiée ». L’heure est celle de l’horloge de votre ordinateur : pour vérifier ces transitions sans attendre, avancez l’horloge.