Dans ce tutoriel vous apprendrez comment utiliser Selenium pour vos projets PHP. Vous verrez aussi comment automatiser l’execution de vos tests avec Jenkins.
Objis, spécialiste de la formation Java, est heureux de vous offrir ce tutoriel, extrait de séances pratiques de la formation Selenium dispensée par Objis.
Les + Objis
70% de travaux pratiques
Clé USB avec tous les outils utilisés + Corrigés TPs
Bilan pédagogique individuel + conseils
Prérequis
Savoir utiliser le plugin Selenium IDE pour Firefox
Programme
1) Exporter des tests Selenium au format PHP
2) Installation d’un simple projet PHP
3) Enregistrement et conversion en PHP d’un premier test
4) Lancement d’un Selenium RC
5) Execution d’un test convertie en PHP
6) Ecriture d’un script de build avec Phing
7) Mise en place d’un serveur SVN pour synchroniser le code source
8) Utilisation de Jenkins pour automatiser le lancement des tests
9) Utilisation du plugin Selenium Grid dans Jenkins
10) Faire des captures d’écran pour les tests qui échouent
11) Utilisation de Webdriver pour faire une capture d’écran
1) Exporter des tests Selenium au format PHP
Aller sur Selenium IDE (Dans la barre de menu de Firefox cliquer sur Tools > Selenium IDE)
Sur Selenium IDE cliquer sur File > Export Test Case As… et regardez les formats disponible
Vous remarquez que le format PHP est absent. Et oui il faut en effet rajouter un add-on pour avoir cet option.
Sur votre navigateur Firefox allez sur https://addons.mozilla.org/fr/firefox/addon/selenium-ide-php-formatters/
Rajouter l’add-on et une fois l’installation terminé fermer Firefox et Selenium IDE et relancer les.
Vous pouvez à présent exporter vos test au format PHP en faisant File > Export Test Case As… > PHP (PHPUnit)
2) Installation d’un simple projet PHP
Installer et démarrer un serveur WAMP (en version 2.1) qui regroupe pour windows un serveur Apache, un serveur MySQL et un interpréteur PHP
Dans le répertoire www de wamp faite un nouveau dossier monappli
dans le répertoire monappli copier et dézipper le fichier suivant:
index.php
Regarder le contenu du fichier index.php
Créer aussi un dossier test dans le dossier monappli qui nous servira plus tard
Pour voir votre application aller avec Firefox à cet url: http://localhost/monappli/
3) Enregistrement et conversion en PHP d’un premier test
Sur Firefox soyez à cet url: http://localhost/monappli/
Sur Firefox Lancez Selenium IDE: Tools > Selenium IDE
Selenium IDE enregistre maintenant les actions que vous faite sur Firefox
Cliquez sur le lien « Suprimmer la liste »
Ajouter un user avec pour prenom toto et pour nom tata
Vérifier que le text « toto TATA » est présent: sélection du text > clique droit > assertTextPresent toto TATA
Voilà vous avez donc construit un premier test d’ajout de participant
Convertisser ce test en faisant: File > Export Test Case As… > PHP (PHPUnit)
Enregistrer ce fichier dans le répertoire C:wampwwwmonapplitest
avec pour nom ajoutTest.php
Vous obtenez le code suivant:
Si vous ne voulez pas installer un navigateur chrome remplacer ce mot par firefox à la ligne 6
4) Lancement d’un Selenium RC
Les tests Selenium convertis en langage de programmation n’exécuteront pas directement Selenium mais délégueront cette tâche à un serveur Selenium qu’on appelle aussi Selenium RC (Remote Control)
Pour lancer un Selenium RC Téléchargé une distribution à cette adresse: http://docs.seleniumhq.org/download/
décompresser cette distribution et copier le fichier selenium-server-standalone-x.x.x.jar dans un répertoire de votre choix. (C:prog
par exemple)
Démarrer le serveur Selenium avec la commande: java -jar C:progselenium-server-standalone-x.x.x.jar
5) Execution d’un test convertie en PHP
Pour exécuter votre test vous avez besoin d’installer le module PHPUnit.
Pour installer PHPUnit nous devons d’abords installer l’outil PEAR qui gère l’installation des modules supplémentaires.
Télécharger la dernière version de pear à cette adresse: http://pear.php.net/go-pear.phar
copier le fichier go-pear.phar dans le répertoire C:wampbinphpphp5.3.5PEAR
double-cliquer sur le fichier C:wampbinphpphp5.3.5go-pear.bat
aux questions posés répondre par: local, yes, [Enter], Y, [Enter], [Enter]
Pour pouvoir lancer php et pear en ligne de commande nous avons besoin qu’il soit connu dans les variable d’environnement
Dans vos variables d’environnement ajouter dans le PATH le chemin ...wampbinphpphp5.3.13
Clic droit sur Ordinateur > Propriété > Paramètres système avancés > Variables d’environnement > choisir ‘Path’ > [Modifier]
vous aurez aussi besoin de lier la commande pear à la commande php.
Rajouter la variable d’environnement PHP_PEAR_PHP_BIN avec pour valeur C:wampbinphpphp5.3.5php.exe
Ouvrer une console en tant qu’administrateur (clic droit)
Pour bien initialiser la configuration de pear lancer la commande suivante: pear config-set auto_discover 1
Vous devez voir le message suivant: config-set succeeded
Lancer cette commande pour vider le cache des librairies connues: pear clear-cache
Lancer aussi cette commande mettre à jour les « canaux » de librairies: pear update-channels
Lancer ensuite la commande pour installer PHPUnit: pear install pear.phpunit.de/PHPUnit
Nous voulons aussi installer le module Selenium pour PHPUnit mais celui-ci a besoin de du module curl
Allez dans le fichier C:wampbinphpphp5.3.5php.ini
et enlever (décommenter) le point-virgule devant la ligne: extension=php_curl.dll
enregistrer le fichier, relancer WAMP et retourner sur votre ligne de commande
Installer aussi le module Selenium pour PHPUnit: pear install phpunit/PHPUnit_Selenium
Ouf, Vous pouvez maintenant lancer votre test Selenium
allez en ligne de commande dans votre répertoire de test: cd C:wampwwwmonapplitest
lancer le test: phpunit ajoutTest.php
Vous pourrez voir dans la console les lignes suivantes:
PHPUnit 3.7.21 by Sebastian Bergmann.
.
Time: 7 seconds, Memory: 4.25Mb
OK (1 test, 1 assertion)
6) Ecriture d’un script de build avec Phing
On pourrait se contenter du lancement de chaque test par cet dernière ligne de commande mais pour la suite il sera plus pertinent d’avoir un script de build qui s’occupera de lancer tout les tests. Il pourra aussi être plus facilement référencé dans Jenkins et on pourra aussi ajouter d’autre fonctionnalités comme le fait d’analyser si le code est couvert par du test
En java il serait naturel d’utiliser Ant pour le script de build (ou plutot d’utiliser Maven) mais pour notre besoin nous allons utilisé Phing qui convient bien aux projets PHP
Ouvrer une console en tant qu’administrateur (clic droit)
Lancer la commande: pear channel-discover pear.phing.info
Et la commande: pear install phing/phing
Vous pouvez maintenant lancer les script phing avec la commande phing
Le script phing doit être écris dans un fichier build.xml
Créer un dossier build dans le répertoire monappli
Créer dans ce dossier build un fichier build.xml
Dans ce fichier build.xml coller le contenue suivant:
Dans la console aller dans le répertoire build: cd C:wampwwwmonapplibuild
Puis lancer la commande phing: phing
Vous pouvez voir que Selenium ouvre un navigateur pour exécuter le test
Observer le contenu du fichier généré: C:wampwwwmonapplibuildreporttestsuites.xml
7) Mise en place d’un serveur SVN pour synchroniser le code source
Si vous voulez faire de l’intégration continu il est alors indispensable d’avoir un référentiel pour le code source de votre application. En effet si plusieurs personnes travaillent sur votre projet et qu’une release doit être faite alors c’est le code qui sera sur le référentiel qui fera foi. Jenkins qui va continuellement lancer la construction de l’application se basera aussi sur ce référentiel.
Pour ce référentiel nous vous conseillons d’utiliser SVN (Subversion) Packagé par CollabNet. Nous allons utiliser le fichier d’installation suivant: (CollabNetSubversionEdge-3.2.2_setup.exe)
Après avoir exécuter cette installation, double-cliquer sur le fichier: C:csvnlaunch.html
Cliquer sur le lien ready
Loguer avec le login admin
et le password admin
Cette distribution utilise le port 80 qui est déjà utilisé par Wamp
Pour régler cela cliquer sur Server Settings
, dans le champ Port
changer 80 part 8036 puis cliquer en bas sur [Save]
Cliquer ensuite sur Status
et sur [Start]
Voilà votre serveur svn est lancé
Nous allons maintenant créer un repository dans lequel nous pousserons notre application
Cliquer sur Repositories
puis sur [create], dans le champ Name entrer la valeur demosel
puis cliquer sur [Create]
Maintenant que nous avons notre repository nous allons y pousser dedans notre application monappli en ligne de commande
Nous avons besoin de la commande svn. Pour que celle-ci soit reconnu il faut rajouter le chemin C:csvnbin dans la variable d’environnement PATH
Après cela, aller en ligne de commande dans le répertoire C:wampwww
Exécuter la commande suivante: svn import monappli http://localhost:8036/svn/demosel/monappli -m "Import initial du projet"
Aux questions posés répondez par: votre mot de passe windows, admin et admin
Voilà les sources de notre application sont maintenant disponible sur notre server SVN. Pour les parcourir vous pouvez retourner sur l’interface collabNet de SNV (launch.html) et cliquer sur Repositories
et sur demosel
Pour des éditions et des synchronisations quotidienne du code source nous vous conseillons d’utiliser eclipse avec son plugin subclipse
Il nous sera utile pour la suite de transformer notre répertoire monappli en copie local de notre SVN
Pour cela faire: svn checkout http://localhost:8036/svn/demosel/monappli C:wampwwwmonappli --username=admin
Puis faire (pour que la copie distante prenne le dessus): svn revert C:wampwwwmonappli -R
Ainsi nous pourrons plus facilement pousser des modifications avec la commande svn commit
8) Utilisation de Jenkins pour lancer les tests à chaque modification des sources
Jenkins est un automate que nous allons pouvoir configurer pour qu’il lance notre script phing à chaque modification de source poussé sur notre serveur SVN.
Voir Tutoriel Intégration continue : installation Jenkins
Les fonctionnalités de Jenkins sont étendues par un grand nombre de plugins. Nous allons rajouter le plugin pour exécuter des scripts Phing
Faire: Administrer Jenkins > Gestion des plugins > Disponibles > cocher [Phing Plugin] > [Install Without Restart]
Faire ensuite: Administrer Jenkins > Configurer le système > [Ajouter Phing] > Nom: monPhing > Phing HOME: C:wampbinphpphp5.3.5 > [Enregistrer] > Command PHP: phing
Les tâches automatisés sont appelés des jobs dans le vocabulaire de Jenkins. Nous allons créer un job pour l’éxécution de notre test selenium.
Sur l’interface web faire: Nouveau Job > Nom du Job: sel_monappli_php > Construire un projet free-style > [OK]
Gestion de code source: Subversion > URL du repository: http://localhost:8036/svn/demosel/monappli
Enlever le point présent dans le champ Répertoire local du module
Ce qui déclenche le build: Scrutation de l’outil de gestion de version > Planning: * * * * *
De cette manière Jenkins scrutera toute les minute notre svn pour voir si il y a un changement de numéro de révision et déclenchera un build si c’est le cas
Malheureusement au moment de l’écriture de ce TP le plugin Phing a un bug bloquant, nous allons donc invoquer une commande windows à la place d’un target Phing
Build > [Ajouter une étape au build] > Exécuter une ligne de commande batch Windows > Commande: phing -buildfile monapplibuildbuild.xml
Maintenant que notre Job est configuré nous allons le lancer manuellement pour voir si il fonctionne. Dans le vocabulaire Jenkins l’exécution d’un job est appelé un build.
Cliquer sur Lancer un build
Si une boule bleu s’affiche alors votre build s’est bien déroulé. Sinon il y a la possibilité de voir la sortie console de ce build
Jenkins vous offre la possibilité d’exploiter le rapport construit par PHPUnit afin de l’afficher au format html sur la page d’accueil de votre job
En fait le fichier xml généré par PHPUnit, testsuites.xml, respecte la syntaxe du format JUnit. Nous allons donc rajouter ce type de rapport à la fin de notre build
Faire: [Add post-build action] > Publier le rapport des résultats des tests JUnit > XML des rapports de test: monappli/build/report/*.xml
Lancer ensuite 2 fois un build
Vous pourrez alors voir sur la page d’accueil de votre job l’évolution des résultats des tests unitaires de votre projet
Vous pouvez aussi cliquer sur cette courbe pour obtenir plus de détails
9) Utilisation du plugin Selenium Grid dans Jenkins
Nous allons ajouter à Jenkins le plugin Selenium Plugin
. Celui-ci va lui permettre de ce comporter comme un Selenium Grid.
Tout d’abord arrêter votre serveur Selenium RC
Faire : Jenkins > Administrer Jenkins > Gestion des plugins > Disponibles > cocher [Selenium Plugin] > [Install Without Restart]
Cliquer ensuite sur Jenkins > Selenium Grid
Vous pouvez observer un message vous indiquant que pour l’instant aucun Selenium RC n’a été enregistrer par notre Grid
Vous pouvez en effet installer des Selenium RC sur différent OS et les connecter à votre Selenium Grid
Dans ce tuto nous allons simplement resté sur la même machine
Ouvrez une console en tant qu’administrateur
Démarrer un Selenium RC comme noeud de votre Grid avec la commande: java -jar C:progselenium_remote_controlselenium-server-standalone-2.32.0.jar -role node -hub http://localhost:4444/grid/register
Sur l’interface Jenkins retourner à la consultation de votre Grid: Jenkins > Selenium Grid
Vous pouvez constater que plusieurs instances de navigateurs sont lancées. Vous pouvez aussi consulter l’url suivante: http://localhost:4444/grid/console
Lancer un build de votre job sel_monappli_php et garder un oeil sur votre Grid, vous pourrez voir que quand une instance est utilisé (in use) et quand elle est libéré
Vous pouvez modifier votre test afin qu’il utilise une série de navigateurs au lieu d’un seul : au lieu d’utiliser setBrowser() pour indiquer un seul navigateur, vous déclarez un tableau public static nommé $browsers dans votre classe de cas de test. Chaque élément de ce tableau décrit la configuration d’un navigateur.
Vous pouvez modifier votre test de la sorte:
public static $browsers = array(
array('name' => 'Firefox sur Windows', 'browser' => '*firefox',
'host' => 'localhost', 'port' => 4444, 'timeout' => 30000,
),
array(
'name' => 'Chrome sur Windows', 'browser' => '*googlechrome',
'host' => 'localhost', 'port' => 4444, 'timeout' => 30000,
),
array(
'name' => 'Internet Explorer sur Windows', 'browser' => '*iexplore',
'host' => 'localhost', 'port' => 4444, 'timeout' => 30000,
)
);
protected function setUp()
$this->setBrowserUrl("http://localhost/");
public function testMyTestCase()
$this->open("/monappli/index.php");
$this->click("link=Suprimmer la liste");
$this->waitForPageToLoad("30000");
$this->type("name=prenom", "toto");
$this->type("name=nom", "tata");
$this->click("css=input[type="submit"]");
$this->waitForPageToLoad("30000");
$this->assertTrue($this->isTextPresent("toto TATA"));
?>
Publiez ensuite cet modification sur SVN avec la commande: svn commit C:wampwwwmonappli -m "modif pour suite de browsers"
Si vous attendez une minute vous allez voir les tests s’exécuter automatiquement pour nos trois navigateurs
10) Faire des captures d’écran pour les tests qui échouent
Faire une capture d’écran pour un test qui échoue est relativement simple
Mais avant tout il nous faut un test qui échoue. Dans notre application d’exemple il y aura un plantage si on rajoute deux fois le même participant. Pour voir cela rajouter la fonction suivante dans le fichier ajoutTest.php:
public function testDuplication()
$this->open("/monappli/index.php");
$this->click("link=Suprimmer la liste");
$this->waitForPageToLoad("30000");
$this->type("name=prenom", "toto");
$this->type("name=nom", "tata");
$this->click("css=input[type="submit"]");
$this->waitForPageToLoad("30000");
$this->assertTrue($this->isTextPresent("toto TATA"));
$this->type("name=prenom", "toto");
$this->type("name=nom", "tata");
$this->click("css=input[type="submit"]");
$this->waitForPageToLoad("30000");
$this->assertTrue($this->isTextPresent("toto TATA"));
Lancer la commande suivante pour tester: phing -buildfile C:wampwwwmonapplibuildbuild.xml
Vous pourrez voir la ligne suivante:
[phpunit] Total tests run: 2, Failures: 0, Errors: 1, Incomplete: 0, Skipped: 0, Time elapsed: 10.08094 s
Rajouter un un répertoire dans le répertoire monappli afin qu’on puisse les stoker dedans
Rajouter ces 3 attributs dans la classe de notre fichier ajoutTest.php:
protected $captureScreenshotOnFailure = true;
protected $screenshotPath = 'C:wampwwwmonappliscreenshots';
protected $screenshotUrl = 'http://localhost/monappli/screenshots';
Relancer le test: phing -buildfile C:wampwwwmonapplibuildbuild.xml
Observer le fichier C:wampwwwmonapplibuildreporttestsuites.xml
Observer la capture d’écran: http://localhost/monappli/screenshots/
11) Utilisation de Webdriver pour faire une capture d’écran
Maintenant admettons que nous voulons faire une capture d’écran pour les tests qui réussissent. Comment fait-on?
Au niveau de l’utilisation classique de Selenium nous sommes limité de la même manière que le javascript: nous ne pouvons pas controller le navigateur, le clavier, la sourie…
Dans sa dernière version Selenium inclu Webdriver qui permet de faire ces choses de manière programmative
Nous allons maintenant tester la page suivante:
dragNdrop.html
Télécharger et ajouter ce fichier à ce chemin: C:wampwwwmonappli
Tester et analyser le code du fichier dragNdrop.html: Il y a un carré rouge qu’on peut glisser-poser sur un carré jaune qui devient bleu
Nous allons maintenant ajouter un test avec le fichier dragNdropTest.php:
dragNdropTest.php
Décomprésser et poser ce fichier dans C:wampwwwmonapplitest
Analyser le fichier dragNdropTest.php
Quelle est la classe dont on hérite? Est-ce la même que notre test précédant?
Quels sont les effets des méthodes moveto, buttondown et buttonup? Ce genre de méthodes sont-elles accessible avec du javascript?
A quoi servent les méthodes byId et byClassName? Qu’est-ce qui est testé avec la méthode assertEquals?
A quoi sert la méthode currentScreenshot?
Lancer en ligne de commande ce test: phpunit C:wampwwwmonapplitestdragNdropTest.php
Regarder maintenant la screenshot suivante: C:wampwwwmonappliscreenshotsoktestDragNdrop.png
Voilà, vous avez pu tester WebDriver en héritant de la classe PHPUnit_Extensions_Selenium2TestCase. Vous avez pu essayer les fonctionnalités de contrôle de la sourie (glisser-poser) et de capture d’écran
Vous pouvez trouver plus d’exemple d’utilisation de webdriver en regardant ce lien: https://github.com/sebastianbergmann/phpunit-selenium/blob/master/Tests/Selenium2TestCaseTest.php