De beste Cross Browser Testing tools voor WordPress

De beste Cross Browser Testing tools voor WordPress

Gisteren schreven we al over Cross Browser Testing en waarom het zo belangrijk is. Maar de meeste WordPress ontwikkelaars hebben geen toegang tot een breed scala aan apparaten om een website te testen. Zelfs als je meerdere apparaten kunt lenen van collega’s of vrienden, is het een hoop werk om handmatig alles te testen. Gelukkig kan het ook anders. Er zijn verschillende Cross Browser Testing tools, die je in staat stellen om je WordPress website met slechts een paar kliks in verschillende browsers te testen. Wij hebben de drie beste Cross Browser Testing tools voor WordPress voor je op een rijtje gezet!

De beste Cross Browser Testing tools voor WordPress

#1. Browsershots

Browsershots is een open source tool die je in staat stelt om je WordPress website in verschillende browsers op verschillende besturingssystemen te testen. Een groot voordeel van Browsershots is dat het gratis is. Een nadeel is dat Microsoft Edge en Internet Explorer (nog) niet in de tests worden meegenomen. Er is tevens geen ondersteuning voor mobiele apparaten.

Om Browsershots te gebruiken voer je simpelweg je website URL in en selecteer je de browsers die je wil testen. De browsers zijn ingedeeld in 3 kolommen: voor MacOS, Windows en Linux.

Het kan even duren voor de tests zijn uitgevoerd en er screenshots zijn gegenereerd. Zodra alles klaar is, kun je de screenshots op dezelfde pagina bekijken.

Let op, Browsershots neemt screenshots van een website, wat betekent dat het geen live tests zijn. Je kunt met deze tool dus niet zien of je website werkt zoals de bedoeling is. Daarvoor heb je een tool nodig die live tests doet.

Meer info

#2. CrossBrowserTesting

CrossBrowserTesting is een gebruiksvriendelijke, krachtige testing tool met zowel live testing als screenshot functionaliteiten. Het is een betaalde dienst, maar ze bieden wel een gratis proefabonnement met 100 minuten om het product te testen. Na het aanmaken van je proefabonnement ga je naar het ‘Live Test’ tabblad waar je een besturingssysteem en browser kunt selecteren. Je website zal dan in die browser worden geladen, die live op je scherm verschijnt. Als je snel meerdere screen grabs tegelijk wil maken, kun je de screenshot test proberen. Een groot voordeel hiervan is ten opzichte van Browsershots is dat deze tool verschillen in de layout laten zien. Deze kun je dan met elkaar vergelijken. De gratis versie van CrossBrowserTesting is enigszins beperkt op het gebied van browser en besturingssysteem combinaties, maar de tool dekt alle populaire browsers op desktop én mobiele platforms. De prijzen voor een premium abonnement beginnen bij $29 per maand.

Meer info

#3. BrowserStack

BrowserStack is een premium cross-browser en cross-platform testing tool voor mobiele apps en websites. Ze bieden tevens een gratis proefaccount, die je 30 minuten lang toegang biedt om het platform te testen. Je kunt zowel live testen als de screenshot functie gebruiken. Selecteer het platform dat je wil testen, en daarna de browser. BrowserStack zal een virtuele emulator laden met een echt browservenster. Het enige dat je hoeft te doen om de test te starten is de URL van je website invoeren. De resultaten zijn behoorlijk nauwkeurig en ook wat snelheid betreft laat deze tool niet veel te wensen over. Abonnementen beginnen eveneens bij $29 per maand.

Meer info

Hoe analyseer je Cross Browser Test screenshots?

Nu je weet hoe je je WordPress website in verschillende browsers kunt testen, moet je natuurlijk ook weten hoe je de resultaten van je Cross Browser Tests kunt analyseren.

Als je een responsive WordPress thema gebruikt waar een solide code achter zit, dan zullen de meeste van je screenshots er vrijwel identiek uitzien. In sommige gevallen kan het zijn dat bepaalde elementen er per browser anders uitzien. Als het om kleine verschillen gaat die geen impact hebben op de gebruikerservaring, functionaliteit of esthetiek, dan kun je deze negeren.

Maar als het verschil te veel opvalt, de gebruikerservaring of de functionaliteit negatief beïnvloed, of ervoor zorgt dat je bezoekers je website niet kunnen gebruiken zoals de bedoeling is, dan vereisen ze je aandacht. In de meeste gevallen zullen de verschillen die je tegenkomt CSS-gerelateerde problemen binnen je thema zijn. Deze kun je in de code terugvinden met behulp van een Inspect Tool. Vervolgens kun je custom CSS toevoegen om de problemen te verhelpen.

 

Wil jij meer leren over Wordpress?

In de kennisbank vertellen we je alles over de belangrijkste onderwerpen

  • Snel en gemakkelijk contact met een WordPress expert
  • Ontvang als eerste nieuwtjes & leuke acties
  • Overleg met andere WordPress fans

Je WordPress vraag of probleem razendsnel opgelost met de hulp van een echte WordPress developer!

Join de grootste WordPress community van Nederland & stel je vraag via ons WordPress ticketsysteem.

Blijf op de hoogte van het laatste WordPress nieuws.

Schrijf je in voor onze wekelijkse nieuwsbrief.