Seminar Maestro – React Native und Expo End-to-End-Tests

Inhaltsverzeichnis

1. Seminarprofil
2. Lernziele
3. Seminarinhalte
4. Praxisübungen
5. Zielgruppe und Voraussetzungen
6. Praxisnutzen

Seminarprofil

Dieses praxisorientierte Seminar behandelt plattformübergreifende End-to-End-Tests für React-Native- und Expo-Anwendungen. Die Arbeit erfolgt schrittweise an ausführbaren Flows, klar definierten Testzuständen und nachvollziehbaren Diagnoseartefakten. Konfiguration, Testlogik und Betriebsanforderungen werden so verbunden, dass die erarbeiteten Muster in produktiven Teams weiterverwendbar bleiben.

Lernziele

• Build- und Laufzeitvarianten für Tests unterscheiden
• zugängliche Kennungen und stabile Selektoren verwenden
• Navigation und asynchrone Zustände absichern
• gemeinsame Flows mit kleinen Plattformzweigen gestalten

Seminarinhalte

Schritt 1: Einsatzbereiche und Systembild einordnen

Das Werkzeug wird als Black-Box-System für mobile und webbasierte Oberflächen eingeordnet. Der Schwerpunkt liegt auf reproduzierbaren Benutzerabläufen, einer lesbaren YAML-Beschreibung und der Trennung von Testabsicht, Testdaten und Ausführungsumgebung.

• Studio, Kommandozeile und Cloud-Ausführung voneinander abgrenzen
• native, Cross-Platform- und Web-Anwendungen fachlich zuordnen
• geeignete Testfälle von ungeeigneten Prüfaufgaben unterscheiden

Schritt 2: React-Native-Testprojekt vorbereiten

Build, Entwicklungsmodus und App-Start werden für reproduzierbare End-to-End-Tests eingerichtet. Native Container und JavaScript-Oberfläche werden als gemeinsamer Benutzerablauf behandelt.

• Android- und iOS-Builds getrennt bereitstellen
• Entwicklungs- und Produktionskonfiguration unterscheiden
• stabile Accessibility-Labels und Testkennungen vereinbaren

Schritt 3: Stabile Selektoren entwickeln

Elemente werden bevorzugt über fachlich stabile Merkmale angesprochen. Text, Kennung und Zustand werden gegeneinander abgewogen; fragile Koordinaten und zufällige Bildschirmpositionen werden vermieden. Die Selektorstrategie wird als Teamregel dokumentiert.

• Text- und ID-Selektion anhand der Oberfläche bewerten
• reguläre Ausdrücke nur bei kontrollierten Varianten einsetzen
• Eindeutigkeit vor jeder Interaktion mit einer Prüfung bestätigen

Schritt 4: Navigation und asynchrone Zustände in React Native prüfen

Stack-, Tab- und Modalnavigation wird mit fachlichen Zwischenprüfungen abgesichert. Netzwerkabhängige Ladezustände und verzögerte Renderzyklen werden über beobachtbare UI-Zustände synchronisiert.

• Navigationszustände gezielt herstellen
• Lade-, Fehler- und Erfolgszustände prüfen
• plattformübergreifende und plattformspezifische Schritte trennen

Schritt 5: Synchronisation ohne starre Pausen gestalten

Die integrierte Wartelogik wird bewusst genutzt und nur dort ergänzt, wo asynchrone Verarbeitung oder lange Hintergrundvorgänge dies erfordern. Feste Schlafzeiten werden durch beobachtbare Zustände ersetzt.

• automatisches Warten und Animationsruhe verstehen
• extendedWaitUntil für fachliche Zustände einsetzen
• Timeouts begründen, begrenzen und als Diagnosehinweis dokumentieren

Schritt 6: Expo-Workflows und Build-Varianten einbinden

Expo-Entwicklungsumgebung, Development Build und produktionsnahe App werden hinsichtlich ihrer Testbarkeit abgegrenzt. Gerätezugriff, Deep Links und Konfigurationswerte werden reproduzierbar behandelt.

• geeignete Build-Variante für den Testzweck auswählen
• Deep Links und Laufzeitkonfiguration prüfen
• lokale Ausführung und Pipeline-Build aufeinander abstimmen

Schritt 7: Gemeinsame Flows mit gezielten Plattformzweigen gestalten

Fachlich gleiche Journeys werden soweit sinnvoll gemeinsam beschrieben. Abweichungen bei Systemdialogen, Navigation und Texten werden in kleinen, klar benannten Teilflows gekapselt.

• gemeinsame Kernschritte identifizieren
• Plattformbedingungen nur an tatsächlichen Abweichungen einsetzen
• beide Varianten unabhängig ausführbar und diagnostizierbar halten

Schritt 8: Elementhierarchie und Ausführungsprotokoll diagnostisch nutzen

Fehlende oder falsch ausgewählte Elemente werden anhand der zugänglichen Hierarchie untersucht. Ausführungsprotokoll, Hierarchieausgabe und Screenshots werden zusammen betrachtet, bevor ein Selektor geändert wird.

• Elementbaum zum Fehlerzeitpunkt erfassen
• tatsächlichen Zustand mit erwarteter Oberfläche vergleichen
• Selektoränderungen klein halten und mit Gegenfällen prüfen

Praxisübungen

1. Development Build und produktionsnahen Build testfachlich abgrenzen
2. Tab-, Stack- und Modalnavigation als robuste Journey automatisieren
3. Deep Link oder Expo-spezifischen Einstieg mit Plattformzweig und Rücknavigation prüfen

Zielgruppe und Voraussetzungen

Zielgruppe: React-Native-Entwickler, Expo-Teams, QA Engineers und Mobile-Testautomatisierer.

Voraussetzungen: Grundkenntnisse in React Native oder Expo sowie verfügbare Android- und iOS-Testbuilds.

Praxisnutzen

Nach Abschluss stehen belastbare Vorgehensweisen, wiederverwendbare YAML-Bausteine und klare Prüfkriterien zur Verfügung. Tests können reproduzierbar ausgeführt, fachlich verständlich bewertet und bei Fehlern mit einer systematischen Diagnose bearbeitet werden.