2017-03-19

CasperJs - Jour 2

Reprise

Objectif clair : reprendre les travaux de l’article précédent ici.

Un peu galère

Alors les premiers tests fonctionnent bien. Par contre, dans le cas d’une navigation (pourtant la base), je galère. Pourquoi : trouver le bon critère de chargement. Le site ne contient que peu d’ID ou d’éléments permettant de valider que oui l’élément est bien chargé … J’ai essayé différentes méthodes : waitFor, waitForSelector, … et à chaque fois, j’arrive dans la page avant la fin du chargement ce qui pose quelques soucis. La seule chose qui fonctionne à 100%, c’est mettre un wait de 10 sec …

casper.waitForUrl("http://www.a5sys.com/vos-enjeux/", function() {
   this.echo(this.getCurrentUrl());
   this.echo(this.getTitle());
   //this.test.assertTitle("SSII à Nantes : business intelligence, apps web et mobiles", "Vos Enjeux : Le titre du site est bon");
   this.wait(10000, function() {
       this.echo(this.getCurrentUrl());
       this.echo(this.getTitle());
    });
});

ce qui donne :

http://www.a5sys.com/vos-enjeux/
SSII à Nantes : business intelligence, apps web et mobiles
http://www.a5sys.com/vos-enjeux/
A5Sys, l'ESN Nantaise | Vos enjeux

Wait & Evaluate

Après quelques batailles, j’arrive à cette solution :

casper.waitFor(function check() {
  return this.evaluate(function() {
      return document.querySelectorAll('.title_subtitle_holder').length > 0;
   });
}, function then() {
   this.test.assertExists('div.title_subtitle_holder', "Titre présent");
   this.test.assertSelectorHasText('div.title_subtitle_holder h1 span', 'Vos enjeux');
}, function timeout() { // step to execute if check has failed
  this.test.assertExists('div.title_subtitle_holder', "Titre présent");
  casper.capture("./images/a5sys-event-KO.png");
});

Par contre, je ne suis pas confiant car je pense que ma méthode d’attente (check()) n’est pas forcément optimum. Il faut peut-être essayer de passer par des ressources …

Ressuctio

Présentation

Resurrectio se présente comme un outil permettant d’enregistrer des scripts CasperJS via un recorder d’actions sous chrome. L’idée de cette partie est donc de tester. Alors pour être clair sur ce que je souhaite : je navigue dans le site, j’enregistre le script et : çà marche :) (espoir)

Forcément

Alors voici un exemple de code généré :

casper.test.begin('Resurrectio test', function(test) {
   casper.start('http://www.a5sys.com/');
   casper.waitForSelector(x("//*[contains(text(), \'VOS ENJEUX\')]"),
       function success() {
           test.assertExists(x("//*[contains(text(), \'VOS ENJEUX\')]"));
         },
       function fail() {
           test.assertExists(x("//*[contains(text(), \'VOS ENJEUX\')]"));
   });

   casper.run(function() {test.done();});
});

Le souci étant qu’il n’ pas enregistré le click sur le lien donc … le résultat n’est pas correcte. La question devient : est-ce que cela vient du site ou de l’outil ? Je vais essayer le site de CasperJS :) Bon c’est pas forcément mieux …

Application Angular

WaitForSelector

Après un semi-échec sur un site standard, je suis passé sur une application AngularJs dans laquelle le développeur a intégré pas mal de classe fictive pour les tests. Et pour le coup, ça marche plutôt bien :

// Ouverture de la page principale
casper.start(startUrl);

// Attente de l'ouverture de la page et des boutons associés
casper.waitForSelector('a.test-identification-manuelle'
    , function() {
        this.test.assertExists('a.test-identification-manuelle', 'Login - Bouton Identication Manuelle Présent');
        // Validation de l'url
        this.test.assertEquals(startUrl + '#/identification/choix', this.getCurrentUrl(), 'Login - Validation URL Choix');
        // Click sur identification manuelle
        this.click('a.test-identification-manuelle');
    } , function() {
        // Pour que cela pète
        test.assertExists('a.test-identification-manuelle', 'Login - Bouton Identication Manuelle Présent');
}, waitTime);

La méthode waitForSelector attend bien l’apparition de l’élément dans le DOM donc RAS à ce niveau. La “navigation” est également gérée car le changement de page fonctionne plutôt bien.

Blocage …

La joie aura été de courte durée : impossible d’avancer sur le script. Le projet exploite le mode déconnecté et cela semble poser des soucis à PhantomJS (pas forcément CasperJS). J’ai pas mal cherché et … pas trouver grand chose. Bref je bloque …

Bilan

Je reste un peu sur ma faim. L’outil est très prometteur mais j’ai pas réussi à faire le 10ème de ce que je voulais faire. En plus, j’ai bien trouver des exemples mais ils sont tous plus ou moins identiques et n’apporte pas grand chose. Bon après, je sais pas dire si le souci c’est moi ou l’outil … (ça fait au moins 2 fois … ça doit être moi).

DevBieres