Serie über Software-Automatisierungstests: Cypress vs TestCafu00e9 - Teil eins: eine Einführung

Bei Xebia konzentrieren wir uns darauf, das Richtige auf die richtige Weise zu entwickeln. Dazu müssen wir ständig Rückmeldungen über die Qualität unseres Codes erhalten. Daher ist ein Testframework, das unsere Arbeitsweise unterstützt, von entscheidender Bedeutung für den Erfolg.

In diesem Artikel werden wir einen Blick auf Cypress und TestCafé CLI werfen.

Nun gut. Lassen Sie uns ein wenig in TestCafé und Cypress eintauchen.

Tests ausführen, ausführen (CLI Magic)!

Cypress bietet einen epischen Test Runner, der Ihnen eine visuelle Struktur von Suites, Tests, Assertions, Netzwerkanforderungen, Stubs, Spies und mehr bietet. Der andere Teil des Test Runner zeigt die zu testende Anwendung an. Wenn Ihr Test fehlschlägt, hilft Ihnen der Test Runner mit Informationen darüber, warum der Test fehlgeschlagen ist und gibt Ihnen Hinweise, wo Sie nachsehen können.

Um den Test Runner zu starten, starten Sie einfach Ihren Testlauf:

$(npm bin)/cypress run 

Der Test Runner wird in einem neuen Fenster geöffnet.

Um einen Testlauf mit TestCafé zu starten, geben Sie einfach ein:

testcafe chrome {path-to-testfile/}testfile

(anstelle von Chrome können Sie auch einen anderen Browser wie Firefox, Safari oder Internet Explorer verwenden)
Nach dem Start von TestCafé wird ein neues Browser-Fenster geöffnet, TestCafé wird in diesem Browser initialisiert und der Test wird ausgeführt. Nach dem Testlauf wird der Browser geschlossen und Sie sehen die Testergebnisse in der Kommandozeile.

Fehlersuchbarkeit

Eine großartige Funktion (Untertreibung des Jahres) des Cypress Test Runner ist die Möglichkeit, zu früheren Zuständen Ihrer zu testenden Anwendung zurückzukehren. Der von Ihnen gewählte vorherige Zustand ist ein vollständiger DOM-Schnappschuss der zu diesem Zeitpunkt getesteten Anwendung. Sie können die Entwicklungswerkzeuge des Browsers verwenden, um den Quellcode zu inspizieren. Das macht das Debugging sehr einfach.

In TestCafé setzen wir beim Debuggen der zu testenden Anwendung eine .debug() in unserem Code. Nach dem Start des Testlaufs öffnet sich der Browser, der Test läuft und hält an der Stelle an, an der die debugger gesetzt wurde. Dort kann die zu testende Anwendung über die Entwicklungstools des Browsers inspiziert werden.

Live-Reloading in Cypress und TestCafé

Eine sehr praktische Funktion von Cypress ist die Möglichkeit des Live-Reloadings.
Das heißt, wenn Sie Ihr Testskript schreiben und auf 'Speichern' klicken, nimmt der Test Runner die Datei auf und führt den Test erneut aus. Selbst wenn dies bedeutet, dass der bereits laufende Test abgebrochen werden muss. Auf diese Weise erhalten Sie fast sofortige Rückmeldung über den von Ihnen geschriebenen Test.

In TestCafe ist dies etwas weniger intuitiv implementiert.
Wenn Sie die Testdatei bearbeiten und speichern, während Ihr Test bereits läuft, müssen Sie Ihren Test mit Strg-Z abbrechen (aber dann TestCafé erneut starten) oder Sie müssen warten, bis der Testlauf beendet ist, und dann erneut auf Speichern drücken. TestCafé hört also nur dann auf Änderungen in der Testdatei, wenn der Runner gerade keinen Test ausführt.

Selektor Spielplatz

Eine praktische Funktion des Cypress Test Runner ist der Selector Playground.
Sie können die Zeitreisefunktion verwenden, um zu einem bestimmten Schritt in Ihrem Testlauf zu gehen und den Selector Playground zu verwenden und ein Objekt auszuwählen. Cypress gibt den besten Selektor zurück, den Sie verwenden können.

In TestCafé legen wir die .debug() in unserem Testcode fest und führen den Test aus. Wenn der Testlauf pausiert, können wir mit den Entwicklertools des Browsers den Code untersuchen und den besten Selektor finden.

Eine bewährte Methode zur Verwendung von Selektoren finden Sie hier.

Code-Abstraktion

Cypress ist auf Mocha und Chai aufgebaut. Daher können Sie die Hooks von Mocha (before(), after()) und die TDD- und BDD-Assertionsstile von Chai (wie expect) verwenden.

Unten sehen Sie einen in TestCafé geschriebenen Test.

importieren Sie { Selector } von 'testcafe';
fixture('Erste Schritte')
  t.page('https://devexpress.github.io/testcafe/example;')
test('Mein erster Test', async t => {
  abwarten t
  .typeText('#Entwickler-Name', 'John Smith')
  .click('#submit-button')
  .expect(Selector('#article-header').innerText).eql('Vielen Dank, John Smith!');
});

wenn Sie Ihre Tests in TestCafé-Code schreiben, müssen Sie berücksichtigen, dass Sie an die Asynchronität von Javascript denken. Sie müssen auf das 'Versprechen' (man könnte sagen, das Ergebnis) der Funktion 'warten'.

Derselbe Test, aber dann in Cypress:

context('Actions', () => {
 beforeEach(() => {
 cy.visit('https://devexpress.github.io/testcafe/example')
 })
it('check Developer Name', () => {
 cy.get('#developer-name')
.type('John Smith')
 cy.get('#submit-button')
.click()
 cy.get('#article-header')
.should('have.value', 'Thank you, John Smith!')
 });
})

hier sehen Sie, dass Cypress die asynchrone Funktionsausführung abstrahiert hat. Ein viel saubererer Kodierungsstil, wenn Sie mich fragen!

Browser-Unterstützung

Wenn Sie sich unsicher sind, wie sich Ihre Anwendung in verschiedenen Browsern verhält, ist die Multi-Browser-Unterstützung in TestCafé ein großes Plus für Sie. TestCafé ist in der Lage, die Tests in den folgenden Browsern auszuführen (wenn diese auf Ihrem System installiert sind):

• Google Chrome:
  • Stabil
  • Beta
  • Dev
  • Kanarienvogel
• Internet Explorer (11+)
• Microsoft Edge
• Mozilla Firefox
• Safari
• Android-Browser
• Safari mobil

TestCafé führt die Tests nicht nur in den lokalen Browsern auf dem Rechner des Entwicklers aus, sondern kann die Tests auch headless in einer Pipeline und sogar auf Cloud-Diensten wie SauceLabs oder Browserstack ausführen.

Cypress unterstützt nur die folgenden Chrome-basierten Browser:

• Kanarienvogel
• Chrom
• Chrom
• Elektronen

Die Unterstützung von mehr als dieser Liste ist Teil ihrer Roadmap und sie arbeiten daran, während wir hier sprechen, beginnend mit FireFox. Das Gleiche gilt für die Unterstützung von SauceLabs und Browserstack.

Zusammenfassung: Für welches UI-Testing-Tool entscheiden Sie sich?

Sowohl Cypress als auch TestCafé sind Test-Frameworks der nächsten Generation, die Ihre Feedback-Schleife und damit Ihre Vorlaufzeiten verkürzen werden.
Hier sind meine Pro's beider Frameworks.

Die Vorzüge von Cypress:

• Einfache Fehlersuche
• Selektor Spielplatz
• Großartige Dokumentation
• Beste Umsetzung von Live Reloading

Das Pro von TestCafé

• Browser-Unterstützung in einer Box

Abschließend möchte ich sagen, dass ich Cypress vor allem wegen seiner großartigen Debugabillity-Funktion (dem DOM-Snapshotting) und der besten Implementierung von Live Reloading als E2E-Testframework vorziehen würde.

Ich hoffe, dieser Beitrag hilft Ihnen bei der Auswahl des richtigen Frameworks für die richtige Aufgabe. Wenn Sie weitere Unterstützung bei der Auswahl oder Implementierung des richtigen Frameworks benötigen oder wenn ich etwas falsch verstanden habe oder wenn Sie Fragen haben, können Sie mich gerne kontaktieren.

[update:]

Lesen Sie Teil 2 hier: Cypress und testcafe im Vergleich - Teil 2

Danke fürs Lesen :)

Ich bin ein Spezialist bei Qxperts. Wir unterstützen Unternehmen dabei, zuverlässige und hochwertige Software zu entwickeln. Haben Sie Fragen? Wir sind für Sie da! www.qxperts.io