Récemment, dans le cadre d’un stage que nous encadrons au taf, on est en train de découvrir certains nouveaux tools pour les tests unitaires et surtout fonctionnels (Il faut dire que Webtest de Canoo commence à se faire vieux, et nous pose plein de problème quand il s’agit de faire des tests AJAX).

On a donc décidé de prendre le taureau par les cornes et de retenter le coup avec Selenium, et de rénover notre stack de test, en encadrant le tout avec Behat, framework PHP pour faciliter le Behaviour Driven Development.

On aura donc besoin des composants suivants:

* Behat, comme le framework BDD;
* Mink, pour les tests fonctionnels;
* Selenium 2.

A noter que je vais utiliser le driver Selenium2 (ou webdriver) et non le driver Selenium utilisé par la plupart des exemples que j’ai pu trouver jusqu’à maintenant sur le web.

Ah, et le script que je vais tester est:

(Pour les non initiés, il s’agit juste d’une balise input et d’un champs texte mis à jour suite à un appel ajax lancé suite à la modification de l’input. Le texte affiché est le résultat d’un sha1sum.)

Créons le dépôt pour les tests:

Et après la lecture de la doc de behat (et en particulier Developing Web Applications with Behat and Mink), rédigons la feature:

# features/sha1.feature
Feature: Sha1
  In order to compute a sha1sum
  As a website user
  I need to be able to compte a sha1sum using an asynchronous script

  Scenario: Compute sha1sum
    Given I am on "/"
    When I fill in "text" with "my text"
    Then I should see "c3599c11e47719df18a2448690840c5dfcce3c80"

Et avant de tester la feature avec Behat, quelques petites modifications s’imposent dans features/bootstrap/FeatureContext.php. La classe contenue doit hériter de Behat\Mink\Behat\Context\MinkContext et le script doit require mink/autoload.php:

… et je crée un fichier de conf de base pour behat justement nommé config/behat.yml:

default:
  paths:
    features:       features
    bootstrap:      features/bootstrap
  context:
    parameters:
      base_url: http://localhost/~mycroft/testing/

Y a pu qu’à tester:

Bon, certes, il a lancé quelque chose, mais il l’a fait sans faire fonctionner Selenium. En fait par défaut, il va utiliser Goutte, qui est un pseudo navigateur en pur PHP sans client frontend, et donc pauvre en features pour les applications riches.

Configurons maintenant Behat pour fonctionner avec Selenium. Le fichier config/behat.yml devient:

default:
  paths:
    features:       features
    bootstrap:      features/bootstrap
  context:
    parameters:
      base_url: http://localhost/~mycroft/js/
      javascript_session: webdriver
      webdriver:
        host: 'http://localhost:4444/wd/hub'
        browser: firefox

Et n’oublions pas de spécifier avant le Scenario d’utiliser la session selenium, en imposant le tag @Javascript:

…
@javascript
Scenario: Compute sha1sum
…

Lancer Selenium va être nécessaire pour continuer:

En lancant behat, cette fois-ci, on aura le navigateur qui se lancera et le test échouera:

Feature: Sha1
  In order to compute a sha1sum
  As a website user
  I need to be able to compte a sha1sum using an asynchronous script

  @javascript
  Scenario: Compute sha1sum                                      # sha1.feature:7
    Given I am on "/"                                            # FeatureContext::visit()
    When I fill in "text" with "my text"                         # FeatureContext::fillField()
    Then I should see "c3599c11e47719df18a2448690840c5dfcce3c80" # FeatureContext::assertPageContainsText()
      The text "c3599c11e47719df18a2448690840c5dfcce3c80" was not found anywhere in the text of the current page

1 scenario (1 failed)
3 steps (2 passed, 1 failed)
0m2.343s

Ca ne fonctionne pas parce que l’action « I fill in » remplit le champs et que donc l’évènement keyup ne fonctionnera jamais. Je modifie donc le scénario pour ajouter une nouvelle action custom:

...
    When I press letter after letter "my text" in "text"
...

… et je modifie la classe FeatureContext en y ajoutant le bon handler (à noter qu’on peut une fois après avoir fait hériter FeatureContext par Behat\Mink\Behat\Context\MinkContext lancer la commande behat -dl pour lister les handlers possibles):

… et je relance le test:

  @javascript
  Scenario: Compute sha1sum                                      # sha1.feature:7
    Given I am on "/"                                            # FeatureContext::visit()
    When I press letter after letter "my text" in "text"         # FeatureContext::iPressLetterAfterLetterIn()
    Then I should see "c3599c11e47719df18a2448690840c5dfcce3c80" # FeatureContext::assertPageContainsText()

1 scenario (1 passed)
3 steps (3 passed)
0m3.71s

Et mon test est validé !

Complétons mon code html et javascript pour y ajouter un bouton et une action:

Et mon scénario:

    When I press "clear"
    Then I should not see "c3599c11e47719df18a2448690840c5dfcce3c80"
    Then I should see "cleared!"

Et là, je relance behat:

  @javascript
  Scenario: Compute sha1sum                                          # sha1.feature:7
    Given I am on "/"                                                # FeatureContext::visit()
    When I press letter after letter "my text" in "text"             # FeatureContext::iPressLetterAfterLetterIn()
    Then I should see "c3599c11e47719df18a2448690840c5dfcce3c80"     # FeatureContext::assertPageContainsText()
    When I press "clear"                                             # FeatureContext::pressButton()
    Then I should not see "c3599c11e47719df18a2448690840c5dfcce3c80" # FeatureContext::assertPageNotContainsText()
    Then I should see "cleared!"                                     # FeatureContext::assertPageContainsText()

1 scenario (1 passed)
6 steps (6 passed)
0m3.767s

Et vous pourrez constater dans le navigateur qu’ouvre Selenium que tout va bien ! :-)