De l’utilisation du couple Behat/Sahi sur différents browsers

Différents brothers

Jusqu’à peu, nous utilisions Behat pour sa définition principale : confirmer la stabilité des fonctionnalités de nos applications et leur non régression dans le temps. Une partie de ces fonctionnalités faisant appel à du javascript, nous l’avons tout naturellement couplé à Sahi (la dernière version en date étant la 3.5) et Chrome. Nous avons récemment décidé d’étendre ces tests à d’autres navigateurs afin de nous assurer une compatibilité cross-browsers de notre application.

Et là, c’est le drame : un tsunami d’erreurs. Comme le disait récemment un tavernier près du port de Cherbourg : « ce qui plaît à un navigateur ne plaît pas forcément à un autre ». Nous nous sommes donc plongés dedans et voici donc la liste non exhaustive des écueils auxquels nous avons été confrontés. Et vu qu’à PMSIpilot on n’est pas des requins, on vous met aussi les solutions apportées. [/fin de la minute maritime]

Note : cet article sera enrichi au fur et à mesure de nous découvertes.

Chrome 16 (plus généralement Webkit)

Rien à déclarer de ce coté-ci : ayant choisi comme plateforme initiale de test ce navigateur, nos tests ont donc été conçus pour lui à l’origine.

Firefox 10.0.1

Une des différences majeures entre Firefox et Webkit est sans conteste le retour de la fonction _gettext() de Sahi. En effet, Firefox retourne tout le texte présent sur la page, contrairement à Webkit qui, lui, retourne le texte tel que l’utilisateur le voit (c’est donc ce qu’on pourrait qualifier du WYSIWYT, What You See Is What You Test), à savoir entre autres :

  • Uniquement le texte visible (une div en display:none sera donc réellement invisible)
  • Les éléments ayant un text-transform:uppercase seront retournés en majuscule.

Ce qui correspond selon nous au comportement à adopter car la personne qui écrit ce test :

Given I am on "http://team-fusion.pmsipilot.com/"
Then I should see "EQUIPE TECHNIQUE"

n’a pas forcément les compétences (ni l’envie) pour aller vérifier le code source de la page et constater qu’il est écrit « Equipe technique » (et donc que son test ne passera pas sous Firefox). Il faut donc que le test corresponde au plus près à ce qui est présent à l’écran.

  1. Gestion du case insensitive :
    Deux choix se présentent :

    • Utiliser une expression régulière :
      Then I should see text matching "(?i)EQUIPE TECHNIQUE"

      Ce qui fonctionnera si votre version de Behat a été mise à jour après janvier 2012, mais qui présente l’inconvénient de ne pas être tout public.

    • Ajouter cette fonction dans le contexte :
      /**
      * Checks, that the specified text (whatever case) is visible on the page
      *
      * @Then /^I should see case insensitive text "([^"]*)"$/
      */
      public function iShouldSeeCaseInsensitiveText($argument1)
      {
        $expected = strtolower(iconv("UTF-8", "ASCII//TRANSLIT", str_replace('\\"', '"', $argument1)));
        $actual   = strtolower(iconv("UTF-8", "ASCII//TRANSLIT", $this->getSession()->getPage()->getText()));
      
        try {
          assertContains($expected, $actual);
        } catch (AssertException $e) {
          $message = sprintf('The text "%s" was not found anywhere in the text of the current page', $expected);
          throw new ResponseTextException($message, $this->getSession(), $e);
        }
      }

      Pour ceux qui s’interrogeraient sur l’utilité de l’appel à iconv, il se trouve qu’un simple strtolower ne gère pas correctement les lettres accentuées (qui ne passent pas automatiquement en minuscule).

  2. Gestion des éléments invisibles :
    Pour les blocs cachés en css, mais vus par Firefox, on peut tester leur visibilité grâce à cette fonction :

    /**
    * Checks, that the specified CSS element is visible
    *
    * @Then /^the "([^"]*)" element should be visible$/
    */
    public function theElementShouldBeVisible($element)
    {
      $displayedNode = $this->getSession()->getPage()->find('css', $element);
      if($displayedNode === null)
      {
        throw new \Exception(sprintf('The element "%s" was not found anywhere in the page', $element));
      }
      assertTrue($displayedNode->isVisible(), sprintf('The element "%s" is not visible', $element));
    }

    Pour les éléments textuels cachés ailleurs sur la page et vus par firefox, on peut s’assurer que le texte qu’on s’attend à trouver soit bien au bon endroit dans la DOM en utilisant

    Then I should see "foo" in the "#bar" element

Internet Explorer 8

Là encore, la méthode _gettext() de Sahi retourne un texte similaire à celui de Firefox. Il semblerait donc que Webkit soit l’exception. Considérez donc que les fixes Firefox listés ci-dessus s’appliquent aussi pour IE8.

  1. Configuration du xpath :Par défaut, ce navigateur ne supporte pas le xpath, un bon nombre de tests ne passeront tout simplement pas du tout. Vous trouverez le remède à cet inconvénient au fin fond de la documentation de sahi, plus spécialement dans la référence à l’accesseur _byXPath().

    Aller, je vous épargne un aller-retour (qu’est-ce qu’on ne ferait pas pour nos lecteurs). La solution consiste donc à copier le contenu de ce fichier dans le fichier situé ici sahi\htdocs\spr\ext\javascript-xpath\javascript-xpath.js

 

Serv-Tech

 

Laisser un commentaire