• Home
  • Nous contacter

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab
Frontend

Réaliser des tests fonctionnels sur votre site avec Nightwatchjs

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.

citroen

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

26/02/2014 28 MIN READ BY: Nicolas LABBE 0 COMMENT
SHARE
LIRE LA SUITE

Nicolas LABBE

Si c’est stupide mais que ça marche, ce n’est pas stupide.

J'ai testé pour vous Drupal Commerce !

Industrialiser son environnement de développement

VOUS POURRIEZ AIMER

Frontend Context menu

Design Frontend Créer des SVG adaptés aux fonticons

Frontend UX La convergence des outils UX et développement frontend

Frontend Jeux Le cycle de vie d’un jeu

Frontend Parallax, du mouvement dans vos blocs !

Frontend Kevin Schaaf – Encapsulating the Web

A propos d’Adfab

Nous sommes un studio de production digitales et d’innovation digitales au service des agences et des annonceurs
Nous recherchons le scintillement dans les regards et le plaisir de réalisations sur-performantes
Nous sommes techno-agnostiques
Nous sommes Adfab

Le blog d'Adfab
Copyright © 2018 Adfab Connect