Share
Jeg har skrevet ganske mye om nettlesertestløsninger, og prøver å hjelpe til med å identifisere teknikker og verktøy som gjør utviklingen på tvers av nettleseren enklere. Min siste artikkel om temaet dekket hvordan du bruker BrowserStack til å teste et hvilket som helst antall nettlesere alt fra ett sentralt verktøy; din egen nettleser.
Jeg var på en Windows-PC igjen da det var litt enklere å teste flere nettlesere, og testverktøy var hovedsakelig komplementært til arbeidet mitt. Nå som jeg er på OS X, er behovet for verktøy for å avrunde teststrategiene enda viktigere, spesielt på grunn av mangelen på Internet Explorer på operativsystemet.
Jeg er litt av en klistremerke for det jeg installerer på mine datamaskiner, og jeg foretrekker nettverktøy når det er tilgjengelig. Jeg er også alltid på jakt etter nye verktøy som gjør tester på tvers av nettleseren enklere og bestemte seg for å gi CrossBrowserTesting.com et løp. Jeg vil gå over noen av hovedtrekkene til tjenesten og hvordan du kan utnytte den til å forbedre testfunksjonene dine.
Først, la oss nevne at, som alle pålitelige tjenester i dette rommet, betaler CrossBrowserTesting.com en månedlig avgift. Jeg er ikke overrasket over dette fordi bunnlinjen er at de har en infrastruktur som støtter og det koster penger. Deres gebyrstruktur er basert på antall minutter du vil ha tilgjengelig for deg hver måned, men med en unik vri på at de lar deg rulle over et bestemt antall minutter, måned til måned. Så hvis du ikke bruker alle dine minutter, kan du rulle litt over for neste måned.
På selve tjenesten. Det er et par ting som er viktige for meg i disse tjenestene. Disse er:
Alt dette betyr fordi de gir deg den bredeste testoverflaten på tvers av flere enheter. Men for å være ærlig, uten å feilsøke verktøystøtte (som Chrome DevTools, IE F12 Tools, etc.), ville en tjeneste som dette være overbevisende å bruke og bare marginalt bedre enn en skjermdumpetjeneste. Og å være i stand til å teste lokalt er en åpenbar må-å tillate deg å teste interaktivt før du distribuerer til staging eller produksjon. Så dette kriteriet er viktig å vurdere.
Det første jeg la merke til om tjenesten, er den fantastiske bredden av nettleser og enhetsformfaktor. Hvert stort operativsystem er dekket (inkludert Ubuntu), og hver OS-versjon har en ganske omfattende liste over støttede nettleserversjoner for testing.
I tillegg er det omfattende støtte for mobilenheter og nettlesere som dekker tidligere og mer moderne versjoner av Android, iOS, Blackberry Bold og Windows Phone 8. Den interessante (og veldig gunstige) tingen er at for bestemte Android-versjoner kan de tillate deg å test mot konkurrerende nettlesere som Firefox Mobile, Maxthon og Opera.
Hvis du har brukt BrowserStack eller en lignende tjeneste, vil du føle deg hjemme i CrossBrowserTesting.com. Brukeropplevelsen samsvarer veldig godt med det jeg har sett før, noe som gjorde at det var ganske trivielt å hoppe inn i det. Du presenteres i utgangspunktet med et dashbord som gir deg tilgang til hovedfunksjonene. Disse inkluderer:
Levende nettlesertesting er det jeg er mest interessert i. For meg må jeg sørge for at gjengivelsen er konsekvent, så det første jeg gjorde var å gjøre en baseline test for å se om et nettsted vil gjøre det samme i min virtuelle nettleser som det gjør i min lokale nettleser. For å etterligne mine lokale innstillinger valgte jeg å starte sesjonen i Mavericks, som kjører under den nyeste stabile versjonen av Chrome:
En ting å merke seg er at i OS / nettleservalgformularen presenteres du bare med nettleseralternativene som er tilgjengelige for den spesifikke OS-versjonen slik:
Jeg gikk med GNCs nettside fordi jeg, jeg er litt av en fitness-buff, og de har også mange interaktive poeng, for eksempel JavaScript-baserte fly-over-menyer og sykkelfunksjonspaneler. Jeg skjønte det var en god test for å se om tjenesten kunne håndtere alt samspillet.
Ser på de to skjermbildene, kan du se at gjengivelsen for Chrome på Mavericks på begge systemene er nøyaktig det samme. Dette er en god ting, selv om det er litt trippy å se Chrome på Mavericks i Chrome på Mavericks. Begynn noen?
Lokal maskin
Ekstern virtuell nettleser
Når økten din har gått, kan du når som helst endre mål-OS og nettleserversjon ved å klikke på Endre konfigurasjon knappen som viser panelet med dropdown valg. Vær oppmerksom på at endring av operativsystemet eller nettleseren vil gjenopplate sesjonen, men det slår sikkert at du må sette opp flere virtuelle maskiner, spesielt for oversiktlige oversikt over sider.
Å få baseline-brukergrensesnittet var bra, men en viktigere test er å se hvordan nettstedet reagerer på samhandling. La meg forord dette ved å si at jeg ikke har funnet en tjeneste som denne som gir øyeblikkelig respons. Det vil alltid være et lag fordi disse nettleserne er virtualisert. Nøkkelen du vil ha, er å sørge for at normal samhandling, som svever over en meny eller kontroller UI-kontroller (som et rullepanel), fungerer som forventet (om enn litt langsommere). For eksempel har GNCs nettsted et rullegardinmenysystem som utvides når du svinger over et menyalternativ. Legg merke til at det svever over det vil utvide menyen og like viktig gi meg muligheten til å bore ned i den.
Denne interaktiviteten er det som gjør disse tjenestene så verdifulle. Dagene av å måtte stole på skjermdumpetjenester og massevis av VM-er for å se hvordan nettstedet ditt kommer over tonnevis av nettlesere er borte.
Godt spørsmål. Nettleserbaserte utviklerverktøy har virkelig utviklet seg pent, og vi er avhengige av dem daglig. Heldigvis har CrossBrowserTesting.com inkludert standard feilsøkingsverktøy med hver nettleser som gir oss tilgang til Chrome DevTools, IE F12 Developer Tools og Firefox Web Developer Tools samt Firebug for eldre versjoner av nettleseren. Legg merke til at jeg har sluppet IE F12-verktøyene i IE11 på Windows 7.
Verktøyene er helt funksjonelle, slik at jeg kan inspisere markup- og DOM-strukturen på siden, samt sette stiler og endre tekst, akkurat som du ville på din lokale PC. Du kan se her hvordan jeg kan oppdatere inline JavaScript på nettstedet:
Hva dette betyr, er evnen til å utnytte debuggerne til å gjøre avansert feilsøkingsarbeid som skriptfeil på en hvilken som helst nettleser og nettleserversjon.
En ting jeg var opptatt av, er om verktøyene nøyaktig vil vise sidebelastningstider via overvåkingspanelene for nettverkstrafikk, og i mine tester synes de å være konsistente med det jeg så lokalt. Dette betyr at jeg i en viss grad kan føle at belastningstiden vil være mer eller mindre på linje (selvfølgelig med tanke på nettverksproblemer).
Den ene tingen jeg synes er veldig vanskelig å måle, er sidens ytelse via den nye pakken med ytelsesprofiler som er inkludert i Chrome og Internet Explorer. Mange av disse dataene er direkte berørt av deler av datamaskinen, spesielt når rendering er GPU-forbedret. Testing dette på virtuelle nettlesere eller virtuelle maskiner er bare ikke ekte verden, så jeg vil ikke anbefale det. Hvis du er en interaktiv utvikler (spill), er det best å teste på din egen enhet for å få bedre forståelse av ytelsen.
Når jeg begynner å fokusere på mobil mer og mer, blir behovet for å teste over flere mobile OS og ulike formfaktorer en høy prioritet. Dessverre, kort for å få en veldig stor arv, å vinne lottoen, eller å finne en kjærlig sponsor, bygger en fullverdig mobilenhet lab bare ikke i kortene. Og i takt med at tingene går, blir ting bare tøffere, siden produsentene fortsetter å presse grensene for mobilnettlesere og enhetsstørrelse.
CrossBrowserTesting.com tilbyr muligheten til å teste over de store mobile operativsystemene som simulerer de fleste populære mobilenheter som iPads, iPhones, Nexus 7s og så videre. Dette er absolutt ikke en allomfattende liste over mobilenheter, og jeg antar at det er ment å takle de mest moderne operativsystemene og enhetene som er tilgjengelige..
Prosessen med testing er akkurat det samme som det vi gjorde for nettlesere, bortsett fra at gjengivelsen vil være innenfor størrelsen på den spesifikke mobile enheten du har valgt:
Igjen bruker tjenesten simulatorer som gjør det mulig å teste ut hvordan nettstedet ditt skal gjengis på en mobil enhet. Vær imidlertid oppmerksom på at mens simulatorer er gode, er det alltid best å teste mot en ekte enhet om mulig.
Nye enheter kommer ut hele tiden, og jeg forventer ikke at hver formfaktor skal være her. Jeg tror et fint tillegg ville være å la en bruker av tjenesten kunne definere visningsportstørrelsen i motsetning til bare å presentere standard skjermoppløsninger. Dette vil også gi mer fleksibilitet i testing av nettsteder som er lydhør.
Før interaktive tjenester som CrossBrowserTesting.com ble tilgjengelig, ble skjermtjenestene kjent som en av de raskeste måtene å se hvordan nettstedet ditt ble gjengitt på flere nettlesere. Mens de er slags passe nå, er de fortsatt nyttige og interessant nok, jeg ser at de fleste av disse nettlesertesttjenestene snurrer opp skjermdumpen som en del av tilbudene sine. Så det virker som om denne øvelsen har litt av en renessanse, mest sannsynlig drevet av det økende antall nettleserversjoner, enheter og formfaktorer vi trenger å tegne for.
Ved å bruke tjenesten er enkel og like enkel som å skrive inn en URL, velger du nettleserne du vil ha skjermbilder fra, og klikker på Ta skjermbilder knapp:
Den fine tingen om dette er at du kan velge så mange enheter / OS / nettleserkombinasjoner som du vil, samt definere oppløsningen per mål. Dette genererer en rekke stillbilder som du kan vurdere:
Hvis du klikker på individuelle skjermbilder, vises et større bilde slik at du får en detaljert visning av gjengivelsen.
Et par ting å huske på: Det tar litt tid for skjermbilder som skal fanges og gjengis. Så jo flere nettlesere du velger, jo lengre vil du vente. I motsetning til andre tjenester der du venter din tur i en kø, synes denne ventetiden å være ganske enkelt knyttet til behandlingstid. Du betaler for tjenesten, så jeg kan ikke forestille meg at det er en kø som BrowserShots.org. Vær også oppmerksom på at noen av disse skjermbildene alltid kommer fra simulatorer, og som jeg tidligere nevnte, gjør ikke simulatorer det samme som en ekte nettleser. Til slutt er skjermbildet for en bestemt side, ikke hele nettstedet.
Men det faktum at jeg ganske raskt kan få en ide om hvordan nettstedet mitt gjengis på tvers av så mange enheter, hjelper meg å bore ned i bestemte nettleserkombinasjoner som trenger spesiell oppmerksomhet.
Og det er der en veldig fin funksjon kommer inn. Tjenesten gir mulighet til å sammenligne layouter side ved side slik at du kan se gjengivelse av forskjeller mellom forskjellige nettlesere:
Som du ser på skjermbildet, går det et skritt videre ved å også angi forskjellene og skape et gjennomsiktig, gul overlegg på hvert panel for å markere de faktiske forskjellene. Jeg er sikker på at du kan forholde seg til frustrasjonen mange en utvikler har følt over å oppdage små layoutforskjeller etter det faktum. Dette bidrar til å bringe det frem i testprosessen. Og du kan bla gjennom og sammenligne flere scenarier ved å klikke på prev og neste knapper.
Den sanne verdien av en tjeneste som dette er å lette din lokale feilsøkingsinnsats. Bare slik at du kan teste offentlig tilgjengelige nettsteder, tilbyr slik begrenset verdi i forhold til din generelle teststrategi. CrossBrowserTesting.com gir deg muligheten til å teste dine lokale filer mot sine eksterne servere ved hjelp av en Java-basert proxy-applet eller kommandolinjen, igjen utnytte Java for å opprette en proxy. Dette ligner på andre tjenester og er nødvendig for å etablere sammenhengen mellom din lokale PC og de eksterne serverne, så vel som at du kan tunnelere forbi eventuelle brannmurer du måtte ha i din bedrift. Når tilkoblingen er satt, kan du teste ut begge lokale filer via direkte tilgang eller via URL fra din lokale webserver.
Teamet på CrossBrowserTesting.com har laget en video som gir deg en god forklaring og demonstrasjon av hvordan denne delen av tjenesten fungerer.
Det ville være veldig bra hvis vi ikke trengte disse tjenestene. Det vil bety at alle nettlesere gjengis helt som forventet på tvers av alle enheter som støttet dem. Dessverre har vi fortsatt litt nettleserfragmentering, og hver nettleserversjon har en tendens til å ha sine egne egenskaper. Så tjenester som CrossBrowserTesting.com gir reell verdi i strømlinjeforming av nettleser testing.
Samlet tror jeg tjenesten er veldig bra, men ikke uten noen egne kjennskaper. Det var noen intermitterende lockups som jeg opplevde i live testing som kan tilskrives Flash, og i noen økter viste at flere ikoner i operativsystemet i OS-dokkinget lot meg skrape hodet mitt på hvorfor de var der da jeg valgte et bestemt mål nettleser. Disse problemene forhindret ikke nødvendigvis meg fra å gjøre det jeg ville gjøre (testing), men det føltes som ting måtte ryddes opp litt.
Layout sammenligningsfunksjonen var imidlertid ganske varmt og noe jeg kunne se meg selv regelmessig.
Det jeg ser er at prisen kan være en stor suksessfaktor for bredden av tjenestene de tilbyr. CrossBrowserTesting.com ser ut til å ha satt seg til et meget konkurransedyktig prispunkt som inkluderer live testing, skjermbilder og lokal testing i en fast månedlig pris i motsetning til separate priser for bestemte tjenester. Dette er veldig tiltalende, spesielt for prisbevisste utviklere.
Den store faktoren vil imidlertid være hvor mye tid du trenger for testing. Fra erfaring synes to og en halv time (mengden tid som er tildelt for grunnplanen) litt begrenset, spesielt når man regner med latens av rendering. Igjen, kjørelengde kan variere, men det er absolutt noe å vurdere.
Accentsconagua