Autotests auf Cypress
Erste Eindrücke und Probleme aufgetreten
Dmitry Kochergin, leitender Softwareentwickler Luxoft
Zunächst möchte ich darauf hinweisen, dass ich kein professioneller Autotester, sondern ein Java-Programmierer bin. Eines Tages bestand die Aufgabe darin, Rauchtests zur grundlegenden Überprüfung der Hauptfunktionen einer Anwendung durchzuführen, die kürzlich durch eine Änderung der API für abhängige Dienste ohne Vorwarnung unterbrochen wurden.
Der Artikel wird für alle von Interesse sein, die an einem Autotest von Grund auf in JS interessiert waren, aber Angst hatten zu fragen.
Zunächst habe ich noch nie etwas über Autotesting gelesen. Das Hauptvorurteil war, dass Autotests schwierig sind, da Sie laut Testberichten dieses Selenium einrichten können ... Außerdem müssen Sie XPath und PageObject lernen, was Sie überhaupt nicht wollten.
Eine schnelle Suche im Internet ergab jüngere und vielversprechendere Tools: WebDriver.IO , Pupeteer (und jetzt ist Playwright besser) und Cypress. Ich entschied mich für Letzteres, kaufte mir schöne Versprechen und ein paar Kommentare von Holivars zu den besten Werkzeugen für Autotests.
So sieht das Browserfenster eines laufenden Tests aus. Links sind die ausgeführten Testbefehle und der Status aufgeführt, rechts die Ansicht der Anwendung während der Testausführung:
So sieht der Testcode aus (in Cypress befindet sich der gesamte Code in JS, und Selektoren sind normale CSS-Selektoren):
Zur Laufzeit sieht er folgendermaßen aus:
Während ich nach einem Tool für Autotests suchte - in meinem Kopf hatte ich ein Bild, mit dem Tests direkt im Browser erstellt werden können, so dass ich einfach auf den Skriptdatensatz geklickt habe -, zeichnete das System meine Aktionen auf (CSS-Selektoren der Elemente, auf die ich geklickt habe). Dann schaue ich mir den generierten Test an, optimiere die Selektoren bei Bedarf und speichere ihn in der Testsuite. Eh ...
Die Geschichte erwies sich damals als unerreichbar und ich fand solche Werkzeuge nicht (vielleicht wird Ihnen jemand in den Kommentaren den richtigen Weg sagen). Cypress wurde jedoch durch die Tatsache bestochen, dass die Tests in einem echten Browser ausgeführt werden und Sie das DOM sogar parallel zur Testausführung mit Ihren bevorzugten Chrome-Entwicklertools untersuchen können (wenn beispielsweise die Auswahl nicht funktioniert hat, können Sie die Konsole öffnen und sofort sehen, warum, wenn der Test ausgeführt wird).
Von den anderen Parametern, die mir wichtig waren, wollte ich kritisch nicht viel Zeit damit verbringen, zu schreiben (wieder über das Schreiben eines Tests in einem Browser) oder Tests zu pflegen. Das war genug für meine Zwecke. Nur zur Information über Cypress: Vom ersten Öffnen der Cypress-Website bis zum ersten Test, der sich bei der Anwendung anmeldet, dauerte es 1 Stunde.
Cypress, die erste Seite des Frameworks, sagt uns, dass dies JavaScript End to End Testing Framework ( cypress.io ) ist. Als nächstes lesen wir schnell die Dokumentation, sie ist wirklich vollständig und Sie können Antworten auf fast alle Fragen finden (ich habe schnell alles andere auf StackOverflow gefunden):
Weiter unten in der Liste der Funktionen auf der Website:
- Time travel – – , . , DOM, Chrome devtools.
- Real time reloads – JS , – (hot reload).
- Automatic waiting – , , Cypress . , .
- Network traffic control – Cypress / , .
- Screenshots und Videos - Cypress zeichnet während des Tests ein Video des Browserbildschirms (MP4) zusammen mit Anweisungen im Fenster auf.
All diese Dinge können natürlich ohne einen geöffneten Browser in CI ausgeführt werden, es wird kopfloses Chrome oder Electron verwendet.
Es gab aber auch einige Probleme.
Zuerst wusste ich nicht, dass ich auf das Ende der XHR-Anforderungen an den Server warten und stattdessen Timeouts einfügen konnte, und die Tests würden zufällig fallen. Korrigiert.
Dann funktionierte Hot Reload jedes Mal, ich musste ständig die gesamte Cypress neu starten, da ich nicht sicher war, ob meine Änderungen übernommen wurden. Es stellte sich heraus, dass es in meiner IDE (IntelliJ IDEA) solche fehlerhaften Kontrollkästchen gibt, die ebenfalls standardmäßig aktiviert sind, weshalb sich herausstellt, dass das Speichern einer Datei nicht das Speichern, sondern das eventuelle Speichern ist.
Das nächste Problem war, dass meine Anwendung Fensterabruf für Anforderungen an den Server verwendete und Cypress nur XHR-Anforderungen sieht. Dirty Hack von StackOverflow hat geholfen (ich verstehe, dass die Abrufmethode aus dem Fenster entfernt wird, so dass der Browser einen Fallback auf XHR anstelle von Abrufen
ausführt ): Als nächstes gab es ein Problem beim Emulieren eines mobilen Browsers, es funktionierte nur nicht im Testcode des Benutzeragenten, sondern in einer separaten speziellen Datei - es hat alles geklappt.
Dann wurde das CORS-Problem gelöst:
Dann wurde das Hochladen von Dateien nicht aus heiterem Himmel funktioniert, die Standardlösungen funktionierten nicht, aber die Cypress-Datei-Upload-Bibliothek half:
Das einzige Problem, das ich nicht lösen konnte, war die Reproduzierbarkeit des Tests. Stabile und identische Anfangsdaten für die Ausführung des Tests (Fixtures), dies ist eher eine Konfigurationsaufgabe, nicht Cypress, aber immer noch ungelöst.
Infolgedessen scheint Cypress ein großartiges Werkzeug für die Einführung von Autotests in einem Projekt zu sein, wenn:
- Kenntnisse über JS haben
- Seit IE6 müssen nicht alle Arten von Browsern getestet werden (Cypress unterstützt derzeit Chrome, Chromium, Edge, Electron, Firefox). Hier ist eine Diskussion des Themas . Aber ich kann sagen, dass es vor einem Jahr, als ich anfing, mit Cypress zu arbeiten, nur die neueste Version von Chrome und Electron für Starts ohne Benutzeroberfläche unterstützte.
- Willst du schnell Tests machen und sie vergessen, bis jemand die Anwendung bricht :)
Zypresse: nimm es und benutze es!