In den frühen Entwicklungsstadien können Sie mit manuellen Tests gemäß einem bestimmten Testplan auskommen. Mit dem Aufkommen der modularen Architektur steigt jedoch die Anzahl der Testskripte exponentiell an, wenn mehrere Entwicklungsteams gleichzeitig Änderungen vornehmen können. Manuelles Wegfahren wird immer schwieriger.
In diesem Artikel werden wir darüber sprechen, wie wir bei Virto Commerce das Testen wichtiger Geschäftsszenarien automatisieren.
Warum das alles?
Ich gebe ein Beispiel aus unserer Erfahrung: Durch eine kleine Bearbeitung im CSS-Stil wurde die Schaltfläche "Produkt zum Warenkorb hinzufügen" auf dem Mobilgerät nicht mehr angezeigt. Leider wurde es in dieser Form getestet und traf die Veröffentlichung. Es gibt viele solcher Beispiele, bei denen neue Funktionen, kleinere Korrekturen und Korrekturen wichtige Geschäftsszenarien zerstören. Leider erfahren wir oft nach Veröffentlichungen und von Kunden davon. Um dies zu vermeiden, haben wir vor mehr als zwei Jahren begonnen, E2E-Tests als Teil des Entwicklungsprozesses zu implementieren. Danach wurden die meisten Fehler in der Entwicklungsphase und nicht in der Kampfumgebung identifiziert.
E2E testet ein Geschäftsszenario von Anfang bis Ende. Der E2E-Test simuliert reale Benutzeraktionen in einem realen Browser, genau wie der reale Benutzer die Lösung verwendet.
Wir verwenden E2E-Tests:
- Regression kontrollieren
- Das System beschreiben
- Zur Integration in CI / CD
Dies beinhaltet die Sicherstellung, dass alle Module korrekt und vorhersehbar funktionieren und zusammenarbeiten.
Mit E2E-Tests können wir Abschnitte der Anwendung abdecken, die nicht durch Unit- und Integrationstests verifiziert wurden. Dies liegt an der Tatsache, dass Unit-Tests und Integrationstests einzelne Teile der Anwendung abdecken und einen isolierten Teil der Funktionalität testen. Selbst wenn diese Teile für sich alleine gut funktionieren, können Sie nicht ganz sicher sein, ob sie zusammenarbeiten werden. Das Vorhandensein einer Reihe von E2E-Tests über Unit und Integration ermöglicht es uns daher, die gesamte Lösung auf vollständigste Weise zu testen.

Das Schreiben und Ausführen von E2E-Tests erfordert Zeit und Ressourcen. Google bietet beispielsweise eine Trennung von 70/20/10 an: 70% Komponententests, 20% Integrationstests und 10% E2E-Tests. Die genaue Kombination ist für jedes Projekt unterschiedlich, sollte jedoch im Allgemeinen die Form der Pyramide beibehalten.
E2E-Tests sind nicht einfach und scheinen zunächst teuer in der Entwicklung und Wartung zu sein. Bei Virto Commerce arbeiten wir ständig daran, die Entwicklung zu vereinfachen und die Kosten für die Unterstützung von E2E-Tests zu senken, wenn neue Versionen veröffentlicht werden. Wir hoffen, dass unsere Lösungen Ihnen helfen, die Verwendung von E2E in Ihren Projekten zu vereinfachen.
Gute User Story - der E2E-Test ist fast fertig
Sie können oft hören, dass das Schreiben von E2E-Tests einige Zeit in Anspruch nimmt und schwer zu warten ist. Ja, dies ist so, sie sind nicht so einfach zu warten wie die Dokumentation. Warum machen Sie sie nicht Teil des Entwicklungsprozesses und schreiben Dokumentation, um Geschäftsszenarien zu erfassen?
Das Erstellen von E2E beginnt mit einer Beschreibung der User Story. Wie sorgfältig wir die Beschreibung in dieser Phase vorbereiten, wird es für das Entwicklungsteam so einfach sein, einen E2E-Test zu schreiben, der zeigt, dass alle Systeme bei der Implementierung dieses Szenarios ordnungsgemäß funktionieren.
Ein Beispiel für eine User Story für eine Schaltfläche zum Hinzufügen eines Artikels zum Warenkorb:
GIVEN I am signed in to the storefront AND Some product page is open (/product-name) AND my cart is empty WHEN I click to the "Add" button on the item with the following parameters: THEN I should see a dropdown menu where I can choose from 1 to 10+
was sich dann in folgenden Test verwandelt:

Nach einiger Zeit können technische Redakteure oder ein neues Entwicklungsteam die Tests verwenden, anstatt die Dokumentation zu lesen, um die implementierten Skripte in einem echten Browser auszuführen und anzuzeigen oder Video-Tutorials automatisch aufzuzeichnen.
Einfach - Winkelmesser installieren und konfigurieren
Als Testwerkzeug haben wir uns für Protractor entschieden, ein Open-Source-E2E-Testautomatisierungssystem, das speziell für AngularJS-Webanwendungen entwickelt wurde.
Protractor ist ein Node.js-Programm, das auf WebDriverJS basiert. Winkelmesser arbeitet als Lösungsintegrator und kombiniert leistungsstarke Technologien wie Node.js, Jasmine, Selen, Mokka, Gurke und Web.

Winkelmesser kennt AngularJS, wodurch es einfacher ist, Tests zu schreiben, ohne auf den Start des AngularJS-Projekts, das Aktualisieren der Seite usw. zu warten. Die Erfahrung zeigt, dass der Schwellenwert für Entwicklereinträge sehr niedrig ist.
Verwenden Sie npm, um Protractor global zu installieren:
npm install -g protractor
webdriver-manager ist ein Dienstprogramm, mit dem eine Instanz von Selenium Server einfach konfiguriert werden kann. Selenium Server - wird verwendet, um Befehle zwischen dem Test und der realen Umgebung zu übertragen.
Führen Sie diesen Befehl aus, um Folgendes zu installieren oder herunterzuladen:
webdriver-manager update
Und lauf:
webdriver-manager start
Dieser Befehl startet Selenium Server und öffnet ein Fenster zum Anzeigen des Protokolls. Der Winkelmesser sendet Anforderungen an diesen Server, um den Browser zu steuern.
Winkelmesser ist bereit zu gehen. Eine detailliertere Beschreibung der grundlegenden Schritte zum Schreiben von Tests finden Sie auf der
Hauptseite .
Die richtige Struktur des Projekts
E2E-Tests befinden sich immer im selben Repository wie die Anwendung oder das Thema.
Wir haben uns geweigert, externe E2E-Testdienste zu verwenden, da die Dienste scheinbar einfach den Start von Tests auf dem lokalen Computer und die anschließende Wartung erschweren. Der Code und die Tests befinden sich an verschiedenen physischen Orten, was dazu führt, dass Entwickler vergessen, sie zu aktualisieren.
Das Finden von Anwendungscode und Test in einem Repository erleichtert das Verwalten und Verwalten des Projekts.
Ein grundlegendes Beispiel finden
Sie hier .
Das Projekt erstellt einen E2E-Ordner mit der folgenden Struktur, in dem Seitenobjekte zum Organisieren von Tests verwendet werden.
E2E/ |--cart | |--cart.pageObject.js | |--*.spec.js |--home | |--home.pageObject.js | |--*.spec.js |--conf.js
- conf.js - Die Konfigurationsdatei befindet sich im Stammverzeichnis
- Für jedes Schnittstellenobjekt wird ein eigener Ordner erstellt, in dem es sich befindet
- pageObject-Datei zur Beschreibung der Elemente auf der Seite
- mehrere Spezifikationsdateien - wo sich die Tests befinden
Im Projekt wird die Verwendung von:
- baseUrl - Mit dieser Option können Sie den Test zum Testen verschiedener Umgebungen verwenden
- Parameter - werden verwendet, um Schlüsselelemente auf einer Seite zu finden oder Formulare auszufüllen
github.com/VirtoCommerce/vc-storefront/blob/master/VirtoCommerce.Storefront.Test/e2e/conf.js#L21
github.com/VirtoCommerce/vc-storefront/blob/master/VirtoCommerce.Storefront.Test/e2e/conf.js#L29Diese Parameter können dann vom IT-Administrator bei der Konfiguration des Starts in Jenkins im automatischen Modus für DEV- und QA-Umgebungen geändert werden.
protractor conf.js --baseUrl=https://some-url.azurewebsites.net/--params.api.endpoint=https://some-admin-url.azurewebsites.net
Optimierung der Suche nach Elementen auf der Seite
Der Winkelmesser bietet sehr flexible Methoden zum Auffinden von Elementen auf der Seite:
- durch Bindung
- by.model
- by.repeater
- by.className
- by.css
- by.select ()
- by.partialButtonText ()
- ...
In jüngsten Projekten kamen wir jedoch zu dem Modell, dass Elemente, die am Test teilnehmen, mit einer speziellen Klasse mit dem Winkelmesser-Präfix gekennzeichnet sind. Im Test werden diese Elemente von byclassName gefunden.
Dies vereinfacht die Wartung von Tests und das Vornehmen von Änderungen, sodass ein Programmierer oder automatisierte Tools feststellen können, dass das am E2E-Test teilnehmende Element geändert wurde.
Welche Browser testen wir?
Standardmäßig sind alle Prozesse so konfiguriert, dass Tests im Chrome-Browser ausgeführt werden. Wie unsere Erfahrung mit der Verwendung von E2E-Tests in Chrome zeigt, können wir die meisten Probleme identifizieren und gleichzeitig das Schreiben von Tests nicht erschweren.
Wenn Sie in mehreren Browsern testen müssen, ist dies einerseits sehr einfach, andererseits gibt es Schwierigkeiten bei der Konfiguration und das Vorhandensein von Fehlern bei der Implementierung von Treibern für verschiedene Browser.
In verschiedenen Kundenprojekten haben wir zusätzlich in Firefox, Safari und IE getestet. Firefox-Tests duplizieren die Ergebnisse in Chrome. Der Start von E2E in Safari und IE erforderte jedoch die Systemkonfiguration, das Öffnen von Ports, das Deaktivieren der Sicherheit und das Bearbeiten der Registrierung. Dadurch konnten jedoch automatisch viele Probleme mit der Anzeige und Inkompatibilität von Skripten in der Anwendung erkannt werden.
Um Tests im Browser hinzuzufügen, müssen Sie den
erforderlichen WebDriver herunterladen und installieren
.Fügen Sie der Konfigurationsdatei einen neuen Abschnitt multiCapabilities hinzu:
exports.config = { … multiCapabilities: [ { 'browserName' : 'chrome' }, { 'browserName' : 'firefox' } ], … }
Da moderne Webanwendungen die Arbeit mit unterschiedlichen Auflösungen unterstützen, sollte dies beim Schreiben von Tests berücksichtigt werden.
Mit dem Winkelmesser können Sie Tests für verschiedene Bildschirmauflösungen ausführen.
Zu diesem Zweck gibt es eine Option zum Festlegen der Bildschirmgröße über browser.driver.manage (). Window (). SetSize. In diesem Beispiel stellen wir die Bildschirmgröße auf 1600 x 800 ein.
exports.config = { … capabilities: { 'browserName': 'chrome' }, onPrepare: function() { browser.driver.manage().window().setSize(1600, 800)
Oder über den Abschnitt multiCapabilities in der Konfigurationsdatei. In diesem Beispiel werden Tests im Chrome-Browser für drei verschiedene Auflösungen ausgeführt.
multiCapabilities: [ { 'browserName': 'chrome', 'chromeOptions' : { args: ['--lang=en', '--window-size=1920,1080'] }, specs: ['specs.js'] }, { 'browserName': 'chrome', 'chromeOptions' : { args: ['--lang=en', '--window-size=1680,1050'] }, specs: ['specs.js'] }, { 'browserName': 'chrome', 'chromeOptions' : { args: ['--lang=en', '--window-size=1600,900'] }, specs: ['specs.js'] }]
E2E ist Teil der Dokumentation.
Wieder einmal ist E2E ein gutes Dokumentationselement, das zeigt, was das Entwicklungsteam getan hat. Ein neues Entwicklungsteam oder ein technischer Redakteur kann die Tests ausführen und die implementierten Skripte live verfolgen. Dokumentieren Sie daher, wie ein neuer Mitarbeiter diese Tests ausführen kann.
CI / CD-Integration
Alle Tests sollten relevant sein und regelmäßig durchgeführt werden. Wenn dies nicht getan wird, sollten Sie keine Zeit damit verschwenden, Tests zu schreiben. Sie werden in ein paar Wochen wertlos und es wird einfacher sein, sie von Grund auf neu zu schreiben.
Wir haben einen wichtigen Schritt unternommen, um E2E-Tests in CI / CD zu integrieren und E2E in den Bereitstellungsprozess einzubeziehen.
Durch die Integration in das CI / CD können Sie E2E-Tests automatisch für DEV- und QS-Umgebungen ausführen, um Feedback zu geben und den Einblick zu gewinnen, dass das System auch nach einer kleinen Änderung betriebsbereit bleibt. Und wenn die Entscheidung gebrochen ist, geben Sie Auskunft darüber, wann und bei welcher Änderung dies geschehen ist.
Zunächst werden die Tests gestartet, wenn eines der Module aktualisiert wird und die neue Version in die QS-Umgebung gelangt.
Zweitens werden E2E-Tests nachts nach einem Zeitplan in DEV- und QS-Umgebungen im automatischen Modus ausgeführt.
Drittens können die Entwickler bei Bedarf die Tests selbst nach Bedarf ausführen.
Basierend auf den Startergebnissen erhalten alle Projektteilnehmer vom Entwicklungsteam bis zum Kunden eine E-Mail mit einem HTML-Bericht über die Testergebnisse.
Es ist wichtig, die obligatorische Verfügbarkeit von Informationen über das Testergebnis für das gesamte Projektteam zu beachten. Dies gibt dem Entwicklungsteam einerseits Vertrauen und verwaltet andererseits die Kundenerwartungen. Das Entwicklungsteam kann Änderungen schneller vornehmen und gleichzeitig erkennen, dass die wichtigsten Geschäftsszenarien funktionieren. Und der Kunde erhält Informationen über die Qualität des Projekts, dass die meisten Probleme vor der Veröffentlichung erkannt werden. Und selbst wenn das Problem durch den Test erkannt und die Freigabe verschoben wird, werden Informationen darüber angezeigt, was genau kaputt gegangen ist und wie die Arbeit an der Korrektur abläuft.
Um Berichte zu erstellen, verwenden wir die modifizierte Version des Protractor-Jasmin2-HTML-Reporter-Plugins (https://github.com/VirtoCommerce/protractor-jasmine2-html-reporter). Dieses Plugin generiert einen HTML-Bericht und fügt Screenshots von Inline-Elementen ein.
Die Installation ist sehr einfach:
- Installieren Sie protractor-jasmine2-html-reporter
- Hinzufügen eines Winkelmessers-Jasmin2-HTML-Reporters zu einem Projekt
- Verbindungsbericht onPrepare-Methode
var HtmlScreenshotReporter = require('protractor-jasmine2-html-reporter'); var reporter = new HtmlScreenshotReporter(self.options); var name = browser.suite; self.options.reportTitle = name + '-report.html'; jasmine.getEnv().addReporter(reporter);

Verbessern Sie den Prozess ständig
Arbeiten Sie ständig in einem Team, um die Kosten zu senken und die Entwicklung und Unterstützung von E2E-Tests zu beschleunigen.
Trainieren und überprüfen Sie den Testschreibprozess. Sehen Sie, welche neuen Komponenten und Dienste verwendet werden können.
Zum Beispiel erwägen wir eine Gurkenverbindungsoption. Gurke ist ein Tool zum Ausführen automatisierter Tests in einfacher Sprache.
Schlussfolgerungen
E2E-Tests sind nicht so einfach und scheinen auf den ersten Blick teuer zu sein, aber sie sind sehr wertvoll, da sie ein Indikator für den Zustand wichtiger Geschäftsszenarien sind.
Aus den Erfahrungen mit der Verwendung von E2E-Tests im Virto Commerce-Projekt können wir die folgenden Schlussfolgerungen ziehen:
- Das Schreiben von E2E ist Teil des Entwicklungsprozesses. Und es ist sehr wichtig, weil es die Arbeit von Geschäftsprozessen und die gesamte Lösung testet. Eine große Anzahl von Fehlern wurde in der Phase von DEV und QA und nicht in der Kampfumgebung festgestellt.
- Tests und Code sollten sich im selben Repository befinden und dem Entwickler zur Verfügung stehen.
- Die Qualität des E2E-Tests hängt von der Beschreibung der User Story ab. Wenn sie korrekt geschrieben ist, kann das Entwicklungsteam leichter einen E2E-Test erstellen.
- E2E-Tests können als Dokumentation dienen und erstellte Skripte aufzeichnen.
- E2E-Tests sollten kontinuierlich und automatisch in DEV- und QS-Umgebungen ausgeführt werden. Wenn Sie den Start nicht automatisiert haben, sollten Sie keine Zeit mit Tests verschwenden, da diese in ein paar Wochen wertlos werden.
- Die Testergebnisse sollten allen Projektteilnehmern zur Verfügung stehen. Dies gibt ein Bild davon, was passiert.
- E2E ist nicht eine 100% ige Lösung für alle Probleme. Befolgen Sie die 70/20/10-Regel: 70% Unit-Tests, 20% Integrationstests und 10% E2E-Tests
- Arbeiten Sie ständig in einem Team, um die Kosten zu senken und die Entwicklung und Unterstützung von E2E-Tests zu beschleunigen.
Referenzen
www.protractortest.orgWinkelmesser für AngularJS - Das Schreiben von End-to-End-Tests hat noch nie so viel Spaß gemachtgithub.com/angular/protractor/blob/master/docs/page-objects.mdgithub.com/VirtoCommerce/vc-storefront/tree/master/VirtoCommerce.Storefront.Test/e2eSagen Sie einfach Nein zu weiteren End-to-End-Tests.
Testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html