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.json oder in der Datei nightwatch.conf.js zum Stammvermögen des Projekts platziert werden. Produktionsumgebung. 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
schreiben 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
verbessernDurch 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)
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
