Aujourd’hui je voudrais vous présenter un nouveau petit venu dans le monde Javascript :  nightwatchjs. Le premier vrai commit sur le github du projet date d’un peu plus de 2 mois ! Nightwatchjs va vous permettre de réaliser des tests fonctionnels sur votre site sans peine avec l’aide de Selenium. Comme tout développeur, j’adore avoir des petits larbins (comme j’aime les surnommer) qui travaillent pour moi. Grâce à lui vous pourrez valider que votre site n’a pas subi de régression après avoir travaillé sur de nouvelles fonctionnalités.

Ce qui m’a surpris le plus avec nightwatch c’est la facilité d’installation et d’utilisation. Pour commencer il vous faut installer selenium, ne cherchez pas plus loin je l’ai fait pour vous, pour une installation sur votre poste en local, téléchargez l’archive suivante. Personnellement, vous me dites “selenium” je me dis qu’il va falloir installer plein de trucs sans comprendre ce que je fais. Mais en fait c’est simplissime à utiliser dans sa version standalone. Il vous suffit de décompresser l’archive puis de lancer votre console et d’entrer la commande suivante :

java -jar selenium-server-standalone-{VERSION}.jar

(Penser à remplacer “{VERSION}” par celle que vous avez téléchargée)

Que vous soyez sous Mac, linux ou windows, c’est fini pour selenium. Nous n’en parlerons plus. Alors c’était dur ?

Maintenant, au tour de nightwatch, so Let’s go to github, cloner le projet ou bien télécharger l’archive. Pour faire simple nous allons l’ajouter à un projet existant : Copier le dossier nightwatch-master a la racine du projet puis ajouter un fichier nommer nightwatch.js et package.json toujours a la racine.

Contenu du fichier nightwatch.js

require('./nightwatch-master/bin/runner.js');

Contenu du fichier package.json

{
    "src_folders": [
        "./tests"
    ],
    "output_folder": "../nightwatch/reports",
    "custom_commands_path": "",
    "selenium": {
        "start_process": false,
        "server_path": "",
        "log_path": "",
        "host": "127.0.0.1",
        "port": 4444
    },
    "test_settings": {
        "default": {
            "launch_url": "http://localhost",
            "selenium_host": "127.0.0.1",
            "selenium_port": 4444,
            "silent": true,
            "output": true,
            "firefox_profile": false,
            "chrome_driver": "",
            "screenshots": {
                "enabled": true,
                "path": ""
            },
            "desiredCapabilities": {
                "browserName": "firefox",
                "javascriptEnabled": true,
                "acceptSslCerts": true
            }
        }
    }
}

Ensuite nous allons écrire notre premier test

module.exports = {
   "Test moprojet" : function (browser)
   {
       browser
           .resizeWindow(1680, 1200)
           .url("http://monprojet.adfab.fr/fr")
           .waitForElementVisible("#main-wrapper", 1000)
           .saveScreenshot("./screenshot/jolievoiture.png")
           .end();
   }
};

Tous d’abord nous avons redimensionné notre navigateur soit :

browser.resizeWindow(1680, 1200)

Firefox s’ouvre puis redimensionne le navigateur à 1680x1200px , puis ouvre l’url  http://monprojet.adfab.fr/fr. Ensuite nous validons que la balise avec l’id “main-wrapper” est présente dans le DOM. Puis on enregistre notre image dans le dossier screenshot (je vous conseille de créer le dossier au préalable sinon notre assistant va mal faire son travail !). Puis nous allons fermer notre navigateur avec la fonction .end().

Enfin pour finir il vous reste à lancer la commande suivante

node nightwatch.js

Maintenant vous pouvez regarder le resultat  de votre test dans la console et bien sur dans le dossier screenshot qui contient notre fichier citroen.png.

Maintenant vous n’avez plus d’excuse pour ne pas faire de test fonctionnels. En bonus pour finir voici comment utiliser chrome au lieu de firefox. Pour cela il faut télécharger les webdriver pour chrome, je vous conseille de l’extraire dans le dossier contenant selenium. Ensuite changer la valeur de browserName dans le fichier settings.json par chrome au lieu de firefox. Il suffit maintenant de relancer selenium en utilisant cette commande

java -jar selenium-server-standalone-{VERSION}.jar -Dwebdriver.chrome.driver=chromedriver.exe