Hur man testar en WordPress-webbplats i olika webbläsare (Cross Browser Testing Made Easy)

Vill du testa din WordPress-webbplats i olika webbläsare? Cross Browser Testing är oerhört viktigt när du byter WordPress-teman eller implementerar en ny design eftersom det hjälper dig att se till att din webbplats ser bra ut på alla olika webbläsare, skärmstorlekar, operativsystem och mobila enheter. I den här artikeln kommer vi att visa dig hur du enkelt kan testa ett WordPress-webbplats i olika webbläsare.

Vad är Cross Browser Testing?

Cross Browser Testing är en process för att testa webbplatser över flera webbläsare, operativsystem, skärmstorlekar och mobila enheter för att säkerställa att din webbplats fungerar korrekt på alla olika webbläsare.

Varför testa en WordPress-webbplats i olika webbläsare?

Google Chrome är den mest populära webbläsaren i världen med 65% marknadsandel på stationära datorer och 57% på mobila enheter. Men andra webbläsare som Firefox, Microsoft Edge, Safari och Opera används fortfarande ofta av hundratals miljoner användare över hela världen.

På grund av ett brett spektrum av webbläsare, operativsystem och enheter har cross-browser-test blivit en viktig del av att bygga en webbplats. Testning med flera webbläsare hjälper dig att tillhandahålla en konsekvent webbupplevelse till alla dina användare i olika webbläsare, enheter och plattformar.

Medan alla populära webbläsare beter sig nästan identiska När de gör webbsidor använder de alla olika kod, vilket innebär att de kan hantera webbsidor annorlunda från tid till annan.

Som webbplatsägare betyder det att din webbplats kan se annorlunda ut över webbläsare. Eftersom dessa inte är vanliga WordPress-fel som är synliga för alla kan du gå månader utan att någonsin veta om problemet tills någon rapporterar det.

Det är därför som det anses vara bästa praxis att testa din WordPress-webbplats över olika webbläsare på flera plattformar och skärmstorlekar, så att du kan se till att din webbplats erbjuder samma användarupplevelse till alla dina användare.

Nu har de flesta inte tillgång till ett brett utbud av enheter för att testa en webbplats. Även om du lyckas låna flera enheter från vänner, blir det mycket jobb att manuellt byta fram och tillbaka. Lyckligtvis finns det verktyg för att korsa webbläsare som kan hjälpa till att automatisera processen med bara ett klick.

Men innan vi delar listan över bästa testverktyg för webbläsare för WordPress, är det viktigt att veta vilka webbläsare som är populära bland dina användare, så du kan rikta ditt fokus i enlighet med detta.

Så här hittar du vilka webbläsare din webbplats besökare använder?

Med tanke på antalet tillgängliga operativsystem, webbläsare och kombinationer av webbläsarversioner kan kryssrutetestning vara en tråkig uppgift för småföretagare.

Men om du känner till de populära webbläsarna, operativsystemen och enheterna som din webbplats besökare använder, kan du göra processen betydligt enklare på dig själv. Beroende på din specifika statistik kan du kanske komma undan med testa bara några populära kombinationer.

Du kan ta reda på vilka webbläsare, operativsystem och enheter som är populära bland dina användare genom att använda Google Analytics.

Logga bara in på ditt Google Analytics-konto och gå till Målgrupp »Teknik Rapportera. Härifrån kan du ta reda på information om webbläsare, OS, skärmstorlekar, som används av dina besökare på webbplatsen.

När du har den här listan kan du fokusera på de bästa kombinationerna och undvika resten.

Om du bara startar en blogg eller inte har Google Analytics rekommenderar vi att du installerar MonsterInsights omedelbart för att konfigurera Google Analytics korrekt. När du har installerat kan du antingen välja att vänta några veckor för att samla in data eller fortsätta med att testa din webbplats över alla webbläsare.

Bästa Cross Browser Testverktyg för WordPress

Cross-testverktyg gör det enkelt för dig att testa din WordPress-webbplats på flera webbläsare, operativsystem och enheter. Med några få klick kan du automatiskt testa din webbplats över olika webbläsare.

Nedan är listan över verktyg för testning av översta webbläsare för WordPress-webbplatser:

1. Browsershots

Browsershots är ett open source-verktyg som låter dig testa din webbplats med flera webbläsare på olika operativsystem. Det bästa med det här verktyget är att det är gratis. Nedsidan är att den inte innehåller Microsoft Edge eller Internet Explorer. Det inkluderar inte mobiltelefonsupport.

För att använda Browsershots, skriv bara in din webbadress och välj sedan de webbläsare du vill testa. Webbläsare är listade i tre kolumner för Linux, Windows och Mac OS.

Efter att ha skickat din förfrågan måste du vänta ett tag då det kör testen och genererar en skärmdump. När du är klar kan du se skärmdumparna på samma sida. Du kan nu gå vidare och klicka på en skärmdump för att expandera den.

Obs! BrowserShots tar skärmdumpar av en webbplats vilket innebär att det inte är live-testning. Du kanske inte kan se om din webbplats fungerar som avsedd under testerna. För det behöver du verktyg som kör live-tester i de faktiska webbläsarna.

2. CrossBrowserTesting

CrossBrowserTesting är ett lättanvänt och kraftfullt testverktyg med både webbläsare och skärmdumpar. Detta är verktyget som vi använder här på Awesome Motive för att testa våra webbplatser som WPBeginner och våra premium WordPress-plugins.

Det är en betald tjänst, men de erbjuder ett gratis provkonto med 100 minuter för att testa produkten.

När du har skapat ditt provkonto, gå till fliken "Live Test" där du kan välja ett operativsystem och en webbläsare. Det kommer att ladda din webbadress i webbläsaren som visas live på din skärm.

Om du snabbt vill få flera skärmbilder på en gång klickar du på fliken "Skärmdumpar" och kör ett nytt skärmdumptest. CrossBrowserTesting Tool hämtar automatiskt skärmdumpar på Mac, Windows, iPad och Nexus 6P-mobiltelefoner som kör Chrome, Firefox, Safari, Microsoft Edge webbläsare.

Det nämner också layoutskillnader under varje skärmdump som du kan klicka för att jämföra layouten med baslayouten. Du kan också jämföra olika layouter sida vid sida eller ladda ner alla skärmdumpar till din dator.

Det fria kontot är lite begränsat när det gäller webbläsare och operativsystemkombinationer som du kan köra. Det täcker dock mest populära webbläsare på mobila och stationära plattformar.

Prissättning: Börjar från $ 29 per månad som faktureras årligen.

3. BrowserStack

BrowserStack är ett betalt verktyg för cross-browser och plattform för mobila appar och webbplatser. De erbjuder också ett begränsat gratis provkonto som ger dig 30 minuters tillgång till testet på plattformen.

Den levereras med både live test och skärmdumpar funktioner. Du kan välja vilken plattform du vill testa och välj sedan en webbläsare. BrowserStack laddar den virtuella emulatorn med ett faktiskt webbläsarfönster. Du kan helt enkelt ange webbadressen du vill testa för att starta testet.

Resultaten är ganska korrekta och hastigheten är ganska tillfredsställande. Du måste dock fortfarande utföra testen manuellt genom att öppna varje webbläsare.

Prissättning: Börjar från $ 29 / månad faktureras årligen.

Hur analyserar du Cross Browser Test Skärmdumpar?

Nu när du har lärt dig det enklaste sättet att testa din WordPress-webbplats i olika webbläsare, är nästa del att analysera dina resultat och se om det finns något trasigt som behöver fixas.

Om du kör ett responsivt WordPress-tema med bra kvalitetskod bakom det, ser de flesta av dina skärmdumpar ut ungefär lika.

I vissa fall kan webbsidor se lite annorlunda ut än en webbläsare till en annan. Om denna skillnad är mindre och inte påverkar användarupplevelse, estetik eller funktionalitet kan du ignorera det.

Å andra sidan, om en skillnad är för märkbar, påverkar användarupplevelsen, ser obehaglig ut, eller förhindrar användarna från att använda din webbplats som avsedd, då behöver den din uppmärksamhet.

I de flesta webbläsartesterna kommer du att upptäcka CSS-problem med ditt tema. Detta kan lösas med hjälp av Inspect Tool för att ta reda på vilka CSS-regler som behöver uppdateras. Därefter kan du lägga till anpassad CSS för att åtgärda dessa problem.

Om du inte kan lösa problemen kan du alltid anställa en WordPress-utvecklare som hjälper dig att fixa dem.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt kan testa ett WordPress-webbläsare i olika webbläsare. Du kanske också vill se vår ultimata steg för steg guide för att förbättra WordPress-hastighet och prestanda.

Om du gillade den här artikeln kan du prenumerera på vår YouTube-kanal för WordPress-videoinstruktioner. Du kan också hitta oss på Twitter och Facebook.