Share
Das gründliche Testen einer von Ihnen erstellten Website ist genauso wichtig wie die Entwicklung einer Website.
Nehmen wir an, Ihr Unternehmen hat eine E-Commerce-Website erstellt. Wenn Sie gerade die Schaltfläche "Jetzt kaufen" für die Elektronikkategorie getestet haben und dies funktioniert hat, könnte es sein, dass dies auch für alle anderen Kategorien gilt. Was wäre, wenn Sie später herausfanden, dass ein Fehler die Benutzer daran hindert, für alle Produkte der Fitness-Kategorie auf die Schaltfläche "Jetzt kaufen" zu klicken? So etwas wird definitiv die Einnahmen des E-Commerce-Unternehmens beeinträchtigen. Es geht auch nicht nur um die Einnahmen; es beeinflusst auch den Ruf des Unternehmens. Benutzer können den Besuch Ihrer Website zugunsten der Konkurrenz völlig vermeiden.
Entwickler und Unternehmen vermeiden es manchmal, ihre Website gründlich zu testen, weil es zwei wesentliche Einschränkungen gibt: Zeit und Geld. Selbst wenn Sie alle möglichen Tests für Ihre Website auf einem einzigen Gerät durchgeführt haben, kann nicht garantiert werden, dass dies auch auf jedem anderen Gerät funktioniert. Es gibt viele Faktoren wie Browser, Betriebssystem und Bildschirmgröße, die berücksichtigt werden müssen. Darüber hinaus tauchen immer wieder neue Geräte mit unterschiedlichen Bildschirmgrößen und -funktionen auf. Das Testen von über tausend Kombinationen von Browsern, Betriebssystemen und Bildschirmgrößen ist ebenfalls zeitaufwändig. Daher testen viele Unternehmen ihre Websites nicht so gründlich, wie sie sollten.
CrossBrowserTesting kann beide Probleme sehr elegant lösen. Mit diesem Service können Sie automatisierte Tests auf über 1.500 realen Desktop- und mobilen Geräten ausführen, ohne dabei den Komfort Ihres Hauptbrowsers für die Entwicklung zu beeinträchtigen. Das Debugging erfolgt remote, aber Sie können mit Websites genauso interagieren, wie es ein echter Benutzer tun würde. Der Prozess ist nicht mehr so zeitaufwändig wie früher, da Sie alle diese Tests parallel ausführen können.
Dieses Tutorial hilft Ihnen beim Einstieg in CrossBrowserTesting und zeigt Ihnen, wie Sie automatisierte Tests auf Tausenden von Geräten parallel ausführen. Melden Sie sich für eine kostenlose Testversion an, um den Rest des Tutorials zu verfolgen.
Mocha ist reich an Funktionen und eines der beliebtesten asynchronen JavaScript-Testframeworks für Node.js. Sie können mehrere Tests seriell ausführen, was zu einer genauen Berichterstellung und Zuordnung nicht erfasster Ausnahmen führt, um Testfälle zu korrigieren. Der Rahmen liefert uns mit Vor, nach dem, vor jedem, und nach jedem Haken Mit diesen Hooks können Sie einige Voraussetzungen für die Tests einrichten und die Umgebung bereinigen, nachdem Sie einen Test ausgeführt haben.
Während Mocha Ihnen beim Schreiben von Tests helfen kann, benötigen Sie die Hilfe einer Assertionsbibliothek, um zu überprüfen, ob die Testergebnisse Ihren Erwartungen entsprechen. Wir werden Chai in diesem Tutorial verwenden. Die Assertionsbibliothek ist sehr flexibel und ermöglicht Ihnen die Auswahl einer Schnittstelle Ihrer Wahl zum Testen der Ergebnisse. Es liegt an Ihnen zu verwenden sollte(), erwarten von(), oder behaupten() Stil Behauptungen.
Mit Mocha und Chai können alle Arten von Tests ausgeführt und die resultierenden Werte überprüft werden. Wenn Sie Tests durchführen müssen, um beispielsweise zu überprüfen, ob ein Array ein bestimmtes Element enthält, sind diese beiden Werkzeuge ausreichend. Wir sind jedoch daran interessiert, anspruchsvollere Tests durchzuführen, z. B. ob ein Anmeldeversuch erfolgreich war oder ob die Benutzer ihren Benutzernamen aktualisieren können usw. Dies erfordert die Installation von Selenium WebDriver. Mit Selenium WebDriver können wir viele Dinge automatisieren, vom Klicken auf Links und Schaltflächen bis zum Ausfüllen eines Formulars.
Wenn Sie ein grundlegendes Verständnis für diese Tools haben, ist der schwierige Teil vorbei. Das Schreiben automatisierter Tests für CrossBrowserTesting ist einfach. Ich gehe davon aus, dass Sie bereits Node.js installiert haben.
Wechseln Sie in Ihr Projektverzeichnis und führen Sie die folgenden Befehle aus:
npm install mocha --save-dev npm install chai --save-dev npm install selenium-webdriver --save-dev
Erstellen Sie nach der Installation aller Pakete einen Ordner mit dem Namen Prüfung in Ihrem Projektordner. Dieser Ordner enthält alle unsere Testdateien. Erstellen Sie zunächst eine Datei mit dem Namen github.js im Testordner. Schreiben Sie den folgenden Code hinein github.js.
Accentsconagua
var webdriver = required ('selenium-webdriver'); var assert = required ('chai'). assert; var remoteHub = 'http://hub.crossbrowsertesting.com:80/wd/hub'; var username = '[email protected]'; var authkey = 'yourAuthKey'; var caps = name: 'GitHub Search', build: '1.0.0', browserName: 'MicrosoftEdge', Version: '15', Plattform: 'Windows 10', screen_resolution: '1366x768', record_video: 'true', record_network: 'true', Benutzername: Benutzername, Passwort: Authkey; beschreiben ("Suche nach GitHub nach Mocha"), function () this.timeout (5 * 1000 * 60); var driver = new webdriver.Builder () .usingServer (remoteHub) .withCapabilities (caps) .build (); before ( function setupWebdriver (done) driver.get ("https://github.com/search/advanced") .then (done)); it ("Mochajs sollte das Top-Ergebnis sein"), function (done) var inputField = driver.findElement (webdriver.By.css (". search-form-fluid .search-page-input")); inputField.click () .then (function () inputField.sendKeys ("Mocha"); driver.findElement (webdriver.By.css ("# search_form button")). click () .then (function () return driver.wait (webdriver.until.elementLocated (webdriver.By.css (". repo.) -list h3 a ")), 10000)) .then (Funktion (Element) return element.getText ();) .then (Funktion (Text) assert.deepEqual (Text," mochajs / mocha "); ) .then (done);); it ("Sollte nach dem Laden der Repository-Seite eine Anmeldeaufforderung anzeigen"), Funktion (done) driver.findElement (webdriver.By.css (". repo-list h3 a") )). click (). dann (Funktion ( ) return driver.wait (webdriver.until.elementLocated (webdriver.By.css (". signup-prompt h3.pt-2")), 10000)) .then (function (element) return element.getText ( ); ) .then (Funktion (Text) assert.deepEqual (Text, "Heute GitHub beitreten");); driver.findElement (webdriver.By.css ("Formular-Schaltfläche für die Anmeldeaufforderung")). click () .then (done); ); after (Funktion quitWebdriver (done) driver.quit () .then (done);); );In dem obigen Code sollten Sie ersetzen Ihre.Email.Adresse mit der E-Mail-Adresse, mit der Sie sich für Ihre kostenlose Testversion angemeldet haben. Ebenso müssen Sie Ihren eigenen Autorisierungsschlüssel von der Kontoseite erhalten. Kopieren Sie diesen Schlüssel und fügen Sie ihn anstelle von ein IhrAuthKey.
Das Kappen Mit object werden verschiedene Konfigurationsoptionen für den Test angegeben. Sie können Ihren Test ein geben Name und ein bauen Nummer, um es zu identifizieren. Das browserName Mit property wird der Name des Browsers angegeben, in dem Sie die Tests ausführen möchten. Sie können auch eine angeben Ausführung für den Browser, aber es ist optional. Wenn nichts angegeben ist, wird die neueste Browserversion verwendet.
Informationen zu allen Eigenschaften und ihren gültigen Werten finden Sie im Artikel mit dem Titel Selenium-Automatisierungsfunktionen. Sie sollten diese Seite sorgfältig lesen, um alle automatischen Testfunktionen von Selenium voll ausnutzen zu können. CrossBrowserTesting bietet auf der Homepage der Automatisierung einen Funktionskonfigurator.
Nachdem Sie geeignete Werte für unsere Testparameter festgelegt haben, können wir die Tests schreiben, die wir ausführen möchten. Jeder Testsatz, den Sie ausführen möchten, ist in einem eingeschlossen beschreiben Block. In der beschreiben Block haben wir ein Timeout für verschiedene Tests festgelegt und ein Webdriver-Objekt erstellt, auf das jeder Test im Block zugreifen kann.
Im nächsten Schritt haben wir die verwendet Vor Hook, um auf die GitHub-Suchseite zuzugreifen, bevor Sie die Tests in der es Blöcke. Der Code im Inneren Vor wird nur einmal ausgeführt, was ich in meinem Fall tun möchte. Wenn Sie jedoch nach jedem erfolgreichen Test nach einem neuen Begriff suchen möchten, müssen Sie immer wieder zur Suchseite zurückkehren. Verwenden Sie in solchen Situationen a vor jedem Haken macht mehr Sinn. Sie können diesen Hook verwenden, um Daten wie Cookies zurückzusetzen, die nicht zwischen Sitzungen bestehen sollen.
Der eigentliche Test geht in die es Blöcke. Im ersten Test identifizieren wir das Eingabefeld mit einem CSS-Selektor und setzen dann seinen Wert auf "Mocha". Danach klicken wir auf die Suchschaltfläche und warten, bis der Fahrer einen vom Selector identifizierten Link finden kann .Repo-Liste h3 a. Wir prüfen den Text in diesem Element, um zu sehen, ob er übereinstimmt Mochajs / Mokka. Der Test in der Sekunde es Der Block wird beim ersten Test fortgesetzt und klickt auf den Link, um das GitHub-Repository aufzurufen.
Der Code in der nach dem Block wird ausgeführt, nachdem wir die Tests in allen ausgeführt haben es Blöcke. Stellen Sie sicher, dass Sie anrufen driver.quit () im After-Block, sonst bleibt die Sitzung standardmäßig für 10 Minuten geöffnet.
Möglicherweise möchten Sie während des Tests zu verschiedenen Zeitpunkten Momentaufnahmen machen, um die Ergebnisse mit anderen zu teilen. Dies kann durch Aufrufen der API erfolgen. Weitere Informationen zu diesem Thema finden Sie im CrossBrowserTesting-Beitrag zum Ausführen automatisierter Browsertests mit Selenium und JavaScript.
Nach dem Erstellen der obigen Testdatei können Sie die Tests auf dem Gerät und dem Browser Ihrer Wahl ausführen, indem Sie den folgenden Befehl in die Konsole aus dem Projektverzeichnis eingeben:
Mokka-Test / github.js
Wenn alles wie erwartet funktioniert, können Sie die Testergebnisse in Ihrem CrossBrowserTesting-Konto hier sehen. Ich habe das Video heruntergeladen, das nach dem Ausführen dieses Tests mit meinem Konto erstellt wurde. Sie sollten auch etwas ähnliches sehen.
Das Gute an CrossBrowserTesting ist, dass Sie es leicht in Ihre bevorzugten Tools integrieren können, um Tests schneller zu schreiben und Frameworks zu verwenden, mit denen Ihr Team bereits vertraut ist.
In diesem Abschnitt schreiben wir einige Tests mit WebdriverIO. Grundsätzlich werden lediglich Anforderungen an einen Selenium-Server gesendet und die Antwort verarbeitet. Mit dem Framework können Sie asynchrone Befehle synchron schreiben, so dass Sie sich nicht um Versprechen und Rennbedingungen sorgen müssen. Sie können die API-Dokumente lesen, um weitere Informationen zum Framework zu erhalten.
Fangen wir jetzt an, unsere Tests zu schreiben. Dieses Mal versuchen wir, uns bei einem Konto anzumelden, das ich auf Pixabay erstellt habe. Wir werden wissentlich falsche Anmeldeinformationen bereitstellen, um zu testen, ob die Website uns erlaubt. Beim nächsten Mal werden wir die richtigen Anmeldeinformationen verwenden und überprüfen, ob wir angemeldet sind.
Bevor Sie fortfahren, müssen Sie WebdriverIO mit dem folgenden Befehl installieren:
npm install webdriverio --save-dev
Erstellen Sie nun eine Datei in der Prüfung Ordner und benennen Sie es pixabay.js. Die Datei sollte den folgenden Code enthalten:
var webdriverio = required ('webdriverio'); var assert = required ('chai'). assert; var username = '[email protected]'; var authkey = 'yourAuthKey'; var devices = [browserName: 'Chrome', Plattform: 'Windows 10', Browsername: 'Firefox', Plattform: 'Windows 7', BrowserName: 'Internet Explorer', Plattform: 'Windows 7 64 -Bit ',, browserName:' Safari ', Plattform:' Mac OSX 10.9 ',]; devices.forEach (function (device) var options = gewünschteCapabilities: Name: 'Pixabay Log-In-Test (Mehrere Geräte)'), Build: '1.0', Plattform: device.platform, browserName: device.browserName, screen_resolution: ' 1366x768 ', record_video:' true ', record_network:' true ', Host: "hub.crossbrowsertestinging.com", Port: 80, Benutzer: Benutzername, Schlüssel: Authkey beschreiben (' Logging in Pixabay ', function () this.timeout (5 * 60 * 1000); var client; before (function () client = webdriverio.remote (options); return client.init ();); it ('Falsche Anmeldeinformationen sollten die Anmeldung verhindern', function () return client .url ('https://pixabay.com/de/accounts/login/') .setValue ('# id_username', 'pixa_username') .setValue ('# id_password', 'wrong_pixa_password') .click ('# sign_in_out input.pure-button') .getText ('ul.errorlist li') .then (Funktion (Ergebnis) assert.equal (Ergebnis: 'Bitte geben Sie einen korrekten Benutzernamen und ein Passwort ein. Beachten Sie die beiden Felder Groß- und Kleinschreibung kann beachtet werden. '););); it (' Sollte sich mit rechts anmelden können. C redentials ', function () return client .url (' https://pixabay.com/de/accounts/login/ ') .setValue (' # id_username ',' pixa_username ') .setValue (' # id_password ',' correct_pixa_password ') .click (' # sign_in_out input.pure-button ') .getText (' # my_images a.pure-button ') .then (function (result) assert.equal (Ergebnis,' Upload images '); ); ); after (function () return client.end ();); ); );Nachdem Sie den Code im vorherigen Abschnitt ausgeführt haben, sollte dies sehr vertraut aussehen. Ersetzen Sie wie im vorherigen Beispiel Ihre.Email.Adresse und IhrAuthKey mit Ihrer CrossBrowserTesting-E-Mail-Adresse und Ihrem Authentifizierungsschlüssel.
Um die Anmeldeseite zu testen, können Sie entweder ein eigenes Pixabay-Konto erstellen oder sich bei anderen Websites anmelden. Denken Sie daran, dass Sie die richtigen Eingabefelder und Schaltflächen mit verschiedenen Selektoren auswählen können.
Ein wichtiger Unterschied besteht diesmal darin, dass wir ein Array von Konfigurationsobjekten erstellt haben, und wir können jedes einzelne Objekt durchlaufen, um dieselben Tests auf mehreren Geräten auszuführen. Dies kann Ihnen und Ihrem Team viel Zeit sparen. Sie müssen die Tests nur einmal schreiben und dann auf beliebig vielen Geräten ausführen. Mit CrossBrowserTesting können Sie Videoaufzeichnungen all Ihrer automatisierten Tests anzeigen. Auf diese Weise können Sie leicht erkennen, was mit einem bestimmten Gerät und Browser schief gelaufen ist.
Die Möglichkeit, Ihre Website auf über 1.500 verschiedenen Geräten aus der Ferne zu testen, ist erstaunlich. Sie müssen sich keine Sorgen mehr um den Verlust von Kunden machen, da Ihre Website auf einem Gerät, das Sie vergessen haben oder nicht testen konnten, nicht wie erwartet funktioniert. Die große Anzahl von Geräten, die CrossBrowserTesting zur Verfügung stellt, umfasst nahezu jede Kombination von Geräten und Browsern, die Ihre Kunden verwenden könnten. Nicht nur das, sondern auch die enormen Kosten für die Wartung so vieler Geräte.
Ich habe hier einige grundlegende Automatisierungstests erstellt, um Ihnen den Einstieg in CrossBrowserTesting zu erleichtern. Wenn Sie sich mit den Grundlagen vertraut gemacht haben, können Sie alle Arten von Tests durchführen, vom Ausfüllen großer Formulare bis zum Aufrufen einer Produktseite nach der anderen. Da die Tests automatisiert sind und parallel ausgeführt werden können, sparen Sie außerdem viel Zeit, die zur Verbesserung Ihres Hauptprodukts verwendet werden kann.
Sie können sich kostenlos für den Dienst anmelden. Probieren Sie es aus und lernen Sie die verschiedenen Funktionen kennen, die es zu einer besseren und kostengünstigeren Option als die Konkurrenz machen. Wenn alles klappt, können Sie oder Ihr Unternehmen mit Hilfe von CrossBrowserTesting Tausende von Dollar und Hunderte wertvoller Stunden einsparen.
