Share
Browser testing er banen i vår eksistens. Vel, det er litt overdrevet, men ikke så mye. Flere nettleserversjoner og nettleserfragmentering kan gjøre det vanskelig å få god testdekning for nettstedene dine, spesielt når du er faktor i de forskjellige operativsystemene som utviklere bruker til å bygge sammen med.
Gjennom årene har vi stått på en rekke verktøy for å hjelpe oss med denne utfordringen, inkludert virtuelle maskiner, verktøy som simulerer nettlesere og til og med å ha flere enheter til stede for å jobbe med. Det ville være flott hvis det var en måte å ha ett visningsport som tillot oss å enkelt teste over en hvilken som helst større nettleser og deres individuelle versjoner uten å hoppe gjennom hoops.
BrowserStack.com har som mål å tilby dette via den nettleserbaserte virtualiseringstjenesten, og i denne artikkelen vil vi dekke tjenesten og hvordan den hjelper til med å takle testproblemet for nettleser.
Jeg nevnte at BrowserStack tilbyr en virtualiseringstjeneste. Hva de fleste utviklere tenker på når de hører det er "virtuelle maskiner" og ikke på en forkjærlig måte. Virtuelle maskiner, men absolutt nyttige, krever verdifull diskplass og ressurser for å være nyttige, og de fleste utviklere loathe å måtte kjøre dem på grunn av det. BrowserStack tar en annen tilnærming ved å utnytte Adobe Flash for å gi en virtualisert nettleser i din egen nettleser. Du trenger ikke installere noe, og du får tilgang til ekte virtuelle nettlesere i skyen.
For å gi deg et eksempel, ved å bruke tjenesten, trakk jeg opp Nettuts + hovedsiden via Safari 5.1 på OSX Lion mens du bruker Internet Explorer 11.
Det er ganske kraftig funksjonalitet, og det viktigste er at alt er gjort i nettleseren din. Og selvfølgelig er du ikke begrenset i OS-valg eller nettleserversjoner. BrowserStack tilbyr virtuellisering for:
Det er riktig, de tilbyr mobilnettleserv virtualisering. Vi er i en mobil verden, så jeg forventer ingenting mindre.
Avhengig av hvilket operativsystem du velger, tilbyr BrowserStack opp en rekke støttede nettlesere for det spesifikke operativsystemet, inkludert betas og nightlies i noen tilfeller.
Ja, selv den fryktede IE6 er tilgjengelig. Det kan ikke dø snart nok.
Bortsett fra OS og nettleservalg, kan du også velge skjermoppløsningen du vil teste med, som er spesielt nyttig for å sjekke ut dine responsive layouter. Bare vet at BrowserStack også har en komplementær tjeneste for å takle responsive design som genererer skjermbilder for forskjellige enheter og størrelser.
Hovedpoenget er at det er omfattende testdekning her uten at det må installeres noe for å bruke det.
Det første du må gjøre er å registrere deg for tjenesten. BrowserStack er en for-betaltjeneste, og jeg tror prisen er svært rimelig for funksjonaliteten du får, og ja det er mange flere funksjoner.
Når du har registrert deg og logget på, vil du være på dashbordet som tilbyr en hurtigstartsdialog.
Dette lar deg enkelt legge inn nettadressen du vil teste og via rullegardinene, mål-OS og nettleserversjon. Du kan finjustere ting via det venstre panelet som tilbyr skjermoppløsningsvalg og sidevisningshastighetsimulering.
Ved å klikke start starter prosessen med å etablere forbindelsen via Flash til den eksterne serveren og gjengir den virtuelle nettleseren:
Det jeg vil understreke her er at dette ikke er en skjermbildegrabber eller noen falsk økt. Du har full tilgang til nettsidens funksjonalitet, inkludert menyer, knapper og så videre. Dette inkluderer også utviklerverktøyene som følger med nettlesere. Ja, du leser riktig. Du har tilgang til verktøy som Firefox Web Developer Tools, IE F12 Tools og Chrome Developer Tools. I dette skjermbildet er jeg i en økt som kjører Firefox på Mountain Lion og bruker Firefox Web Developer Tools.
Så ikke bare kan du se hvordan sidene dine vil gjengis over nettlesere, men du kan også bruke eksisterende verktøy for å feilsøke vanlige problemer. Veldig kult!
Det er definitivt kjempebra å kunne sjekke ut sidene dine når de er offentlig tilgjengelige, men i de fleste tilfeller skal du utvikle seg lokalt og vil du sjekke sidene dine før du trykker på koden din til produksjonen.
BrowserStack har adressert dette ved å tilby en tunneling evne som lar deg teste dine lokale sider eksternt. Den bruker en Java-applet til å fungere som en proxy mellom katalogen eller webserveren og den skybaserte tjenesten. Ja, dette betyr at du må installere Java, og mens jeg pleier å ikke anbefale installasjon av Java-nettleserpluggene, er det i dette tilfellet en nødvendighet og verdt. BrowserStack installerer imidlertid ikke et plugin. Den serverer en applet som utnytter Java-plugin for appletbrowser. Bare vær sikker på å deaktivere nettleserpluggene etter at du har testet. En ting å merke seg er at under testingen min på Windows 8.1, trengte jeg å bruke 32-bitersversjonen av Java JRE, da 64-biten ikke syntes å virke, eller ville det installere nettleserens plugins i Firefox eller Chrome. For å få 32-bitersversjonen, gå til Oracle's manuelle nedlastingsside. Vær også oppmerksom på at Firefox ikke vil aktivere pluginet som standard slik at du må gå inn og aktivere det.
Når du ser på det venstre panelet på dashbordet i BrowserStack, bør du se en tittel med tittelen "Lokal testing" med to knapper merket "Web tunnel"og"Kommandolinje".
Alternativet "Web Tunnel" bruker Java-appleten til å etablere tunnelen mellom datamaskinen og fjerntjenesten. Dette kan gjøres på filsystemnivå hvor du vil velge en bestemt katalog med sidene dine eller en lokal serveradresse (eksempel: localhost). For å illustrere dette har jeg installert WAMP på PCen min for å få en lokal webserver til å bruke med BrowserStack. WAMP installerer som standard også phpMyAdmin som er tilgjengelig via:
http: // localhost: 81 / phpMyAdmin /
Jeg bruker port 81 for ikke å være i konflikt med en annen prosess jeg kjører. Klikk på "Web Tunnel"alternativet åpner følgende dialog for å fortelle deg at appleten lastes inn:
Fordi Oracle har jobbet for å sikre Java, spesielt deres nettleserplugger, bør du bli bedt om å kjøre appleten. Mitt råd er å aldri tillate noen usignert applet fra et nettsted å kjøre på PCen din, slik at jeg alltid angir Java-sikkerhetsinnstillingen til "Høy". Det er også et alternativ som heter"Veldig høy"men ved hjelp av det vil det forhindre at BrowserStack-applet kobles til eksternt.
Når appleten kjører, vil du bli presentert med en dialogboks som ber om din lokale serveradresse eller -mappe.
Som du kan se, skrev jeg inn min lokale nettadresse og det oppdaget portnummeret. Du kan også bruke SSL hvis du trenger det. Derfra slår jeg av tilkoblingen, og jeg kan se min lokale kopi av phpMyAdmin på BrowserStack-fjernserveren.
Nå, hvis du ikke vil bruke Java-appleten i nettleseren eller av en eller annen grunn det ikke virker, kan du bruke "Kommandolinje" -alternativet som krever at du laster ned a .krukke fil som kalles via kommandolinjen for å etablere forbindelsen:
java -jar BrowserStackTunnel.jarlocalhost, 3000,0
De
Personlig foretrekker jeg applet-tilnærmingen siden det er dødt enkelt. Du kan få mer informasjon om BrowserStacks lokale testing på denne siden.
Jeg tror du er enig i at fra et nettlesertestingsperspektiv er dette en veldig kul tjeneste som gjør det vesentlig lettere å gjøre tverrlesertesting, selv lokalt. Og det er absolutt et levedyktig alternativ til virtuelle maskiner for de som mangler systemressurser.
Men BrowserStack tilbyr mye mer, inkludert automatisert funksjonell testing, nettleser skjermbildeopptak og en responsiv designtestingstjeneste som lar deg se hvordan nettstedet ditt vil se på flere enheter (ikke bare nettlesere).
Det er en av de tjenestene som som en profesjonell utvikler er absolutt verdt investeringen.
Accentsconagua