Cross-Browser-Testing mit CrossBrowserTesting

❥ Sponsor

Nehmen wir an, Sie entwickeln auf einem Mac, möchten aber einige Designs in Microsoft Edge testen, für das es keine macOS-Version gibt. Oder umgekehrt! Sie arbeiten auf einem PC und müssen Safari testen, für das es keine Windows-Version mehr gibt.

Das ist ein klassisches Problem, mit dem ich mich seit einem Jahrzehnt beschäftige. Ich erinnere mich, dass ich eine Kopie von Windows Vista gekauft, Software zur Verwaltung virtueller Maschinen gekauft und tagelang damit verbracht habe, eine Testumgebung einzurichten. Sie können diesen Weg immer noch gehen, wenn Sie, wissen Sie, Schmerz lieben. Oder Sie können CrossBrowserTesting verwenden und eine extrem robuste Testumgebung für eine riesige Auswahl an Browsern/Plattformen/Versionen haben, ohne jemals den Komfort Ihres bevorzugten Browsers zu verlassen.

Es ist lächerlich wunderbar.

Um anzufangen, können Sie am einfachsten einen Browser/eine Plattform auswählen, eine URL angeben und diese starten!

Sobald der Test läuft, können Sie damit interagieren, wie Sie es erwarten würden. Klicken, scrollen, Formulare eingeben... es ist ein echter Browser! Sie haben Zugriff auf alle Entwicklertools, die Sie erwarten würden. Sie können zum Beispiel die DevTools in Edge öffnen und herumsuchen, um einen Fehler zu finden.

Wenn Sie solche Tests durchführen müssen, befinden Sie sich wahrscheinlich in der Entwicklung und nicht in der Produktion. Wie testen Sie das? Sicherlich können die Server von CrossBrowserTesting Ihr Localhost nicht sehen! Nun, das können sie, wenn Sie es zulassen. Sie haben eine Browsererweiterung, mit der Sie das Testen lokaler Websites mit einem einzigen Klick ermöglichen können.

Eine Sache, für die ich CrossBrowserTesting gerne nutze, ist die Gewährleistung, dass Layouts in verschiedenen Browsern funktionieren. Falls Sie es noch nicht gehört haben, CSS Grid ist da! Es wird in vielen Browsern unterstützt, aber nicht in allen und nicht auf exakt die gleiche Weise.

CrossBrowserTesting ist das perfekte Werkzeug, um mir dabei zu helfen. Ich kann das, woran ich arbeite, dort öffnen, Änderungen vornehmen und es so gestalten, wie ich es brauche. Vielleicht das Layout in verschiedenen Browsern reproduzieren oder, was genauso wahrscheinlich ist, ein Fallback erstellen, das anders aussieht, aber gut aussieht.

Beachten Sie in der obigen Screenshot, dass die Demo auf CodePen läuft. Das ist relevant, da CrossBrowserTesting Ihnen erlaubt, CodePen kostenlos zu testen! Dies ist ein großartiger Anwendungsfall für etwas wie Live View, bei dem Sie an einem Pen arbeiten, ihn speichern und die Änderungen sofort in der Live View-Vorschau sehen können, die auch über CrossBrowserTesting hervorragend funktioniert.

Das Live-Testing ist großartig, aber es gibt auch bildschirmfoto-basiertes visuelles Testing, falls Sie beispielsweise ein Layout in Dutzenden von Browsern gleichzeitig testen möchten. Viel praktischer ist es, ein Thumbnail-Raster auf einmal zu betrachten!

Und es gibt noch fortgeschrittenere Funktionen. CrossBrowserTesting bietet automatisierte Testfunktionen, die funktionale und visuelle Tests auf echten Browsern vereinfachen. Mit Selenium, einem Open-Source-Testframework, kann ich Skripte in der Sprache meiner Wahl schreiben, die die Aktionen eines echten Benutzers nachahmen: sich in die App einloggen, einen Plan kaufen und ein neues Projekt erstellen. Ich kann die Tests dann auf CrossBrowserTesting ausführen und sicherstellen, dass diese Aktionen in verschiedenen Browsern und Geräten funktionieren. Da sich CrossBrowserTesting in der Cloud befindet, kann ich meine Tests gegen produktive Websites und Anwendungen ausführen, die Einnahmen generieren.

Funktionale Tests können eine Rettung sein, um sicherzustellen, dass alles funktioniert und Ihre Kunden ordnungsgemäß mit Ihrem Produkt interagieren können. Sobald diese Tests abgeschlossen sind, kann ich sogar Videos oder Screenshots von Fehlern sehen und von dort aus mit der Fehlersuche beginnen.

Direkter Link →