Tuto Selenium / PHP / Jenkins

////Tuto Selenium / PHP / Jenkins

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)

export_to_phpunit.png

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/
appli_php.png

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

test_ajout.png

 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:
ajoutTest_php.png

 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
RC_started.png

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

path_php.png

PEAR_PHP.png

 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
phing.png

 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
svn_import.png

 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
viewvc.png

 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

jenkins_JUnit.png

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
sel_node.png

 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é
sel_grid.png

 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
3_browsers.png

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/
screenshot.png

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

2018-02-01T06:53:05+01:00

Contactez nous

241 rue DUGUESCLIN, 69003 Lyon

Web : Objis : spécialiste formation Java