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.

 

 

 

Publicités