Aufrechterhaltung der End-to-End-Qualität durch visuelle Tests

Das Testen ist ein wichtiger Bestandteil des Arbeitsablaufs eines jeden Entwicklers. Es hilft uns sicherzustellen, dass unser Projekt ein hohes Qualitätsniveau beibehält, und verhindert, dass lästige Fehler in die Wildnis gelangen.

Aber oft können automatisierte Tests mühsam zu verwalten sein. Zwischen einer endlosen Menge an Code, um sicherzustellen, dass Sie eine vollständige Abdeckung bieten, und dem Umgang mit der fragilen Natur von Front-End-Tests – bei denen eine einfache Selektoränderung einen End-to-End-Workflow vollständig unterbrechen kann – kann es sich manchmal wie ein Aufstieg anfühlen Schlacht.

Durch das Hinzufügen automatisierter visueller Tests können wir diese unzuverlässigen Tests eliminieren und unsere Test-Pipelines verbessern, um diese Abdeckung (und mehr) bereitzustellen, indem wir intelligente Bildvergleiche mit Screenshots unserer Website oder App nutzen.

Bevor wir uns mit visuellen Tests befassen, nehmen wir uns eine Minute Zeit, um uns über die verschiedenen Arten von automatisierten Tests und deren Zusammengehörigkeit zu informieren. Anschließend sprechen wir darüber, was visuelles Testen genau ist und wie es Ihnen eine weitere Ebene der Testabdeckung für Ihr Projekt bieten kann.

Ein kurzer Blick auf einige der Arten von automatisierten Tests

Automatisiertes Testen ist ein interessanter Teil des Entwicklungszyklus. Einige Kunden oder Interessengruppen können den Wert, den sie bieten, klar erkennen, andere würden es vorziehen, die gesamte Entwicklungszeit für die reine Feature-Entwicklung aufzuwenden.

Dies kann manchmal kontraintuitiv sein, wenn das Ziel automatisierter Tests darin besteht, das Unternehmen zu schützen oder zu verhindern, dass das Team überhaupt Zeit damit verbringen muss, Fehler zu beheben. Das Schreiben solider automatisierter Tests kann große finanzielle Verluste verhindern! Letztlich ist es ein Risiko, das einige eher einzugehen bereit sind als andere.

Glücklicherweise ist dieser Wert nicht immer schwer zu verkaufen, und wenn wir die Zeit haben, uns auf qualitativ hochwertige automatisierte Tests zu konzentrieren, haben wir eine Vielzahl von Optionen, wie wir diese Tests angehen können, wie Unit-Tests, Integrationstests, End-to-End Tests und visuelle Tests (die auch eine erweiterte Abdeckung für die ersten drei bieten können).

Wenn wir die Stärken der einzelnen Testtypen anwenden, können wir mehr Zeit damit verbringen, Tests zu schreiben, die tatsächlich dazu beitragen können, unsere Arbeit zu schützen und unseren Kunden Frust zu ersparen.

Werfen wir einen Blick darauf, wie einige dieser Teststrategien in der Praxis aussehen.

Unit-Tests

Unit-Tests konzentrieren sich auf das Testen kleinerer, fokussierter Bereiche einer Anwendung . Möchten Sie testen, ob eine Funktion, die eine Bestellsumme nach Werbeaktionen berechnet, ordnungsgemäß funktioniert? Sie möchten einen Komponententest schreiben.

 function myBusinessLogic(pricePerItem, quantity, discount) { const subtotal = pricePerItem * quantity; return subtotal - ( discount * subtotal ); } expect(myBusinessLogic(2, 4, .1)).toEqual(7.2);

Das Tolle an Komponententests ist, dass sie billig zu schreiben sind und nicht viel Zeit für die Ausführung benötigen. Aus diesem Grund verbringen Unternehmen oft viel Zeit damit, eine Reihe von Komponententests zu erstellen, um diese granularen Teile einer Anwendung zu erfassen.

Aber aufgrund dieses fokussierten Testens deckt Unit-Tests möglicherweise nicht ab, wie diese verschiedenen Teile zusammenarbeiten, und hier beginnen wir mit Integrationstests.

Integrationstests

Das Ziel von Integrationstests besteht darin, die kleineren Teile und Komponenten einer Anwendung zu nehmen und zu testen, wie sie zusammenarbeiten . Ein gängiges Beispiel könnte sein, wie ein bestimmter Teil einer Benutzeroberfläche auf Interaktionen reagiert, gefolgt von Anforderungen an einen Server oder eine Datenbank.

 cy.get('.add-to-cart').click(); cy.url().should('contain', 'cart'); cy.get('.cart li').contains('My Item');

Es ist durchaus möglich, dass Ihre kleine UI-Komponente von selbst wie erwartet funktioniert. Ihre synthetischen Ereignisse könnten auf einer onClick-Instanz ordnungsgemäß ausgelöst werden. Dieser Code, der Ihre API-Anforderungen umschließt, funktioniert möglicherweise perfekt mit einigen verspotteten Daten. Aber es könnte Lücken zwischen diesen beiden Teilen geben, die zusammenarbeiten, die Ihre Komponententests möglicherweise nicht erkennen.

Integrationstests sind eine überzeugende Möglichkeit, Ihre Anwendung zu testen, aber Sie können noch einen Schritt weiter gehen, wenn Sie versuchen, „alle Dinge“ zu testen.

End-to-End-Tests

End-to-End-Tests erfassen die gesamte Reise eines Benutzers End-to-End für einen fokussierten Workflow. Wenn ich zum Beispiel einen E-Commerce-Shop baue, wäre der „glückliche Weg“ (oder der erwartete Weg mit dem geringsten Widerstand), ein Produkt zu finden, es in einen Einkaufswagen zu legen und für diese Artikel zu bezahlen. Wenn ich einen End-to-End-Test schreibe, würde ich den gesamten Prozess erfassen, dh von der Suche nach einem Produkt auf einer Produktlistenseite bis zur Bezahlung dieses Artikels.

 cy.visit('/products'); cy.get('.product a[href="/product/1234"]').click() cy.url().should('contain', 'product/1234'); ... cy.get('.order-button').click(); cy.url().should('contain', 'receipt'); cy.get('.receipt li').contains('My Item');

Das Tolle an End-to-End-Tests ist, dass es sich im Wesentlichen um einen großen Integrationstest handelt. Sie erfassen viele verschiedene Komponenten der Anwendung, einschließlich der Funktionsweise der Benutzeroberfläche, der ordnungsgemäßen Reaktion der APIs und der Zusammenarbeit dieser Teile.

Das Problem ist, dass End-to-End-Tests und sogar Integrationstests mehr Zeit zum Schreiben und auch viel länger zum Ausführen benötigen. Wie können wir also alle unsere Testoptionen nutzen und eine Reihe von Tests zusammenstellen, die eine effiziente Möglichkeit bieten, unsere Anwendung abzudecken?

Nutzung der verschiedenen Arten von Tests

Es gibt eine Vielzahl von Denkweisen, die im Allgemeinen beschreiben, wie viele Tests jeder Art Sie schreiben sollten.

Mike Cohn hat in seinem Buch „ Succeeding with Agile “ das Konzept der „Testpyramide“ entwickelt.

Er argumentiert, dass Sie mehr Unit-Tests schreiben sollten, wo sie kostengünstiger zu schreiben und schneller auszuführen sind. Während sein ursprüngliches Diagramm die verschiedenen Tests etwas anders bezeichnet, werden sie langsamer ausgeführt und teurer zu schreiben, wenn Sie sich mehr auf Integrationstests konzentrieren. Obwohl diese Tests wertvoll sind, möchten Sie nicht so viele Integrationen oder End-to-End-Tests haben wie Unit-Tests.

Dieses Gleichgewicht kann Ihnen helfen, sich auf die Erfassung der kritischen Teile der Anwendung zu konzentrieren, wie z. B. Geschäftslogik mit Komponententests und wie sie mit Integrationstests zusammenarbeiten, aber Kent C. Dodds argumentiert, dass die Testtechnologie an einem Punkt aufgeholt hat, an dem es keine gibt längere große Kostenabwägungen für das Schreiben von Integrationstests, wo sein Konzept der „Testtrophäe“ ins Spiel kommt.

In modernen Entwicklungsumgebungen stehen uns viele erstaunliche Tools wie Cypress, Selenium und Playwright zur Verfügung, die Entwicklern und QA-Ingenieuren jeweils die Möglichkeit geben, Tests zu schreiben, die problemlos mit Browsern wie Chrome und Firefox interagieren.

Mit Cypress könnte das Schreiben eines Tests, der auf eine Schaltfläche klickt, so einfach aussehen wie:

 cy.get('#my-button').click()

Das ist wohl genauso einfach wie zu testen, ob die Schaltfläche mit synthetischen Ereignissen funktioniert, wenn nicht sogar einfacher. Das Beste daran ist, dass Sie testen, wie diese Schaltfläche tatsächlich in einem Browser funktioniert.

Unabhängig davon, welches Diagramm Sie abonnieren, besteht das Ziel letztendlich darin, die verschiedenen Optionen zwischen Kosten und Geschwindigkeit abzuwägen , um die richtige Lösung für Ihre spezielle Anwendung zu ermitteln. Es ist wichtig, dass Sie nicht nur 100 % in Ihrem Abdeckungsbericht erreichen, sondern auch sicherstellen, dass die Erfahrung, die Sie den Besuchern bieten, so funktioniert, wie sie sollte.

Aber egal, welche Mischung von Tests Sie durchführen, diesen programmatischen Tests, die nur mit dem DOM (Document Object Model) interagieren und es testen, fehlt ein großes Puzzleteil: wie Ihre Besucher diese Anwendung visuell sehen.

Was herkömmliche Testarten nicht erfassen

Während Sie Ihre Unit-, Integrations- und End-to-End-Tests für Ihre Anwendung ausführen, haben sie alle eines gemeinsam. Sie alle testen den Code.

Damit meine ich, dass sie nicht testen, was der Besucher Ihrer Anwendung tatsächlich sieht.

Wenn Sie eine Reihe von Integrationstests ausführen und wie in unserem vorherigen Beispiel testen, ob jemand ein Produkt in einen Einkaufswagen legen und kaufen kann, finden Sie bei jedem Schritt ein Element im DOM durch Code und bestätigen dies es funktionierte genauso.

Dabei wird nicht getestet, ob der Text auf Ihrer Seite lesbar ist oder nicht. Hat jemand eine CSS-Änderung hinzugefügt, die versehentlich alle Dinge nach links verschoben und auf den Kopf gestellt hat?

Diese Arten von Fehlern werden als „visuelle Fehler“ bezeichnet, wo sie alle Ihre Tests mit Bravour bestehen, aber wenn jemand sie tatsächlich ansieht, ist sie nicht ganz richtig oder schlimmer noch, völlig unbrauchbar.

Realistischerweise können wir nicht erwarten, dass wir mit herkömmlichen Tests eine 100%ige vollständige Abdeckung aller Details einer Benutzeroberfläche bieten. Zwischen der endlosen Menge an Anwendungszuständen und der Tatsache, dass wir ständig neue Funktionen hinzufügen, lässt es sich einfach nicht skalieren.

Das führt uns zur Überschrift dieser Geschichte: Visual Testing .

Was ist visuelles Testen?

Visual Testing erfasst die sichtbare Ausgabe (z. B. einen Screenshot) einer Anwendung und vergleicht sie mit derselben Anwendung zu einem anderen Zeitpunkt.

Dies geschieht üblicherweise, indem zuerst ein Baseline-Screenshot oder eine zuvor erfasste Instanz der Anwendung mit den erwarteten Ergebnissen erfasst und jeder neue Test mit dieser Baseline verglichen wird.

Aber während Ihr Projekt entwickelt wird, ändern sich die Dinge. Im Laufe der Zeit wird diese Baseline zusammen mit Ihrer Anwendung aktualisiert, wenn Sie neue visuelle Unterschiede als akzeptierte Änderungen genehmigen.

Arten von visuellen Tests

Eine interessante Sache beim visuellen Testen ist, dass es verschiedene Möglichkeiten gibt, damit umzugehen.

Ein Ansatz zum visuellen Testen besteht darin, Pixel-für-Pixel-Vergleiche zu verwenden, bei denen das Test-Framework buchstäblich jeden Unterschied markiert, den es zwischen zwei Bildern sieht. Solche Vergleiche bieten zwar einen Einstieg in die visuelle Prüfung, neigen jedoch dazu, ungenau zu sein und zu vielen falsch positiven Ergebnissen zu führen.

Wie Sie sich vorstellen können, neigen die Dinge bei der Arbeit mit dem Web dazu, sich zwischen Seitenladevorgängen und Browseraktualisierungen geringfügig zu unterscheiden. Wenn der Browser die Seite aufgrund einer Rendering-Änderung um 1 Pixel versetzt rendert, Ihr Textcursor angezeigt wird oder „einfach so“ Ihre Bereitstellungen aufgrund dieser fehlgeschlagenen Tests blockiert werden können.

Auch beim Umgang mit dynamischen Inhalten sind Ihre Tests fehleranfällig. Wenn Sie zum Beispiel tägliche Pixel-für-Pixel-Sichttests auf der Homepage dieser Website, Smashing Magazine , durchführen, werden Sie viele fehlgeschlagene Tests erhalten, da sie immer mehr Inhalte produzieren.

Ein besserer Weg, visuelle Tests zu handhaben, ist die Nutzung von Technologien wie KI , bei denen das Testframework bei jeder Testausführung den erfassten Screenshot intelligent mit der Baseline vergleicht.

Es kann erkennen, dass die beiden Aufnahmen unterschiedlich sind, oder sogar erkennen, ob es sich um eine Inhaltsänderung im Gegensatz zu einer Layoutänderung handelt. Dieser Test wird nicht als fehlgeschlagen gekennzeichnet, wenn sich tatsächlich nichts geändert hat, und Sie können sogar Regeln hinzufügen, um dynamische Bereiche einer Anwendung zu ignorieren, die sich aufgrund dieses Inhalts ändern könnten.

Wo visuelles Testen hilft

Visuelles Testen lebt davon, den aktuellen Zustand einer Anwendung genau so erfassen zu können, wie Ihr Kunde ihn gesehen hat. Dies macht es für wirklich jede Anwendung überzeugend, bei der echte Menschen damit interagieren.

Da es diesen Snapshot erfasst, deckt es viele Teile dieser Anwendung ab, nicht nur eine einzelne granulare Komponente, für die Sie einen Test geschrieben haben. Am Ende erfasst es den Kontext um diese Komponente herum, was zu einer breiteren Abdeckung führt.

Dies ist eine großartige Möglichkeit, eine breite Abdeckung mit geringem Overhead bereitzustellen . Zurück zur Testpyramide oder Testtrophäe, wir sind in der Lage, zusätzlich zu all unseren anderen Tests eine umfassende Abdeckung anzubieten.

Wie funktioniert visuelles Testen?

Das Wesentliche ist einfach – zwei Bilder miteinander vergleichen und nach dem Unterschied suchen – aber es ist ein wenig komplizierter.

Bildvergleiche

Bei der Implementierung visueller Tests besteht das Ziel darin, kritische Workflows abzudecken, die erfassen können, wie eine reale Person die Anwendung verwendet. Dazu gehört oft der allererste Bildschirm, den jemand sieht, aber das ist normalerweise nicht der einzige Bildschirm, den er sieht.

Genau wie beim Erstellen einer Strategie für die Durchführung herkömmlicher Tests möchten Sie sicherstellen, dass Sie nach echten Interaktionen suchen, die zu echten Ergebnissen in der Benutzeroberfläche führen, z. B. das Hinzufügen eines Artikels zu einem Einkaufswagen oder das Hinzufügen eines Lieblingsartikels zu Ihrer Wunschliste.

In diesem Sinne sollten Sie bei jedem Schritt einen Screenshot machen. Wenn Sie beispielsweise einen Online-Shop testen, möchten Sie möglicherweise Schritte für Folgendes hinzufügen:

• Liste der auf einer Seite geladenen Produkte;
• Produktseite nach Auswahl eines einzelnen Produkts;
• Warenkorb-Benutzeroberfläche auf der Seite, nachdem ein Produkt zu diesem Warenkorb hinzugefügt wurde;
• Warenkorbseite nach dem Navigieren zum Warenkorb;
• Zahlungs- und Versand-Benutzeroberfläche nach dem Betreten des Checkout-Ablaufs;
• Quittungsseite nach erfolgreichem Kauf.

Dadurch werden die Ergebnisse aller Interaktionen erfasst, während sich jemand durch Ihren Online-Shop bewegt, wo Sie überprüfen können, ob es nicht nur aus der Code-Perspektive funktional funktioniert, sondern dass die Person Ihre Anwendung tatsächlich ohne verwenden kann visuelle Fehler stören.

Technische Bits

Während Sie Screenshots planen, benötigen Sie einen Mechanismus, um diese Aufgaben zu automatisieren. Etwas, das basierend auf einer Reihe von Aufgaben mit einem Browser interagieren kann.

Hier kommen beliebte Browser-Automatisierungs-Frameworks wie Selenium, Cypress und Playwright ins Spiel, bei denen diese Test-Frameworks Browser-APIs nutzen, um Ihre Befehle zu durchlaufen, Dinge zu finden und anzuklicken, genau wie ein Mensch es tun würde, wo Sie dann das visuelle Test-Framework mitteilen würden wann der UI-Zustand visuell erfasst werden soll.

Im Fall von Cypress und Applitools würde Cypress durch jede Seite navigieren, wo dann das Applitools SDK einen Schnappschuss des DOM extrahieren und diesen Schnappschuss an die Applitools-Cloud senden würde, wo es schließlich Screenshots zum Vergleich generieren würde.

An diesem Punkt erhalten Sie je nach visueller Testplattform eine Reihe von Ergebnissen in Form von hervorgehobenen Unterschieden oder einem schönen grünen Häkchen, wenn die Dinge gut aussehen.

Integration mit bestehenden Test-Frameworks

Wie die obige Cypress- und Applitools-Integration ist die Integration in der Regel reibungsarm. Viele der verfügbaren visuellen Testplattformen können direkt in bestehende Test-Frameworks integriert werden, es hängt meistens nur davon ab, welche SDKs sie zur Verfügung haben.

 cy.visit('/product/1234'); cy.eyesOpen({ appName: 'Online Store', testName: 'Product Page' }); cy.eyesCheckWindow(); cy.eyesClose();

Dies bedeutet, dass Sie Ihre Testsuite in der Regel nicht komplett neu schreiben müssen, um Ihre Tests zu verstärken und eine visuelle Abdeckung zu erhalten. Sie können diese Prüfpunkte zu den bereits vorhandenen Tests hinzufügen.

Automatisierung von Tests

Glücklicherweise ist die Automatisierung von Entwicklungs- und testbezogenen Aufgaben schnell ausgereift und bietet viele großartige Möglichkeiten, wie wir unsere Tests automatisieren können.

Herkömmliche CI/CD-Lösungen wie Jenkins oder Travis CI ermöglichen es Ihnen, Ihre Tests in ihren Umgebungen direkt neben dem Rest der Integrations- und Bereitstellungspipeline auszuführen. Relativ neu im Automatisierungsbereich sind Tools wie GitHub Actions, wo sie einen ähnlichen Mechanismus wie die traditionellen CI/CD-Umgebungen bieten, aber direkt in Ihrem bestehenden GitHub-Repo. Dies macht es zu einem leichten Gewinn, wenn Sie versuchen, Ihre Tests und andere Codeaufgaben automatisch auszuführen, wenn Sie kein völlig neues System benötigen, sondern stattdessen Ihre vorhandenen Tools verwenden.

 name: Node.js CI on: [push, pull_request] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: node-version: 12.x - run: npm ci - run: npm test

Aber unabhängig von der Umgebung, die Sie verwenden, unterliegen Sie letztendlich den Anforderungen des Testframeworks. Cypress funktioniert ziemlich nahtlos überall dort, wo Sie Node.js installieren können, was heutzutage ziemlich üblich ist, solange Sie Zugriff auf einen Headless-Browser wie Electron oder Chrome haben. Andere erfordern möglicherweise ein wenig zusätzliche Umgebung, aber an diesem Punkt können Sie diese Umgebung normalerweise nach Belieben rüsten und die Bedingungen schaffen, die Sie zum Ausführen Ihrer Tests benötigen.

Was sind die Vorteile von visuellen Tests?

Visuelles Testen wird eine Vielzahl von Vorteilen bieten, wie einige der bereits besprochenen, aber es hilft wirklich allen Beteiligten, einschließlich Führungskräften, Produktmanagern, Entwicklern, Designern und wirklich jedem anderen im Team.

Als CEO oder Produktmanager gewinnen Sie beispielsweise die Gewissheit, dass Ihre Testabdeckung tatsächlich die Nutzung in der realen Welt erfasst . Für das Entwicklungsteam gewinnen Sie das gleiche Vertrauen, dass Sie bei jeder Änderung sofort Feedback erhalten, wodurch der Angstfaktor beseitigt wird, der mit dem Versuch verbunden ist, schnell zu handeln. Aber es gibt auch viele praktische Vorteile.

Weniger zu wartender Code

Bei der Integration mit einer visuellen Testplattform dreht sich der Großteil Ihres Codes um zwei Dinge: Interaktionen und Screenshots.

Die Interaktionen bestehen im Wesentlichen darin, durch eine Anwendung zu navigieren und herauszufinden, welche Seite oder welchen Benutzerfluss Sie erfassen möchten. Unabhängig davon, wie Sie testen, müssen Sie dies wahrscheinlich in der einen oder anderen Form beibehalten.

Die Screenshots hingegen decken alle Behauptungen ab, die Sie normalerweise in einem Test schreiben würden. Indem Sie jeden Screenshot mit einer Baseline vergleichen, stellen Sie automatisch sicher, dass jede Komponente Ihres Projekts genau wie beabsichtigt funktioniert.

Tests sind weniger anfällig

Und indem Sie diese Screenshots als Assertionsmechanismus verwenden, werden Ihre Tests weniger brüchig und anfällig.

Wenn Sie eine Assertion gegen einen bestimmten Teil des DOM schreiben, wie z. B. die Verwendung einer ID oder eines automatisch generierten Selektors, riskieren Sie mit jeder Änderung an dieser Komponente einen Bruchtest.

Mit einer ID könnte jemand sie einfach versehentlich entfernen oder ändern. Vielleicht dachten Sie, es sei nur für funktionale Zwecke und haben es aktualisiert, als Sie Dinge überarbeiteten, was dazu führte, dass der Test fehlschlug (ist mir passiert!).

Oder wenn Sie allgemeine Selektoren verwenden, ob automatisch generiert oder nicht, sind diese in der Regel sehr spezifisch, da Sie sehr spezifische Teile der Anwendung testen . Wenn Sie am Ende etwas HTML verschachteln oder Dinge im Code ein wenig verschieben, könnte dies dazu führen, dass dieser Test gebrochen wird, selbst wenn Sie das visuelle Aussehen nicht geändert haben.

Testen, was die Leute tatsächlich verwenden

Apropos visuell testen: Beim visuellen Test testen Sie, was Ihre Besucher oder Kunden tatsächlich sehen.

Die Verwendung von richtigem, semantischem HTML macht Ihr Projekt nicht automatisch nutzbar. Eine kleine CSS-Änderung (wie z-index) kann die Benutzerfreundlichkeit und das Aussehen von etwas komplett verändern.

Indem Sie einen Screenshot erstellen und den tatsächlichen Zustand der Anwendung durch Interaktionen eines Benutzerflusses vergleichen, können Sie sicherstellen, dass Ihre Anwendung sowohl funktional funktioniert als auch von mehr als nur Automatisierungsrobotern verwendet werden kann.

Empfohlene Lektüre : CSS Z-Index in großen Projekten verwalten

Testen von Dingen, an die Sie nicht gedacht haben

Sie erhalten auch Informationen zu verschiedenen Teilen Ihrer Anwendung, an deren Test Sie nicht einmal gedacht haben.

Betrachten Sie die Liste der Tests, die Sie in Ihrer Suite haben, das sind diejenigen, die Sie zu schreiben gedachten oder schrieben, weil Sie zuvor auf einen Fehler gestoßen sind. Was ist mit dem Rest der Bewerbung?

Dieser Screenshot wird mehr Details und Kontext erfassen, die Ihre anderen Tests möglicherweise nicht enthalten haben.

Was deckt visuelles Testen nicht ab?

Aber visuelles Testen ist nicht als Endlösung gedacht, um Ihre gesamte Testsuite zu ersetzen. Wie die anderen Arten von Tests sollte es nebeneinander existieren, die Lücken der anderen füllen und letztendlich eine aussagekräftigere Abdeckung bieten.

Testen der datengesteuerten Geschäftslogik

Während Sie visuelle Tests durchführen, können Sie möglicherweise einige Aspekte Ihrer Geschäftslogik erfassen, z. B. sicherstellen, dass die Mathematik stimmt, wenn jemand einen Artikel in den Einkaufswagen legt, aber Ihr Online-Shop hat wahrscheinlich eine größere Auswahl als nur dieses eine Produkt.

Es ist immer noch wichtig, diese komplexe Geschäftslogik mit Komponententests zu erfassen und sicherzustellen, dass Sie verschiedene Anwendungsfälle erfassen, z. B. wie sich verschiedene Rabatte auf diese Summe auswirken.

Umfassende API-Tests

Beim Umgang mit APIs können Sie sich einen visuellen Test wie einen Integrationstest vorstellen. Wir können testen, ob unsere Anforderungslogik bei der Interaktion mit dem Browser wie erwartet funktioniert. Aber es bietet keinen umfassenden Überblick darüber, wie diese API funktioniert.

Ähnlich wie bei der Geschäftslogik sollte Ihre API weiterhin durch eine Reihe von Tests unterstützt werden , die sicherstellen, dass sie wie erwartet funktioniert, wie z. B. Einheitentests oder Zustandsprüfungen.

Erste Schritte mit visuellen Tests

Als weiteres Werkzeug in unserem Gürtel können visuelle Tests wirklich dazu beitragen, ein weiteres Maß an Abdeckung zu erreichen, das uns hilft, ein hohes Qualitätsniveau für unsere Anwendungen aufrechtzuerhalten, aber wo fangen wir an?

Einpassen in den Entwicklungslebenszyklus

Da visuelles Testen dabei hilft, auf die Ziele aller Beteiligten hinzuarbeiten, kann dies wirklich in jeden Teil des Entwicklungslebenszyklus passen.

Zum Beispiel werden Tests traditionell nur verwendet, um zu überprüfen, ob der Code wie beabsichtigt funktioniert, aber wir können auch visuelle Tests für die Designübergabe und die UX-Zusammenarbeit verwenden . Die Designer im Team können ihre Mockups als Grundlage verwenden und sie einfach verwenden, um die tatsächliche Erfahrung zu vergleichen.

Aus der Code-Perspektive können visuelle Tests jedoch in automatisierten Umgebungen erfolgreich sein, z. B. bei der Durchführung von Überprüfungen von Pull-Anforderungen, von Staging-Umgebungen vor der Bereitstellung und der Sicherstellung, dass die Produktion nach der Bereitstellung gut aussieht.

Sie können Ihre visuellen Tests sogar auf einem Cron ausführen und Ihre synthetischen Gesundheitscheck-Ereignisse ersetzen, die normalerweise flockig sind und Ihnen nicht wirklich sagen, in welchem ​​​​Zustand sich Ihre Anwendung befindet.

Glücklicherweise gibt es viele Optionen sowohl für den Dienst, den Sie verwenden, als auch für die Integrationspunkte für die Nutzung dieser Dienste.

Verfügbare Lösungen für visuelle Tests

Die Bestimmung, mit welcher Lösung Sie fortfahren möchten, hängt von der Auswahl der Bibliothek oder des Dienstes ab, die bzw. den Sie zum Ausführen der Tests verwenden werden. Wie bereits erwähnt, ist das größte Unterscheidungsmerkmal die Art der visuellen Tests, die diese Dienste bieten.

Viele Plattformen verwenden visuelle Pixel-für-Pixel-Tests, um Überprüfungen durchzuführen. Dazu gehören Tools wie Percy und Chromatic, die Änderungen zwischen zwei Screenshots kennzeichnen.

Dann haben Sie KI-gestützte visuelle Tests, bei denen Applitools wirklich der einzige Dienst ist, der diese Fähigkeit derzeit bietet. Anstatt Bilder einfach Pixel für Pixel zu überprüfen, vergleicht Applitools die Bilder auf intelligente Weise und vermeidet so lückenhafte Tests oder falsch positive Ergebnisse, was eine aussagekräftige Erkennung von Änderungen ermöglicht.

Unabhängig von der Lösung müssen Sie sie letztendlich in Ihre Entwicklungsumgebung integrieren, unabhängig davon, ob Sie bei Null anfangen oder sie einem vorhandenen Testframework hinzufügen.

Integrieren von visuellen Tests

Bei der Integration Ihrer bevorzugten visuellen Testplattform haben Sie die Möglichkeit, bei Null anzufangen oder den einfacheren Weg der Integration in Ihr vorhandenes Testframework zu wählen. Tools wie Applitools machen dies einfach, wobei die große Vielfalt der unterstützten SDKs dazu beiträgt, dass sie sich leicht in bestehende Workflows integrieren lassen.

Ein gutes Beispiel hierfür ist, wenn Sie Cypress bereits eingerichtet haben und ausführen:

 it('should log into the application', () => { cy.get('#username').type('colbyfayock'); cy.get('#password').type('Password1234'); cy.get('#log-in').click(); cy.get('h1').contains('Dashboard'); });

Wenn Sie bereits programmatische Tests durchführen, können Sie einfach visuelle Tests hinzufügen, um eine weitere Abdeckungsebene bereitzustellen.

 it('should log into the application', () => { cy.eyesOpen({ appName: 'My App', testName: 'Login' }); cy.get('#username').type('colbyfayock'); cy.get('#password').type('Password1234'); cy.get('#log-in').click(); cy.eyesCheckWindow(); cy.eyesClose(); });

Und einige SDKs machen es sogar noch einfacher. Wenn Sie bereits eine Storybook-Bibliothek ausführen, brauchen Sie nur das Paket mit npm zu installieren und einen einfachen Befehl auszuführen, dann haben Sie eine vollständige Abdeckung aller Ihrer Komponenten.

 npm install @applitools/eyes-storybook --save-dev npx eyes-storybook

Letztendlich ist die größte Frage, welches Testframework Sie verwenden möchten und ob der Dienst, den Sie verwenden möchten, dieses Framework unterstützt.

Kreative Verwendung von visuellen Tests

Abgesehen davon, dass Sie eine weitere Ebene der Testabdeckung für Ihre Anwendung erreichen, gibt es eine Vielzahl anderer Möglichkeiten, wie Sie die Vorteile visueller Tests nutzen können.

• Betriebszeitüberwachung
  Führen Sie regelmäßig einen aussagekräftigen visuellen Test statt der typischen Betriebszeitüberwachung mit fragilen synthetischen Ereignissen durch.
• Design/UX-Zusammenarbeit
  Verwenden Sie von der Übergabe bis hin zu Usability-Problemen visuelle Tests, um dem gesamten Team ein Medium zur Zusammenarbeit zu geben.
• Zugänglichkeitsprüfung
  Erfassen Sie wichtige Probleme, die die Zugänglichkeit Ihrer Anwendung einschränken können.
• Historische Momentaufnahmen
  Das regelmäßige Ausführen eines visuellen Tests kann Ihnen dabei helfen, Momentaufnahmen zu machen, wodurch Sie leicht auf einen älteren Stand des Projekts verweisen können.
• Lokalisierungstests
  Da KI-basierte visuelle Tests Inhaltsänderungen erkennen können, können Sie unabhängig von der Sprache sicherstellen, dass alles wie erwartet aussieht und funktioniert. Bonus: Sie können den Aufwand reduzieren, wenn Sie versuchen, verschiedene Versionen einer bestimmten Sprache zu vergleichen.

Indem Sie das visuelle Element zu Ihren Tests hinzufügen, erhalten Sie mehr Möglichkeiten, sinnvolle Möglichkeiten hinzuzufügen, um ein hohes Qualitätsniveau für Ihre App aufrechtzuerhalten.