Hallo alle zusammen!
Ich heiße Roman Mostafin. Ich bin ein automatisierter Tester bei Clover und schreibe normalerweise Autotests in Pytest + Selen. Vor kurzem hat unser Front-End-Entwicklungsteam begonnen, mit Cypress UI-Tests für das Smart Locomotive-Projekt zu schreiben, um Regressionstests zu automatisieren. Ich habe mich freiwillig gemeldet, um ihnen zu helfen, und war von dieser Technologie durchdrungen. In diesem Artikel werde ich über Cypress sprechen und wie ich meinen ersten Test darauf erstellen kann.Cypress ist ein relativ neues Framework zum Schreiben von Javascript-Tests. Er stellt seinen Browser bereit und fügt Tests in den Code der Seiten ein.Cypress hat folgende Vorteile:- unterstützt das Schreiben von modularen, Integrations- und End-to-End-Tests,
- hat eine gute Dokumentation
- hat eine freundliche und intuitive Oberfläche zum Starten, Anzeigen und Debuggen,
- verfügt über nützliche Dienstprogramme zur Vereinfachung des Testschreibens.
Als Ergebnis haben wir einen universellen und praktischen Rahmen für das Schreiben verschiedener Arten von Tests.Theorie
Um einen Test zu schreiben, sind sechs Grundfunktionen erforderlich. Betrachten Sie sie und einige Argumente für sie, die als Beispiel benötigt werden.1. cy.visit ()
Diese Methode wird verwendet, um zur Anwendungsseite zu gelangen. Als Argument wird eine Zeichenfolge mit der Adresse der Anwendungsseite verwendet:cy.visit(‘http:
2. cy.get ()
Diese Methode wird verwendet, um ein Element aus dem DOM-Modell einer Webseite abzurufen. Es braucht die folgenden Argumente:- Element Locator - die Adresse, unter der das Element gefunden werden kann;
- Zeitüberschreitung - Zeit, in der Cypress nach einem Element auf der Seite sucht (standardmäßig 4 Sekunden).
cy.get(‘div[class=”topbar”]’, {timeout: 3000})
3. .type ()
Die .type-Methode wird zum Ausfüllen von Textformularen und verschiedenen Feldern verwendet. Es hat die folgenden Argumente:- Der einzugebende Text ist der Text in einer Zeichenfolgendarstellung. Der Text kann auch Tastaturbefehle anzeigen, die mit geschweiften Klammern hervorgehoben sind.
- Timeout - Die Verzögerung vor dem Ausführen des Befehls type.
cy.get(‘input’).type(‘Hello world’, {timeout: 3000})
4. cy.wait ()
Diese Methode wird verwendet, um die Ausführung von Befehlen vorübergehend zu stoppen. Es kann auch verwendet werden, um auf den Abschluss von HTTP-Anforderungen zu warten. Es hat das Argument Timeout - direkt das Timeout.cy.wait(3000)
5. cy.fixture ()
Diese Methode wird verwendet, um Testdaten zu erhalten. Akzeptiert den Namen der JSON-Datei als Eingabe.6. cy.should ()
Methode zum Überprüfen des Ausdrucks. Es akzeptiert die folgenden Argumente:- Ein Vergleichsbefehl ist eine Bedingung, unter der ein Element überprüft wird.
- erwartetes Ergebnis - das erwartete Ergebnis der Prüfung.
Trainieren
Nehmen wir das Yandex-Autorisierungsformular und überprüfen als Beispiel die Autorisierung mit einem nicht vorhandenen Login und die Autorisierung mit einem nicht vorhandenen Passwort. Treffen Sie dazu vorbereitende Vorbereitungen:1. Erstellen Sie einen Ordner für das neue Projekt.2. Wechseln Sie in den Projektordner und führen Sie den Befehl zum Installieren von Cypress aus:npm install cypress --save-dev
3. Führen Sie den Befehl cypress aus:npx cypress open
4. Stellen Sie nach dem Start sicher, dass die folgende Hierarchie im Projektverzeichnis angezeigt wird:
Jetzt müssen Sie ein Fixture erstellen. Wir brauchen es, um die Testdaten vom Test selbst zu trennen.1. Erstellen Sie eine Datei 'cypressTest.json' im Ordner 'fixtures' mit folgendem Inhalt:
2. Erstellen Sie anschließend im Ordner 'Integration' eine Datei mit dem Namen 'habr_cypress_test.spec.js':
3. Beschreiben Sie den gesamten Testfall mit der Funktion ' beschreiben ':
4. Innerhalb der Funktion' beschreiben 'erstellen wir unsere Tests. Wir werden den Titel des erstenTests schreiben :
5. Der nächste Schritt besteht darin, den Datenaufruf vom Gerät zu schreiben:
Und schließlich erstellen wir den Test selbst unter Verwendung der Kenntnisse der Cypress-Funktionen.
In Analogie erstellen wir den zweiten Test.
Wir gehen zur Cypress-Anwendung, suchen unseren Test und klicken auf seinen Namen.
Als nächstes wird die Browserseite mit Cypress geöffnet und der Test gestartet: Links in einer separaten Spalte sehen Sie die detaillierten Schritte des Prozesses. Sie müssen warten, bis der Test abgeschlossen ist.
Herzlichen Glückwunsch, Sie haben Ihre ersten Cypress-Tests geschrieben!PSIch möchte unserem Front-End-Team und insbesondere Adele Khamatova für ihre Hilfe beim Erlernen von Cypress für das Projekt danken.