Keine Angst vor kopflosem Chrome! Erfahren Sie, warum und wie Sie es für Ember-Tests verwenden

Letzte Aktualisierung 9/1/17, Ember CLI 2.15. Besonderer Dank geht an Scott Newcomer und Ben Demboski für die Unterstützung beim Debugging, Karl Becker für die Bearbeitung und Tobias Bieniek für einige CLI-Tipps!

Nach ein paar Stunden Debugging meiner EmberJS-Testsuite, die sich weigerte, von der Kommandozeile ausgeführt zu werden, ließ ich PhantomJS hinter mir und wechselte zu Headless Chrome. Lassen Sie uns zusammenfassen, was das alles bedeutet, wie ich es gemacht habe und welche Auswirkungen es hat.

Was ist Headless Chrome überhaupt?

Ember-Entwickler haben Optionen für die Browser, mit denen sie ihre Testsuite ausführen, und Headless Chrome ist einer von ihnen. Aber was ist es? Der Google-Blog sagt:

Auf diese Weise können Sie den Chrome-Browser in einer Umgebung ohne Kopf ausführen. Grundsätzlich läuft Chrome ohne Chrome!
(Alt: Was ist das, ich weiß nicht einmal ...)

Recht. Hier ist eine bessere Definition aus Wikipedia:

Ein Headless-Browser ist ein Webbrowser ohne grafische Benutzeroberfläche. Headless-Browser ermöglichen die automatisierte Steuerung einer Webseite in einer Umgebung, die gängigen Webbrowsern ähnelt, jedoch über eine Befehlszeilenschnittstelle oder über die Netzwerkkommunikation ausgeführt wird.

Ab Ember CLI 2.15 ist headless Chrome die Standardeinstellung zum Testen in EmberJS. Wenn Sie mit einer älteren Ember-App arbeiten, habe ich gute Nachrichten: Sie müssen Ihre App nicht aktualisieren, um Chrome ohne Kopf testen zu können. Tatsächlich können Sie die neueste CLI-Version mit fast jeder älteren Ember-App-Version verwenden.

Warum wird eine "kopflose" Umgebung benötigt?

Wie ein normaler Browser versteht auch ein Browser ohne Kopf HTML und CSS. Es kann JavaScript wie AJAX-Anfragen ausführen. Denken Sie an Abnahmetests in Ember. Wenn ein Test versucht, auf eine ausgeblendete Schaltfläche zu klicken, sollte sie nicht anklickbar sein und der Test sollte fehlschlagen. Aber wie ist das bekannt? Weil der Browser die Last leistet, HTML, CSS und JavaScript zu etwas Nützlichem zu kombinieren. Da keine Bilder angezeigt werden müssen, ist das Testen in einer kopflosen Umgebung schneller. Es gibt viele verschiedene Arten von Headless-Browsern. Chrome und PhantomJS sind nur zwei Beispiele.

Warum also nicht einfach die Tests direkt in einem normalen Chrome-Browser ausführen? Wenn Sie eine Ember-App haben, ember serve ausführen und http: // localhost: 4200 / tests besuchen, können Sie die Ausführung Ihrer Tests in Echtzeit verfolgen oder sie anhalten und den App-Status visuell anzeigen. Headless-Browser glänzen jedoch, wenn sie für Continuous Integration-Tests verwendet werden, die im Allgemeinen als CI bezeichnet werden. In Produktions-Apps wird häufig ein Dienst verwendet, der Ihre Testsuite automatisch ausführt, wenn Code festgeschrieben wird. Zum größten Teil werden diese Tests auf einem Server ausgeführt, nicht in „normalen“ Browsern. Sehen Sie sich beispielsweise die offenen Pull-Requests für einen Teil der Ember-Website an, insbesondere für alle mit einem roten X daneben. Wann immer eine Pull-Anfrage auf GitHub geöffnet wird, können Sie sehen, ob sie die Tests besteht.

Dies ist nicht meine Pull-Anfrage. Ich schwöre. (Alt: Bild mit mehreren Testfehlern bei einer GitHub-Pull-Anfrage)

Warum nicht PhantomJS verwenden?

PhantomJS ist ein weiteres Beispiel eines Headless-Browsers. Es war eine Herkulesaufgabe, es zu schaffen und zu pflegen, und sein Erfolg ist, warum wir schöne Dinge haben. Das Erstellen von Apps ist schwierig. Können Sie sich vorstellen, einen ganzen Browser zu erstellen? Aber es scheint, dass es auf dem Weg nach draußen ist. Ein Betreuer trat im April 2017 zurück und sagte:

Headless Chrome kommt. Ich denke, die Leute werden irgendwann darauf umsteigen. Chrome ist schneller und stabiler als PhantomJS. Und es frisst kein Gedächtnis wie verrückt. Ich sehe keine Zukunft in der Entwicklung von PhantomJS.

Wie der Betreuer feststellte, hat PhantomJS einige Probleme. Ich hatte einen eigenen: keiner meiner Tests würde laufen. In einer neuen App war alles in Ordnung, aber ein unbekannter Teil meiner echten App war nicht kompatibel, nachdem einige gut etablierte Abhängigkeiten eingeführt wurden. Ich führte einen Gluttest durch, aber bevor irgendwelche Tests begonnen hatten, wurde ich mit folgenden Fehlern begrüßt:

nicht ok 1 PhantomJS 2.1 - Globaler Fehler: SyntaxError: Unerwartetes Token "}" unter http: // localhost: 7357 / assets / vendor.js, Zeile 120177
nicht ok 2 PhantomJS 2.1 - Globaler Fehler: Fehler: Das von ember-testing / support unter http: // localhost: 7357 / assets / test-support.js, Zeile 58, erforderliche Modul Ember-Metal konnte nicht gefunden werden
nicht ok 3 PhantomJS 2.1 - Globaler Fehler: ReferenceError: Variable kann nicht gefunden werden: Definition unter http: // localhost: 7357 / assets / ember-bio-bright.js, Zeile 5
nicht ok 4 PhantomJS 2.1 - Globaler Fehler: ReferenceError: Variable kann nicht gefunden werden: Definition unter http: // localhost: 7357 / assets / tests.js, Zeile 3
nicht ok 5 PhantomJS 2.1 - Globaler Fehler: ReferenceError: Variable kann nicht gefunden werden: EmberENV unter http: // localhost: 7357/4215 / tests / index.html? hidepassed, Zeile 38

Ich habe alles auf diesen Fehler geworfen. Knotenmodule in die Luft jagen, alles bis auf den einfachsten Test entfernen, die EmberCLI neu installieren, PhantomJS installieren / deinstallieren, in das Vendor-Bundle eintauchen, böse Katzen-GIFs austauschen, Weihrauch anzünden ... nichts.

Nach ein paar Fragen und Antworten mit ein paar anderen Entwicklern wurde mir vorgeschlagen, Headless Chrome auszuprobieren, um festzustellen, ob die Fehler leichter zu debuggen sind.

Die Fehler wurden nicht einfacher zu debuggen.

Die Fehler sind einfach verschwunden.

Wie man den Schalter macht

In Ember-Apps befindet sich eine Datei mit dem Namen "testem.js". Hier konfigurieren Sie, welche Testtools verwendet werden sollen, wenn Sie "ember test" oder "ember test" eingeben: "server". Hier ist ein Link zu den Inhalten von testem.j, die ich letztendlich aus dem Artikel von Ryan Toronto verwendet, kopiert und eingefügt habe. Sie können die mit EmberCLI gelieferte Testem-Datei unter diesem Link auf dem EmberCLI GitHub anzeigen.

Was ist Testem?

Testem ist ein Test-Runner. Das bedeutet, dass die Tests Ihrer App mit der in testem.js angegebenen Konfiguration geladen und ausgeführt werden. Sie erhalten auch eine benutzerfreundliche Oberfläche, über die Sie die Ergebnisse Ihrer Tests über die Befehlszeile anzeigen können. Ich war überrascht, dass Testem nicht nur für Ember gilt. Es funktioniert mit vielen JavaScript-Frameworks, Testtools (wie QUnit, Mocha und Jasmine) und Browserumgebungen.

Sieh dir das an? Das ist Testem in Aktion, resultierend aus

Welche negativen Auswirkungen könnte Headless Chrome haben?

Zum einen ist Headless Chrome nicht Open Source wie PhantomJS. Das Für und Wider könnte ihr eigener Artikel sein.

Es ist auch neu. Es wurde mit Chrome 59 ausgeliefert, aber die Entwickler hatten zuvor Möglichkeiten, Chrome zu verwenden. Die große Frage lautet: Wenn Sie bereits CI-Tests durchführen, wie gut wird dies von Ihrem Anbieter unterstützt? Viele Big Player haben es schnell umgesetzt, aber es ist möglich, dass Sie auf einige Probleme stoßen.

Schließlich könnten einige Tests in PhantomJS erfolgreich sein und in Headless Chrome fehlschlagen, was bedeutet, dass es an der Zeit ist, ein wenig zu debuggen. Natürlich habe ich das Gegenteil erlebt, bei dem alle meine Probleme auf magische Weise verschwunden sind, als ich zwischen Headless-Browsern gewechselt habe, aber Probleme sind keine Seltenheit. Dies ist ein Schmerzpunkt, der mit den in Chrome gut aussehenden Dingen vergleichbar ist, in Firefox jedoch explodiert. Aus diesem Grund und um ihre Tests robuster zu gestalten, führen einige Unternehmen ihre Tests in mehreren Tools ohne Kopf durch.

Wann wechseln?

Wenn Sie sich nicht sicher fühlen oder einfach nur wissen möchten, wie das Neueste und Beste für Ember-Tests aussieht, probieren Sie es aus!

Happy Headless Testing!

Grafik durch IrenHorrors, geteilt unter Creative Commons Namensnennung-Keine kommerzielle Nutzung-Keine Bearbeitung 3.0 Lizenz