Test fonctionnel JavaScript avec Nightwatch.js

Eric Elliott a écrit un article sur les tests JavaScript: tests JavaScript: test unitaire, test fonctionnel et tests d'intégration, qui explique différents types de tests et quand utiliser quel test.

Cet article explorera plus en profondeur les tests fonctionnels JavaScript et démontrera à l'aide de la bibliothèque nightwatch.js.

Avant de commencer, passons en revue ce qu'est les tests fonctionnels et pourquoi il est important. Autrement dit, les tests fonctionnels sont conçus pour garantir que l'application fonctionne comme prévu du point de vue d'un utilisateur.

Nous ne parlons pas de tests techniques comme les tests unitaires ou les tests d'intégration. L'objectif ici est de s'assurer que les utilisateurs peuvent exécuter de manière transparente des scénarios spécifiques tels que la connexion à la plate-forme, l'achat de produits, etc.

Points clés

• Nightwatch.js est un framework de test de bout en bout basé sur Node.js. Il s'appuie sur le sélénium pour l'automatisation du navigateur Web, permettant à des scénarios scriptés d'être écrits puis exécutés automatiquement par le navigateur.
• nightwatch.js nécessite que Node.js soit installé sur la machine, et il s'appuie sur l'API Selenium WebDriver, qui nécessite le serveur WebDriver Selenium en cours d'exécution sur Java, de sorte que le kit de développement Java (JDK 7) doit être installé dans Java, donc le kit de développement Java (JDK 7) doit être installé dans Java, donc le kit de développement Java (JDK 7) doit être installé dans l'environnement de l'utilisateur.
La configuration de
• nightwatch.js peut être placée dans le fichier nightwatch.json ou le fichier nightwatch.conf.js à la racine du projet. Environnement de production.
• Nightwatch.js prend en charge les méthodes d'objet de la page qui enveloppent l'extrait de page ou de page testée dans l'objet pour résumer le HTML sous-jacent et la configuration commune, simplifiant le scénario et rendant la suite de test plus facile à maintenir.

nightwatch.js Introduction

Nightwatch.js se décrit comme un cadre de test de bout en bout basé sur Node.js. Il s'appuie sur Selenium, un projet conçu pour faciliter l'automatisation des navigateurs Web.

avec une syntaxe conviviale, Nightwatch.js peut "scripter" le scénario puis exécuté automatiquement par le navigateur (pas nécessairement non-casque).

Installation Nightwatch

Nightwatch lui-même est un module Node.js, ce qui signifie que vous devez installer Node.js sur votre machine. Le moyen le plus simple est d'utiliser un gestionnaire de version, comme NVM. Nightwatch est distribué sur NPM, vous pouvez donc l'installer comme si vous installeriez d'autres modules - l'installez à l'échelle mondiale avec -g ou l'installez dans le projet actuel en utilisant --save-dev.

npm install --save-dev nightwatch

Nightwatch s'appuie sur l'API Selenium WebDriver, il nécessite donc un serveur WebDriver Selenium. Il fonctionne sur Java, ce qui signifie que vous devez également installer le kit de développement Java (JDK 7) dans votre environnement. Vous pouvez télécharger le JDK à partir du site Web Oracle.

Une fois le téléchargement et l'installation terminée, vous pouvez utiliser java -version pour vous assurer que Java est disponible sur votre machine. La dernière étape consiste à télécharger le serveur autonome Selenium emballé sous forme de pot à partir de la page de téléchargement du sélénium. Je vous suggère de le mettre dans le dossier bin de votre projet.

npm install --save-dev nightwatch

D'accord, nous sommes prêts maintenant. Commençons.

Configuration Nightwatch

Comme vous pouvez l'imaginer, Nightwatch a de nombreuses configurations. Heureusement, nous n'avons pas à tout savoir pour commencer. La configuration peut être placée dans le fichier nightwatch.json ou le fichier nightwatch.conf.js dans le répertoire racine du projet. Je recommande d'utiliser ce dernier car il est plus flexible et vous permet d'ajouter des commentaires.

<code>your_project/
|
|– bin/
|   |– selenium-server-standalone-2.53.1.jar
|
`– package.json</code>

Remarque: Je pense personnellement qu'il est plus facile à lire lorsque le fichier de configuration est divisé en objets de configuration plus petits, et les fichiers JSON ne le permettent pas.

Dans ce cas, nous disons à Nightwatch que nos tests seront dans le dossier tests, en utilisant une configuration de sélénium spécifique et des paramètres de test spécifiques. Regardons-le un par un:

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

var FIREFOX_CONFIGURATION = {
  browserName: 'firefox',
  javascriptEnabled: true,
  acceptSslCerts: true
};

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

module.exports = {
  src_folders: ['tests'],
  selenium: SELENIUM_CONFIGURATION,
  test_settings: ENVIRONMENTS
};

Avec cet objet de configuration, nous disons à Selenium d'exécuter 127.0.0.1:4444, qui se trouve être la valeur par défaut de Nightwatch. Nous nous assurons également qu'il démarre automatiquement à l'aide du serveur Selenium que nous avons téléchargé et stocké dans le dossier bin.

Remarque: Pour une utilisation plus avancée, assurez-vous de consulter la liste de toutes les options de sélénium.

Continuez à la configuration du test réelle:

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

L'option

Nightwatch test_settings s'attend à un objet dont la clé est le nom de chaque environnement, mappé vers un autre objet de configuration. Dans ce cas, nous n'avons pas configuré un environnement personnalisé (pas encore), nous utilisons donc l'environnement par défaut. Plus tard, nous pouvons avoir un environnement de mise en scène ou de test de production.

Dans la configuration de l'environnement, nous disons à Nightwatch quelle URL s'ouvrir (par exemple, l'URL de l'environnement de mise en scène sera différente) et quel navigateur doit être utilisé pour exécuter le test.

Remarque: Pour une utilisation plus avancée, assurez-vous de consulter la liste de toutes les options de test.

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

Dans ce cas, nous utiliserons Firefox, activerons JavaScript et accepterons un certificat SSL. Nous pouvons aller plus loin et spécifier une version de navigateur spécifique (en utilisant version) ou un système d'exploitation (en utilisant platform).

Remarque: Pour une utilisation plus avancée, assurez-vous de consulter la liste de toutes les options de fonctionnalités.

D'accord, nous avons maintenant la bonne configuration. Il est temps d'écrire votre premier test!

Écriture du test Nightwatch

Pour nos tests, nous considérerons une page de connexion située à /login avec un champ de messagerie, un champ de mot de passe et un bouton de soumission. Après avoir soumis le formulaire, l'utilisateur doit être redirigé vers une page qui affiche le "flux d'actualités".

Dans notre configuration, nous spécifions que les tests sont situés dans un dossier nommé tests. Créons ce dossier tests et un fichier nommé login.js.

npm install --save-dev nightwatch

Ce fichier exportera un objet qui décrit notre scénario. Chaque clé (s'il y a plusieurs) est le nom du test, mappé à la fonction contenant les étapes à effectuer.

<code>your_project/
|
|– bin/
|   |– selenium-server-standalone-2.53.1.jar
|
`– package.json</code>

La fonction de test

expose un objet qui fournit l'API requis pour décrire la scène. La première chose à faire est de naviguer vers l'URL de connexion. Ensuite, remplissez les champs et appuyez sur le bouton. Enfin, vérifiez si nous pouvons voir le texte du "flux d'actualités".

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

var FIREFOX_CONFIGURATION = {
  browserName: 'firefox',
  javascriptEnabled: true,
  acceptSslCerts: true
};

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

module.exports = {
  src_folders: ['tests'],
  selenium: SELENIUM_CONFIGURATION,
  test_settings: ENVIRONMENTS
};

Remarque: Utilisez toujours .end() pour terminer la liste de commandes afin que la session de sélénium soit correctement fermée.

C'est très simple! Nous pouvons maintenant exécuter notre test pour voir si cela fonctionne:

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

Cela devrait nous donner un résultat comme ceci:

Remarque: Avec la sortie de Firefox 47, la version basée sur l'extension de Firefoxdriver a cessé de fonctionner. Ceci a été fixé dans Firefox 47.1 et Selenium 2.53.1. Pour exécuter des tests à l'aide d'un navigateur différent, consultez le wiki du projet.

La dernière chose que nous pouvons faire est d'éviter d'accéder au binaire Nightwatch à chaque fois, de créer un petit script NPM comme alias dans package.json:

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

Améliorer le test Nightwatch

Le fait d'avoir beaucoup de tests fonctionnels entraîne de nombreuses informations en double, ce qui fait la maintenance (oui, la suite de test nécessite également la maintenance). Pour éviter cela, nous pouvons utiliser l'objet de page .

Dans le monde des tests de bout en bout, l'approche de l'objet page est un modèle populaire qui implique d'envelopper la page (ou le fragment de page) à l'objet. L'objectif est de résumer le HTML sous-jacent et la configuration commune pour simplifier le scénario.

Heureusement, Nightwatch a un moyen facile de gérer les objets de page. La première chose que nous devons faire est d'ajouter l'option page_objects_path à la configuration. Je pense que tests/pages a du sens; cependant, vous pouvez spécifier tout dossier que vous souhaitez.

var FIREFOX_CONFIGURATION = {
  browserName: 'firefox',
  javascriptEnabled: true,
  acceptSslCerts: true
};

Maintenant, nous pouvons créer un fichier login.js dans ce dossier. Le nom de fichier sera utilisé comme clé pour récupérer toutes les configurations spécifiées dans ce fichier, donc je recommande de lui donner un nom significatif.

Dans ce fichier, nous spécifierons une URL et alias certains éléments HTML avec un nom convivial pour faciliter la rédaction de scénarios futurs.

<code>your_project/
|
|– bin/
|   |– selenium-server-standlone-2.53.1.jar
|
|– tests/
|   |– login.js
|
|- nightwatch.conf.js
`– package.json</code>

Veuillez noter que nous n'avons pas de URL codées en dur. Au lieu de cela, nous le rendons dépendants de l'option launchUrl définie dans la configuration de l'environnement. De cette façon, notre objet Page n'a pas de contexte et il fonctionne quel que soit l'environnement.

Modifier nos tests pour utiliser les objets de page est désormais très simple. Tout d'abord, nous devons récupérer la page de l'objet page via le client. Chaque objet de page est exposé en fonction du nom du nom du fichier de l'objet de page (par exemple login()).

Nous pouvons ensuite remplacer notre sélecteur CSS par notre alias et le préfixer par le symbole @ pour indiquer que nous faisons référence à un nom personnalisé. C'est ça.

npm install --save-dev nightwatch

Notez comment nous terminons la session sur le client lui-même, pas sur la page.

en utilisant plusieurs environnements

La capacité à exécuter des tests fonctionnels dans différents environnements est très utile pour garantir que le travail local ne casse aucun chemin utilisateur, ou que les environnements de mise en scène et de production fonctionnent de la même manière.

Pour exécuter des tests dans un environnement spécifique, nous pouvons utiliser l'option --env dans la CLI. Lorsque nous omettons cette option, l'environnement par défaut (déjà dans notre configuration) sera utilisé.

Ajoutons l'environnement de stadification à notre configuration.

<code>your_project/
|
|– bin/
|   |– selenium-server-standalone-2.53.1.jar
|
`– package.json</code>

Maintenant, lorsque nous exécutons le test, les options launch_url varieront en fonction de l'environnement.

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

var FIREFOX_CONFIGURATION = {
  browserName: 'firefox',
  javascriptEnabled: true,
  acceptSslCerts: true
};

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

module.exports = {
  src_folders: ['tests'],
  selenium: SELENIUM_CONFIGURATION,
  test_settings: ENVIRONMENTS
};

Résumé

Résumons tout cela. Nightwatch.js est un framework JavaScript pour rédiger des tests fonctionnels de bout en bout. Il s'appuie sur l'API Selenium WebDriver et est en mesure d'exécuter automatiquement différents navigateurs.

Les tests d'écriture implique principalement de définir des scénarios utilisateur typiques. À cette fin, il existe une API simple mais très complète.

d'ici, je vous laisse le laisser et vous encourager à commencer à écrire des tests fonctionnels pour votre plus grand projet pour vous assurer de ne plus jamais casser les fonctionnalités des utilisateurs!

Nightwatch.js FAQ (FAQ)

Quel est le but principal de Nightwatch.js dans les tests JavaScript?

Nightwatch.js est une solution d'application Web et de test de site Web puissante et facile à utiliser écrite dans Node.js. Il simplifie le processus de configuration de l'intégration continue et d'écriture de tests automatisés. Nightwatch.js peut également être utilisé pour écrire des tests unitaires Node.js. Il fournit une syntaxe propre qui vous permet d'écrire des tests rapidement, et il a un coureur de test de ligne de commande intégré qui vous permet d'exécuter des tests séquentiellement ou en parallèle, groupés ou autonomes.

Comment Nightwatch.js se compare-t-il aux autres cadres de test JavaScript?

Nightwatch.js se démarque en raison de sa simplicité et de sa facilité d'utilisation. Il a une syntaxe concise et claire qui rend les tests d'écriture moins compliqués. Contrairement à d'autres frameworks de test, Nightwatch.js est livré avec un coureur de test, aucun autre outil n'est requis. Il prend également en charge les sélecteurs CSS et XPath, ce qui le rend plus universel lorsqu'il s'agit de différents types d'éléments sur une page Web.

Nightwatch.js peut-il être utilisé pour des tests de bout en bout?

Oui, Nightwatch.js est un excellent outil pour les tests de bout en bout. Il vous permet d'écrire des tests qui simulent les interactions des utilisateurs avec votre application Web, garantissant que tous les composants fonctionnent ensemble comme prévu. Avec Nightwatch.js, vous pouvez simuler divers scénarios tels que la soumission de formulaire, la navigation de page et même les processus complexes.

Comment gérer les tests asynchrones?

Nightwatch.js utilise un mécanisme de rappel simple pour gérer les tests asynchrones. Chaque commande de test dans nightwatch.js s'exécute de manière asynchrone dans l'ordre défini. Le Runner Test attend que chaque commande se termine avant de continuer avec la commande suivante. Cela garantit que toutes les commandes sont exécutées dans le bon ordre, même si elles sont asynchrones.

Puis-je utiliser Nightwatch.js avec d'autres bibliothèques de test?

Oui, Nightwatch.js peut être utilisé avec d'autres bibliothèques de test. Il est conçu pour fonctionner de manière transparente avec d'autres bibliothèques comme Mocha, Jasmine et Qunit. Cela vous permet de profiter de plusieurs bibliothèques de tests pour créer une suite de test complète pour vos applications Web.

Comment définir Nightwatch.js pour mon projet?

La configuration de Nightwatch.js comprend plusieurs étapes. Tout d'abord, vous devez installer Node.js et NPM sur votre machine. Vous pouvez ensuite installer Nightwatch.js à l'aide de NPM. Une fois l'installation terminée, vous devez créer un fichier de configuration pour nightwatch.js où vous spécifiez vos paramètres et options de test. Après cela, vous pouvez commencer à écrire des tests.

Nightwatch.js peut-il être utilisé pour les tests croisés?

Oui, Nightwatch.js prend en charge les tests de croisement. Il s'intègre parfaitement à Selenium WebDriver, un outil pour les navigateurs automatisés. Cela signifie que vous pouvez rédiger des tests qui peuvent fonctionner sur plusieurs navigateurs à l'aide de Nightwatch.js pour vous assurer que votre application Web fonctionne correctement sur différentes plates-formes.

Comment déboguer les tests dans Nightwatch.js?

Nightwatch.js offre plusieurs options de test de débogage. Vous pouvez utiliser le débogueur intégré dans Node.js ou utiliser des outils externes comme Chrome Devtools. Nightwatch.js fournit également des messages d'erreur détaillés et des traces de pile pour faciliter l'identification et résoudre les problèmes lorsque les tests échouent.

Puis-je utiliser Nightwatch.js pour les tests mobiles?

Bien que Nightwatch.js soit principalement utilisé pour les tests Web, il peut également être utilisé pour les tests mobiles en intégrant avec Appium, un cadre de test mobile populaire. Cela vous permet d'écrire des tests pour des applications mobiles en utilisant la même syntaxe et les mêmes outils que les tests Web.

Comment exécuter des tests en parallèle à l'aide de Nightwatch.js?

Nightwatch.js prend en charge nativement l'exécution des tests parallèles. Vous pouvez spécifier les tests à exécuter en parallèle dans le fichier de configuration. Lorsque vous exécutez un test, Nightwatch.js attribue automatiquement les tests à plusieurs programmes de travailleurs, accélérant le temps d'exécution global des tests.

La sortie maintient le formatage et le placement d'image d'origine.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!