Aujourd’hui je vous présente TestCafé un framework de test end-to-end qui ne repose pas sur une implémentation Selenium ni sur Appium.


Sommaire


Qu’est-ce que TestCafe ?

Ce n’est absolument pas un outil pour tester la machine à café de votre bureau ! Non loin là. TestCafé se concentre sur l’automatisation de vos tests end-to-end mais pas que !

Il réside sur le fait qu’il n’est pas implémenté sur un serveur Selenium pour le lancement et l’exécution de vos tests. Il émule son propre contexte de navigateur, afin d’avoir un contrôle total sur tout le contexte de vos tests.

Par rapport aux différentes implémentations de Selenium, avec TestCafé vos tests peuvent vous paraître plus stable. Par défaut, il n’y a pas d’attente manuelle à ajouter. Il va attendre de lui-même les chargements de pages (XHR) avant d’effectuer les différentes actions.

Support navigateur/mobile 

TestCafe prend en charge les navigateurs suivants pour les tests end-to-end

  • Google Chrome: Stable, Beta, Dev et Canary
  • Internet Explorer (11+)
  • Microsoft Edge
  • Mozilla Firefox
  • Safari
  • Google Chrome mobile
  • Safari mobile

Important : Pas de prise en charge (pour le moment) des applications natives.

Note : Pour les tests navigateurs sur un mobile iOS pas besoin d’un mac et de xcode pour lancer vos tests.

Vous pouvez également lancer vos tests depuis votre poste sur votre mobile sans brancher de cable USB, simplement en étant sur le même réseau.

1 – Pré-requis

Support des systèmes (mac, windows, linux)

Un minimum de connaissance avec javascript/typescript (voir la notion de classe et de constructor cf)

Un environnement nodeJS et son gestionnaire de dépendances npm

https://nodejs.org/en/

Un ide (editeur de code) pour l’écriture des tests (ex: VScode très bien)

https://visualstudio.microsoft.com/fr/

2 – Installation de TestCafé

On installe dans un premier temps TestCafé avec le gestionnaire de paquet npm, dans un terminal de commande en tapant la commande suivante :

npm install -g testcafe

* Le flag -g signifie que l’installation s’effectue de manière globale. Voilà, c’est terminé notre environnement de test est désormais installé.

Prêt pour l’écriture de notre premier test ?

3 – Ecriture de notre premier test

Les tests peuvent être écrits soit en javascript ou en typescript. Dans cet exemple, je porte mon choix sur javascript.

Nous allons créer un nouveau dossier pour contenir notre projet de test. Nous allons écrire un test basique afin de tester notre installation.

  • Dans mon dossier on crée le fichier test.js

Nous ajoutons le code suivant :

fixture `ecosia`
    .page `https://www.ecosia.org/`;

test('Ouverture de page sur ecosia', async t => {
    // Test code
});

On démarre notre test avec une fixture, qui nous permet d’organiser nos tests et de spécifier un point d’entrée (ici une page web ecosia.org).

On crée un nouveau test ‘Ouverture de page sur ecosia’ qui va contenir la logique de notre test.

Dans un terminal, nous allons exécuter TestCafé avec la commande suivante:

testcafe chrome test.js
Ouverture et émulation du contexte navigateur de TestCafé
Ouverture de la page sur Ecosia

Notre sortie de console

  Running tests in:
 - Chrome 79.0.3945.117 / Linux 0.0

 ecosia
 ✓ Ouverture de page sur ecosia

 1 passed (3s)

Vous pouvez spécifier le navigateur de votre choix, il doit être simplement installé sur votre système. TestCafé se charge de trouver le chemin du navigateur.

testcafe firefox|chrome|safari test.js

4 – Allons un peu plus loin

Nous allons garnir un peu plus notre test afin d’utiliser le système de localisateur de TestCafé (l’équivalence des xpaths sur Selenium).

On importe la librairie Selector de TestCafé dans notre code :

import { Selector } from 'testcafe';

fixture `ecosia`
    .page `https://www.ecosia.org/`;

test('Ouverture de page sur ecosia', async t => {
    // Test code
});

Le but de notre test consiste à effectuer une recherche sur le moteur Ecosia. On va devoir inspecter le DOM avec l’inspecteur du navigateur pour récupérer :

  • le champ de recherche
  • le bouton de recherche
Clique droit sur l’élément cible puis inspecter

Le code html de notre champ de recherche :

<input placeholder="Lancez une recherche pour planter des arbres..." aria-label="Lancez une recherche pour planter des arbres..." type="search" name="q" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" autofocus="autofocus" required="required" class="input" data-v-e4880950="">

Le code html de notre bouton de recherche :

<button type="submit" role="button" aria-label="Submit" class="button button-submit icon-button icon-button--elevation-0 icon-button--size-m icon-button--variant-bare" data-v-750a8c90="" data-v-e4880950=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="icon-button__icon icon icon--icon-search icon--size-m icon-button__icon-search button-search-icon" data-v-934beb1e="" data-v-750a8c90=""><path fill="currentColor" fill-rule="evenodd" d="M10.8 2.527a8.29 8.29 0 016.54 13.383l3.856 3.856a1 1 0 01-1.414 1.414l-3.851-3.852A8.29 8.29 0 1110.8 2.527zm0 2a6.29 6.29 0 100 12.58 6.29 6.29 0 000-12.58z" data-v-934beb1e=""></path></svg></button>

Comme pour les xpaths il faut repérer un élément unique dans le code html pour ne pas interférer avec d’autres éléments qui possèdent le même attribut/classe.

Déclarons nos sélecteurs dans notre code :

import { Selector } from 'testcafe';

fixture `ecosia`
    .page `https://www.ecosia.org/`;


const champRecherche = Selector('input').withAttribute('name', 'q');
const boutonRecherche = Selector('button').withAttribute('type', 'submit');

test('Rechercher John Doe sur ecosia', async t => {
   
});

On déclare 2 constantes pour mes 2 éléments. J’indique à TestCafé que je veux sélectionner un type input qui possède l’attribut name=q pour mon champ de recherche. Je fais la même chose pour mon bouton de recherche.

On va désormais ajouter des actions dans le déroulement de notre test

  • Remplissage du champ de recherche
  • Clique sur le bouton de recherche

Les différentes types d’actions sont disponibles sur la doc Api de TestCafé :

https://devexpress.github.io/testcafe/documentation/test-api/actions/

Ecrire un texte dans un sélecteur:

t.typeText( selector, text [, options] )

Cliquer sur un sélecteur:

t.click( selector [, options] )

On ajoute ensuite les actions dans notre code :

import { Selector } from 'testcafe';

fixture `ecosia`
    .page `https://www.ecosia.org/`;


const inputSearch = Selector('input').withAttribute('name', 'q');
const buttonSearch = Selector('button').withAttribute('type', 'submit');

test('Rechercher John Doe sur ecosia', async t => {
    await t
        .typeText(inputSearch, 'John Doe')
        .click(buttonSearch);
});

On relance notre test pour voir si tout fonctionne. Dans notre terminal :

testcafe chrome test.js

Nous allons ensuite vérifier que notre champ de recherche contient bien la valeur “John Doe” en utilisant l’assertion Contains.

https://devexpress.github.io/testcafe/documentation/test-api/assertions/assertion-api.html

await t.expect( actual ).contains( expected, message, options );

Intégrons-le dans notre test :

import { Selector } from 'testcafe';

fixture `ecosia`
    .page `https://www.ecosia.org/`;


const inputSearch = Selector('input').withAttribute('name', 'q');
const buttonSearch = Selector('button').withAttribute('type', 'submit');

test('Rechercher John Doe sur ecosia', async t => {
    await t
        .typeText(inputSearch, 'John Doe')
        .click(buttonSearch);
    await t
        .expect(inputSearch.value).contains('John Doe', 'Le champ de recherche contient John Doe');
});

Lançons le test :

testcafe chrome test.js

Le test est réussi voici, notre sortie de console :

Running tests in:
 Chrome 79.0.3945.117 / Linux 0.0
 ecosia
 ✓ Rechercher John Doe sur ecosia
 1 passed (5s) 

Pour finir

Dans les prochains articles, j’irai plus loin dans l’utilisation de TestCafé notamment :

  • Démarrer en mode “projet”, l’organisation du code, des tests et de la configuration dynamique.
  • Intégrer un système de reporting multi-projet.
  • Utilisation d’une CI “Intégration continue” avec gitlab.
Comments to: Découverte de TestCafé & Installation
  • février 4, 2020

    Article très intéressent !
    Enfin une solution abordable pour se passer de selenium 🙂

    J\’ai une question :
    Est-il possible avec TestCafé d\’intégrer le langage Gherkin afin de faciliter la lecture pour fonctionnel ?

    Reply
    • février 4, 2020

      Bonjour et merci pour ton retour 🙂
      Oui en effet il est possible d’utiliser le langage Gherkin en couplant TestCafé avec cucumberJS.
      Voici la librairie d’intégration recommandée par TestCafé https://github.com/kiwigrid/gherkin-testcafe .
      Je vais également faire un petit article par la suite sur l’utilisation de cette lib.

      Reply
Write a response

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Attach images - Only PNG, JPG, JPEG and GIF are supported.

Login

Welcome to Typer

Brief and amiable onboarding is the first thing a new user sees in the theme.
Join Typer
Registration is closed.