Not logged in.

Quick Search - Contribution

Contribution Details

Type Bachelor's Thesis
Scope Discipline-based scholarship
Title Finding common use patterns for a React web-application; A user tracking library
Organization Unit
Authors
  • Remus Nichiteanu
Supervisors
  • Harald Gall
  • Pasquale Salza
  • Marco Edoardo Palma
Language
  • English
Institution University of Zurich
Faculty Faculty of Business, Economics and Informatics
Date 2022
Abstract Text Graphical User Interfaces (GUIs) are an integral part of any web-application and the first feature users interact with when using it. Thus, it is important for their behavior to be error free, which can be achieved through rigorous testing. Most tests are created by scripting scenarios in order to verify the behavior of intended functionality of a GUI. Many of the state-of-the-art approaches like Model-Based Testing create testing scenarios through a model, which is derived from the GUI. Since manually creating a model for an application is time-consuming and requires a lot of effort, they are abstracted and thus tests derived from them do not reflect actual user behavior in a production environment. Traditional Record-Replay Testing like Selenium, a testing strategy based on recording actions and then replaying them to achieve for example regression testing, use manually recorded scenarios as test cases, which also do not encompass real end-user behavior, due to being highly scripted. Synthetic End-User Testing is a novel strategy in which testing scenarios based on real enduser data are created. It records and synthesizes end-user data into agents, which, compared to traditional testing approaches that exhaustively analyze all possibilities, only consider action sequences that are likely to occur in production and thus test a software in a smaller search-space. Due to the search-space being restricted to scenarios real users might go through when using the application, improvements of the application are based on real use-cases encountered. This work presents a prototype for collecting user data of React web-applications with Synthetic End-User Testing in mind. It is a React library, that records each action a user performs on the GUI of the application and creates a sequence, representing the path a user took throughout the GUI. Each object representing a user action contains data about the state of the GUI before and after the action was performed, thus giving insight into how the GUI of the application adjusts after each interaction by the user. The presented tool can be utilized as a React specific implementation of the recording step in Synthetic End-User Testing, with it collecting as much information as possible about the GUI state as a valuable addition to the process. The presented library was implemented on an open-source project as validation. The findings suggest that the proposed technique is a valid approach for recording action data of a React webapplication.
Zusammenfassung Graphical User Interfaces (GUIs) sind ein fundamentaler Bestandteil von Web-Applikationen aller Art und es ist wichtig, dass sie kein fehlerhaftes Verhalten aufzeigen, was durch riguroses Testen erreicht werden kann. Die meisten Tests werden durch das vorfertigen von Szenarien erstellt um das Verhalten der vorgesehenen Funktionalität des GUI zu überprüfen. Viele der modernen Angehensweisen wie Model-Based Testing erstellen Testszenarien durch ein Model, welches vom User Interface abgeleitet worden ist. Weil es viel Zeit und Aufwand braucht, um solch ein Model manuell zu erstellen, werden sie oft abstrahiert, was dazu führt, dass sie nicht dem Verhalten eines echten Benutzers entsprechen. Traditionelles Record-Replay Testing wie zum Beispiel Selenium, eine Teststrategie basierend auf dem Aufnehmen von Handlungen, welche dann wiedergegeben werden um zum Beispiel Regressionstests durchzuführen, verwenden manuel erstellte Szenarien, welche ebenfalls nicht dem Handeln eines echten Benutzers gleichkommen. Synthetic End-User Testing ist eine neue Strategie, bei welcher Testszenarien basierend auf echte Benutzerdaten erzeugt werden. Benutzerdaten werden aufgenommen und synthetisiert als sogenannte Agents, welche, verglichen mit traditionellen Vorgehen, die alle Möglichkeiten analysieren, nur diejenigen Handlungssequenzen betrachten, welche wahrscheinlich in einem Production Umfeld vorkommen und somit eine Software mit einem kleineren Suchraum testen. Da der Suchraum beschränkt ist auf Szenarien, welche Benutzer wirklich auftreffen könnten, sind durgeführte Verbesserungen basierend auf echte Problemsituationen. Diese Arbeit stellt einen Prototyp für das sammeln von Benutzerdaten von ReactWeb-Applikationen vor, unterstützend für Synthetic End-User Testing. Es ist eine React Bibliothek, welche Handlungen eines Benutzers auf das User Interface aufnimmt und eine Sequenz erstellt, die den Handlungsweg des Benutzers durch die Applikation darstellt. Jedes Objekt, repräsentativ für eine Handlung, enthält den vorherigen und folgenden Zustand des Interfaces, was Einsicht in die Entwicklung dessen durch jede Handlung gibt. Das vorgeschlagene Tool kann verwendet werden als eine React-spezifische Umsetzung des Aufnahmeschrittes von Synthetic End-User Testing, und durch das Aufnehmen möglichst vieler Daten für die modellierung des GUI Zustandes, als eine wertvolle Ergänzung des Prozesses. Die vorgestellte Bibliothek wurde auf ein open-source Projekt angewendet. Die Erkenntnisse zeigen auf, dass die vorgeschlagene Technik ein valides Vorgehen um Handlungsdaten für React Web-Applikationen zu sammeln ist.
PDF File Download
Export BibTeX