Wireframesketcher + wireframe2html => html + behat => validation de tests

Jul 23, 2014 · 2 min read · wireframesketcher behat ·

J’ai commencé le développement d’un script python qui permet la conversion des mockups de wireframesketcher en page HTML (avec du vrai code). L’état du projet est encore au stade du prototype, mais cela avance. Il est :

sur github : https://github.com/chbrun/wireframe2html
sur pypi : wireframe2html (version 0.1)

Le script permet la lecture des fichiers screen de wireframesketcher, il utilise ensuite des templates jinja2 pour chaque élément de la page pour générer le code html.

Pour l’instant, j’ai utilisé 2 pages de test dont voici les copies écrans :

La homepage :

Cette page a un lien dans la Topbar : Project qui permet d’appeler la page Projects_list :

Le bouton back permettant le retour à la page d’accueil.

Une fois le projet sauvegardé, il suffit de lancer :

python wireframesketcher.py -s Homepage
python wireframesketcher.py -s Projects_list

Le résultat de la conversion est accessible :

Homepage : http://site.cbrun.fr/mockups/Homepage.html
la Page Projects_list : http://site.cbrun.fr/mockups/Projects_list.html

Il y a encore un peu de CSS pour s’approcher au plus près du rendu sous wireframesketcher.

Du coup, maintenant, je peux écrire mon petit script simple Behat :

# language: fr
# behat features/test_fimafeng_01_.feature
Fonctionnalité: Test simple de la generation wireframe2html
    Navigation simple de Homepage vers la page Projects_list
    @javascript 
    Scénario: Navigation
        Soit je suis sur la page d'accueil
        Quand je vais sur "Homepage.html"
        Alors je devrais voir "Page d'accueil"
        Quand je suis "Projects"
        Alors je devrais voir "Projects List"
        Quand je suis "Back"
        Alors je devrais voir "Page d'accueil"

Et voilà, on peut maintenant lancer le dev de l’IHM en mode BDD car on a un scénario fonctionnel qui valide la navigation des mockups.

Ce tests est très simple, mais maintenant sur un vrai projets, on part des mockups, on génère des prototypes HTML pour validation de par l’utilisateur, ces prototypes peuvent maintenant être utilisé pour valider quelques scénario de tests qui seront :

utilisés par l’équipe lors de la phase de développement
utilisés par le client comme scénario de validation de la solution

L’objectif n’est bien sûr pas de faire du 100% (faut pas rêver), mais si ça peu aider …

Enfin, il me reste plus qu’à rédiger les templates jinja2 pour l’ensemble des composantes de Wireframesketcher