Share
Ik heb nogal wat geschreven over browser-testoplossingen die proberen technieken en tools te helpen identificeren die de ontwikkeling van verschillende browsers gemakkelijker maken. Mijn laatste artikel over het onderwerp behandelde hoe BrowserStack kon worden gebruikt om een willekeurig aantal browsers allemaal vanuit één centrale tool te testen; uw eigen browser.
Ik zat toen op een Windows-pc, dus het testen van meerdere browsers was een beetje eenvoudiger en testtools waren vooral complementair aan mijn werk. Nu ik OS X gebruik, is de behoefte aan tools om mijn teststrategieën af te ronden nog belangrijker, vooral vanwege het ontbreken van Internet Explorer op het besturingssysteem.
Ik ben een beetje een voorstander van wat ik op mijn computers installeer en ik geef de voorkeur aan online tools wanneer beschikbaar. Ik ben ook altijd op zoek naar nieuwe tools die het testen tussen browsers eenvoudiger maken en besloten om CrossBrowserTesting.com een run te geven. Ik zal enkele van de belangrijkste functies van de service bespreken en hoe u deze kunt gebruiken om uw testmogelijkheden te verbeteren.
Laten we allereerst vermelden dat, zoals elke betrouwbare service in deze ruimte, CrossBrowserTesting.com een maandelijks bedrag in rekening brengt. Ik ben hier helemaal niet verrast van, omdat het komt erop neer dat ze een infrastructuur hebben om te ondersteunen en dat geld kost. Hun tariefstructuur is gebaseerd op het aantal minuten dat u maandelijks beschikbaar zou willen hebben, maar met een unieke wending, zodat u een bepaald aantal minuten, van maand tot maand, kunt doorlopen. Dus als je niet al je minuten gebruikt, kun je er een paar maanden overheen rollen.
Op naar de dienst zelf. Er zijn een paar dingen die belangrijk zijn voor mij in dit soort services. Dit zijn:
Dit alles omdat ze u het breedste testoppervlak bieden op meerdere apparaten. Maar om eerlijk te zijn, zonder hulp van foutopsporingstools (zoals Chrome DevTools, IE F12 Tools, enz.), Zou een dergelijke dienst aantrekkelijk zijn om te gebruiken en slechts marginaal beter zijn dan een screenshot-service. En lokaal kunnen testen is een voor de hand liggende must-have waarmee u interactief kunt testen voordat u implementeert in staging of productie. Dus dit criterium is belangrijk om te overwegen.
Het eerste dat me opviel in de service, is de verbazingwekkende omvang van ondersteuning voor browsers en apparaten. Elk groot OS is gedekt (inclusief Ubuntu) en elke OS-versie heeft een vrij uitgebreide lijst van ondersteunde browserversies om te testen.
Daarnaast is er uitgebreide ondersteuning voor mobiele apparaten en browsers die eerdere en modernere versies van Android, iOS, Blackberry Bold en Windows Phone 8 omvatten. Het interessante (en erg nuttige) ding is dat je voor specifieke Android-versies kunt test tegen concurrerende browsers zoals Firefox Mobile, Maxthon en Opera.
Als u BrowserStack of een vergelijkbare service hebt gebruikt, voelt u zich meteen thuis op CrossBrowserTesting.com. De gebruikerservaring komt heel goed overeen met wat ik eerder heb gezien, waardoor het vrij triviaal werd om erin te springen. U krijgt in eerste instantie een dashboard te zien dat u toegang geeft tot de belangrijkste functies. Waaronder:
De live browsertest is waar ik het meest in geïnteresseerd ben. Voor mij moet ik ervoor zorgen dat de weergave consistent is, dus het eerste wat ik deed, was een baselinetest doen om te zien of een site hetzelfde zal weergeven in mijn virtuele browser. zoals het doet in mijn lokale browser. Om mijn lokale instellingen na te bootsen, heb ik ervoor gekozen om de sessie te starten in Mavericks, die draait onder de meest recente stabiele versie van Chrome:
Een ding om op te merken is dat u in het OS / browserselectieformulier alleen de browseropties krijgt die beschikbaar zijn voor die specifieke OS-versie als volgt:
Ik ging met de GNC-website omdat, nou ja, ik ben een beetje een fitnessliefhebber en ze hebben ook veel interactieve punten, zoals op JavaScript gebaseerde fly-over menu's en panelen met fietsparameters. Ik dacht dat het een goede test was om te zien of de service alle interactie aankon.
Als u naar de twee schermafbeeldingen kijkt, ziet u dat de weergave voor Chrome op Mavericks op beide systemen exact hetzelfde is. Dit is een goede zaak, hoewel het een beetje trippy is om Chrome te zien op Mavericks in Chrome on Mavericks. Inception anyone?
Lokaal apparaat
Externe virtuele browser
Zodra uw sessie is gestart, kunt u uw doel-OS en -browserversie op elk gewenst moment wijzigen door op de Configuratie wijzigen knop die het paneel met vervolgkeuzemenu's weergeeft. Merk op dat het veranderen van het besturingssysteem of de browser je sessie zal herladen, maar het is zeker beter om meerdere virtuele machines te activeren, vooral voor vluchtige recensies van pagina's.
Het verkrijgen van de basislijn UI was geweldig, maar een belangrijkere test is om te zien hoe de site reageert op interactie. Laat me dit voorafgaan door te zeggen dat ik nog nooit zo'n service heb gevonden die onmiddellijk antwoord biedt. Er zal altijd wees een lag omdat deze browsers gevirtualiseerd zijn. Het belangrijkste dat u wilt, is ervoor zorgen dat normale interactie, zoals het zweven boven een menu of het besturen van UI-besturingselementen (zoals een schuifpaneel) presteert zoals verwacht (zij het een beetje langzamer). De GNC-site heeft bijvoorbeeld een vervolgkeuzemenu-systeem dat uitklapt als u de muisaanwijzer boven een menuoptie plaatst. Merk op dat als u eroverheen zweeft, het menu wordt uitgebreid en net zo belangrijk geeft mij de mogelijkheid om er naar binnen te gaan.
Deze interactiviteit maakt deze services zo waardevol. De dagen dat je moet vertrouwen op screenshot-services en een hoop VM's om te zien hoe je site in een hoop browsers wordt weergegeven, zijn verdwenen.
Goede vraag. Browsergebaseerde ontwikkelaarstools zijn echt goed gevorderd en we zijn er dagelijks van afhankelijk. Gelukkig heeft CrossBrowserTesting.com de standaardprogramma's voor foutopsporing opgenomen in elke browser die ons toegang geeft tot Chrome DevTools, de IE F12 Developer Tools en Firefox's Web Developer Tools, evenals Firebug voor oudere versies van de browser. Merk hier op dat ik de IE F12-hulpmiddelen geactiveerd heb in IE11 op Windows 7.
De hulpprogramma's zijn volledig functioneel, waardoor ik de opmaak en de DOM-structuur van de pagina kan inspecteren, evenals stijlen kan instellen en tekst kan wijzigen, net zoals u dat zou doen op uw lokale pc. U kunt hier zien hoe ik het inline JavaScript op de site kan bijwerken:
Dit vertaalt zich in de mogelijkheid om de debuggers te gebruiken voor geavanceerde foutopsporingsactiviteiten, zoals scriptdebugging in elke browser en browserversie.
Een ding waar ik me zorgen over maakte, was of de tools de paginalaadtijden nauwkeurig zouden weergeven via de panelen voor monitoring van het netwerkverkeer en in mijn tests leken ze consistent te zijn met wat ik lokaal zag. Dit betekent dat ik er tot op zekere hoogte zeker van kan zijn dat de laadtijden min of meer gelijk zullen zijn (uiteraard rekening houdend met netwerkproblemen).
Het enige dat volgens mij heel moeilijk te meten is, is de prestaties van de pagina's via de nieuwe reeks prestatieprofilers die is opgenomen in Chrome en Internet Explorer. Veel van die gegevens worden direct beïnvloed door aspecten van uw computer, vooral wanneer rendering GPU-enhanced is. Het testen van dit op gevirtualiseerde browsers of virtuele machines is gewoon niet echt, dus ik zou het niet aanbevelen. Als u een interactieve ontwikkelaar (games) bent, kunt u het beste op uw eigen apparaat testen om een beter inzicht in de prestaties te krijgen.
Naarmate ik me steeds meer richt op mobiel, krijgt het testen van meerdere mobiele besturingssystemen en verschillende vormfactoren een hoge prioriteit. Helaas, in plaats van een heel grote erfenis te krijgen, de lotto te winnen of een liefhebbende sponsor te vinden, is het bouwen van een volledig uitgerust laboratorium voor mobiele apparaten gewoon niet in de kaarten. En in het tempo waarin het gaat, worden de zaken alleen maar moeilijker, omdat fabrikanten de grenzen van mobiele browsers en apparaatgrootte blijven verleggen.
CrossBrowserTesting.com biedt de mogelijkheid om te testen in de grote mobiele besturingssystemen die de meeste populaire mobiele apparaten simuleren zoals iPads, iPhones, Nexus 7s en dergelijke. Dit is zeker geen allesomvattende lijst van mobiele apparaten en ik neem aan dat het bedoeld is om de modernste besturingssystemen en apparaten aan te pakken die beschikbaar zijn.
Het testproces is precies hetzelfde als wat we hebben gedaan voor desktopbrowsers, behalve dat de rendering binnen het formaat van het specifieke mobiele apparaat valt dat je hebt geselecteerd:
Nogmaals, de service maakt gebruik van simulators om u uit te testen hoe uw site zal worden weergegeven op een mobiel apparaat. Houd er echter rekening mee dat simulators weliswaar goed zijn, maar dat het altijd het beste is om zo mogelijk tegen een echt apparaat te testen.
Er komen altijd nieuwe apparaten uit en ik zou niet verwachten dat elke vormfactor hier staat. Ik denk dat een leuke toevoeging zou zijn om een gebruiker van de service in staat te stellen de viewport-grootte te definiëren in plaats van alleen standaard schermresoluties te presenteren. Dit zou ook meer flexibiliteit bieden bij het testen van sites die responsief zijn.
Voordat interactieve services zoals CrossBrowserTesting.com beschikbaar kwamen, werd de screenshot-service bekend als een van de snelste manieren om te zien hoe uw site werd weergegeven in meerdere browsers. Hoewel ze nu een beetje passe zijn, zijn ze nog steeds nuttig en interessant genoeg, ik zie dat de meeste van deze browsetestdiensten de schermafbeelding vastleggen als onderdeel van hun aanbod. Het lijkt er dus op dat deze praktijk een beetje een renaissance heeft, hoogstwaarschijnlijk gedreven door het toenemende aantal browserversies, apparaten en vormfactoren waarmee we rekening moeten houden.
Het gebruik van de service is eenvoudig en net zo eenvoudig als het invoeren van een URL, het selecteren van de browsers waarvan u schermafbeeldingen wilt en klik op de Neem screenshots knop:
Het leuke hiervan is dat je zo veel combinaties van apparaten / besturingssystemen / browsers kunt kiezen als je wilt en de resolutie op basis van een bepaald doel kunt definiëren. Dit genereert een reeks snapshots die u kunt bekijken:
Als u op afzonderlijke schermafbeeldingen klikt, wordt een grotere afbeelding weergegeven, zodat u een gedetailleerd beeld van de weergave krijgt.
Een paar dingen om in gedachten te houden: het duurt een tijdje voordat de schermafbeeldingen zijn vastgelegd en weergegeven. Dus hoe meer browsers u selecteert, hoe langer u wacht. In tegenstelling tot andere services waarbij u wacht op uw beurt in een wachtrij, lijkt dit wachten eenvoudigweg te worden geassocieerd met de verwerkingstijd. U betaalt voor de service, dus ik kan me niet voorstellen dat er een wachtrij is zoals BrowserShots.org. Houd er ook rekening mee dat sommige van deze screenshots altijd zijn afgeleid van simulators en zoals ik eerder heb vermeld, geven simulators niet altijd hetzelfde weer als een echte browser. Ten slotte is de schermafbeelding bedoeld voor een specifieke pagina, niet voor de hele site.
Desalniettemin helpt het feit dat ik redelijk snel een idee krijg van hoe mijn site op zoveel apparaten wordt weergegeven, me in specifieke browsercombinaties die speciale aandacht vereisen..
En dat is waar een heel handige functie in komt. De service biedt de mogelijkheid om lay-outs naast elkaar te vergelijken, zodat u de weergaveverschillen tussen verschillende browsers kunt zien:
Zoals je kunt zien in de schermafbeelding, gaat het een stap verder door ook de verschillen op te sommen en een transparante gele overlay op elk paneel te maken om de werkelijke verschillen te benadrukken. Ik weet zeker dat je je kunt vinden in de frustratie die een ontwikkelaar gevoeld heeft bij het ontdekken van kleine layoutverschillen. Dit helpt om dat naar voren te brengen tijdens het testproces. En u kunt door meerdere scenario's scrollen en deze vergelijken door op te klikken Vorige en volgende toetsen.
De echte waarde van een dergelijke service is om uw lokale debugging-inspanningen te vergemakkelijken. Het simpelweg toestaan van het testen van publiekelijk beschikbare sites biedt dergelijke beperkte waarde in termen van uw algemene teststrategie. CrossBrowserTesting.com biedt de mogelijkheid om uw lokale bestanden te testen op hun externe servers met behulp van een op Java gebaseerde proxy-applet of de opdrachtregel, waarbij opnieuw gebruik wordt gemaakt van Java om een proxy te maken. Dit is vergelijkbaar met andere services en is nodig om de verbinding tot stand te brengen tussen uw lokale pc en de externe servers en om u in staat te stellen langs elke firewall die u mogelijk in uw bedrijf heeft te tunnelen. Zodra de verbinding is ingesteld, kunt u beide lokale bestanden testen via directe toegang of via URL van uw lokale webserver.
Het team van CrossBrowserTesting.com heeft een video gemaakt met een goede uitleg en demonstratie van hoe dit onderdeel van de service werkt.
Het zou echt geweldig zijn als we deze diensten niet nodig hadden. Dat zou betekenen dat elke browser volledig wordt weergegeven zoals verwacht op elk apparaat dat deze ondersteunt. Helaas hebben we nog steeds een beetje fragmentatie van de browser en elke browserversie heeft de neiging om zijn eigen eigenaardigheden te hebben. Diensten als CrossBrowserTesting.com bieden dus echte waarde bij het stroomlijnen van cross-browser testen.
Over het algemeen denk ik dat de service zeer goed is, zij het niet zonder eigenaardigheden. Er waren een aantal intermitterende lock-ups die ik ervoer tijdens de live-tests die aan Flash kunnen worden toegeschreven en in sommige sessies liet een aantal browserpictogrammen in het OS-dock me krabben over waarom ze er waren toen ik een specifiek doelwit koos browser. Deze problemen hebben me er niet per se van weerhouden om te doen wat ik wilde doen (testen), maar het voelde alsof dingen een beetje opgeknapt moesten worden.
De lay-outvergelijkingsfunctie was echter behoorlijk warm en ik zag mezelf regelmatig gebruiken.
Wat ik zie is dat de prijs een grote succesfactor kan zijn voor de breedte van de services die ze aanbieden. CrossBrowserTesting.com lijkt zichzelf te hebben gevestigd tegen een zeer concurrerend prijsniveau met live testen, schermafbeeldingen en lokale tests in één vaste maandelijkse kostprijs, in tegenstelling tot afzonderlijke prijzen voor specifieke services. Dit is erg aantrekkelijk, vooral voor prijsbewuste ontwikkelaars.
De grote factor is echter hoeveel tijd je nodig hebt om te testen. Uit ervaring blijkt dat twee en een half uur (de hoeveelheid tijd die is toegewezen voor het basisplan) een beetje beperkt is, vooral wanneer rekening wordt gehouden met de latency van rendering. Nogmaals, uw kilometerstand kan variëren, maar het is zeker iets om te overwegen.
Accentsconagua