Share
Browser testen is de vloek van ons bestaan. Wel, dat is een beetje overdreven, maar niet zozeer. Meerdere browserversies en browserfragmentatie kunnen het moeilijk maken om een goede testdekking voor uw sites te krijgen, vooral wanneer u rekening houdt met de verschillende besturingssystemen die ontwikkelaars gebruiken om te bouwen met.
In de loop der jaren hebben we vertrouwd op een verscheidenheid aan hulpmiddelen om ons te helpen met deze uitdaging, waaronder virtuele machines, hulpprogramma's die browsers simuleren en zelfs meerdere apparaten bij de hand hebben om mee te werken. Het zou geweldig zijn als er een manier was om een viewport te hebben die ons in staat stelde om eenvoudig te testen in elke belangrijke browser en hun individuele versies zonder door hoepels te springen..
BrowserStack.com probeert dit via zijn browser-gebaseerde virtualisatieservice aan te bieden en in dit artikel bespreken we de service en hoe deze het probleem van cross-browser testen aanpakt.
Ik zei dat BrowserStack een virtualisatieservice biedt. Waar de meeste ontwikkelaars aan denken als ze horen dat dit "virtuele machines" is en niet op een dierbare manier. Virtuele machines, hoewel zeker nuttig, vereisen waardevolle schijfruimte en bronnen om bruikbaar te zijn en de meeste ontwikkelaars vinden het vervelend om ze daarom uit te voeren. BrowserStack heeft een andere aanpak door gebruik te maken van Adobe Flash om een gevirtualiseerde browser te bieden in uw eigen browser. U hoeft niets te installeren en u krijgt toegang tot echte virtuele browsers in de cloud.
Om u een voorbeeld te geven: met behulp van de service heb ik de Nettuts + hoofdpagina opgehaald via Safari 5.1 op OSX Lion tijdens het gebruik van Internet Explorer 11.
Dat is behoorlijk krachtige functionaliteit en het belangrijkste is dat alles in uw browser wordt gedaan. En natuurlijk ben je niet beperkt in OS-keuze of browserversies. BrowserStack biedt virtulisatie voor:
Dat klopt, ze bieden mobiele browservirtualisatie. We zitten in een mobiele wereld, dus ik zou niets minder verwachten.
Afhankelijk van het besturingssysteem dat u kiest, biedt BrowserStack een aantal ondersteunde browsers voor het specifieke besturingssysteem, waaronder bèta's en nachtvlinders in sommige gevallen.
Ja, zelfs de gevreesde IE6 is beschikbaar. Hij kan niet snel genoeg sterven.
Afgezien van de OS- en browseropties, kunt u ook de schermresolutie kiezen die u wilt testen, wat vooral handig is om uw responsieve lay-outs te bekijken. Weet gewoon dat BrowserStack ook een aanvullende service heeft om responsieve ontwerpen aan te pakken die schermafbeeldingen genereren voor verschillende apparaten en formaten.
Het belangrijkste punt is dat hier uitgebreide testdekking is, zonder dat u iets hoeft te installeren om het te gebruiken.
Het eerste dat u hoeft te doen, is u registreren voor de service. BrowserStack is een for-pay-service en ik denk dat de prijs redelijk is voor de functionaliteit die u krijgt en ja, er zijn nog veel meer functies.
Nadat u bent geregistreerd en ingelogd, bevindt u zich op het dashboard met een snelstartvenster.
Hiermee kunt u eenvoudig de URL invoeren die u wilt testen en via de vervolgkeuzelijsten, het doel-OS en de browserversie. U kunt de dingen fijn afstemmen via het linkerdeelvenster, dat schermresolutiekeuzes en snelheidsimulatie van paginaweergave biedt.
Door te klikken op start wordt het proces gestart van het tot stand brengen van de verbinding via Flash met de externe server en het renderen van de gevirtualiseerde browser:
Wat ik hier wil benadrukken is dat dit geen screenshot grabber of een nep sessie is. U hebt volledige toegang tot de functionaliteit van de webpagina, inclusief menu's, knoppen, enzovoort. Dit omvat ook de ontwikkelaarstools die bij browsers worden geleverd. Ja, je leest het goed. U hebt toegang tot tools zoals Firefox Web Developer Tools, de IE F12 Tools en de Chrome Developer Tools. In deze schermafbeelding zit ik in een sessie met Firefox op Mountain Lion en gebruik ik de Firefox Web Developer Tools.
U kunt dus niet alleen zien hoe uw pagina's in verschillende browsers worden weergegeven, maar u kunt ook de bestaande hulpprogramma's gebruiken om veelvoorkomende problemen op te lossen. Heel cool!
Het is absoluut geweldig om je pagina's te kunnen bekijken zodra ze openbaar beschikbaar zijn, maar in de meeste gevallen zul je lokaal aan het ontwikkelen zijn en je pagina's willen afrekenen voordat je je code naar productie pusht.
BrowserStack heeft dit aangepakt door een tunneling-mogelijkheid te bieden waarmee u uw lokale pagina's op afstand kunt testen. Het maakt gebruik van een Java-applet om te fungeren als een proxy tussen uw directory- of webserver en de cloudservice. Ja, dit betekent dat u Java moet installeren en hoewel ik de installatie van de Java-browserplug-ins meestal niet raad, is dit in dit geval een noodzaak en de moeite waard. BrowserStack installeert echter geen plug-in. Het dient een applet die de plug-in van de applet-browser van Java gebruikt. Zorg ervoor dat u de browser-plug-ins uitschakelt nadat u klaar bent met testen. Een ding om op te merken is dat tijdens mijn testen op Windows 8.1, ik de 32-bit versie van de Java JRE moest gebruiken omdat de 64-bit niet leek te werken en evenmin de browser plug-ins in Firefox of Chrome zou installeren. Ga naar de downloadpagina van Oracle om de 32-bits versie te downloaden. Houd er ook rekening mee dat Firefox de plug-in niet standaard inschakelt, dus u moet deze activeren en activeren.
Als u naar het linkerpaneel van het BrowserStack-dashboard kijkt, ziet u een gedeelte met de titel "Lokale testen" met twee knoppen met het label "Webtunnel"en"Opdrachtregel".
Met de optie "Web Tunnel" wordt de Java-applet gebruikt om de tunnel tussen uw computer en de externe service tot stand te brengen. Dit kan worden gedaan op het niveau van het bestandssysteem waarbij u een specifieke map met uw pagina's of een lokale server-URL selecteert (bijvoorbeeld: localhost). Om dit te illustreren, heb ik WAMP op mijn pc geïnstalleerd om een lokale webserver te gebruiken met BrowserStack. WAMP installeert standaard ook phpMyAdmin die toegankelijk is via:
http: // localhost: 81 / phpmyadmin /
Ik gebruik poort 81 om niet in conflict te komen met een ander proces dat ik run. Klikken op de "Web Tunnel"optie opent het volgende dialoogvenster om u te laten weten dat de applet wordt geladen:
Omdat Oracle heeft gewerkt aan het beveiligen van Java, met name hun browser-plug-ins, moet u worden gevraagd om de applet uit te voeren. Mijn advies is om nooit een niet-ondertekende applet van een website op uw pc te laten draaien, dus ik stel mijn Java-beveiligingsinstelling altijd in op "hoog". Er is ook een optie genaamd"Heel hoog"maar als u dat gebruikt, voorkomt u dat de applet BrowserStack op afstand verbinding maakt.
Zodra de applet wordt uitgevoerd, wordt een dialoogvenster weergegeven met de vraag om uw lokale serveradres of -map.
Zoals u kunt zien, heb ik mijn lokale URL ingevoerd en het poortnummer gedetecteerd. U kunt SSL ook gebruiken als dat nodig is. Vanaf daar start ik de verbinding en kan ik mijn lokale exemplaar van phpMyAdmin op de BrowserStack externe server zien.
Als u de Java-applet niet in de browser wilt gebruiken of om een of andere reden niet werkt, kunt u de optie "Opdrachtregel" gebruiken, waarvoor u de a .pot bestand dat wordt aangeroepen via de opdrachtregel om de verbinding tot stand te brengen:
java -jar BrowserStackTunnel.jarlocalhost, 3000,0
De
Persoonlijk geef ik de voorkeur aan de appletaanpak omdat het doodeenvoudig is. U kunt meer informatie krijgen over de lokale testen van BrowserStack op deze pagina.
Ik denk dat je het ermee eens bent dat dit vanuit een browser-testperspectief een zeer coole service is die het aanzienlijk eenvoudiger maakt om cross-browser testen uit te voeren, zelfs lokaal. En het is zeker een haalbaar alternatief voor virtuele machines voor mensen die tekortschieten op systeembronnen.
Maar BrowserStack biedt nog veel meer, inclusief geautomatiseerde functionele tests, het vastleggen van een screenshot van een browser en een responsieve ontwerptestdienst waarmee u kunt zien hoe uw site er uit zal zien op meerdere apparaten (niet alleen browsers).
Het is een van die services die als professionele ontwikkelaar de investering zeker waard is.
Accentsconagua