Att hålla din WordPress-webbplats snygg kan kännas stressande. En liten uppdatering eller en snabb CSS-justering kan tyst bryta en layout, och du märker det ofta inte förrän en besökare påpekar det.
Det svåra är att det inte är praktiskt att kontrollera varje sida manuellt. Det tar för mycket tid, och det är lätt att missa små ändringar. 🤦
Och även om "visuell regressionsstestning" låter tekniskt, behöver du inte utvecklarverktyg för att använda det. Det är ett enkelt sätt att spara timmar av manuell kontroll och undvika pinsamma layoutproblem.
Efter att ha testat olika verktyg och metoder har jag hittat ett pålitligt alternativ som inte kräver någon kodning eller teknisk expertis. I den här guiden visar jag dig hur du kör visuella regressionstester på din WordPress-webbplats i bara några enkla steg.
Vad är visuell regressionsstestning?
Visuell regressionsstestning är ett sätt att kontrollera om din webbplats design ändras oväntat efter en uppdatering. Det fungerar genom att jämföra ögonblicksbilder av dina sidor före och efter för att upptäcka allt som ser annorlunda ut.
Varje gång du uppdaterar WordPress-kärnan, installerar ett plugin, ändrar ett tema eller justerar kod, finns det en chans att något på framsidan kan flytta sig ur plats – en saknad knapp, en trasig layout eller en bild som plötsligt slutar laddas.
Problemet? Dessa visuella buggar märks ofta inte förrän en besökare påpekar dem via ett kontaktformulär eller en enkät om designfeedback. Då kan skadan på din webbplats användarupplevelse redan vara skedd.
Därför är det så hjälpsamt att köra visuella regressionstester.
Processen är enkel: ta ögonblicksbilder av dina sidor före och efter en uppdatering, jämför dem sedan för att upptäcka allt som har ändrats.
Och om du testar på en staging-webbplats (vilket jag rekommenderar), kan du säkert göra uppdateringar och köra jämförelser för att upptäcka visuella problem innan något går live.
Du behöver inte heller köra dessa jämförelser manuellt.
Med verktyg för visuell regressionsstestning som VRTs, Percy eller BackstopJS kan du automatisera skärmbildsjämförelser och kontrollera hur din webbplats ser ut på olika skärmstorlekar – vilket hjälper dig att upptäcka layoutproblem på dator, surfplatta och mobil.
Varför är visuell regressionsstestning viktig för WordPress-användare?
Om du hanterar en WordPress-webbplats, är visuell regressionsstestning ett tidsbesparande skyddsnät. Istället för att klicka igenom varje sida efter en uppdatering, ger det här verktyget dig en visuell rapport över vad som har ändrats – och om det är något du behöver åtgärda.
Det är särskilt användbart i många scenarier, som när byråer kör uppdateringar på flera WordPress-webbplatser, frilansare hanterar klientwebbplatser eller ägare av nätbutiker som vill säkerställa att produkt- och kassasidorna förblir intakta.
Kort sagt, visuell regressionstestning hjälper dig att undvika frustrerande överraskningar, spara tid och hålla din WordPress-webbplats igång smidigt.
Med det sagt, jag ska visa dig hur du enkelt gör visuell regressionsstestning i WordPress. Här är en snabb översikt över stegen vi kommer att gå igenom:
- Steg 1: Installera och aktivera pluginet för visuell regressionstestning
- Steg 2: Konfigurera VRTs-plugininställningarna
- Steg 3: Lägg till nya sidor eller inlägg att testa
- Steg 4: Kontrollera visuella skillnader
- Steg 5: Granska och vidta åtgärder
- Vanliga frågor: Hur man kör visuell regressionsstestning i WordPress
- Nästa steg: Förbättra din WordPress-webbplatsdesign
🧑💻 Proffstips: Innan du kör visuella regressionstester eller gör designändringar, rekommenderar jag starkt att du använder en staging-sida.
En staging-webbplats är en privat klon av din live-webbplats där du säkert kan testa uppdateringar, plugin-ändringar eller designjusteringar – utan att påverka dina användare. Den hjälper dig att upptäcka layoutproblem, saknade knappar eller visuella buggar *innan* de går live.
Osäker på hur du sätter upp en? Se bara vår steg-för-steg-guide om att skapa en staging-webbplats för WordPress för alla detaljer.
Steg 1: Installera och aktivera pluginet för visuell regressionstestning
I den här handledningen kommer jag att använda VRTs-pluginet eftersom det är nybörjarvänligt och lätt att använda för visuell regressionsstestning. Oavsett om det är en förskjuten layout, en saknad knapp eller ett trasigt element efter en uppdatering, hjälper VRTs dig att upptäcka det tidigt.
Så här fungerar det: Pluginet tar skärmdumpar av de sidor du väljer. Du kan sedan utlösa jämförelser manuellt eller schemalägga dem att köras automatiskt efter att du har gjort ändringar på din webbplats, som att uppdatera ett plugin eller justera ditt tema.
Pluginet jämför sedan skärmdumparna före och efter sida vid sida och markerar eventuella visuella skillnader.
Så istället för att manuellt kontrollera varje sida får du en snabb visuell rapport som visar vad som har ändrats och om något ser fel ut.
För att installera pluginet måste du först besöka VRTs webbplats och registrera dig för en plan genom att klicka på knappen 'Kom igång gratis'.
Du kan sedan välja en av planerna.
Gratisplanen låter dig testa upp till 3 sidor per dag på en domän och schemalägga dagliga tester. Betalda planer låter dig testa fler sidor, köra manuella tester och automatiskt köra visuell regressionsstestning efter uppdateringar av WordPress core, plugins och teman.
Klicka helt enkelt på ‘Köp nu’ eller ‘Installera nu’ under den plan du vill använda.
Följ sedan instruktionerna för att registrera ett konto på VRT:s webbplats och lägg till dina betalningsuppgifter.
När du har slutfört registreringen kommer du till din VRTs-instrumentpanel, där du kan ladda ner pluginet som en .zip-fil.
Gå sedan helt enkelt till sidan Plugins » Lägg till Plugin och klicka på knappen 'Ladda upp plugin'. Härifrån kan du välja VRTs-pluginets .zip-fil som du just laddade ner.
Se till att aktivera pluginet när det har installerats. För fullständiga detaljer kan du se vår guide om hur man installerar ett WordPress-plugin.
Steg 2: Konfigurera VRTs-plugininställningarna
När du har aktiverat pluginet är det dags att bestämma när dina visuella regressionstester ska köras.
Gå till VRT:er » Inställningar i din WordPress adminmeny.
På inställningssidan, scrolla ner till sektionen 'Triggers'. Det är här du talar om för pluginet när det automatiskt ska ta och jämföra snapshots.
Här är de tillgängliga alternativen:
- Kör tester var 24:e timme (Gratis) – Detta är standardinställningen. VRT:er kommer automatiskt att kontrollera dina valda inlägg eller sidor en gång per dag för visuella ändringar.
- Kör tester efter uppdateringar av WordPress och plugins (Pro) – Utmärkt för att upptäcka layoutproblem orsakade av uppdateringar, precis när de inträffar.
- Kör tester med dina favoritappar (Pro) – Anslut VRT:er med externa verktyg eller arbetsflöden med hjälp av webhooks.
- Kör tester vid behov (Pro) – Utlös tester manuellt när du behöver dem, direkt från din WordPress-instrumentpanel.
När du har valt den utlösare som passar ditt arbetsflöde (eller din licens), klickar du helt enkelt på knappen 'Spara ändringar' längst ner på sidan.
Steg 3: Lägg till nya sidor eller inlägg att testa
När du har konfigurerat plugin-inställningarna är det dags att välja vilka sidor eller inlägg du vill inkludera i dina visuella regressionstester.
Låt oss byta till fliken 'Tester', där du hanterar och kör dina visuella tester. Härifrån kan du klicka på knappen 'Lägg till ny'. Detta låter dig välja inlägg eller sidor att testa.
I popup-fönstret som visas, välj de inlägg eller sidor du vill inkludera i din visuella regressionstestning.
Klicka sedan på 'Lägg till nytt test' för att bekräfta dina val.
VRTs-pluginet tar en initial ögonblicksbild av varje vald sida. Detta fungerar som din baslinje – i princip en "före"-version av hur dina inlägg eller sidor ser ut just nu.
Efter att ha konfigurerat ditt test ser du en instruktion att uppdatera sidan för att ladda den initiala snapshoten. Fortsätt och uppdatera.
Efter uppdateringen ser du en länk till snapshoten för sidan eller inlägget du lade till för testning.
Du kommer också att se att 'Teststatus' automatiskt är inställt på 'Schemalagd' för nästa dag. Detta beror på att gratisversionen av VRTs kör tester enligt ett 24-timmars schema.
Du kan klicka på länken 'Visa ögonblicksbild' för att kontrollera den inledande skärmdumpen.
Det öppnas i en ny flik så här:
Om du använder gratisversionen schemaläggs ditt test nu till nästa dag. Du kan fortsätta arbeta på din webbplats och komma tillbaka om 24 timmar för att se jämförelserapporten.
Men om du har Pro-versionen kan du köra ett test omedelbart för att upptäcka problem direkt.
Steg 4: Kontrollera visuella skillnader
När testet är slutfört och visuella ändringar har upptäckts ser du en avisering i fliken VRTs » Körningar.
På skärmen Körningar kan du hovra över körningen med upptäckta ändringar.
Klicka sedan på länken ‘Visa detaljer’ när den visas.
På nästa skärm ser du en sida-vid-sida-jämförelse av din sida, som visar före- och efterversionerna.
Pluginet markerar automatiskt visuella skillnader, så att du snabbt kan upptäcka problem som:
- Layoutförskjutningar och feljusterade element: Om din design ändras efter en pluginuppdatering eller ett temabyte, som att knappar flyttas ur position eller text hoppar runt, kommer VRTs att flagga det.
- Saknade eller trasiga element: Oavsett om det är en saknad bild, CTA-knapp eller inbäddad formulär, gör VRTs det enkelt att upptäcka allt som försvinner oväntat.
- Dynamiskt innehåll (falska positiva): Ibland kan verktyget flagga en ändring som inte är ett fel. Detta händer ofta med bildreglage, annonser eller roterande vittnesmål som ändras varje gång sidan laddas.
- Oväntade innehållsändringar: Pluginet kommer också att varna dig för ändringar i text, länkar eller bilder, så att du kan fånga obehöriga redigeringar eller publiceringsfel innan användarna gör det.
Du kan använda draghandtaget i mitten av skärmen för att skjuta mellan den gamla och nya versionen och visuellt bekräfta de exakta ändringarna.
Steg 5: Granska och vidta åtgärder
Efter att ha kört ett visuellt regressionsstest, vidta åtgärder baserat på resultaten. Här är vad du kan göra härnäst:
- Redigera sidan manuellt: Om ändringarna är små kan du åtgärda problemen direkt genom att redigera sidan, till exempel justera layouten, flytta element eller lägga tillbaka saknade funktioner.
- Återgå till en säkerhetskopia: Om ändringarna är större eller svårare att åtgärda kan du återställa sidan till en tidigare version med hjälp av din webbplatssäkerhetskopia eller versionshistorik. Detta hjälper till att undvika att lämna problem på din webbplats.
✋ Notera: Om du behöver en rekommendation för ett backupverktyg är Duplicator ett utmärkt val. Det är lätt att använda och låter dig klona din WordPress-webbplats med bara några få klick.
Några av våra företagswebbplatser använder Duplicator för säkerhetskopiering och webbplatsmigreringar, och jag rekommenderar starkt att du tittar på det. Läs vår fullständiga recension av Duplicator för att lära dig mer om pluginet.
Med det sagt, notera att om du åtgärdar ett problem men testet fortfarande visar felet, se till att rensa din WordPress-cache så att verktyget ser den senaste versionen av din webbplats.
Vanliga frågor: Hur man kör visuell regressionsstestning i WordPress
Om du precis har börjat med visuell regressionsstestning är du inte ensam. Här är några snabba svar på vanliga frågor från WordPress-användare och utvecklare.
Vad är skillnaden mellan ögonblicksbildstestning och visuell regressionstestning?
Snapshot-testning är en utvecklarterm som vanligtvis hänvisar till att kontrollera om den underliggande kodutmatningen matchar ett tidigare register. Visuell regressionsstestning kontrollerar hur din webbplats ser ut för det mänskliga ögat genom att jämföra skärmdumpar för att fånga layout- eller designändringar.
Vilket är det bästa verktyget för visuell regressionsstestning i WordPress?
Det enklaste alternativet är pluginet VRTs – Visual Regression Tests. Det är nybörjarvänligt, körs inifrån din instrumentpanel och kräver ingen kodning. Gratisversionen fungerar bra för de flesta användare.
Hur kan jag göra regressionstestning manuellt?
Manuell testning innebär att du klickar igenom dina viktiga sidor efter en uppdatering för att säkerställa att allt fortfarande ser bra ut. Du vill kontrollera sidor som din startsida, kontaktsida, blogginlägg och eventuella anpassade layouter eller utsteg. Det fungerar, men det kan ta mycket tid.
Hur snabbar du upp regressionsstestning?
Automatisera det. Ett plugin som VRTs – Visual Regression Tests kan ta skärmdumpar av dina viktigaste sidor och jämföra dem åt dig, så att du slipper kontrollera allt manuellt.
Att använda en staging-sida hjälper dig också att upptäcka problem innan du uppdaterar din live-sida.
Vilka är de bästa sätten att testa WordPress-webbplatsdesign?
Ett verktyg för visuell regression är ett av de enklaste sätten att upptäcka layoutändringar efter en uppdatering. Det hjälper också till att förhandsgranska uppdateringar på en staging-sida innan de går live.
Se till att kontrollera hur dina sidor ser ut på dator, surfplatta och mobil. Webbläsarens utvecklarverktyg gör det enkelt att snabbt testa olika skärmstorlekar. Och slutligen, att få feedback från verkliga användare eller kunder kan hjälpa dig att upptäcka detaljer som du kanske missar.
Nästa steg: Förbättra din WordPress-webbplatsdesign
Jag hoppas att den här artikeln har hjälpt dig att lära dig hur du gör visuell regressionstestning i WordPress. Om du vill fortsätta att förbättra din webbplats, kanske du också gillar:
- Nybörjarguide om hur du gör om en WordPress-webbplats
- Nyckelelement för design av en effektiv WordPress-webbplats
- Hur man får feedback på webbplatsdesign i WordPress
- Hur man förbättrar användarupplevelsen i WordPress
- Frågor om feedback på användarupplevelsen att ställa till webbplatsbesökare
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Har du en fråga eller ett förslag? Lämna gärna en kommentar för att starta diskussionen.