Använda BrowserStack för Cross-Browser Testing

Browsertestning är banan i vår existens. Tja, det är lite överdrift, men inte så mycket. Flera webbläsarversioner och webbläsarfragmentering kan göra det svårt att få bra testdäck för dina webbplatser, särskilt när du är faktor i de olika operativsystem som utvecklare använder för att bygga med.

Under åren har vi åberopat en mängd olika verktyg för att hjälpa oss med denna utmaning, inklusive virtuella maskiner, verktyg som simulerar webbläsare och till och med har flera enheter till hands för att arbeta med. Det skulle vara bra om det fanns ett sätt att ha ett visningsport som gjorde att vi enkelt kunde testa över alla större webbläsare och deras enskilda versioner utan att hoppa genom hoops.

BrowserStack.com har som mål att erbjuda detta via sin webbläsarbaserade virtualiseringstjänst och i den här artikeln täcker vi tjänsten och hur det hjälper till att hantera testproblemet med webbläsaren.


Webbläsare inuti din webbläsare

Jag nämnde att BrowserStack erbjuder en virtualiseringstjänst. Vad de flesta utvecklare tänker på när de hör det är "virtuella maskiner" och inte på ett förtjust sätt. Virtuella maskiner, samtidigt som det är verkligen användbart, kräver värdefullt diskutrymme och resurser för att vara användbara och de flesta utvecklare misslyckas med att köra dem på grund av det. BrowserStack tar ett annat tillvägagångssätt genom att använda Adobe Flash för att tillhandahålla en virtualiserad webbläsare i din egen webbläsare. Du behöver inte installera någonting och du får tillgång till riktiga virtuella webbläsare i molnet.

För att ge dig ett exempel, med hjälp av tjänsten drog jag upp webbsidan Nettuts + via Safari 5.1 på OSX Lion när du använder Internet Explorer 11.


Det är ganska kraftfull funktionalitet och det viktigaste är att det är allt gjort i din webbläsare. Och självklart är du inte begränsad i OS-val eller webbläsarversioner. BrowserStack erbjuder virtualisering för:

  • Windows XP, 7 och 8
  • OSX Snow Leopard, Lion och Mountain Lion
  • iOS
  • Android
  • Opera Mobile

Det är rätt, de erbjuder mobil webbläsare virtualisering. Vi är i en mobil värld, så jag förväntar mig inget mindre.

Beroende på vilket operativsystem du väljer, erbjuder BrowserStack ett antal stödda webbläsare för det specifika operativsystemet, inklusive betas och nightlies i vissa fall.


Ja, även den fruktade IE6 är tillgänglig. Det kan inte dö snart nog.

Bortsett från operativsystemen OS och webbläsare kan du också välja den skärmupplösning du vill testa med vilket är speciellt användbar för att kolla dina snabba layouter. Bara vet att BrowserStack också har en komplementär tjänst för att ta itu med responsiva mönster som genererar skärmdumpar för olika enheter och storlekar.

Huvuddelen är att det finns omfattande testtäckning här utan att behöva installera något för att använda det.


Hur fungerar det?

Det första du behöver göra är att registrera dig för tjänsten. BrowserStack är en för-betaltjänst och jag tror att prissättningen är mycket rimlig för funktionaliteten du får och ja det finns många fler funktioner.

När du har registrerat dig och loggat in, kommer du vara på instrumentpanelen som erbjuder en snabbstartsdialog.


Detta gör att du enkelt kan ange webbadressen du vill testa och via dropdowns, mål-OS och webbläsareversion. Du kan finjustera saker via den vänstra panelen som erbjuder skärmupplösningsval och simulering av sidhastighet.

Om du klickar på startar du processen med att upprätta anslutningen via Flash till fjärrservern och gör den virtuella webbläsaren:


Vad jag skulle vilja betona här är att det här inte är en skärmdumpare eller någon falsk session. Du har full tillgång till webbsidans funktionalitet, inklusive menyer, knappar och så vidare. Detta inkluderar även utvecklingsverktygen som kommer med webbläsare. Ja, du läser korrekt. Du har tillgång till verktyg som Firefox Web Developer Tools, IE F12 Tools och Chrome Developer Tools. I denna skärmdump är jag i en session som kör Firefox på Mountain Lion och använder Firefox Web Developer Tools.


Så du kan inte bara se hur dina sidor kommer att göra över webbläsare, men du kan också använda de befintliga verktygen för att felsöka vanliga problem. Väldigt coolt!


Kommer lokalt

Det är definitivt fantastiskt att kunna kolla dina sidor när de är offentligt tillgängliga, men i de flesta fall kommer du att utvecklas lokalt och vill kolla dina sidor långt innan du trycker på din kod till produktion.

BrowserStack har adresserat detta genom att tillhandahålla en tunnelingskapacitet som gör att du kan testa dina lokala sidor på distans. Den använder en Java-applet för att fungera som en proxy mellan din katalog eller webbserver och den molnbaserade tjänsten. Ja, det betyder att du måste installera Java och medan jag inte brukar rekommendera installation av Java-plugins, är det i så fall nödvändigt och värdefullt. BrowserStack installerar dock inte ett plugin. Det serverar en applet som använder Java-plugin för applet-webbläsare. Var noga med att inaktivera webbläsarens plugins efter att du har testat. En sak att notera är att under min testning på Windows 8.1, behövde jag använda 32-bitarsversionen av Java JRE, eftersom 64-biten inte verkade fungera eller skulle det installera webbläsarens plugins i Firefox eller Chrome. För att få 32-bitarsversionen, gå till Oracles manuella nedladdningssida. Också vara medveten om att Firefox inte aktiverar plugin som standard så du måste gå in och aktivera det.

Om du tittar på den vänstra panelen på kontrollpanelen i BrowserStack borde du se en rubrik med titeln "Lokal testning" med två knappar märkta "Webtunnel"och"Kommandorad".


Alternativet "Webtunnel" använder Java-appleten för att upprätta tunneln mellan datorn och fjärrtjänsten. Detta kan göras på filsystemsnivå där du skulle välja en specifik katalog med dina sidor eller en lokal serveradress (exempel: localhost). För att illustrera detta har jag installerat WAMP på min dator för att få en lokal webbserver att använda med BrowserStack. WAMP installerar som standard också phpMyAdmin som är tillgängligt via:

http: // localhost: 81 / phpmyadmin /

Jag använder port 81 så att det inte strider mot en annan process som jag kör. Klicka på "Webbtunnel"alternativet öppnar följande dialog så att du vet att appleten laddas:


Eftersom Oracle har arbetat för att säkra Java, särskilt deras webbläsare, bör du uppmanas att köra appleten. Mitt råd är att aldrig tillåta någon osignerad applet från en webbplats att köras på din dator så jag ställa alltid min Java-säkerhetsinställning till "Hög". Det finns också ett alternativ som heter"Väldigt högt"men med det kommer det att förhindra att appleten BrowserStack ansluts fjärranslutet.


När appleten körs visas en dialogruta som frågar efter din lokala serveradress eller -mapp.


Som du kan se, skrev jag in min lokala webbadress och det upptäckte portnumret. Du kan även använda SSL om du behöver. Därifrån kopplar jag av anslutningen och jag kan se min lokala kopia av phpMyAdmin på BrowserStack fjärrserveren.


Om du inte vill använda Java-applet i webbläsaren eller av någon anledning inte fungerar kan du använda kommandoraden, som kräver att du laddar ner a .burk fil som kallas via kommandoraden för att upprätta anslutningen:

java -jar BrowserStackTunnel.jar  lokalvärd, 3000,0

De skulle vara en BrowserStack accessnyckel som du måste ange. När anslutningen är etablerad, återgår du till instrumentbrädan för att börja testa.

Personligen föredrar jag applet-tillvägagångssättet eftersom det är dött enkelt. Du kan få mer information om BrowserStacks lokala testning på den här sidan.


En hel del mer

Jag tror att du håller med om att det här är en väldigt cool tjänst som gör det väsentligt lättare att göra testning på webbläsare, även lokalt, från ett webbläsartestningsperspektiv. Och det är verkligen ett genomförbart alternativ till virtuella maskiner för dem som saknar systemresurser.

Men BrowserStack erbjuder mycket mer, inklusive automatiserad funktionell testning, skärmdumpning av webbläsare och en responsiv designtesttjänst som låter dig se hur din webbplats kommer att se över flera enheter (inte bara webbläsare).

Det är en av de tjänster som som en professionell utvecklare är verkligen värt investeringen.