Dev.Agile.Stories

Suite à l’article 2/3 je vais montrer comment faire des tests web End to End toujours avec le formalisme BDD à l’aide de Cucumber-js et l’implémentation du composant Page Object avec WebDriverJs.

WebdriverIO est aussi présenté en tant qu’alternative à WebDriverJs.

On obtient donc la stack de test :

• WebDriverJs + Cucumber-js sur Node.js + protocole WebDriver pour communiquer avec le browser
• ou bien WebdriverIO + Cucumber-js sur Node.js + protocole WebDriver

L’exemple complet en Cucumber-js + WebDriverJs est disponible sur  Github sur la branche seleniumjs-it-tests (voir README pour l’exécution des tests).

Composant Page Object avec WebDriverJs

[gist https://gist.github.com/95746c4f8858ceb8e49c /]

• Contient tous les appels à l’API WebDriverJs
• Encapsule les sélecteurs CSS
• Expose les fonctions pour lancer les actions sur le SUT (System Under Test)
• Expose les fonctions pour récupérer les informations sur l’état du SUT
• les appels à WebDriverJs retournent des Promises

Ecriture des TI avec Mocha / Chai, exemple de l’ajout des todos

[gist https://gist.github.com/46c4fd89d52fe9d9241c /]

•  Description de la suite avec la syntaxe Mocha
• Lance les actions par l’intermédiaire du Page Object
• Effectue les vérifications avec les assertions Chai
• L’extension Chai as Promised permet de vérifier les Promises de WebDriverJs
• Q.all permet d’attendre la résolution de plusieurs Promises

Implémentation des step Cucumber-js pour faire la liaison avec le BDD

[gist https://gist.github.com/7c9f9a43d1b23192763e /]

•  Instance Cucumber this fournie les fonctions Given, When, Then
• Given génère des todos en tant que pré-requis de certains scénarios
• When lance les actions par l’intermédiaire du Page Object
• Then effectue les vérifications avec les assertions Chai et l’extension Chai as Promised pour traiter les Promises issues de WebDriverJs

Limitations de WebDriverJs

• Beaucoup plus lent que CasperJS (sachant Zombie.js est encore plus rapide que CasperJS).

Cas d’usage possible

• Tests End to End multi-browser (y compris en mode headless avec PhantomJS)
• API très riche pour reproduire ce que fait l’utilisateur final
• Attention à l’abus de selenium ! Voir à ce sujet l’article sur la pyramide des tests.

 

Alternative WebdriverIO pour l’implémentation du Page Object

L’exemple complet en Cucumber-js + WebdriverIO est disponible sur Github sur la branche webdriverio-it-tests (voir README pour l’exécution des tests).

Composant Page Object avec WebdriverIO

[gist https://gist.github.com/2e5a6276c7c26cc3c5ec /]

Par rapport à WebDriverJs l’avantage est que l’API est plus concise et lisible.

En conclusion

Un dernier mot sur l’activité des frameworks de tests d’intégration et fonctionnels :

• CasperJS n’apporte plus de nouveautés depuis un certain temps, mais la richesse de son API et sa documentation pourraient encourager d’autres contributeurs ! A suivre…
• Concernant Selenium on est en présence d’un écosystème très vivant avec de multiples portages et notamment plusieurs implémentations en JS.
• Cucumber est également très vivant et populaire et bénéficie de portage en plusieurs langages.