låt oss fånga buggar! En nybörjarguide till webbplatstestning

James Tsividis
James Tsividis

följ

Maj 2, 2019 * 5 min läs

webbplatstestning är mycket enklare än det verkar. Du behöver inte vara testare för att göra det. Och du får en inblick i din produkt som hjälper dig att förstå den på ett helt nytt sätt.

jag är en testare på SDP-projektet (Single Digital Presence). Mitt jobb är att testa SDP-plattformade webbplatser på många webbläsare, skärmstorlekar och enheter för att hitta buggar och säkerställa optimal användarupplevelse.

testning hjälper dig att bättre förstå dina användare

när jag testar en webbplats letar jag inte bara efter fel eller buggar, men jag försöker titta på det genom så många olika linser som möjligt. Det innebär att använda en webbplats på olika enheter, i olika webbläsare och inom olika skärmstorlekar. Vissa buggar visas bara i 1 webbläsare så testning i många olika miljöer är nödvändigt. Det är också ett utmärkt tillfälle att se hur olika användare kan interagera med webbplatsen också.

vad vi testar på

för vic.gov.au webbplats, vi testar på flera miljöer inklusive Windows, Mac, Android och iOS. Vi testar på stationära datorer, surfplattor och telefoner, samt flera webbläsare för vissa enheter.

vi använder Victorian Government Digital Standards Test en produkt-eller tjänsteguide som innehåller vanliga webbläsare och mallar för användaracceptprovning.

vi vet aldrig hur människor kommer åt vår webbplats, så vi vill se till att deras erfarenhet är konsekvent och att den uppfyller våra kvalitetsstandarder. Naturligtvis finns det till synes oändliga antal enheter vi kan testa våra webbplatser på, men att använda de enheter vi redan har och kan låna från andra räcker ofta för att ge oss ovärderlig inblick i hur allmänheten kan uppfatta det.

efter vic.gov.au webbplatsen släpptes, jag råkade vara på Doncaster köpcentrum. Så jag gick till Apple store för att testa webbplatsen på en av deras iPhones, eftersom jag inte hade en själv. Jag fyllde i ett av sidans feedbackformulär och undertecknade det som ’James från en Apple store’, och vårt innehållsteam uppskattade ansträngningen jag gick igenom för att testa webbplatsen.

om du vill ha exakta uppgifter om vilka enheter, webbläsare och skärmstorlekar människor använder för att komma åt din webbplats kan du alltid kontrollera Google Analytics om den har konfigurerats med din webbplats.

Dragtest

det första testet Jag gillar att göra när jag testar en webbplats är dragtestet. Detta gör att jag snabbt kan förstå hur webbplatsen kan se ut på olika skärmstorlekar och på olika enheter, samtidigt som jag bor i samma webbläsare.

dragtestet innebär att du drar webbläsarfönstret från den största storleken till den minsta storleken för att se hur webbplatsen ser ut vid olika brytpunkter, vilket är den punkt där webbplatsen morphs baserat på hur stor visningsområdet är.

brytpunkter är nödvändiga eftersom vi vill att saker ska bli större eller mindre för att rymma för de olika skärmstorlekarna vi kan se webbplatsen på, och att dra fönstret för att vara mindre eller större är ett enkelt sätt att observera alla dessa förändringar. Så låt oss se ett exempel med vic.gov.au hemsida.

Detta är min vic.gov.au hemsidan öppnades för sin maximala storlek på min 27 ” iMac-skärm. Låt oss observera hemsidan och se vad som händer när vi gör fönstret mindre.

Detta är vic.gov.au hemsida men det tar upp knappt hälften av skärmen Nu. I bilden har jag noterat några av de stora skillnaderna mellan de två bilderna hittills.

den här bilden är den minsta versionen av webbplatsen och är synlig på mobiltelefoner. Det kommer att vara det mest annorlunda än de andra.

dessa är inte de enda tre brytpunkterna för skärmstorlek på vic.gov.au och det kommer att vara annorlunda för varje webbplats, men det är något att komma igång.

jag tittar ofta på rubriken för att se vilken Brytpunkt jag är på eftersom nästan alla har något ändrat i rubriken varje gång. Och jag har lärt mig hur varje rubrik ser ut genom att titta på designen för webbplatsen. Det hjälper mycket att få tillgång till mönster så att du kan veta om en funktion är tänkt att se ut som det gör vid en viss skärmstorlek Brytpunkt. Med tanke på antalet skillnader mellan brytpunkter finns det ofta några fel i implementeringen. Så detta är ett mycket värdefullt test att göra när webbplatsen utvecklas.

glöm inte att göra dragtestet för sidhuvudet, innehållet och sidfoten på webbplatsen, eftersom de alla har unikt innehåll som kan ändras mellan brytpunkter. Notera också var sidofältets innehåll går när sidan blir tillräckligt liten. Det går vanligtvis någonstans längst ner.

test av innehållstyp

varje webbplats har olika sidinnehållstyper. Var noga med att bli bekant med varje enskild innehållstyp eftersom du testar för olika attribut på varje sida. Vissa sidor varierar mer än andra. På vic.gov.au, våra Innehållstyper är:

  • Varning
  • Händelse
  • bevilja
  • målsida
  • nyheter
  • sida
  • profil

om du vill veta mer om innehållstyper, besök: https://www.vic.gov.au/what-single-digital-presence-offers#page-templates-available-on-sdp

enhets — och webbläsartestning

och slutligen, när du har testat webbplatsen noggrant i din favoritwebbläsare, är det alltid bra att se hur det ser ut på andra enheter och webbläsare också — särskilt de populära-eftersom beröringsupplevelsen inte är något du alltid kan förutse, och du kan alltid hitta buggar som är specifika för en viss webbläsare på en viss enhet också. Som verkar komma från ingenstans och är helt oväntade.

praktiska testlänkar

  • mest populära webbläsare (Australien) — http://gs.statcounter.com/browser-market-share/all/australia
  • mest populära webbläsare (Värld) — http://gs.statcounter.com/browser-market-share
  • iPhone simulator (endast Mac) — https://developer.apple.com/xcode/
  • om du vill göra enhetsspecifik testning istället för att bara testa skärmupplösning, har Google Chrome Developer Tools en Enhetsverktygsfält som kan simulera hur en riktig enhet beter sig, men det är inte perfekt.

det finns många webbplatstesttekniker som inte diskuteras i den här artikeln, men det här är ett bra ställe att börja. Nästa sak jag skulle testa är att data som anges i formulär visas korrekt i backend och att ogiltiga data inte kan anges.

ha kul testning och jag ser fram emot att höra vad folk lär sig av den här artikeln. Låt oss alla göra web bättre tillsammans!

Lämna ett svar

Din e-postadress kommer inte publiceras.