Hur man enkelt gör visuell regressionsstestning i WordPress

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.

WordPress visuell regressionstestning löser detta genom att automatiskt jämföra hur dina sidor ser ut före och efter varje ändring, och sedan meddela dig i samma ögonblick som något förändras.

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 fem 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 regressionstestning som VRTs, Percy eller BackstopJS kan du automatisera skärmdumpsjä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 regressionstestning ett tidsbesparande skyddsnät.

WordPress-webbplatser är unikt sårbara för layoutbrott eftersom de är uppbyggda av många oberoende delar – ditt tema, sidbyggare, block och plugins antar alla olika saker om hur dina sidor renderas.

Något av detta kan tyst ändra hur en sida ser ut:

• En pluginuppdatering ändrar stilen på en knapp eller ett formulär
• En WordPress-kärnuppdatering ändrar hur ett Gutenberg-block visas
• En WooCommerce-uppdatering ändrar produktlayout eller utcheckningsfält
• En temauppdatering justerar avstånd, teckensnitt eller responsiva brytpunkter
• En anpassad CSS-redigering påverkar fler sidor än du förväntade dig

WordPress visuell regressionstestning fångar dessa oavsiktliga ändringar innan dina besökare gör det. Istället för att klicka igenom varje sida efter varje uppdatering jämför verktyget skärmdumpar före och efter och flaggar allt som ser annorlunda ut.

För upptagna webbplatsägare innebär detta sinnesro. För byråer som hanterar klientwebbplatser innebär det att upptäcka regressioner innan en klient e-postar dig om dem.

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

För att komma igång, logga in på ditt kontrollerade webbplats-dashboard (eller din live-webbplats, om du föredrar det).

I den här handledningen kommer jag att använda pluginet VRTs eftersom det är nybörjarvänligt och lätt att använda för visuell regressionstestning. 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.

Vid tidpunkten för skrivandet tillåter gratisplanen dig att testa upp till 3 sidor per dag på en domän och schemalägga dagliga tester. Betalda planer tillåter dig att testa fler sidor, köra manuella tester och automatiskt köra visuella regressionstester efter WordPress-kärnan, plugin- och tema-uppdateringar.

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 VRTs » 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 manuellt tester 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 plugin-uppdatering eller temaändring, 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 upptäcka 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.

Om ändringen var avsiktlig (som en planerad omdesign av startsidan), kan du helt enkelt godkänna den nya skärmdumpen så att pluginet vet att använda den som din nya baslinje framöver.

Steg 5: Granska och vidta åtgärder

Efter att ha kört ett visuellt regressionstest, vidta åtgärder baserat på resultaten.

En sak att veta innan du börjar granska varningar: inte varje flaggad skillnad är faktiskt en bugg. Ibland ändras en sida legitimt vid varje besök, och testet kommer att flagga dessa ändringar också.

Dessa kallas falska positiva, och de är den vanligaste anledningen till att nya användare blir frustrerade över visuell regressionstestning. Eftersom verktyget i princip kontrollerar om Pixel Skillnad > 0%, kommer varje dynamiskt element som flyttar pixlarna att utlösa en varning.

Här är de vanligaste orsakerna till falska positiva på WordPress-webbplatser:

• Bildspel och animationer(bildkaruseller, hjälm-animationer, hover-effekter)
• Live-data(senaste inläggsflöden, kommentarantal, WooCommerce lagerträknare)
• Annonsplaceringar och spåraresom laddar olika innehåll vid varje besök
• Cookie- eller GDPR-samtyckesbanderollersom visas oförutsägbart
• Latladdade bildersom kanske eller kanske inte har laddats när skärmdumpen togs
• Typsnittsom renderas lite annorlunda innan de är färdiga med laddningen

När du ser en av dessa flaggade, öppna jämförelsevyn i VRT:er och använd alternativet "dölj element" för att exkludera den regionen från framtida tester. Därefter ser du bara verkliga designändringar som är värda att granska – vilket är precis vad du vill ha.

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 genom att justera layouten, flytta element eller lägga tillbaka saknade funktioner.
• Återgå till en säkerhetskopia: Om layoutändringarna är mindre, kan du ofta ångra dem genom att återställa sidan till en tidigare version. Om en större uppdatering förstörde hela din webbplats kan du behöva återställa en nyligen gjord säkerhetskopia av webbplatsen. Men kom ihåg att göra det kommer att återställa all din webbplatsdata, vilket potentiellt raderar nyliga försäljningar eller kommentarer.

Med det sagt, notera att om du åtgärdar ett problem men testet fortfarande visar felet, se till att rensa din WordPress-cache, samt eventuella CDN- eller hosting-cacher. 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 den dolda koden bakom din webbplats för att se om den matchar en tidigare version, snarare än hur den ser ut på skärmen.

Visuell regressionsstestning kontrollerar hur din webbplats faktiskt 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 inuti 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 nyckelsidor och jämföra dem åt dig, så att du inte behöver kontrollera allt manuellt.
Att använda en staging-webbplats hjälper dig också att upptäcka problem innan du uppdaterar din live-webbplats.

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 riktiga användare eller kunder kan hjälpa dig att upptäcka detaljer som du kanske missar.

När ska jag köra visuella regressionstester på min WordPress-webbplats?

De bästa tidpunkterna att köra ett visuellt regressionstest är precis före och precis efter alla ändringar som kan påverka din webbplats design. Det inkluderar WordPress kärnuppdateringar, plugin- och tema-uppdateringar, anpassade CSS-redigeringar och tillägg av nya block eller sidbyggarelement.

Om du inte gör frekventa ändringar räcker schemalagda dagliga tester för att fånga långsamma problem, som en plugin-uppdatering som tyst har brutit en layout som du inte tänkte kontrollera.

Vad orsakar falska positiva resultat i visuell regressionsstestning?

Falska positiva resultat inträffar när testet flaggar en skillnad som inte är ett faktiskt fel. De vanligaste orsakerna på WordPress-webbplatser är bildspel, animationer, annonsplaceringar, cookie-banners, lat laddade bilder och live-data som senaste inlägg eller WooCommerce lagertallare.

I VRT:er kan du dölja dessa element så att de exkluderas från jämförelsen, vilket innebär att framtida tester bara flaggar verkliga designändringar.

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 gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.