Strategien zur Durchführung von Tests

Da man nicht jede Kombination von Browser und Gerät testen kann, reicht es aus, wenn Sie sicherstellen, dass Ihre Website auf den wichtigsten funktioniert. In der Praxis bedeutet "wichtig" oft "häufig verwendet bei der Zielgruppe".

Sie können Browser und Geräte danach klassifizieren, wie viel Unterstützung Sie zu geben beabsichtigen. Zum Beispiel:

1. A-Note: Häufige/moderne Browser — Bekanntermaßen fähig. Gründlich testen und vollständige Unterstützung bieten.
2. B-Note: Ältere/weniger fähige Browser — bekannt dafür, nicht voll fähig zu sein. Testen und eine einfachere Erfahrung bieten, die vollen Zugriff auf Kerninformationen und -dienste gibt.
3. C-Note: Seltene/unbekannte Browser — nicht testen, aber annehmen, dass sie fähig sind. Die vollständige Seite bereitstellen, die funktionieren sollte, zumindest mit den durch unser defensives Codieren bereitgestellten Fallbacks.

In den folgenden Abschnitten werden wir eine Unterstützungs-Tabelle in diesem Format erstellen.

Dies beinhaltet typischerweise fundierte Vermutungen basierend auf Benutzerdemografien. Wenn beispielsweise Ihre Benutzer in Nordamerika und Westeuropa sind:

Eine schnelle Online-Suche sagt Ihnen, dass die meisten Menschen in Nordamerika und Westeuropa Windows- oder Mac-Desktops/Laptops verwenden, wobei die Hauptbrowser Chrome, Firefox, Safari und Edge sind. Sie würden wahrscheinlich nur die neuesten Versionen dieser Browser testen wollen, da diese regelmäßig Updates erhalten. Diese sollten alle in die A-Note-Stufe gehen.

Die meisten Menschen in dieser demografischen Gruppe verwenden auch entweder iOS- oder Android-Telefone, also würden Sie wahrscheinlich die neuesten Versionen von iOS Safari, die letzten paar Versionen des alten Android-Standardbrowsers sowie Chrome und Firefox für iOS und Android testen wollen. Sie sollten idealerweise diese auf sowohl einem Telefon als auch einem Tablet testen, um sicherzustellen, dass responsive Designs funktionieren.

Opera Mini kann nicht sehr gut mit komplexem JavaScript umgehen, daher sollten wir dies ebenfalls in Note B einordnen.

So haben wir unsere Wahl, welche Browser getestet werden sollen, auf den Browsern basiert, die wir erwarten, dass unsere Benutzer verwenden. Das gibt uns bisher folgende Unterstützungs-Tabelle:

1. A-Note: Chrome und Firefox für Windows/Mac, Safari für Mac, Edge für Windows, iOS Safari für iPhone/iPad, Android-Standardbrowser (die letzten zwei Versionen) auf Telefon/Tablet, Chrome und Firefox für Android (die letzten zwei Versionen) auf Telefon/Tablet
2. B-Note: Opera Mini
3. C-Note: nicht anwendbar

Sollte Ihre Zielgruppe hauptsächlich woanders angesiedelt sein, könnten die am häufigsten verwendeten Browser und Betriebssysteme von den obigen abweichen.

Einige Websites zeigen, welche Browser in einer bestimmten Region populär sind. Zum Beispiel gibt Statcounter einen Eindruck von Trends in Nordamerika.

Eine viel genauere Datenquelle, wenn Sie darauf zugreifen können, ist eine Analyse-App wie Google Analytics, die Ihnen genau sagt, welche Browser Benutzer verwenden, um Ihre Website zu durchsuchen. Natürlich setzt dies voraus, dass Sie bereits eine Website haben, auf der Sie es verwenden können, daher ist es für komplett neue Sites nicht geeignet.

Sie können auch in Betracht ziehen, Open-Source- und datenschutzorientierte Analyseplattformen wie Open Web Analytics und Matomo zu verwenden. Diese erwarten, dass Sie die Analyseplattform selbst hosten.

Einrichtung von Google Analytics

1. Zuerst benötigen Sie ein Google-Konto. Verwenden Sie dieses Konto, um sich bei Google Analytics anzumelden.
2. Wählen Sie die Option Google Analytics (Web) und klicken Sie auf die Anmelden-Schaltfläche.
3. Geben Sie Ihre Website/App-Daten auf der Anmeldeseite ein. Diese ist recht intuitiv einzurichten; das wichtigste Feld, das korrekt sein sollte, ist die Website-URL. Diese muss die Stamm-URL Ihrer Site/App sein.
4. Nachdem Sie alles ausgefüllt haben, drücken Sie die Schaltfläche Tracking-ID abrufen und akzeptieren Sie die angezeigten Nutzungsbedingungen.
5. Auf der nächsten Seite erhalten Sie einige Code-Snippets und weitere Anweisungen. Für eine einfache Website müssen Sie den Website-Tracking-Codeblock kopieren und in alle verschiedenen Seiten einfügen, die Sie mit Google Analytics auf Ihrer Site verfolgen möchten. Sie könnten die Snippets unter Ihrem schließenden </body>-Tag platzieren oder an einer anderen geeigneten Stelle, die sicherstellt, dass es sich nicht mit Ihrem Anwendungscode vermischt.
6. Laden Sie die Änderungen auf den Entwicklungsserver hoch oder wohin auch immer Sie Ihren Code benötigen.

Das ist es! Ihre Website sollte jetzt bereit sein, Analysedaten zu melden.

Analyse der Analysedaten

Jetzt sollten Sie in der Lage sein, zur Startseite Analytics Web zurückzukehren und die Daten anzusehen, die Sie über Ihre Website gesammelt haben (natürlich müssen Sie ein wenig Zeit verstreichen lassen, damit tatsächlich Daten gesammelt werden).

Standardmäßig sollten Sie die Berichtskarte sehen, die so aussieht:

Es gibt eine riesige Menge an Daten, die Sie mit Google Analytics betrachten könnten — angepasste Berichte in verschiedenen Kategorien etc. — und wir haben nicht die Zeit, alles zu besprechen. Erste Schritte mit Analytics bietet nützliche Anleitungen für Berichte (und mehr) für Anfänger.

Sie können sehen, welche Browser und Betriebssysteme Ihre Benutzer verwenden, indem Sie Zielgruppe > Technologie > Browser & OS aus dem linken Menü auswählen.

Sie sollten Barrierefreiheit als A-Note-Testanforderung einbeziehen (wir werden genau behandeln, was Sie in unserem Artikel Umgang mit häufigen Zugänglichkeitsproblemen testen sollten).

Außerdem sollten Sie sich der situationsspezifischen Bedürfnisse bewusst sein. Zum Beispiel, wenn Ihr Produkt einen Markt anvisiert, wo Mobiltelefone das primäre Mittel sind, um auf das Internet zuzugreifen, dann werden Sie wahrscheinlich mobile Browser-Unterstützung als Priorität sehen.

Also wird unsere endgültige Unterstützungs-Tabelle so aussehen:

1. A-Note: Chrome und Firefox für Windows/Mac, Safari für Mac und Edge (die letzten zwei Versionen von jedem), iOS Safari für iPhone/iPad, Android-Standardbrowser (die letzten zwei Versionen) auf Telefon/Tablet, Chrome und Firefox für Android (die letzten zwei Versionen) auf Telefon/Tablet. Barrierefreiheit, die gängige Tests besteht.
2. B-Note: Opera Mini.
3. C-Note: Opera, andere nischenmoderne Browser.

Wenn Sie eine neue Ergänzung zu Ihrem Codebase haben, die getestet werden muss, sollten Sie, bevor Sie mit den Tests beginnen, eine Liste von Testerfordernissen schreiben, die bestehen müssen, um akzeptiert zu werden. Diese Anforderungen können visuell oder funktional sein — beide zusammen bilden ein benutzbares Website-Feature.

Betrachten Sie das folgende Beispiel (siehe den Quellcode und auch das Beispiel livelaufend):

Testkriterien für dieses Feature könnten so geschrieben werden:

A und B Note:

• Der Button sollte durch den primären Steuermechanismus des Benutzers aktivierbar sein, was auch immer dieser ist — dies sollte Maus, Tastatur und Touch umfassen.
• Durch das Umschalten des Buttons sollte das Informationsfeld erscheinen/verschwinden.
• Der Text sollte lesbar sein.
• Visuell beeinträchtigte Benutzer, die Bildschirmleser verwenden, sollten auf den Text zugreifen können.

A-Note:

• Das Informationsfeld sollte reibungslos animieren, während es erscheint/verschwindet.
• Der Verlauf und der Textschatten sollte das Erscheinungsbild der Box verbessern.

Sie werden bemerken, dass der Button nicht nur mit der Tastatur benutzbar ist. Wir könnten dies mit JavaScript beheben, um eine Tastatursteuerung für das Umschalten zu implementieren, oder einen anderen Ansatz verwenden.

Diese Testkriterien sind nützlich, weil:

• Sie Ihnen eine Reihe von Schritten geben, die Sie beim Testen befolgen können.
• Sie in Sätze von Anweisungen für Benutzergruppen leicht umgewandelt werden können, die während der Tests befolgt werden (z.B. "versuchen Sie, den Button mit Ihrer Maus zu aktivieren, und dann mit der Tastatur…") — siehe Benutzer-Testing unten.
• Sie auch die Grundlage für das Schreiben automatisierter Tests bilden können. Es ist einfacher, solche Tests zu schreiben, wenn Sie genau wissen, was Sie testen wollen und was die Erfolgskonditionen sind (siehe Selenium, später in der Serie).

Eine Option, um Browser-Tests durchzuführen, ist, die Tests selbst zu machen. Dafür verwenden Sie wahrscheinlich eine Kombination aus tatsächlichen physischen Geräten und emulierten Umgebungen (entweder mit einem Emulator oder einer virtuellen Maschine).

In der Regel ist es besser, ein echtes Gerät zu haben, das den zu testenden Browser ausführt — das bietet die größte Genauigkeit in Bezug auf Verhalten und allgemeine Benutzererfahrung. Sie werden wahrscheinlich so etwas wie das Folgende wünschen, für ein angemessenes Gerätelabor mit niedrigem Level:

• Einen Mac mit den installierten Browsern, die Sie testen müssen — das kann Firefox, Chrome, Opera und Safari umfassen.
• Einen Windows-PC mit den installierten Browsern, die Sie testen müssen — das kann Edge (oder IE), Chrome, Firefox und Opera umfassen.
• Ein höherwertiges Android-Telefon und -Tablet mit dem installierten Browser, den Sie testen müssen — das kann Chrome, Firefox und Opera Mini für Android sowie den ursprünglichen Android-Standardbrowser umfassen.
• Ein höherwertiges iOS-Telefon und -Tablet mit den installierten Browsern, die Sie testen müssen — das kann iOS Safari sowie Chrome, Firefox und Opera Mini für iOS umfassen.

Die folgenden sind auch gute Optionen, wenn Sie sie bekommen können:

• Ein Linux-PC verfügbar, falls Sie spezifische Fehler für Linux-Versionen von Browsern testen müssen. Linux-Nutzer verwenden häufig Firefox, Opera und Chrome. Wenn Sie nur eine Maschine zur Verfügung haben, könnten Sie in Erwägung ziehen, eine Dual-Boot-Maschine zu erstellen, die Linux und Windows auf separaten Partitionen ausführt. Der Ubuntu-Installer macht dies recht einfach einzurichten; siehe WindowsDualBoot für Hilfe dabei.
• Ein paar mobile Geräte mit niedrigerer Spezifikation, damit Sie die Leistung von Funktionen wie Animationen auf weniger leistungsstarken Prozessoren testen können.

Ihre Hauptarbeitsmaschine kann auch ein Ort sein, um andere Tools für spezifische Zwecke zu installieren, wie Barrierefreiheit-Auditing-Tools, Bildschirmleser und Emulatoren/virtuelle Maschinen.

Einige größere Unternehmen haben Gerätelabore, die eine sehr große Auswahl an unterschiedlichen Geräten bevorraten, was Entwicklern ermöglicht, Bugs auf sehr spezifischen Browser/Geräte-Kombinationen aufzuspüren. Kleinere Unternehmen und Einzelpersonen können sich im Allgemeinen kein so ausgeklügeltes Labor leisten und tendieren dazu, mit kleineren Laboren, Emulatoren, virtuellen Maschinen und kommerziellen Test-Apps zurechtzukommen.

Wir werden jede der anderen Optionen unten behandeln.

Emulatoren sind im Grunde Programme, die auf Ihrem Computer laufen und ein Gerät oder bestimmte Gerätebedingungen irgendeiner Art emulieren, sodass Sie einige Ihrer Tests bequemer durchführen können, als wenn Sie eine bestimmte Kombination aus Hardware/Software finden müssten, um zu testen.

Ein Emulator könnte so einfach sein wie das Testen einer Gerätebedingung. Wenn Sie beispielsweise einige schnelle und einfache Tests Ihrer Breiten/Höhen-Medienelemente für Responsive Design durchführen möchten, können Sie den Responsive Design Modus von Firefox verwenden. Safari hat auch einen ähnlichen Modus, der aktiviert werden kann, indem man Safari > Einstellungen wählt und Menü Entwickeln anzeigen auswählt, dann Entwickeln > Responsive Design Modus aktivieren wählt. Chrome hat auch etwas Ähnliches: Gerätemodus (siehe Simulieren von mobilen Geräten mit Gerätemodus).

In den meisten Fällen müssen Sie jedoch irgendeine Art von Emulator installieren. Die häufigsten Geräte/Browser, die Sie testen wollen, sind:

• Das offizielle Android Studio IDE zur Entwicklung von Android-Apps ist etwas schwergewichtig, nur um Websites auf Google Chrome oder dem alten Stock Android-Browser zu testen, aber es kommt mit einem robusten Emulator. Wenn Sie etwas leichteres wünschen, ist Andy eine vernünftige Option, die sowohl unter Windows als auch Mac läuft.
• Apple bietet eine App namens Simulator an, die auf dem Entwicklungsumfeld XCode läuft und iPad/iPhone/Apple Watch/Apple TV emuliert. Dies umfasst den nativen iOS Safari Browser. Leider läuft dies nur auf einem Mac.

Sie können häufig Simulatoren für andere mobile Geräteumgebungen finden, zum Beispiel:

• Sie können Opera Mini auf seine eigene Weise emulieren, wenn Sie ihn testen möchten.

Virtuelle Maschinen sind Anwendungen, die auf Ihrem Desktop-Computer laufen und Ihnen erlauben, Emulationen ganzer Betriebssysteme auszuführen, jedes in seiner eigenen virtuellen Festplatte compartmentalisiert (oft durch eine einzelne große Datei auf dem Host-Computer dargestellt). Es gibt eine Reihe populärer virtueller Maschinen-Apps, wie Parallels, VMware und Virtual Box; wir persönlich mögen letzteres, weil es kostenlos ist.

Um Virtual Box zu verwenden, benötigen Sie:

1. Einen Installations-Disk oder ein Image (z.B. ISO-Datei) für das Betriebssystem, das Sie emulieren möchten, zu besorgen. Virtual Box kann diese nicht bereitstellen; die meisten, wie z.B. Windows OSes, sind kommerzielle Produkte, die nicht frei verteilt werden können.

2. Den entsprechenden Installer herunterladen für Ihr Betriebssystem und ihn installieren.

3. Die App öffnen; Ihnen wird eine Ansicht wie die folgende präsentiert:

4. Um eine neue virtuelle Maschine zu erstellen, drücken Sie die Schaltfläche Neu in der oberen linken Ecke.

5. Folgen Sie den Anweisungen und füllen Sie die folgenden Dialogfelder wie erforderlich aus. Sie werden:

   1. Einen Namen für die neue virtuelle Maschine angeben
   2. Wählen, welches Betriebssystem und welche Version Sie darauf installieren
   3. Einstellen, wie viel RAM zugewiesen werden soll (wir empfehlen etwa 2048MB oder 2GB)
   4. Eine virtuelle Festplatte erstellen (wählen Sie die Standardoptionen über die drei Dialogfelder mit Jetzt eine virtuelle Harddisk erstellen, VDI (virtuelle Festplatte) und Dynamisch zugewiesene)
   5. Die Dateispeicherstelle und Größe für die virtuelle Festplatte auswählen (wählen Sie einen vernünftigen Namen und Standort, um sie zu behalten, und für die Größe etwa 50GB oder so viel angeben, wie Sie bequem angeben können).

Nun sollte die neue virtuelle Box im linken Menü der Hauptansicht des Virtual Box Interface-Fensters erscheinen. An diesem Punkt können Sie darauf doppelklicken, um sie zu öffnen – sie wird beginnen, die virtuelle Maschine zu booten, hat aber noch nicht das Betriebssystem (OS) installiert. An diesem Punkt müssen Sie das Dialogfeld auf das Installations-Image/Disk verweisen und es durch die Schritte zur Installation des OS just like auf einer physischen Maschine laufen lassen.

Nach Abschluss des Prozesses sollten Sie eine virtuelle Maschine haben, die ein Betriebssystem in einem Fenster auf Ihrem Host-Computer ausführt.

Sie müssen diese virtuelle Betriebssystem-Installation genauso behandeln, wie Sie jede reale Installation behandeln würden – zum Beispiel, ebenso wie die Browser zu installieren, die Sie testen möchten, installieren Sie ein Anti-Virus-Programm, um es vor Viren zu schützen.

Mehrere virtuelle Maschinen zu haben ist sehr nützlich, insbesondere für Tests mit Windows IE/Edge – auf Windows können Sie nicht mehrere Versionen des Standardbrowsers Seite an Seite installiert haben, so dass Sie möglicherweise eine Bibliothek virtueller Maschinen aufbauen möchten, um verschiedene Tests wie erforderlich durchzuführen, z.B.:

• Windows 10 mit Edge 14
• Windows 10 mit Edge 13

Wie im letzten Kapitel erwähnt, können Sie eine Menge des Aufwands beim Browser-Testing reduzieren, indem Sie irgendeine Art von Automatisierungssystem verwenden. Sie können Ihr eigenes Testautomatisierungssystem einrichten (Selenium ist die beliebte App der Wahl), was etwas Einrichtung erfordert, aber sehr lohnend sein kann, wenn Sie es geschafft haben.

Es gibt auch kommerzielle Tools wie Sauce Labs, Browser Stack und LambdaTest, die diese Art von Dingen für Sie erledigen, ohne dass Sie sich um die Einrichtung sorgen müssen, wenn Sie etwas Geld in Ihre Tests investieren möchten.

Eine weitere Alternative sind No-Code-Testautomatisierungstools wie Endtest.

Wir werden später im Modul darauf eingehen, wie man solche Tools verwendet.

Bevor wir weitermachen, beenden wir diesen Artikel, indem wir ein bisschen über Benutzer-Tests sprechen — dies kann eine gute Option sein, wenn Sie eine bereitwillige Benutzergruppe haben, auf der neuen Funktionalität zu testen. Beachten Sie, dass dies so einfach oder so ausgeklügelt sein kann, wie Sie möchten — Ihre Benutzergruppe könnte eine Gruppe von Freunden, eine Gruppe von Kollegen oder eine Gruppe von unbezahlten oder bezahlten Freiwilligen sein, je nachdem, ob Sie Geld für Tests haben oder nicht.

Im Allgemeinen werden Sie Ihre Benutzer dazu bringen, sich die Seite oder Ansicht anzusehen, die die neue Funktionalität auf irgendeinem Entwicklungsserver enthält, so dass Sie die endgültige Website oder Änderung nicht live stellen, bis sie abgeschlossen ist. Sie sollten sie dazu bringen, einige Schritte zu befolgen und die Ergebnisse zu melden, die sie erhalten. Es ist nützlich, eine Reihe von Schritten (manchmal ein Skript genannt) bereitzustellen, so dass Sie verlässlichere Ergebnisse in Bezug auf das, was Sie testen wollten, erhalten. Wir haben dies im vorherigen Abschnitt Was werden Sie testen erwähnt — es ist einfach, die dort detaillierten Testkriterien in Schritte zu verwandeln, die befolgt werden können. Zum Beispiel würde das folgende für einen sehenden Benutzer funktionieren:

• Klicken Sie mehrmals auf die Fragezeichen-Schaltfläche mit der Maus auf Ihrem Desktop-Computer. Aktualisieren Sie das Browserfenster.
• Wählen Sie mehrmals die Fragezeichen-Schaltfläche mit der Tastatur auf Ihrem Desktop-Computer und aktivieren Sie sie.
• Tippen Sie mehrmals auf die Fragezeichen-Schaltfläche auf Ihrem Touchscreen-Gerät.
• Durch das Umschalten der Schaltfläche sollte das Informationsfeld erscheinen/verschwinden. Tut es dies in jedem der obigen drei Fälle?
• Ist der Text lesbar?
• Animiert sich das Informationsfeld reibungslos, während es erscheint/verschwindet?

Beim Ausführen von Tests kann es auch eine gute Idee sein:

• Richten Sie nach Möglichkeit ein separates Browserprofil ein, bei dem Browsererweiterungen und andere solche Dinge deaktiviert sind, und führen Sie Ihre Tests in diesem Profil aus (siehe Profilmanager verwenden, um Firefox-Profile zu erstellen und zu entfernen und Chrome mit anderen teilen oder Personas hinzufügen zum Beispiel).
• Verwenden Sie die private Modus-Funktionalität des Browsers, wenn sie verfügbar ist (z.B. Privates Surfen in Firefox, Inkognito-Modus in Chrome), damit Dinge wie Cookies und temporäre Dateien nicht gespeichert werden.

Diese Schritte sind darauf ausgelegt sicherzustellen, dass der Browser, in dem Sie testen, so "rein" wie möglich ist, d.h. es ist nichts installiert, das die Testergebnisse beeinflussen könnte.

Nachdem Sie diesen Artikel gelesen haben, solltenSie jetzt eine gute Vorstellung davon haben, was Sie tun können, um Ihre Zielgruppe/liste der Zielbrowser zu identifizieren und dann effektiv Cross-Browser-Tests auf dieser Liste durchzuführen.

Als nächstes werden wir uns den tatsächlichen Code-Problemen zuwenden, die Ihre Tests aufdecken könnten, angefangen mit HTML und CSS.

• Zurück
• Übersicht: Cross-Browser-Testing
• Weiter