Din kompletta guide till webbplatsens kvalitetssäkring (kvalitetssäkring) med gratis checklista för kvalitetssäkring

Din webbplats måste fungera som det var tänkt när du först byggde den. Annars kommer dina användare att förlora förtroendet för ditt varumärke, vilket resulterar i förlust av intäkter och potentiella kunder. 67 % av konsumenterna citerar dåliga erfarenheter som orsak till churn. 4 % av kunderna klaga direkt till ett företag om en dålig upplevelse, och 91 % av de missnöjda kunderna kommer helt enkelt att lämna utan att framföra sina klagomål.

De Systems Sciences Institute på IBM har rapporterat att “kostnaden för att åtgärda ett fel som upptäcktes efter produktsläppet var fyra till fem gånger så mycket som ett som upptäcktes under designen, och upp till 100 gånger mer än ett som identifierades i underhållsfasen.”

De World Quality Report har rekommenderat att företagen håller QA-budgeten till 25 % av utvecklingskostnaderna. Deras universella rekommendation kommer från en förståelse för vad som är “rimligt” för att bibehålla kvalitet, säkerhet och förbättra kundupplevelsen samtidigt som potentialen för ny utveckling inte försämras.

Oavsett om din webbplats är en affiliate-webbplats, ett lokalt företag, SaaS eller en vanlig HTML-webbplats med vanilj, när folk ser fel klickar de glatt på bakåtknappen och du kommer aldrig att se dem igen.

Med den här artikeln kommer vi att lära oss om begreppet kvalitetssäkring av webbplatser, dess betydelse, hur det skiljer sig från testning, hur du säkerställer att din webbplats håller hög kvalitet, några bästa praxis att följa och en QA-checklista som du kan använda i ordning för att göra ditt arbete enklare.

Vad är webbplats QA?

Webbplats QA (Quality Assurance) kan definieras som processen att testa en webbplats för att upptäcka misstag, fel eller förbiseenden som kanske inte har noterats under webbutveckling eller design innan den gick live. Det kallas också för QA-testning. Observera att QA börjar långt tidigare, även innan utvecklingen börjar. Det startar så fort kraven för webbplatsen är lagda och kulminerar i testning. Dess övergripande problem är kvaliteten på den övergripande webbplatsen, som går långt utöver att bara fixa buggar.

Hur skiljer sig QA från andra testtyper?

Som vi nämnde är QA en process, inte en engångsuppgift. Så här skiljer det sig från andra testtyper:

QA vs användartestning

Det är viktigt att skilja på kvalitetssäkringstestning och användartestning. Båda kanske siktar på samma mål (bra användarupplevelse – UX och korrekt webbplatsfunktionalitet), men det finns flera skillnader mellan dem.

Användartestning är helt enkelt att observera och analysera hur användare faktiskt använder och interagerar med webbplatsen och deras åsikter om upplevelsen de får när de använder den. Det handlar också om att hitta vad som är oklart och vad som kan vara förvirrande för användaren. I slutändan finns det en jämförelse mellan användarupplevelsen och den faktiska webbplatsanvändningen och utvecklarens, liksom webbmasterns avsedda användning och tänkta användarupplevelse.

QA skiljer sig från användartestning genom att det görs innan webbplatsen publiceras, och att det görs av en QA-testare (inte användare). Testaren simulerar olika användaråtgärder på sajten för att se om de fungerar som avsett.

De två (QA och användartestning) är dock komplementära, och data eller feedback som samlas in från båda processerna är avgörande för att säkerställa att webbplatsen fungerar som avsett och att UX-standarder har uppnåtts.

QA vs funktionstestning

Funktionstestning kan definieras som en QA-process baserad på de specificerade designkraven för den specifika komponent som testas. Det innebär att mata in eller mata in input och sedan analysera resultatet.

QA, å andra sidan, är inte begränsad till en viss komponent eller specificerade designkrav. QA ser till att hela sajten håller bra kvalitet, från hur den fungerar till hur tilltalande den är för användaren. Den innehåller också testning innan webbplatsen går live.

QA vs kravtestning

Kravtestning innebär att man använder kundens krav och förväntningar för att utvärdera en webbplatss layout, prototyp eller alfa version. QA kommer in på nedbrytning av användarspecifikationer och krav som anges i designdokument som godkänts av beställaren, samt andra krav som uttrycks i övrigt. Specifikationerna förenklas sedan och integreras i olika utvecklingsfaser och används i slutändan i kravtestning.

QA vs designtestning

Designtestning undersöker hur sajten ser ut och känns. QA kommer in för att kontrollera om utseendet och känslan stämmer överens med den dokumenterade layouten och designen.

Andra testtyper:

Regressionstestning – utvärdera om ändringar på din webbplats påverkar andra delar av webbplatsen. Den kontrollerar om några ändringar i koden, till exempel, bryter platsen.

Integrationstestning – detta testar om tredjepartstjänster eller källor fungerar som förväntat när de integreras med din webbplats. Dessa tjänster kan inkludera API:er.

Prestandatester – Detta testar om sajten kan hantera trafikspikar och överspänningar. Detta test kan också inkludera hur snabbt webbplatsen laddas.

Det finns många fler tester som du kan göra på ditt QA-test. Lära sig mer om webbplatstesttyper här.

Varför är det viktigt?

Webbplats QA är inriktad på att säkerställa att webbplatsens användargränssnitt (UI) fungerar som avsett (det finns inga buggar). Det ser också till att en bra användarupplevelse uppnås. Här är de andra fördelarna med QA-testning:

• Visa upp ditt varumärke som välrenommerat. När allt på din webbplats fungerar som det ska, associerar kunderna ditt varumärke med excellens. De kommer därför att vilja köpa dina produkter, betala för dina tjänster och förknippas med ditt varumärke.
• Det kan avslöja problem som kan få svåra konsekvenser, till exempel en kritisk säkerhetsrisk.
• Möjliggör leverans av en pålitlig webbplats. Du är säker på hur din webbplats kommer att fungera, så det finns minimal oro för inkonsekvenser.
• Det sparar i slutändan företaget pengar och tid som skulle ha gått förlorad i att fixa buggar långt efter att webbplatsen har publicerats. Det är också billigare att fixa en bugg innan sidan publiceras än efter. Det kommer inga användare att påverkas, du behöver inte för din kundsupport förklara för användarna varför sajten inte fungerar som förväntat, och du behöver inte “stänga av sajten” för korrigeringar, förlust av trafik och affärer.

Hur man utför webbplatsens QA-testning

QA är ingen liten bedrift. Tid och pengar måste investeras för att säkerställa att en webbplats av hög kvalitet levereras till användarna. Beroende på webbplatsens komplexitet och projektspecifikationer kan QA behöva upp till 50 % av budgettilldelningen.

För att effektivt kunna utföra QA på webbplatsen måste du definiera en process som kommer att följas under hela testfasen. Denna process kallas vanligtvis för QA-processflödet. Processflödet bryter ner den tid som behövs per testfas, beroende på tillgänglig budget och prioritet.

Faktorer att tänka på när man utformar ett QA-processflöde

Det finns flera faktorer som du måste tänka på när du utformar ett QA-processflöde. Dessa inkluderar:

Publik

Innan du ens börjar tänka på sajten måste du tänka på vem du bygger den för. Detta hjälper dig att definiera de rätta plattformarna som din publik använder mest. Och detta kommer att vara praktiskt för att begränsa testmiljöerna, till exempel webbläsare som ska användas och enheter att testa.

Ansökningstyp

Du måste ta hänsyn till vilken typ av applikation du testar, eftersom testmetoderna skiljer sig åt beroende på typ av webbplats. Är din webbplats statisk eller dynamisk? Kommer du att testa en mobilsajt?

Testspecificitet

Testet måste vara väl definierat och beskrivet, och täcka ett scenario med utfallet tydligt definierat. Definiera antaganden och förutsättningar. Använd så mycket “riktig data” (en som är så nära användarinmatning som möjligt) som du kan.

Risknivå

Bygger du en webbplats med hög eller låg risk? Risknivån här bestäms av webbplatsens funktionalitet och bransch. Om din webbplats till exempel samlar in användarinformation måste du testa att informationen som angetts är korrekt. Dessutom måste du testa informationens integritet. Om finansiella transaktioner utförs via din webbplats, måste du noggrant testa för säkerhet.

Å andra sidan, för en statisk webbplats bör tonvikten ligga på UI (användargränssnitt) och funktionalitet.

Uppskattat antal användare

Att arbeta med ett uppskattat antal användare hjälper till med prestandatestning. Detta kontrollerar stressen och belastningen (eller trafiken) som webbplatsen kan hantera på en gång under en ökning av trafiken.

Verktyg att använda

Du måste tänka på vilka testverktyg du kommer att använda. Du kan behöva använda olika verktyg för olika testtyper eller faser. Du kan behöva olika verktyg för testning över webbläsare och andra för prestandatestning. Bestäm hur mycket automatisering du behöver använda. Du kan använda verktyg som automatiserar delar av din testning, till exempel CloudQA-verktyget som automatiserar regressionstestning.

Plattformen som webbplatsen nås på

Om webbplatsen är avsedd att nås på olika plattformar eller webbläsare, måste du ta hänsyn till plattformsoberoende testning.

QA bästa praxis

Det finns ett antal saker du behöver göra för att implementera ditt QA-processflöde effektivt. I det här avsnittet tittar vi på bästa praxis för QA:

• Definiera användarna som ska använda slutprodukten.
• Följ din checklista för varje testfas eller typ.
• Testa med a uppställningsplats (en webbplats som simulerar den verkliga platsen).
• Schemalägg hur lång tid varje testfas behöver ta.
• Testa så tidigt som möjligt – testa nya funktioner så snart de läggs till.
• Använd en smidig QA tillvägagångssätt (test i slutet av olika utvecklingsstadier).
• Prioritera buggfixar, beroende på hur kritiska de är för din webbplats funktionalitet.
• Automatisera där det är möjligt, särskilt högriskdelarna av webbplatsen. “överautomatisera” dock inte. Prioritera att testa de delar där automatisering passar bäst.
• Sträva efter att etablera ett samarbete mellan ditt QA-team och design-/utvecklingsteamet.
• Skapa en webbplats tankekartaen bild som hjälper dig att se din webbplats struktur för att få en uppfattning om arbetets omfattning och identifiera de delar som du behöver prioritera.

QA kan vara en skrämmande process om den görs manuellt. Som vi redan nämnt måste du automatisera där det är nödvändigt och där det är möjligt. Det är lätt att testa din sida på din webbläsare och PC och tro att den kommer att se bra ut och prestera som förväntat på alla webbläsare och enheter, och att användarna intuitivt vet vad de ska göra. Du kan behöva använda en uppsättning verktyg för att hjälpa dig testa olika faser av din QA-process. Här är verktygen som du kan använda för att göra din QA-testning enklare:

TestRail

TestRail är helt webbaserad testmjukvara med realtidsinsikter som hjälper dig att spåra dina framsteg. Du kan använda den i molnet eller ladda ner den. Verktyget integreras enkelt med testautomationsverktyg.

CrossBrowserTest

Detta molnbaserat verktyg används för att köra tester på både mobila och stationära webbläsare. Över 2050 webbläsare är tillgängliga för testning. Det kommer att vara praktiskt för kompatibilitets- och regressionstestning. Kommer med en gratis provperiod.

Blankettfyllare för webbutvecklare

Om du använder några formulär på din webbplats, även om de är så enkla som ett kontaktformulär, måste du testa om formuläret endast tillåter den angivna typen av användarinmatning, om det skickar in korrekt information eller till och med om informationen delas ( speciellt om det är personlig användarinformation) visas på webbläsarens URL. Kolla in formulärfyllare i krom förlängning.

Med Web Developer Form Filler-verktyget kan du testa ett formulärs funktionalitet. Allt du behöver göra är att fylla i de värden du vill ha i dina inmatningsfält, och verktyget kommer sedan automatiskt att fylla i det åt dig. På så sätt kan du testa dina formulär snabbare.

Ranorex Webtestit

Det här verktyget är idealiskt för UI-testning över webbläsare och operativsystem (Mac, Android, Windows och Linux). Med Ranorex, kan du göra alla tester på din lokala PC eller Desktop. Den kommer med en gratis provperiod och inbyggd testrapportering.

Fönster Resizer

Fönster Resizer är ett Chrome-tillägg som hjälper dig att visualisera hur din webbplats ser ut i olika fönsterstorlekar. Det här verktyget låter dig testa de vanligaste storlekarna för både stationära och mobila enheter. Du kan också lägga till anpassade skärmstorlekar. Verktyget ger dig insikt om innehåll som borde vara ovanför vecketoch förslag för att få din skärm att se bättre ut på olika skärmstorlekar.

CloudQA

CloudQA verktyget är lämpligt att använda av testare på alla nivåer, även de utan teknisk utveckling eller designkunskaper. Du kan använda den för regressionstestning och den ger omedelbar feedback. Den kan köra hundratals tester samtidigt i alla webbläsare. Deras prismodell är att du bara betalar för det du använder. Du kan till och med använda verktyget som ett webbläsartillägg för att hjälpa dig spela in dina tester.

Ahrefs

Det här verktyget är användbart för SEO-testning. Den gör en webbplatsrevision för att hjälpa dig att identifiera vad du gör rätt när det kommer till SEO, och de aspekter som behöver förbättras för att se din webbplats rankas bättre i sökmotorernas resultat.

Det är enkelt att använda, även om du inte har så mycket kunskap om SEO. Det ger dig en uppdatering av din webbplats prestanda och låter dig anpassa din rapport så att den passar ditt varumärke. Du får också välja vilket språk du vill att din rapport ska vara på.

Den är också integrerad med CRM som MailChimp och Salesforce för bättre hantering av potentiella kunder.

Webbplats QA checklista

I det här avsnittet utforskar vi en checklista som du kan använda när du utför QA på din webbplats. Här är en sammanfattning:

Bildkälla

Funktionstestning

Här testar du funktionerna på din webbplats. Det är lättare att testa dessa om du har en mindmap som bryter ner hur din sida ska fungera och se ut. Även om du inte har en tankekarta, här är aspekterna att hålla utkik efter:

Listrutor, knappar, kryssrutor, inmatningsfält och formulär

Kontrollera att dessa fungerar som avsett. Att de faktiskt samlar in rätt typ av information och skickar in den (för formulär) eller dirigerar personer på lämpligt sätt. Din formulärvalidering bör innehålla:

• Obligatoriska fält kan inte lämnas tomma.
• Platshållartext för att göra det enklare för användare att visualisera vilken typ av innehåll du vill att de ska fylla i, förutom tydliga instruktioner om vilken typ av input som du förväntar dig av dem, till exempel lösenord med minst 8 tecken, med siffror, versaler och specialtecken.
• Att den insamlade informationen lagras säkert (lösenord krypteras till exempel innan de lagras i databasen).

Din webbplats processflöde

Vilken är användarens resa genom din webbplats? Har du en idealisk resa som de borde ta? De flesta användarresor börjar med hemsidan. Om du säljer kläder, till exempel, kan användarresan vara från:

hemsida >> kategorier >> viss produkt >> lägg i varukorg >>registrera sig >> kassan

Är det den resa som dina användare faktiskt tar? Eller hoppar de av så fort de når “registrera sig”? Vad säger det om var “registrering” ska vara i webbplatsprocessen?

Länkar

Kontrollera att alla länkar fungerar och leder människor till de avsedda platserna. Ett verktyg för att leta efter trasiga länkar kommer att vara praktiskt här. Se till att det inte är några återvändsgränder (sidor utan uppmaningar till åtgärder eller länkar till andra sidor – de talar inte om för användarna vad de ska göra härnäst) och att e-postlänkar skickar e-post till rätt mottagare.

Läs vår artikel om brutna länkar för att lära dig mer om hur du kan fixa dem.

Småkakor

Cookies skapas av en webbläsare när du besöker en webbplats. De innehåller information som användarpreferenser och deras inloggningsstatus. Här är vad din QA bör kontrollera när det gäller cookies:

• Att de inte är aktiva efter den angivna “utgångsperioden”.
• Att de krypteras innan de sparas på en användares enhet.
• Att de fungerar korrekt – för att göra detta, testa när cookies är aktiverade gentemot när de är inaktiverade.
• Deras inverkan på din webbplats säkerhet – ta bort dem och kontrollera hur detta påverkar din webbplats säkerhet.

Andra funktionstester

• Kontrollera efter syntaxfel.
• Kontrollera om det finns en webbplatskarta och om den är korrekt implementerad.

Prestandatester

Här testar du om din sajt klarar av kraftiga toppar i trafiken och ändå presterar som tänkt. Här är vad du ska hålla utkik efter:

Så fungerar webbplatsen under:

• Pikar i trafiken (stresstest).
• Ökad arbetsbelastning (belastningstestning).
• Normal arbetsbelastning (stabilitetstestning).
• Flera användarinloggningar (samtidighetstestning).
• En ökning av databasdatavolymen (volymtestning).
• En kontinuerlig ökning av arbetsbelastningen (uthållighetstestning).

Andra prestandatester:

• Sidans laddningshastighet (hur lång tid tar det för din webbplats att laddas). Ett verktyg för prestandatestning skulle vara praktiskt här.
• Hur din webbplats fungerar när användaren har en långsam internetanslutning.

Säkerhetstestning

Bildkälla

Här är vad du ska kontrollera när det gäller säkerhet:

• Kan lösenord “knäckas”?
• Omdirigeras användare till krypterade SSL-sidor?
• Har dina formulär captchas? Fungerar de som förväntat?
• Kan en användare logga in utan lösenord eller med fel lösenord?
• Auktorisering – endast auktoriserade användare kan komma åt vissa delar av webbplatsen.
• Är begränsade filer endast nedladdningsbara av auktoriserade och tillgängliga användare?
• Autentisering – endast en verifierad användare får logga in och sedan komma åt vissa delar eller funktioner på din webbplats (här är en skillnaden mellan autentisering och auktorisering).
• Avbryts en användarsession om det tar en viss tid, till exempel en betalning som tar mer än 10 minuter?
• Du kan också definiera hur ett säkerhetsbrott skulle se ut och simulera det för att se hur din webbplats skulle hantera det (penetrationstestning).

Kompatibilitetstestning

Dina användare kommer åt din webbplats på olika enheter och plattformar – webbläsare och operativsystem. Här kan du kontrollera hur din webbplats ser ut och fungerar på olika enheter och plattformar. Du bör kontrollera:

• Hur ser bilderna ut?
• Är din NAP (webbplatsens eller företagets namn, adress och telefonnummer) lättillgänglig?
• Responsivitet (ser det bra ut på mobil kontra stationär/dator? På olika skärmstorlekar? Har användaren tillräckligt med utrymme för att klicka på länkarna och knapparna? – kom ihåg att på en mindre skärm kommer användaren att trycka på en knapp för att “klicka” Är föremålen på din webbplats väl fördelade på mindre skärmar?
• Ser din sida bra ut och fungerar som förväntat på olika webbläsare och skärmupplösningar?

Innehållstestning

Här utvärderar du din webbplats innehåll. Det här testet kommer att vara mer användbart om du redan har definierat din målgrupp.

• Att färgerna som används matchar.
• Att de teckenstorlekar som används är idealiska.
• Att informationen flyter logiskt.
• Har du sidor med tunt innehåll?
• Uppfyller ditt innehåll användarnas avsikter?
• Kontrollera om det finns stavfel och grammatiska fel.
• Att bilder är optimerade med alt-taggar.
• Innehåller det ditt primära sökord?
• Visas den viktigaste informationen först?
• Att inget dummy-innehåll fortfarande finns på sajten.
• Att innehållet som är avsett att vara ovanför mitten visas på rätt plats.
• Sök efter bilder och videor. Visas de väl? Har de några upphovsrättsintrång?

Använd vår webbplats QA checklista för dina behov, och lägg till din egen checklista och anpassa den som du vill.

Sammanfattningsvis

Webbplats QA är en process som börjar när webbplatskraven läggs upp och fortsätter även efter att webbplatsen har lanserats och den är i bruk. Saker som behöver fixas kommer att fortsätta dyka upp med tiden, så det är viktigt att rutinmässigt testa din webbplats. Det är viktigt att definiera och layouta QA-processen innan testningen börjar, för att göra testningen enklare, mer fokuserad och insiktsfull. Slutligen, logga buggarna och lagra dem för framtida referens när du börjar åtgärda de buggar eller fel som uppstått.