Tester une fonctionnalité avant qu'elle existe
Importez des images depuis votre outil de design et préparez le test pendant que la fonctionnalité est encore en développement.
Pourquoi tester avant qu'elle existe
Le développement piloté par les tests, à partir de votre maquette, dans Figma ou tout autre outil : le test existe avant la fonctionnalité.Les images que vos designers ont déjà faites montrent à quoi l'écran doit ressembler, et une assertion n'a besoin que d'une image de ce qu'elle doit attendre.
Le test est alors prêt le jour où la fonctionnalité est développée.Sa première exécution dit à l'équipe, élément par élément, si ce qui a été développé correspond à ce qui a été conçu.
L'idée en quatre étapes
Exporter
Les boutons, icônes et écrans de votre outil de design, sous forme d'images
Importer
Dans les Fichiers de contenu du test
Composer
Disposez-les sur la piste Référence visuelle
Vérifier
Ajoutez une assertion pour chaque élément qui compte
Importer vos images de maquette
Exportez les éléments depuis n'importe quel outil de design, comme Figma, Sketch, Adobe XD ou Photoshop, sous forme d'images PNG : un écran entier, ou des éléments isolés comme un bouton, une icône ou un logo.Exportez-les à la taille qu'ils auront à l'écran.
- 1
Cliquer sur Importer des médias
Dans la barre d'outils de GUI Test Studio, ou Fichier, Importer des médias.Choisissez vos images : elles apparaissent sous Images dans les Fichiers de contenu.
- 2
Leur donner des noms clairs
Faites un clic droit sur une image et choisissez Renommer..., ou appuyez sur F2 : « Bouton Paiement », « Icône Panier ».Les noms voyagent avec le test.
Construire l'écran sur la Référence visuelle
La piste Référence visuelle est ce que vous voyez dans l'aperçu à chaque moment.Elle contient d'habitude un enregistrement, mais elle accueille tout aussi bien des images.Glissez une image depuis les Fichiers de contenu sur cette piste : elle devient un clip que vous pouvez déplacer et étirer, comme une diapositive dans un diaporama.
Placez plusieurs images l'une après l'autre pour raconter l'histoire de la future fonctionnalité comme un collage : l'écran de liste, puis la boîte de dialogue qui s'ouvre, puis la confirmation.
Ajouter les assertions
- 1
Glisser une assertion au moment de son image
Depuis la palette Assertions sur la piste Assertion, sous l'image à laquelle elle se rapporte.
- 2
Lui montrer quoi chercher
Ouvrez l'éditeur de l'assertion.L'image qu'il montre est votre image de maquette : tracez un rectangle autour de l'élément pour une assertion visuelle, ou marquez les mots pour une assertion de texte.Dans l'Éditeur de cible visuelle, vous pouvez aussi glisser l'image d'un seul élément directement depuis les Fichiers de contenu sur le canevas.
- 3
Ajouter les actions entre elles
Glissez des clics et des saisies depuis la palette Événements, ou enregistrez-les plus tard, quand l'écran existera, avec Enregistrer un nouveau scénario.
Le designer partage l'image du nouveau bouton Exporter et celle du message « Exportation terminée ».Vous importez les deux, vous les placez sur la Référence visuelle, et vous ajoutez une assertion visuelle sur le bouton et une assertion de texte sur le message.Le test attend dans le dépôt.Le jour où un développeur, ou un agent de programmation IA, termine la fonctionnalité, le pipeline l'exécute et signale si le bouton a l'aspect prévu par la maquette.
Quand la fonctionnalité est développée
| Ce que montre la première exécution | Que faire |
|---|---|
| Tout réussit | La fonctionnalité correspond à sa maquette.Le test la protège désormais contre les régressions. |
| Un élément a un aspect différent | Un vrai écart entre la maquette et le développement.Créez un rapport d'anomalie, ou acceptez la nouvelle apparence si la maquette a changé en cours de route. |
| Un élément est introuvable | Vérifiez sa taille : une image de maquette exportée à une autre échelle que celle de l'écran est introuvable.Acceptez la meilleure zone que propose le rapport, ou capturez de nouveau l'élément depuis l'écran réel. |
Test préparé à partir de la maquette
Fonctionnalité développée
Première exécution
Accepter l'apparence réelle
Une fois
Toujours bloqué ?Dites-nous ce que vous essayiez de faire, et nous répondons sous un jour ouvré.Ask our team