Besoin d'aide pour automatiser les tests fonctionnels et navigateurs de vos applications web ? Je vous propose de découvrir une ressource qui risque de faire votre bonheur : TestCafé

Automatisez vos tests avec TestCafé

Peut-etre connaissez vous TestCafé, un environnement de test HTML5 vraiment tres efficace mais au prix malheureusement prohibitif ($499 par developpeur) pour les petites structures.

Si ce n'est pas le cas, sachez que c'est un logiciel vous permettant de créer des tests de manière très simple et efficace pour tester tout ce qui peut tourner dans un navigateur, du site web le plus basique a l'application Javascript la plus complexe.

Ce n'est pas de cette version dont nous allons parler aujourd'hui, mais sa version open-source.

Trouvez un webdesigner disponible

Trouvez gratuitement le prochain talent qui réalisera votre projet ou rejoindra votre équipe.

Installation

Il y a quelques jours les développeurs ont sorti une version entièrement open source et gratuit construite sur Node js de TestCafé. Son installation est assez simple si vous possédez déjà Node js et NPM, et ne devrait pas vous surprendre :

npm install -g testcafe

Attention tout de même, l'aide à l'installation est franchement lacunaire, et ne précise pas qu'il faut une version de npm à jour (j'ai dû mettre à jour vers la 3.10.8 pour que l'installation fonctionne). De plus, si vous êtes habitue à taper "sudo npm install -g", oubliez le sudo tout de suite, sinon l'installation ne fonctionnera pas.

Enfin, sachez que sur Linux, TestCafé n'est fonctionnel que pour les distributions possédantes update-alternatives (typiquement debian et ses dérivés). Dans le cas contraire, la seule maniere que vous aurez de pouvoir essayer l'application sera de modifier la ligne 179 du fichier ./node_modules/testcafe-browser-tools/lib/api/get-installations.js en remplaçant l'appel à update-alternatives par un tableau contenant les chemins vers vos différents navigateurs. Je vous conseille évidemment de l'installer dans votre dossier (sans le -g donc) avant d'effectuer votre modification !

En cas d'autre soucis que je n'aurais pas rencontre, je vous propose de passer faire un tour sur leur page Github.

Utilisation de TestCafé

L'utilisation de TestCafe est vraiment très simple, et c'est justement ce qui fait sa grande force. Pour commencer, je vous propose d'essayer le test d'exemple fourni sur leur site :

import { expect } from 'chai';
import { Selector } from 'testcafe';

// Declare the parameterized selector function
// to obtain text content of an element identified by the `id` attribute
const getElementById = Selector(id => document.getElementById(id));

fixture `Getting Started`
    .page('https://devexpress.github.io/testcafe/example');

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'John Smith')
        .click('#submit-button');

    // Use the Selector function to get access to the article header
    const articleHeader = await getElementById('article-header');

    // Use the assertion to check if the actual header text is equal to the expected one
    expect(articleHeader.innerText).to.equal('Thank you, John Smith!');
});

Je vous propose d'écrire ce test dans le fichier /tests/getting_started.js . Une fois cela fait, il ne vous reste plus qu'à taper la ligne suivante en console :

testcafe chrome,firefox tests/getting_started.js

Ensuite, TestCafé s'occupe seul d'ouvrir les navigateurs, aller sur les pages nécessaires, effectuer toutes les actions en attendant bien entendu que les éventuels éléments ayant besoin de charger le fassent, puis vous affiche un compte-rendu.

Il est évidemment possible de ne tester que certains navigateurs, ou en tester plus que deux en modifiant simplement la liste en argument.

Enfin, sachez qu'il est possible de lancer plusieurs tests ensemble en les mettant tous dans un même dossier et en appelant le dossier en argument à la place d'un simple script.

Pour conclure

Je ne sais pas vous, mais j'utilisais personnellement Nightmare js pour faire mes tests jusqu'à présent, mais je pense très fortement à passer sur TestCafé. (Nightmare js est une library permettant de simplifier l'utilisation de Phantom js, qui est lui un Webkit pouvant fonctionner sans affichage)

Simple d'utilisation, permettant de tester virtuellement tous les navigateurs Web, je trouve TestCafé vraiment intéressant. 

La seule reproche que je pourrais lui faire est sa documentation qui nous lache dès que quelques difficultés se font sentir, principalement à l'installation. Espérons que ce point évolue dans le bon sens avec le temps, surtout que le projet est open source.