Auftrag 11: Browsertesting und Testprotokolle

Einzelarbeit, Zeit: 30 Minuten

In dieser Aufgabe lernen Sie, auf was Sie beim Testen Ihrer Anwendung resp. Website achten müssen. Ich möchte Ihnen hiermit ein Verständnis dafür vermitteln, was es alles zu berücksichtigen gäbe und wie sie diese einzelnen Tests angehen könnten. Ich habe hier natürlich einiges vereinfacht, da dieses Thema sonst den Rahmen dieses Kurses alleine sprengen würde.

Was testen?

Normalerweise werden die folgenden Bereiche getestet:

• Darstellung auf verschiedenen Bildschirmgrössen: Vielfach sieht die Anwendung auf der Bildschirmgrösse, mit welcher sie programmiert wurde, gut aus. Auf andernen Bildschirmgrössen hingegen nicht. Eventuell wird etwas sogar unbenutzbar, weil nicht mehr genügend Platz vorhanden ist, um z.B. einen Button zu klicken.
• Usability auf Maus- und Touchgeräten: Typische Fehler sind z.B. Dinge nur via Hover anzuzeigen ohne an eine Alternative für Touchgeräte zu denken.
• Verschiedene Browser: Manche Browser stellen etwas unterschiedlich dar oder unterstützen gewisse Befehle erst gar nicht. Das ist v.a. bei JavaScript problematisch,  denn ein Fehler aufgrund eines nicht unterstützen Befehls könnte dazu führen, dass die gesamte Website nicht mehr funktioniert.
• Funktionstests: Erfüllt meine Anwendung wirklich den Zweck wofür sie gebaut wurde – auch bei unerwarteten Eingaben durch den Benutzer?

Welche Browser und Geräte sollen unterstützt werden?

Abhängig davon, für wen eine Anwendung beziehungsweise Websites erstellt wurde, gibt es unterschiedliche Anforderungen an die Kompatibilität mit Browsern und Geräten. Es macht einen riesigen Unterschied, ob die Anwendung auf einem kleinen Touchgerät wie einem handelsüblichen Smartphone angesehen wird oder auf einem Desktopcomputer mit Maus als Eingabe. Dies betrifft nicht nur die Darstellung, sondern vielfach auch Funktionen, die über JavaScript zur Verfügung stehen wie z.B. ob Ortungssensoren oder ähnliches zur Verfügung stehen. Oder auch ganz einfach, ob eine gewisse JavaScript Syntax oder Funktion unterstützt wird oder nicht.

Falls Ihre Anwendung z.B. auch auf einem sehr alten Browser wie dem Internet Explorer 11 genutzt werden soll, so werden Ihnen wesentlich weniger nützliche Möglichkeiten in CSS und JavaScript zur Verfügung stehen.

Falls nichts konkret spezifiziert wurde, so empfiehlt es sich mindestens Chrome, Firefox, Safari und Safari auf mobilen Devices zu unterstützen und zu testen. Microsoft Edge nutzt inzwischen im Hintergrund eine sehr ähnliche Basis wie Chrome und entsprechend funktioniert dort ziemlich alles gleich wie bei Chrome.

Es gibt Statistiken, welche die Marktanteile der jeweiligen Browser pro Land anzeigen. Hier z.B. die meistgenutzten Browser der Schweiz: https://gs.statcounter.com/browser-market-share/all/switzerland

Man sieht die Browser mit der aktuell grössten Verbreitung. Die sollte man auf jeden Fall unterstützen und testen.

Welche CSS Properties und JavaScript Funktionen werden in welchen Browsern unterstützt?

Auf https://caniuse.com/ können Sie die gewünschte CSS Property eingeben und sehen dann, welche Properties in welchen Browser- und Browserversionen unterstützt werden. Caniuse.com gehört in den Werkzeugkasten eines jeden Webentwicklers.

Funktionstests und Testprotokolle

Nebst dem Browser- und Gerätetesting müssen auch unbedingt funktionale Aspekte getestet werden.  Das umfasst auch die Kontrolle von Denk- oder Usabilityfehlern. Also z.B.:

• Kann der Benutzer das Formular abschicken?
• Kommen alle abgeschickten Angaben beim Empfänger des E-Mails korrekt an?
• Wird verhindert, dass der Benutzer eine ungültige Formulareingabe abschicken kann?
• Gibt es irgendwelche Eingaben, mit denen der vorgesehene Ablauf nicht funktioniert?
• …

Im professionellen Umfeld werden diese Tests soweit möglich automatisiert. Die Tests werden da in Code definiert, die dann so oft und wann immer man es braucht automatisch laufen gelassen werden können. Da das ein sehr grosses und komplexes Gebiet an sich ist, verzichten wir hier auf Details. Wir gehen davon aus, dass wir die Tests von Hand ausführen werden. Nichtsdestotrotz werden wir uns für unsere Anwendungen überlegen müssen, was man denn überhaupt testen müsste –  ungeachtet, ob manuell durch einen Menschen oder automatisiert getestet wird.

Aufgabenstellung

Testen Sie das Ergebnis Ihrer letzten Aufgaben (Auftrag 8 und Auftrag 10) und versuchen Sie Probleme zu finden und zu lösen. Nutzen Sie dazu auch die Chrome Devtools und simulieren Sie z.B. Touch-Eingaben oder kleinere Bildschirmgrössen usw.

Erstellen Sie dann ein Testprotokoll mit den nötigen Testfällen, um die Funktionalität Ihrer Anwendung sicherzustellen.

Eine Datei Testprotokoll_Vorlage.docx sollte sich bereits in der MS Teams Ablage befinden. Sollte das nicht der Fall sein, so melden Sie sich bitte beim Kursleiter.

In dieser Datei werden einzelne Testfälle – also Dinge, die getestet werden müssen – aufgelistet und im Detail beschrieben. Ein solcher Testfall setzt sich im Normalfall aus den folgenden Informationen zusammen:

• Beschreibung: Eine kurze aber aussagekräftige Beschreibung des Testfalles. z.B. „Prüfen, ob das Formular bei korrekt ausgefüllten Feldern abgesendet werden kann“.
• Testvoraussetzung: In manchen Fällen, müssen bestimmte Bedingungen resp. eine bestimmte Ausgangslage erfüllt sein, damit der Test durchgeführt werden kann. Das ist typischerweise z.B., dass der User angemeldet sein muss. Falls sonst keine spezielle Bedingung nötig ist, kann dieses Feld auch mit „–“ ausgefüllt werden.
• Testschritte: Hier sollte jeder Schritt in angemessenem Detailgrad beschrieben werden. Also z.B. „1. Füllen Sie E-Mail Feld mit einer gültigen E-Mail Adresse aus. 2. Klicken Sie auf absenden“.
• Erwartetes Ergebnis: Was sollte passieren, wenn die Testschritte durchgeführt wurden? z.B. „Das Formular wurde versendet und es erscheint eine Meldung an den Besucher.“.
• Testresultat: Hier wird nach der Durchführung dieses Testfalles das effektiv eingetretene Ergebnis dokumentiert. Wenn sich das Resultat zum erwarteten Ergebnis unterscheidet, so ist der Test fehlgeschlagen resp. etwas scheint nicht mit der Anwendung zu stimmen.

Ein solches Testprotokoll für die in diesem Kurs erstellten Anwendungen sind natürlich etwas „mit Kanonen auf Spatzen geschossen“. Normalerweise sind solche Testfälle nötig, bei komplexeren Anwendungen und Problemstellungen. Versuchen Sie trotzdem angemessene und für Sie sinnvolle Testfälle zu definieren.