Eric Elliott hat einen Artikel über JavaScript -Tests geschrieben: JavaScript -Test: Unit -Tests, Funktionstests und Integrationstests, die verschiedene Arten von Tests und wann zu welcher Test verwendet werden.

In diesem Artikel werden JavaScript -Funktionstests ausführlicher untersucht und unter Verwendung der Nightwatch.js -Bibliothek demonstriert.

Bevor wir beginnen, lesen wir, was funktionale Tests sind und warum es wichtig ist. Einfach ausgedrückt, funktionale Tests sollen sicherstellen, dass die Anwendung aus Sicht eines Benutzers wie erwartet funktioniert.

Wir sprechen nicht über technische Tests wie Unit -Tests oder Integrationstests. Das Ziel hier ist es, sicherzustellen, dass Benutzer nahtlos bestimmte Szenarien wie Anmeldung in die Plattform, den Kauf von Produkten usw. ausführen k?nnen.

Schlüsselpunkte

• nightwatch.js ist ein End-to-End-Test-Framework, das auf Node.js.
• nightwatch.js erfordert, dass Node.js auf der Maschine installiert werden, und es stützt sich auf die Selenium WebDriver API, für die der Selenium -Webdriver -Server auf Java ausgeführt werden muss. Daher muss das Java Development Kit (JDK 7) installiert werden die Umgebung des Benutzers.
Die Konfiguration von
• nightwatch.js kann in der Datei nightwatch.json oder in der Datei nightwatch.conf.js zum Stammverm?gen des Projekts platziert werden. Produktionsumgebung.
• nightwatch.js unterstützt Seitenobjektmethoden, die die getestete Seite oder den Seitenausschnitt in das Objekt einwickeln, um die zugrunde liegende HTML und die gemeinsame Konfiguration abstrahieren, das Szenario vereinfachen und die Testsuite leichter aufrechterhalten.

nightwatch.js Einführung

nightwatch.js beschreibt sich selbst als End-to-End-Test-Framework basierend auf node.js. Es stützt sich auf Selen, ein Projekt zur Erleichterung der Automatisierung von Webbrowsern.

Mit benutzerfreundlicher Syntax k?nnen Nightwatch.js das Szenario "Skript" und dann automatisch vom Browser ausgeführt (nicht unbedingt nicht headlos).

Installation Nightwatch

Nightwatch selbst ist ein Node.js -Modul, was bedeutet, dass Sie Node.js auf Ihrem Computer installieren müssen. Der einfachste Weg ist die Verwendung eines Versionsmanagers wie NVM. Nightwatch ist auf NPM verteilt, sodass Sie sie so installieren k?nnen, wie Sie andere Module installieren würden. Installieren Sie es global mit -g oder installieren Sie es im aktuellen Projekt mit --save-dev.

npm install --save-dev nightwatch

Nightwatch basiert auf der Selenium -Webdriver -API, sodass ein Selenium WebDriver Server erforderlich ist. Es l?uft auf Java, was bedeutet, dass Sie auch das Java Development Kit (JDK 7) in Ihrer Umgebung installieren müssen. Sie k?nnen den JDK von der Oracle -Website herunterladen.

Nach dem Herunterladen und Installation k?nnen Sie java -version verwenden, um sicherzustellen, dass Java auf Ihrem Computer verfügbar ist. Der letzte Schritt ist das Herunterladen des Selenium Standalone Server, der als Glas auf der Selenium -Download -Seite verpackt ist. Ich schlage vor, Sie setzen es in den Ordner bin in Ihr Projekt ein.

npm install --save-dev nightwatch

Okay, wir sind jetzt bereit. Fangen wir an.

Konfiguration Nightwatch

Wie Sie sich vorstellen k?nnen, hat Nightwatch viele Konfigurationen. Glücklicherweise müssen wir nicht alles wissen, um loszulegen. Die Konfiguration kann in der Datei nightwatch.json oder in der Datei nightwatch.conf.js im Stammverzeichnis des Projekts platziert werden. Ich empfehle die Verwendung der letzteren, da es flexibler ist und Ihnen erm?glicht, Kommentare hinzuzufügen.

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

Hinweis: Ich pers?nlich denke, dass es einfacher zu lesen ist, wenn die Konfigurationsdatei in kleinere Konfigurationsobjekte aufgeteilt ist, und JSON -Dateien erlauben dies nicht.

In diesem Fall geben wir Nightwatch mit, dass unsere Tests im Ordner tests unter Verwendung einer bestimmten Seleniumkonfiguration und spezifischen Testeinstellungen stattfinden werden. Schauen wir es uns nacheinander an:

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
};

Mit diesem Konfigurationsobjekt sagen wir Selenium, dass er auf 127.0.0.1:4444 ausgeführt wird, was zuf?llig der Standardwert von Nightwatch ist. Wir stellen auch sicher, dass es automatisch mit dem von uns heruntergeladenen und gespeicherten Selenium -Server im Ordner bin verwendet wird.

Hinweis: Weitere Informationen finden Sie in der Liste aller Seleniumoptionen.

Fahren Sie mit dem tats?chlichen Test -Setup fort:

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

Nightwatch -Option test_settings erwartet ein Objekt, dessen Schlüssel der Name jeder Umgebung ist, die einem anderen Konfigurationsobjekt zugeordnet ist. In diesem Fall haben wir (noch nicht) eine benutzerdefinierte Umgebung eingerichtet, daher verwenden wir die Standardumgebung. Sp?ter k?nnen wir eine Staging- oder Produktionstestumgebung haben.

In der Umgebungskonfiguration sagen wir Nightwatch, welche URL ?ffnen soll (z. B. wird die URL für die Staging -Umgebung unterschiedlich sein) und mit welchem ??Browser der Test ausgeführt werden sollte.

Hinweis: Weitere Informationen finden Sie in der Liste aller Testoptionen.

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

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

In diesem Fall werden wir Firefox verwenden, JavaScript aktivieren und ein SSL -Zertifikat akzeptieren. Wir k?nnen einen Schritt weiter gehen und eine bestimmte Browserversion (mit version) oder einem Betriebssystem (mit platform) angeben.

Hinweis: Weitere Informationen finden Sie in der Liste aller Funktionsoptionen.

Okay, wir haben jetzt die richtige Konfiguration. Es ist Zeit, Ihren ersten Test zu schreiben!

Nachtwatch -Test

Für unsere Tests werden wir eine Anmeldeseite in /login mit einem E -Mail -Feld, einem Kennwortfeld und einer Sendetaste in Betracht ziehen. Nach dem Senden des Formulars sollte der Benutzer zu einer Seite umgeleitet werden, auf der "News -Feed" angezeigt wird.

In unserer Konfiguration geben wir an, dass sich die Tests in einem Ordner namens tests befinden. Erstellen Sie diesen tests Ordner und eine Datei mit dem Namen login.js.

npm install --save-dev nightwatch

Diese Datei exportiert ein Objekt, das unser Szenario beschreibt. Jeder Schlüssel (falls es mehrere gibt) ist der Name des Tests, der der Funktion, die die auszuführenden Schritte enth?lt, zugeordnet ist.

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

Testfunktion enth?lt ein Objekt, das die zur Beschreibung der Szene erforderliche API bereitstellt. Das erste, was zu tun ist, ist zur Navigation zur Anmelde -URL. Füllen Sie dann die Felder aus und drücken Sie die Taste. überprüfen Sie schlie?lich, ob wir den Text "Newsfeed" sehen k?nnen.

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
};

Hinweis: Verwenden Sie immer .end(), um die Befehlsliste zu beenden, damit die Selenium -Sitzung ordnungsgem?? geschlossen ist.

Das ist sehr einfach! Wir k?nnen jetzt unseren Test ausführen, um zu sehen, ob es funktioniert:

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

Dies sollte uns ein Ergebnis wie folgt geben:

Hinweis: Mit der Ver?ffentlichung von Firefox 47 hat die erweiterungsbasierte Version von FirefoxDriver aufgeh?rt zu arbeiten. Dies wurde in Firefox 47.1 und Selen 2.53.1 fixiert. überprüfen Sie das Wiki des Projekts, um Tests mit einem anderen Browser mithilfe eines anderen Browsers auszuführen.

Das Letzte, was wir tun k?nnen, ist zu vermeiden, dass er jedes Mal auf die Nachtwatch -Bin?rin zugreifen kann, ein kleines NPM -Skript als Alias ??in package.json:

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

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

Nightwatch -Test

Durch viele Funktionstests führt zu vielen doppelten Informationen, was die Wartung macht (ja, die Testsuite erfordert auch Wartung). Um dies zu verhindern, k?nnen wir das -Seitenobjekt verwenden.

In der End-to-End-Testwelt ist der Seitenobjektansatz ein beliebtes Muster, bei dem die Seite (oder das Seitenfragment) in das Objekt eingewickelt wird. Ziel ist es, die zugrunde liegende HTML und die gemeinsame Konfiguration abstrahieren, um das Szenario zu vereinfachen.

Zum Glück hat Nightwatch eine einfache M?glichkeit, Seitenobjekte zu verarbeiten. Das erste, was wir tun müssen, ist die Option page_objects_path der Konfiguration hinzuzufügen. Ich denke, tests/pages macht jedoch Sinn;

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

Jetzt k?nnen wir in diesem Ordner eine login.js Datei erstellen. Der Dateiname wird als Schlüssel zum Abrufen aller in dieser Datei angegebenen Konfigurationen verwendet. Ich empfehle daher, ihm einen aussagekr?ftigen Namen anzugeben.

In dieser Datei werden wir einige HTML -Elemente mit einem freundlichen Namen angeben, um das Schreiben zukünftige Szenarien zu erleichtern.

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

Bitte beachten Sie, dass wir keine hartcodierten URLs haben. Stattdessen stellen wir es von der in der Umgebungskonfiguration definierten launchUrl -Option ab. Auf diese Weise hat unser Seitenobjekt keinen Kontext und es funktioniert unabh?ngig von der Umgebung.

Die ?nderung unserer Tests zur Verwendung von Seitenobjekten ist jetzt sehr einfach. Zun?chst müssen wir die Seite vom Seitenobjekt über den Client abrufen. Jedes Seitenobjekt wird als eine Funktion freigelegt, die nach dem Dateinamen der Seitenobjektdatei benannt ist (z. B. login()).

Wir k?nnen dann unseren CSS -Selektor durch unseren Alias ??ersetzen und ihn mit dem Symbol @ vorfixieren, um anzuzeigen, dass wir uns auf einen benutzerdefinierten Namen beziehen. Das war's.

npm install --save-dev nightwatch

Beachten Sie, wie wir die Sitzung auf dem Client selbst beenden, nicht auf der Seite.

Verwenden Sie mehrere Umgebungen

Die F?higkeit, Funktionstests in verschiedenen Umgebungen auszuführen, ist sehr nützlich, um sicherzustellen, dass lokale Arbeiten keine Benutzerpfade brechen oder dass Staging- und Produktionsumgebungen auf die gleiche Weise funktionieren.

Um Tests in einer bestimmten Umgebung auszuführen, k?nnen wir die Option --env in der CLI verwenden. Wenn wir diese Option weglassen, wird die Standardumgebung (bereits in unserer Konfiguration) verwendet.

Fügen wir der Staging -Umgebung unserer Konfiguration hinzu.

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

Wenn wir jetzt den Test ausführen, variieren die launch_url -Optionen je nach Umgebung.

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
};

Zusammenfassung

Lassen Sie uns das alles zusammenfassen. NightWatch.js ist ein JavaScript-Framework zum Schreiben von End-to-End-Funktionstests. Es basiert auf der Selenium WebDriver API und kann verschiedene Browser automatisch ausführen.

Das Schreiben von Tests beinhaltet haupts?chlich die Definition typischer Benutzerszenarien. Zu diesem Zweck gibt es eine einfache, aber sehr vollst?ndige API.

Von hier aus überlasse ich es Ihnen und ermutigen Sie, funktionale Tests für Ihr gr??tes Projekt zu schreiben, um sicherzustellen, dass Sie die Benutzerfunktionen nie wieder brechen!

nightwatch.js faq (faq)

Was ist der Hauptzweck von Nightwatch.js bei JavaScript -Tests?

nightwatch.js ist eine leistungsstarke und benutzerfreundliche Webanwendungs- und Website-Testl?sung, die in node.js. Es vereinfacht den Prozess der Einrichtung kontinuierlicher Integration und des Schreibens automatisierter Tests. NightWatch.js kann auch zum Schreiben von Node.js -Unit -Tests verwendet werden. Es bietet eine saubere Syntax, mit der Sie Tests schnell schreiben k?nnen. Es verfügt über einen integrierten Befehlszeilen-Testl?ufer, mit dem Sie Tests nacheinander oder parallel, gruppiert oder eigenst?ndig ausführen k?nnen.

Wie vergleichen Nightwatch.js mit anderen JavaScript -Test -Frameworks?

nightwatch.js sticht aufgrund seiner Einfachheit und Benutzerfreundlichkeit auf. Es hat eine kurze und klare Syntax, die das Schreiben von Tests weniger kompliziert macht. Im Gegensatz zu anderen Test -Frameworks wird Nightwatch.js mit einem Testl?ufer ausgestattet. Es sind keine anderen Tools erforderlich. Es unterstützt auch CSS- und XPath -Selektoren und macht es universeller, wenn es sich um verschiedene Arten von Elementen auf einer Webseite handelt.

Kann Nightwatch.js für End-to-End-Tests verwendet werden?

Ja, Nightwatch.js ist ein hervorragendes Werkzeug für End-to-End-Tests. Sie k?nnen Tests schreiben, die die Interaktionen der Benutzer mit Ihrer Webanwendung simulieren und sicherstellen, dass alle Komponenten wie erwartet zusammenarbeiten. Mit Nightwatch.js k?nnen Sie verschiedene Szenarien wie Formulare, Seitennavigation und sogar komplexe Prozesse simulieren.

Wie kann man mit asynchronen Tests umgehen?

nightwatch.js verwendet einen einfachen Rückrufmechanismus, um asynchrone Tests zu behandeln. Jeder Testbefehl in Nightwatch.js wird asynchron in der definierten Reihenfolge ausgeführt. Der Testl?ufer wartet darauf, dass jeder Befehl abgeschlossen ist, bevor er den n?chsten Befehl fortsetzt. Dies stellt sicher, dass alle Befehle in der richtigen Reihenfolge ausgeführt werden, auch wenn sie asynchron sind.

Kann ich Nightwatch.js mit anderen Testbibliotheken verwenden?

Ja, Nightwatch.js kann mit anderen Testbibliotheken verwendet werden. Es ist so konzipiert, dass es nahtlos mit anderen Bibliotheken wie Mokka, Jasmine und Qunit zusammenarbeitet. Auf diese Weise k?nnen Sie mehrere Testbibliotheken nutzen, um eine umfassende Testsuite für Ihre Webanwendungen zu erstellen.

Wie kann ich Nightwatch.js für mein Projekt festlegen?

Einrichten von nightwatch.js enth?lt mehrere Schritte. Zuerst müssen Sie Node.js und NPM auf Ihrem Computer installieren. Sie k?nnen dann NightWatch.js mit NPM installieren. Nach Abschluss der Installation müssen Sie eine Konfigurationsdatei für nightwatch.js erstellen, in der Sie Ihre Testeinstellungen und -optionen angeben. Danach k?nnen Sie mit dem Schreiben von Tests beginnen.

Kann Nightwatch.js für Cross-Browser-Tests verwendet werden?

Ja, Nightwatch.js unterstützt Cross-Browser-Tests. Es integriert nahtlos in Selenium WebDriver, ein Tool für automatisierte Browser. Dies bedeutet, dass Sie Tests schreiben k?nnen, die auf mehreren Browsern mit nightwatch.js ausgeführt werden k?nnen, um sicherzustellen, dass Ihre Webanwendung auf verschiedenen Plattformen ordnungsgem?? funktioniert.

Wie kann man Tests in nightwatch.js debuggen?

nightwatch.js bietet mehrere Debugging -Testoptionen. Sie k?nnen den integrierten Debugger in node.js verwenden oder externe Tools wie Chrome Devtools verwenden. NightWatch.js bietet auch detaillierte Fehlermeldungen und Stapelspuren, um die Identifizierung und Behebung von Problemen zu erleichtern, wenn Tests fehlschlagen.

Kann ich Nightwatch.js für mobile Tests verwenden?

W?hrend nightwatch.js haupts?chlich für Webtests verwendet wird, kann es auch für mobile Tests verwendet werden, indem Sie in Appium, ein beliebtes mobiles Test -Framework, integriert werden. Auf diese Weise k?nnen Sie Tests für mobile Anwendungen mit derselben Syntax und Tools wie Webtests schreiben.

Wie fahre ich parallel mit nightwatch.js aus?

nightwatch.js unterstützt nativ parallel Testausführung. Sie k?nnen die Tests angeben, die in der Konfigurationsdatei parallel ausgeführt werden sollen. Wenn Sie einen Test ausführen, weist Nightwatch.js die Tests automatisch mehreren Arbeiterprogrammen zu und beschleunigt die gesamte Testausführungszeit.

Die Ausgabe beibeh?lt die Originalbildformatierung und -Position.

Das obige ist der detaillierte Inhalt vonJavaScript -Funktionstests mit nightwatch.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!