Share
Browsertests sind der Fluch unserer Existenz. Nun, das ist etwas übertrieben, aber nicht viel. Mehrere Browserversionen und eine Fragmentierung des Browsers können eine gute Testabdeckung für Ihre Websites erschweren, insbesondere wenn Sie die verschiedenen Betriebssysteme berücksichtigen, mit denen Entwickler arbeiten.
Im Laufe der Jahre haben wir uns auf eine Reihe von Tools verlassen, die uns bei dieser Herausforderung unterstützen, einschließlich virtueller Maschinen, Tools, die Browser simulieren, und sogar, wenn mehrere Geräte zur Verfügung stehen. Es wäre großartig, wenn es einen Weg gäbe, über ein Ansichtsfenster zu verfügen, mit dem wir problemlos alle gängigen Browser und ihre einzelnen Versionen testen können, ohne durch die Reifen zu springen.
BrowserStack.com möchte dies über seinen browserbasierten Virtualisierungsdienst anbieten. In diesem Artikel behandeln wir den Dienst und zeigen, wie er das Problem des Cross-Browser-Tests lösen kann.
Ich erwähnte, dass BrowserStack einen Virtualisierungsdienst anbietet. Was die meisten Entwickler denken, wenn sie das hören, ist "virtuelle Maschinen" und nicht auf eine beliebte Art und Weise. Virtuelle Maschinen sind zwar durchaus nützlich, erfordern jedoch wertvollen Speicherplatz und Ressourcen, und die meisten Entwickler scheuen es, sie deshalb ausführen zu müssen. BrowserStack verfolgt einen anderen Ansatz, indem er mit Adobe Flash einen virtualisierten Browser in Ihrem eigenen Browser bereitstellt. Sie müssen nichts installieren, und Sie erhalten Zugriff auf echte virtuelle Browser in der Cloud.
Um Ihnen ein Beispiel zu geben, habe ich mit Hilfe des Dienstes die Hauptseite von Nettuts + über Safari 5.1 unter OSX Lion aufgerufen, während Sie Internet Explorer 11 verwenden.
Das ist eine ziemlich leistungsstarke Funktion und der Schlüssel ist, dass alles in Ihrem Browser erledigt wird. Natürlich sind Sie bei der Auswahl des Betriebssystems oder der Browser-Version nicht eingeschränkt. BrowserStack bietet Virtualisierung für:
Das ist richtig, sie bieten mobile Browser-Virtualisierung. Wir sind in einer mobilen Welt, also würde ich nicht weniger erwarten.
Je nach ausgewähltem Betriebssystem bietet BrowserStack eine Reihe von unterstützten Browsern für das jeweilige Betriebssystem an, in einigen Fällen auch Betas und Nightlys.
Ja, sogar der gefürchtete IE6 ist verfügbar. Es kann nicht früh genug sterben.
Neben den Betriebssystem- und Browseroptionen können Sie auch die Bildschirmauflösung auswählen, mit der Sie testen möchten. Dies ist besonders nützlich, um Ihre responsiven Layouts zu überprüfen. Man muss nur wissen, dass BrowserStack auch einen ergänzenden Service für responsive Designs bietet, der Screenshots für verschiedene Geräte und Größen erstellt.
Der Hauptpunkt ist, dass es hier eine umfassende Testabdeckung gibt, ohne dass irgendetwas installiert werden muss, um es zu verwenden.
Als erstes müssen Sie sich für den Dienst registrieren. BrowserStack ist ein kostenpflichtiger Service, und ich denke, die Preisgestaltung ist für die Funktionalität, die Sie erhalten, sehr vernünftig und ja, es gibt noch viele weitere Funktionen.
Sobald Sie sich registriert und angemeldet haben, befinden Sie sich im Dashboard, das einen Schnellstart-Dialog bietet.
Auf diese Weise können Sie einfach die URL eingeben, die Sie testen möchten, und über die Dropdown-Listen das Ziel-Betriebssystem und die Browserversion. Sie können die Feinabstimmung über das linke Bedienfeld vornehmen, in dem Sie die Bildschirmauflösung und die Geschwindigkeit der Simulation der Seitenwiedergabe auswählen können.
Durch Klicken auf Start wird der Verbindungsaufbau über Flash zum Remote-Server und das Rendern des virtualisierten Browsers gestartet:
Was ich hier betonen möchte, ist, dass dies kein Screenshot-Grabber oder eine falsche Sitzung ist. Sie haben vollen Zugriff auf die Funktionen der Webseite, einschließlich Menüs, Schaltflächen usw. Dazu gehören auch die Entwicklertools, die mit Browsern geliefert werden. Ja, du hast richtig gelesen. Sie haben Zugriff auf Tools wie Firefox Web Developer Tools, die IE F12-Tools und die Chrome Developer Tools. In diesem Screenshot bin ich in einer Sitzung, in der Firefox auf Mountain Lion ausgeführt wird und die Firefox Web Developer Tools verwendet werden.
So können Sie nicht nur sehen, wie Ihre Seiten in Browsern dargestellt werden, sondern Sie können auch die vorhandenen Tools verwenden, um häufig auftretende Probleme zu beheben. Sehr cool!
Es ist auf jeden Fall fantastisch, Ihre Seiten nach dem öffentlichen Zugriff überprüfen zu können, aber in den meisten Fällen werden Sie lokal entwickeln und Ihre Seiten vor dem Auslagern auschecken, bevor Sie den Code in die Produktion bringen.
BrowserStack hat dies mit einer Tunneling-Funktion gelöst, mit der Sie Ihre lokalen Seiten remote testen können. Es verwendet ein Java-Applet, um als Proxy zwischen Ihrem Verzeichnis- oder Webserver und dem Cloud-basierten Dienst zu fungieren. Ja, das bedeutet, dass Sie Java installieren müssen, und obwohl ich die Installation der Java-Browser-Plugins eher nicht empfehle, ist dies in diesem Fall eine Notwendigkeit und lohnt sich. BrowserStack installiert jedoch kein Plugin. Es wird ein Applet bereitgestellt, das Java-Applet-Browser-Plugin nutzt. Stellen Sie sicher, dass Sie die Browser-Plugins nach dem Testen deaktiviert haben. Zu beachten ist, dass ich während des Testens unter Windows 8.1 die 32-Bit-Version von Java JRE verwenden musste, da die 64-Bit-Version scheinbar nicht funktionierte und die Browser-Plug-Ins nicht in Firefox oder Chrome installiert wurden. Um die 32-Bit-Version zu erhalten, rufen Sie die Handbuch-Downloadseite von Oracle auf. Beachten Sie auch, dass Firefox das Plugin standardmäßig nicht aktiviert. Sie müssen es also aktivieren und aktivieren.
Im linken Bereich des BrowserStack-Dashboards sollte ein Abschnitt mit dem Titel angezeigt werden "Lokale Tests" mit zwei Tasten mit der Bezeichnung "Web-Tunnel" und "Befehlszeile".
Die Option "Web Tunnel" nutzt das Java-Applet, um den Tunnel zwischen Ihrem Computer und dem Remote-Dienst herzustellen. Dies kann auf Dateisystemebene erfolgen, auf der Sie ein bestimmtes Verzeichnis mit Ihren Seiten oder eine lokale Server-URL auswählen (Beispiel: localhost). Um dies zu verdeutlichen, habe ich WAMP auf meinem PC installiert, damit ein lokaler Webserver mit BrowserStack verwendet werden kann. WAMP installiert standardmäßig auch phpMyAdmin, auf das Sie zugreifen können:
http: // localhost: 81 / phpmyadmin /
Ich verwende Port 81, um keinen Konflikt mit einem anderen Prozess zu verursachen, den ich ausführte. Klicken Sie auf "Web-Tunnel"Die Option öffnet den folgenden Dialog, der Sie darüber informiert, dass das Applet geladen wird:
Da Oracle an der Sicherung von Java gearbeitet hat, insbesondere deren Browser-Plugins, sollten Sie aufgefordert werden, das Applet auszuführen. Mein Rat ist, niemals zulassen, dass ein nicht signiertes Applet von einer Website auf Ihrem PC ausgeführt wird. Daher setze ich meine Java-Sicherheitseinstellungen immer auf "Hoch". Es gibt auch eine Option namens"Sehr hochmsgstr "dies wird jedoch verhindern, dass das BrowserStack - Applet eine Remote - Verbindung herstellt.
Sobald das Applet ausgeführt wird, wird ein Dialogfeld angezeigt, in dem Sie nach der Adresse oder dem Ordner Ihres lokalen Servers gefragt werden.
Wie Sie sehen, habe ich meine lokale URL eingegeben und die Portnummer wurde erkannt. Sie können bei Bedarf auch SSL verwenden. Von dort aus starte ich die Verbindung und kann meine lokale Kopie von phpMyAdmin auf dem BrowserStack-Remote-Server sehen.
Wenn Sie das Java-Applet nicht im Browser verwenden möchten oder aus irgendeinem Grund nicht funktionieren, können Sie die Option "Befehlszeile" verwenden, die das Herunterladen von a erfordert .Krug Datei, die über die Befehlszeile aufgerufen wird, um die Verbindung herzustellen:
java -jar BrowserStackTunnel.jarlocalhost, 3000,0
Das
Ich persönlich bevorzuge den Applet-Ansatz, da er einfach ist. Weitere Informationen zu den lokalen Tests von BrowserStack finden Sie auf dieser Seite.
Ich denke, Sie stimmen zu, dass dies aus Sicht des Browsertests ein sehr cooler Service ist, der es wesentlich einfacher macht, Cross-Browser-Tests durchzuführen, sogar lokal. Und es ist sicherlich eine praktikable Alternative zu virtuellen Maschinen, wenn die Systemressourcen knapp werden.
BrowserStack bietet jedoch noch viel mehr, darunter automatisierte Funktionstests, Screenshots von Browser-Screenshots und einen responsiven Designtest-Service, mit dem Sie sehen können, wie Ihre Website auf mehreren Geräten (nicht nur bei Browsern) aussehen wird..
Es ist eine dieser Dienstleistungen, die sich als professioneller Entwickler sicherlich lohnt.
Accentsconagua