Online survey filling out and digital form checklist by laptop computer, Document Management Checking System, online documentation database and process manage files

Mit End-to-End Testing zur einwandfreien Webanwendung

Webanwendungen sind selten statisch. Damit bestehende Funktionen und Layouts dabei keinen Schaden nehmen, kommen End-to-End Tests zum Einsatz.

End-to-End Testing sorgt dafür, dass Webanwendungen auch bei Anpassungen vollkommen intakt bleiben. Denn: Neben neuen Browserspezifikationen müssen Entwickler stetig neue SEO-Richtlinien und Features implementieren. Mit End-to-End Tests können alle Anwendungen und Seiten getestet werden, welche sich in einem Browser öffnen lassen. Für die Entwicklung wird das Framework „Cypress“ verwendet. Dieses beinhaltet verschiedene Funktionen, welche die Entwicklung vereinfachen und die Zuverlässigkeit der Ergebnisse sicherstellen.

Wie genau das ausschaut und wie End-to-End Tests Entwickler beim der Webentwicklung unterstützen, erfahren Sie in unserem Blogartikel.

End-to-End Tests: So funktioniert’s

Im Gegensatz zu Unit- oder Integration Tests, wird bei End-to-End Tests die komplette Anwendung aus Sicht eines Users geprüft. Dazu wird sie zunächst in verschiedenen Browsern (aktuell Chrome, Firefox und Edge) und Auflösungen geöffnet.

Ein Test besteht zum einen aus Interaktionsanweisungen (Klicken, Scrollen, Tippen, etc.) und zum anderen aus erwarteten Ergebnissen (Bsp.: „Nachdem der User auf einen Submit-Button klickt, soll er auf eine Success Seite weitergeleitet werden.“ oder „Der Text in der Navigation soll die Farbe Blau haben.“).

Durch dieses Vorgehen kann sowohl die Funktionalität der Webanwendung als auch das Layout entsprechend geprüft werden. Geschrieben werden die Tests entweder in JavaScript oder in TypeScript. Da ein Webentwickler sich keine neue Programmiersprache aneignen muss, kann das Entwickeln von End-to-End Tests schnell erlernt werden. 

End-to-End Testing für Layout und Funktionalität

Um ein einwandfreies Layout sowie eine umfassende Funktionalität der Website sicherzustellen, lassen sich die End-to-End Tests sowohl in den Entwicklungsprozess integrieren als auch auf die produktive Anwendung anwenden. Dies gestaltet sich wie folgt:

Entwicklungsprozess

In einer Codeverwaltungssoftware wie beispielsweise GitLab lassen sich Pipelines einrichten, welche bei jeder Aktualisierung des Programmcodes ablaufen. Es ist möglich, End-to-End Tests einer Anwendung in solch eine Pipeline zu verlagern, sodass im Entwicklungsprozess bei jeder Codeänderung geprüft wird, ob die Tests erfolgreich sind.

Sollte ein Test fehlschlagen, wird dies dem Entwickler mitgeteilt und er sieht, dass eine bestehende Funktion durch seine Entwicklung beschädigt wurde. Dadurch hat er nun die Möglichkeit, den Fehler zu beheben, noch bevor die Anwendung deployed wird.  

Produktive Anwendungen

Im Falle der produktiven Webanwendungen lassen sich die Tests in einen Docker Container auslagern – Layout und Funktionalität der Anwendungen können so jede Nacht geprüft werden.

Im Falle eines fehlgeschlagenen Tests werden die Entwickler benachrichtigt, um dann direkt mit der Fehlerbehebung zu starten. Auf diese Weise werden Probleme sichtbar, welche nicht in der Entwicklung entstehen, sondern beispielsweise durch geänderte Browserspezifikationen oder nicht weiter vom Browser unterstützte Funktionen hervorgerufen werden. Bei der Analyse und Behebung von fehlgeschlagenen Tests unterstützen Screenshots oder auch Videos, die automatisiert aufgezeichnet werden.

Fazit

End-to-End Testing zur einwandfreien Webanwendung

End-to-End Tests sind eine nicht zu unterschätzende Technik, wenn es um die Sicherstellung der Qualität von Webanwendungen geht! Ob Unternehmenswebsite, Weblog oder Online-Shop – End-to-End Tests sind das Mittel der Wahl für alle Anwendungen und Seiten, die sich mit dem Browser abrufen lassen. Sowohl im Entwicklungsprozess als auch bei produktiven Anwendungen kommt die Technik zum Einsatz. Gerne beraten unsere Experten Sie zu End-to-End Testing oder unterstützen Sie bei der Umsetzung Ihres Webprojekts.  

Referenz: Bayer Crop Science Dresscode und eBagTag - Schutzkleidung maßgeschneidert

Die Bayer AG kommuniziert mit ihren Kunden im Bereich Crop Science über von der TIMETOACT GROUP entwickelte Online-Portale.
Atlassian Logo
Technologie

Bamboo, Bitbucket, Sourcetree

Continuous Integration und eine Continuous Delivery Pipeline mit Bamboo, Bitbucket und Sourcetree. Wir können Sie mit unserer jahrelangen Erfahrung als Anwender sowie als Solution Partner von Atlassian Produkten in vielen Bereichen helfen.

Kompetenz 23.06.22

Mit Low Code zur schnellen Lösung

Die Digitalisierung durchdringt mehr und mehr unseren Alltag und fordert gleichzeitig immer neue IT-Lösungen – ein Bedarf, den Unternehmen angesichts des Mangels qualifizierter Entwickler*innen kaum noch decken können. Low-Code gibt Antwort auf diese und weitere Herausforderungen im Digitalen Zeitalter.

Navigationsbilc zu Application Development
Service

Application Development für Individualsoftware

Application Development bzw. Anwendungsentwicklung bezeichnet den Vorgang eine oder mehrere Anwendungen zu verändern, zu konzipieren und / oder zu entwickeln. So lassen sich Lücken in der Softwarelandschaft schließen, indem Anwendungen individuell auf den Kunden zugeschnitten werden.

Blog

9 Tipps & Tricks für Angular

Angular ist unter Webentwicklern ein beliebtes Framework für das Programmieren von Web-, Desktop- und mobilen Anwendungen. In unserer Anleitung haben wir neun Tipps & Tricks zusammengestellt, welche Angular-Einsteigern und Profis die Webentwicklung garantiert erleichtert.

Referenz

Dresscode und eBagTag - Schutzkleidung maßgeschneidert

Die Bayer AG kommuniziert mit ihren Kunden im Bereich Crop Science über von der TIMETOACT GROUP entwickelte Online-Portale.

Header zu Fullstack Development
Service

Mit Fullstack Development alles aus einer Hand

Der Trend in der Softwareentwicklung geht zur Full Stack-Entwicklung. Full Stack-Entwickler*innen sind Programmierer*innen, die sowohl in der Frontend- als auch Backendentwicklung tätig sind und dadurch Kompetenzen im Bereich von Datenbanken, Servern, Systemen und Clients besitzen.

Referenz

TIMETOACT realisiert integrierte Versicherungs-Software

Weniger als ein Jahr von Projektstart bis Systemeinführung: TIMETOACT entwickelte für die VOV D&O-Versicherungsgemeinschaft die integrierte, browserbasierte Versicherungssoftware „HERMES“. Die abteilungsübergreifende Individualsoftware deckt alle Kernprozesse der Versicherung vollständig ab. Die Anwender schätzen insbesondere die intuitive Nutzeroberfläche und die hohe Performance von HERMES.

Mann mit Stift schreibt auf A4
Service

Testing-Center

Legen Sie Ihre Standard-IT-Tests inklusive IBM- und Microsoft Examen bei TIMETOACT in München ab

Blog

Top 10 CSS Tipps & Tricks in 2020

Um die Programmiersprache CSS kommt wohl kein Webentwickler herum. Wir haben für euch zehn Tipps & Tricks zusammengefasst, die ihr in 2020 kennen solltet.

Headerbild zu Webserver mit Open Source
Technologie 12.11.20

Webserver mit Open Source

Webserver bieten ihrer Anwendung das Tor zur Welt: Hier gehen Anfragen für Daten für eine komplexe Webapp und Ressourcen einer Website ein und aus.

Event Archive 25.07.23

Eventserie: Einfach, Schnell, Erfolgreich mit Mendix

Mit unserer neuen Event-Reihe bieten wir Einblicke in die Welt der Low-Code Anwendungsentwicklung, von den Grundlagen bis hin zu fortgeschrittenen Anwendungen.

Feb 29
Referenz 25.10.22

Interaktives Onlineportal identifiziert passende Mitarbeiter

TIMETOACT digitalisiert für KI.TEST mehrere Testverfahren zur Bestimmung der beruflichen Intelligenz und Persönlichkeit.

News 30.03.23

TIMETOACT ist Mendix Trainingspartner

Wir sind von den No-Code/Low-Code Plattformen von Mendix überzeugt und sind daher nicht nur Mendix Partner, sondern auch Mendix Schulungspartner.

News 23.05.24

HCL Lizenz- und Preisanpassungen zum 8.8.2024

HCL Software hat uns informiert, dass die Lizenz- und Wartungspreise für die verschiedenen Produktkategorien zum 8.8.2024 erhöht werden.

News

Ende für IBM Connections Cloud – und jetzt?

Bereits bei der Übernahme der IBM Collaboration Produkte hat HCL bekannt gegeben, dass die Connections und die Notes-Mail Cloud ab 2020 nicht weiter unterstützt wird.

Headerbild zum Ende der Server Neulizenzierung bei Atlassian
News

Ende der Server Neulizenzierung bei Atlassian

Ab Februar 2021 wird der Verkauf neuer Serverlizenzen, in den Folgejahren sukzessive Upgrades und deren Wartung eingestellt.

Blog

Live Share für die reibungslose Kommunikation in VS Code

Mit der Microsoft Extension Live Share habt ihr die Möglichkeit, gemeinsam mit eurem Team in Visual Studio Code am selben Code zu arbeiten, euch via Chat oder Audio auszutauschen oder Kollegen euren Server zur Verfügung zu stellen.

Headerbild zu Application Modernization
Service

Anwendungen mit Application Modernization optimieren

Application Modernization (deutsch: Anwendungsmodernisierung) konzentriert sich darauf, bestehende Applikationen zu modernisieren. Der Schlüssel zum Erfolg bei der Anwendungsmodernisierung liegt letztendlich in der Strategie und der Auswahl von Projekten.

Blog

Deno – Das müsst ihr über die Laufzeitumgebung wissen

Deno nennt sich die neueste Kreation von Ryan Dahl, dem ursprünglichen Schöpfer von Node.js. Die neue Laufzeitumgebung weist einige spannende Neuerungen auf – mehr dazu in unserem Blogbartikel!

News 29.09.20

Neue Mobilitätskonzepte für Hamburger Hochbahn

Das Fachmagazin Nahverkehrs-praxis berichtet darüber, wie die Hamburger Hochbahn mit Hilfe der TIMETOACT GROUP neue Mobilitätskonzepte entwickelt