Premier pas dans WP-Browser/Codeception – Webdriver

ParJohan Maïa

Premier pas dans WP-Browser/Codeception – Webdriver

Pour tester un plugin WordPress, j´ai décidé d´utiliser le projet Codeception pour WordPress. Le projet Github à utiliser se nomme  wp-browser.

J´ai utilisé la version datant du 6 juin 2018 ( pas trouvé de numéro de version ).

Une fois l´installation faite, ne connaissant pas le fonctionnement des outils tels que Selenium ou PhantomJS, je pensais que les tests tournaient sur PhantomJS en ayant fait les étapes suivantes :

  •  placé phantomjs.exe dans le dossier vendor/bin
  • complété dans .env la variable PHANTOMJS comme ceci :

    PHANTOMJS="vendor/bin/phantomjs"
    

Je pensais que le framework utilisé la configuration du fichier : phantomjs.suite.dist.yml

En réalité, lorsque je lançais mes tests d´acceptance, Codeception utilisait le fichier : acceptance.suite.dist.yml où il est écrit ceci :

config :
    WPBrowser:
       url: '%WP_URL%'
       adminUsername: 'admin'
       adminPassword: 'admin'
       adminPassword: 'admin'
       adminPath: '/wp-admin'

Les tests étaient lancés donc via WPBrowser qui étend PHPBrowser. Il n´y avait donc pas de possibilité de tester de javascript par exemple. Il faut donc remplacer dans  acceptance.suite.dist.yml WPBrowser par un WPWebDriver.

Codeception propose plusieurs solutions pour ajouter un Webdriver : voir ici

Mais il me semble nécessaire de donner plus de détails si on est comme moi un débutant en la matière.

Le serveur PhantomJS

Avantages :

  • C´est rapide car pas d´affichage écran, tout est en console (headless)

Inconvénients :

Démarrer le serveur

En faite les étapes (en détail) sont les suivantes :

  1. Télécharger phantomjs-2.1.1-windows.zip ici, vous le dézippez et placez le phantomjs.exe dans le dossier vendor/bin du projet wp-browser
  2. Lancer la commande phantomjs --webdriver=4444 via un terminal après s´être placé dans le dossier vendor/bin où se trouve phantomjs.exe. Pour info, avec PhpStorm comme IDE, il suffit de cliquer droit sur phantomjs.exe et cliquer sur « run cmd shell » puis lancer la commande. Le serveur est ainsi lancé ! La preuve étant l´affichage de cette ligne :
    [INFO - 2018-07-06T17:41:57.373Z] GhostDriver - Main - running on port 4444
  3. Ajoutez dans .env
    PHANTOMJS="bin/vendor/phantomjs"

Vous pouvez désormais lancer vos tests d´acceptance.

Le serveur Sélénium

Avantages :

  • Accès à des fonctions javascript liés à la fenêtre d´affichage.

Inconvénients :

  • Le programme de tests est plus lent.
  • C´est la misère pour les compatibilités entre les pilotes et les versions de Sélénium

Démarrer le serveur

Dans ce cas c´est un peu plus compliqué. Sélénium nécessite plus d´outils.

Il va vous falloir :

  • Java installé (JRE)
  • JDK installé (vous pouvez ici installer directement le JDK qui installera le JRE)
  • Avoir ajouté la variable d´environnement dans le PATH (ça c´est sur windows)

Remarque : si vous utilisez le terminal de Phpstorm et que vous venez d´installer JAVA, il va falloir redémarrer jetBrains Toolbox pour que la commande « java » puisse être reconnu.

Puis :

  1. Télecharger le serveur Sélénium standalone (choisissez une version supérieur ou égale à 3.11, sinon vous perdez la compatibilité avec le pilote gecko )
  2. Télecharger les pilotes chromedriver.exe et geckodriver.exe
  3. Les trois fichiers (pour les pilotes, faut les dézipper bien entendu), peuvent être placés dans le dossier vendor/bin/ du projet wp-browser (comme pour phantomjs)
  4. Une fois, les fichiers au bonne endroit, ouvrez le terminal, placez vous au niveau du dossier bin/ puis lancer la commande : java -jar -Dwebdriver.gecko.driver=geckodriver.exe selenium-server-standalone-3.13.0.jar si vous voulez utiliser firefox. ou java -jar -Dwebdriver.chrome.driver=chromedriver.exe selenium-server-standalone-3.13.0.jar pour chrome.

Il se peut que vous ayez pas mal de problèmes à ce stade-ci dû en partie à cause des incompatibilités entre les versions de Sélénium et les pilotes geckodriver et chromedriver. Pour ma part, la version sélénium 3.13 est incompatible avec la version 0.21.0 de geckodriver. Impossible dans les tests de sélectionner des éléments dans la page. Avec chromedriver, j´ai réussi après plusieurs heures en associant la version 2.40 avec sélénium 3.13.

 En savoir plus :

Erreur 1 rencontrée

Au lancement de vos tests, si vous optenez cette erreur :

[ConnectionException] Can't connect to Webdriver at http://127.0.0.1:4444/wd/hub. Please make sure that Selenium Server or PhantomJS is running.

C´est que vous devez lancer un serveur.

Erreur 2 rencontrée

Lorsqu´au lancement de vos tests, vous rencontrez cette erreur :

[Facebook\WebDriver\Exception\UnknownServerException]
Error communicating with the remote browser. It may have died.

L´une des raisons peut-être une mauvaise version de chromedriver.exe, mais aussi, une mauvaise configuration. Dans acceptance.suite.dist.yml WPBrowser,

window_size: false # au lieu de '1024x768' qui n´est pas supporté.

Erreur 3 rencontrée

Au lancement du serveur Sélénium, si vous rencontrez cette erreur :

Exception in thread "main" com.beust.jcommander.ParameterException: Unknown option: -Dwebdriver.chrome.driver=chromedriver.exe

Il est fort possible que c´est parce que le paramètre du webdriver dans la ligne de commande doit être avant selenium-server-standalone-3.13.0.jar, pas après.

Erreur 4 rencontrée

Lorsque l´on utilise le chromedriver.exe avec selenium 3.13 et que l´on obtient au lancement des tests ceci :

[Facebook\WebDriver\Exception\UnknownServerException]

java.net.ConnectException: Connection refused: connect

De mon côté, c´était un problème de version du pilote chromedriver. La version 2.40 est compatible avec le selenium 3.13.

 

À propos de l’auteur

Johan Maïa administrator

Laisser un commentaire