So gestalten Sie Cross-Browser-Tests mit LambdaTest effizienter

Dieser Artikel wurde freundlicherweise von unseren lieben Freunden bei LambdaTest unterstützt, einem Tool zum Testen der Cross-Browser-Kompatibilität, mit dem Sie kostenlose automatisierte und interaktive Live-Cross-Browser-Tests auf echten Browsern und Geräten durchführen können. Danke!

Bevor Verbraucher jeden Tag stundenlang vor mobilen Geräten saßen, mussten sich Webdesigner mit zahlreichen Browsern und Betriebssystemen auseinandersetzen. Es ist also nicht so, dass das Konzept des browserübergreifenden Testens neu wäre.

Da Webbrowser Websites nicht immer auf die gleiche Weise darstellen oder Daten in der ursprünglich beabsichtigten Weise verarbeiten, ist das browserübergreifende Testen seit langem ein wichtiger Bestandteil des Webdesigns und der Webentwicklung. Nur so kann sichergestellt werden, dass das, was hinter den Kulissen erstellt wird, ordnungsgemäß im Frontend einer Website implementiert wird.

Aber es kann schnell zu einem mühsamen Unterfangen werden, wenn Sie versuchen, jeden Browser, jedes Betriebssystem und jedes Gerät selbst zu überprüfen.

Glücklicherweise leben wir in einer Zeit, in der die Automatisierung König ist, und wir haben jetzt eine bessere Möglichkeit, Cross-Browser-Tests (und auch häufiger) durchzuführen. Lassen Sie uns also darüber sprechen, warum Sie diesen Prozess automatisieren müssen und wie Sie dies mit Hilfe von LambdaTest tun können.

Eine verbesserte Methode zur Handhabung von Cross-Browser-Tests

Wenn Sie sich daran machen, eine Website für Ihre Benutzer zu erstellen, berücksichtigen Sie, wer sie sind, was sie brauchen und worauf sie auf ihrer Reise reagieren werden. Aber wie und wann gehen Sie auf die unterschiedlichen Ergebnisse ein, die Ihre Benutzer aufgrund ihrer Browserwahl erleben könnten?

Responsive Design kann dazu beitragen, einige dieser Unterschiede zu verringern, ist jedoch kein Allheilmittel für die inhärenten Anzeigeprobleme zwischen Browsern und Geräten.

Um vollständig sicherzustellen, dass die Code- und Designentscheidungen, die Sie für eine Website getroffen haben, sich nicht negativ auf die Benutzer auswirken, sind browserübergreifende Tests während des gesamten Webdesignprozesses unerlässlich.

„

Und wenn Sie sicherstellen möchten, dass sich umfangreiche Cross-Browser-Tests nicht negativ auf Ihr Endergebnis auswirken, dann ist die Automatisierung der richtige Weg.

Hier sind einige Tipps, die Ihnen dabei helfen, automatisierte Tests in Ihren Prozess zu integrieren:

Machen Sie sich mit den Unterschieden in der Browserunterstützung vertraut

Dies ist eine Zusammenfassung von Statista der Top-Webbrowser nach Marktanteil:

Hier geht es nicht unbedingt darum, dass jeder Browser Ihre Website-Daten anders verarbeitet. Was die Dinge wirklich vermasselt, ist die Engine, die den Browser hinter den Kulissen antreibt.

Dies sind beispielsweise die Engines, die die führenden Webbrowser verwenden:

• Chrome verwendet Blink + V8;
• Edge verwendet Blinken;
• Firefox verwendet Quantum/Gecko + SpiderMonkey;
• Safari verwendet WebKit + Nitro;
• Internet Explorer verwendet Trident + Chakra.

Viele dieser Engines rendern denselben Codeabschnitt unterschiedlich. Sehen Sie sich zum Beispiel dieses von LambdaTest erstellte Experiment an:

Das Datums-HTML-Tag ist eines der am häufigsten verwendeten Tags, und dennoch sind Chrome, Firefox und Opera die einzigen, die es vollständig unterstützen – wie in der oberen blauen Leiste über dem Testbereich angezeigt. Selbst dann bieten diese Browser sehr unterschiedliche Benutzererfahrungen.

Das obige Bild zeigt Ihnen beispielsweise, wie das Datums-Tag in Chrome aussieht. So wird derselbe Code in Edge angezeigt:

Nicht nur die Schriftart und -größe ist etwas anders, auch die Art und Weise, wie das Dropdown-Menü für die Datumsauswahl angezeigt wird, ist sehr unterschiedlich.

Bevor Sie also anfangen, über Cross-Browser-Tests nachzudenken und die Knicke zwischen diesen Browsern und Engines auszuräumen, machen Sie sich mit den wichtigsten Unterschieden vertraut.

Ein Tool, das Sie als Referenz verwenden können, ist Can I use….

Sie können nach Abweichungen in den am häufigsten verwendeten Komponenten und Technologien suchen. Nehmen Sie zum Beispiel das CSS-Grid-Layout:

Die meisten führenden (und einige weniger führende) Browser unterstützen das CSS-Grid-Layout (die in Grün). Internet Explorer (in Blau) bietet teilweise Unterstützung und Opera Mini (in Lila) bietet überhaupt keine.

Oder nehmen wir an, Sie versuchen, mehr WebP-Bilder in Ihren Designs zu verwenden, da diese viel besser für Leistung und Auflösung sind. Folgendes kann ich verwenden… informiert uns über die Browserunterstützung für das Bildformat:

Die neuesten Versionen von Internet Explorer und Safari (Web und Mobil) bieten dafür keine Unterstützung. Wenn Sie also mit WebP-Bildern entwerfen möchten, müssen Sie eine Problemumgehung für diese Browser erstellen.

Fazit: Nehmen Sie sich jetzt die Zeit, um zu verstehen, welche Art von Inhalt oder Code unterstützt wird, damit Sie eine Website von Anfang an effektiver erstellen können.

Profi-Tipp: Erstellen Sie eine Browser-Matrix als Referenz

Sie können sehen, warum es so wichtig ist, die Unterschiede zwischen Browser-Renderings und -Unterstützung zu verstehen. Je mehr Sie sich mit ihnen vertraut machen, desto weniger müssen Sie sich bemühen, wenn eine neue Diskrepanz entdeckt wird.

Um es sich einfacher zu machen, wäre es eine gute Idee, jetzt eine Browser-Matrix für all diese Unterschiede zu erstellen.

Hier ist eine einfache, die LambdaTest entworfen hat:

Ich würde empfehlen, einen eigenen zu erstellen. Sie können Daten aus Can I use… nutzen und Support-Probleme dokumentieren, auf die Sie in Ihren eigenen Projekten gestoßen sind.

Dies wird Ihnen auch dabei helfen, beim Entwerfen Prioritäten zu setzen. Sie können beispielsweise entscheiden, welche nicht unterstützten Funktionen es wert sind, verwendet zu werden, basierend darauf, welche Auswirkungen sie auf die Ziele Ihrer Website haben.

Es wäre auch nützlich, diese Tabelle zur Hand zu haben, sobald eine Website live gegangen ist. Mithilfe von Daten aus Google Analytics können Sie damit beginnen, Designentscheidungen basierend auf den von Ihren Benutzern hauptsächlich verwendeten Webbrowsern zu priorisieren.

Holen Sie sich ein browserübergreifendes Testtool, das alles kann

Es spielt keine Rolle, wie groß die Websites sind, die Sie erstellen. Alle öffentlich zugänglichen Websites würden von einem automatisierten browserübergreifenden Testtool profitieren.

Besonders schön an der Automatisierung mit LambdaTest ist, dass es seinen Benutzern Optionen bietet. Von vollautomatisierten Tests, die überprüfen, wie sich Ihr Code auf das Frontend auswirkt, bis hin zu halbautomatischen Aufgaben, die die Arbeit bei der Verwaltung von Updates und Fehlern erleichtern, gibt es so viele Möglichkeiten, Ihren Prozess zu automatisieren und zu optimieren .

Hier sind einige der Feature-Highlights, die Sie kennen sollten:

Echtzeittests: Am besten für die Fehlerverfolgung

Echtzeittests sind nützlich, wenn Sie etwas Zielgerichtetes mit eigenen Augen untersuchen müssen. Wenn Sie beispielsweise ein Design zur Überprüfung an den Kunden gesendet haben und dieser darauf besteht, dass an seiner Seite etwas nicht richtig aussieht, können Sie die Website anhand seiner genauen Konfiguration überprüfen. Es wäre auch hilfreich, Fehler zu bestätigen und herauszufinden, welche Browser betroffen sind.

Geben Sie im Bereich „ Echtzeittests “ Ihre Website-URL ein und wählen Sie dann Ihre Anzeigespezifikationen aus.

Es lässt Sie super spezifisch werden und wählen Sie aus:

• Mac vs. Android,
• Gerätetyp,
• Geräteversion,
• Betriebssystem,
• Webbrowser.

Sobald der Test beginnt, sehen Sie Folgendes (natürlich abhängig vom gewählten Gerätetyp):

Oben sehen Sie die erste Option in der Seitenleiste, mit der Sie schnell die Geräteansicht wechseln können. Auf diese Weise müssen Sie nicht zurückgehen, wenn Sie versuchen, einige Browseransichten zu vergleichen oder Fehler zu überprüfen.

Was die anderen Echtzeit-Testoptionen betrifft, so sind die meisten von ihnen nützlich, um Probleme in dem Kontext zu identifizieren und zu melden, in dem sie tatsächlich aufgetreten sind.

Im obigen Bug-Tracking-Tool können Sie eine Stelle auf der Seite lokalisieren, an der ein Fehler aufgetreten ist. Sie können es dann mit einer Reihe von Werkzeugen in der Seitenleiste markieren.

Benutzer können auch die Screenshot- und Videooptionen verwenden, um größere Fehler zu erfassen – insbesondere solche, die auftreten, wenn Sie sich durch die Website bewegen oder sich mit ihr beschäftigen.

Screenshot-Tests: Am besten geeignet, um manuelle Tests zu beschleunigen

Es gibt keinen Grund, warum Sie oder Ihre QA Ihre Website nicht trotzdem selbst überprüfen können. Das heißt, warum sollte der Prozess länger dauern als nötig? Sie können den Prozess mit den Visual UI Testing-Tools von LambdaTest beschleunigen.

Mit dem Screenshot-Tool können Sie beispielsweise alle Geräte und Browser, die Sie vergleichen möchten, auf einmal auswählen:

Wenn der Test abgeschlossen ist, haben Sie alle angeforderten Screenshots an einem Ort:

Sie können sie hier ansehen, auf Ihren Computer herunterladen oder mit anderen teilen.

Sie können Ihre Screenshots auch nach Projekt und Version/Runde organisieren. Wenn Sie also mehrere Überarbeitungsrunden durcharbeiten und auf eine frühere Version zurückgreifen möchten, sind hier alle Kopien der vorherigen Iteration vorhanden. (Sie können auch Screenshots in Regressionstests verwenden, die ich gleich erklären werde.)

Responsive Testing: Am besten geeignet, um eine Mobile-First-Erfahrung zu bestätigen

Wenn Sie mehr als nur einen statischen Screenshot sehen möchten, sind Responsive-Tests genau das Richtige für Sie. Alles, was Sie tun müssen, ist auszuwählen, welches Betriebssystem und welche Geräte Sie vergleichen möchten, und das Tool füllt voll funktionsfähige Versionen der Website im mobilen Browser aus:

Sie können das Design und die Interaktivität Ihrer Website nicht nur in allen möglichen Browsern überprüfen, sondern auch die Ausrichtung der Website ändern (falls Probleme beim Querformat auftreten).

Das Schöne an diesem Testtool ist, dass Sie, wenn etwas wackelig erscheint, den Fehler markieren können, sobald Sie ihn entdecken. Dafür gibt es direkt über dem interaktiven mobilen Browser eine Schaltfläche. Dadurch werden diese kostspieligen mobilen Fehler schneller gemeldet und behoben.

Smart Testing: Am besten geeignet für Regressionstests

Das Auge kann nur begrenzt viel erkennen, besonders wenn Sie wochenlang denselben Abschnitt einer Webseite betrachten.

Wenn Sie also mit der Implementierung von Änderungen auf Ihrer Website beginnen – während der Entwicklung, kurz vor dem Start und sogar danach – werden Regressionstests entscheidend sein, um diese potenziell schwer zu erkennenden Probleme zu erkennen.

Dies sollte immer dann erfolgen, wenn sich etwas ändert:

• Sie aktualisieren einen Teil des Designs manuell.
• Der Code wird im Backend optimiert.
• Jemand meldet einen Fehler und der Fix wird implementiert.
• Software wird aktualisiert.
• Eine API wird neu verbunden.

Wenn Sie wissen, welche Seite und welcher Teil dieser Seite direkt betroffen sind, können intelligente Tests die Bestätigung erleichtern, dass alles in Ordnung ist.

Laden Sie einfach den Original-Screenshot der betroffenen Seite hoch und fügen Sie nach der Änderung ein Vergleichsbild hinzu. (Hier kommt das Screenshot-Tool wirklich ins Spiel.)

Hinweis: An der Smashing Magazine-Website ist offensichtlich nichts auszusetzen. Aber was ich im obigen Beispiel getan habe, ist die Verwendung von Renderings für verschiedene Versionen des iPhone. Natürlich funktionieren Regressionstests nicht so, aber ich wollte Ihnen zeigen, wie diese Vergleichsfunktion aussieht, wenn etwas nicht stimmt.

Nun, warum diese Funktion so großartig ist, hier ist, wie sie funktioniert:

Mit diesem einzelnen Screenshot können Sie sehen, wo die beiden Versionen Ihrer Seite nicht mehr ausgerichtet sind. Wenn also die Screenshots ursprünglich aus derselben Browseransicht stammten, könnte dies ein Problem darstellen, wenn Sie nicht geplant hatten, alle Elemente neu auszurichten.

Sie können auch die Side-by-Side-Vergleichstests verwenden, um dasselbe zu überprüfen:

Auch hier soll intelligentes Testen Ihnen helfen, Probleme während Regressionstests schnell zu lokalisieren und zu melden. Finden Sie die Methode, die für Sie am besten geeignet ist, damit Sie diese Probleme von nun an so schnell wie möglich lösen können.

Automatisiertes Testen: Am besten zum Erkennen von Problemen in größerem Umfang

Technisch gesehen hat alles, was wir uns bisher angesehen haben, irgendeine Art von Automatisierung eingebaut, sei es die gleichzeitige Verarbeitung von 20 verschiedenen Browser-Screenshots oder die sofortige Anzeige mobiler Testoberflächen für alle iOS- und Android-Geräte auf einmal.

Allerdings verfügt die LambdaTest-Plattform auch über ein Tool namens „Automation“. Und das ermöglicht es Ihnen, Selenium-Tests in der Cloud auf über 2.000 Browsern durchzuführen. Eine neuere Funktion, „Lambda-Tunnel“, kann auch verwendet werden, um Selenium-Tests auf Ihrem lokalen Host durchzuführen. Auf diese Weise können Sie sehen, wie Ihre Codeänderungen aussehen, noch bevor sie live gehen.

Die Kombination von LambdaTest mit Selenium-Tests bietet unzählige Vorteile:

• Es ist eine hocheffiziente Methode, um große Mengen an Cross-Browser-Tests durchzuführen und dadurch die Abdeckung Ihres Browsers zu erhöhen (etwas, das manuell nicht möglich ist).
• Mit parallelen Cross-Browser-Tests reduzieren Sie den Zeitaufwand für die Ausführung von Automatisierungstests insgesamt.
• Da Selenium-Tests mit der Identifizierung Ihrer bevorzugten Programmiersprache beginnen, können Fehler, die in Browsern auftreten, intelligenter erkannt werden.

Der größte Vorteil der Verwendung des LambdaTest Selenium Automation Grid besteht natürlich darin, dass LambdaTest Ihnen hilft, zu beurteilen, ob Ihre Tests bestanden oder nicht bestanden werden.

Sie müssen immer noch die Ergebnisse überprüfen, um zu bestätigen, dass alle Fehler echte Fehler sind und umgekehrt, aber es wird Ihnen viel Zeit und Kopfschmerzen ersparen, wenn LambdaTest die anfängliche Arbeit für Sie erledigt.

Einpacken

Beim browserübergreifenden Testen geht es nicht nur darum, sicherzustellen, dass Websites mobil reagieren. Letztendlich wollen wir hier das Rätselraten aus dem Webdesign nehmen. Es mag über ein Dutzend möglicher Browser und Hunderte von Browser-/Gerätekonfigurationen geben, aber automatisierte Cross-Browser-Tests können das Überprüfen all dieser Möglichkeiten und das Auffinden von Fehlern viel einfacher machen.