Så här gör du enkelt visuell regressionstestning i WordPress

Förra veckan ringde en vän som hanterar flera WordPress-webbplatser mig i panik. En rutinmässig plugin-uppdatering hade förstört hans kunds navigeringsmeny, men han märkte det inte förrän kunderna började klaga.

Det här är ett vanligt problem som jag har sett otaliga gånger, och det är precis därför som visuella regressionstester är så viktiga för WordPress-webbplatsägare.

Visuell regressionstestning låter kanske komplicerat. Men det är faktiskt en enkel lösning som kan spara dig timmar av manuell kontroll och förhindra pinsamma layoutproblem.

Vanligtvis fungerar det genom att automatiskt jämföra före och efter skärmdumpar av dina sidor. Detta hjälper till att fånga även de minsta visuella förändringarna som kan förstöra webbplatsens utseende. 🔍

I den här guiden visar jag dig hur du gör visuella regressionstester på din WordPress-webbplats. Efter att ha testat många verktyg och metoder har jag hittat den mest tillförlitliga lösningen som inte kräver någon kodningskunskap eller teknisk expertis.

Vad är visuell regressionstestning och varför är det viktigt? 🤔

Varje gång du uppdaterar din webbplats – oavsett om det är en WordPress-kärnuppdatering, ett nytt plugin, en temaförändring eller bara en mindre kodjustering – finns det en risk för att något på frontend flyttas på fel plats.

Till exempel kan en knapp försvinna, din layout kan gå sönder eller en produktbild kan sluta laddas korrekt.

Vad är problemet? Dessa visuella buggar går ofta obemärkta förbi tills en besökare påpekar dem via ett kontaktformulär eller en undersökning om designfeedback.

Vid det laget kan skadan på din webbplats användarupplevelse redan vara skedd.

Det är här visuell regressionstestning kommer in i bilden.

Processen är enkel: ta ögonblicksbilder av dina sidor före och efter en uppdatering och jämför dem sedan för att upptäcka om något har ändrats.

Och om du testar på en staging-webbplats (vilket vi rekommenderar) kan du på ett säkert sätt göra uppdateringar och köra jämförelser för att fånga upp visuella problem innan något går live.

Den goda nyheten? Du behöver inte göra det manuellt.

Med visuella regressionstestverktyg som VRTs, Percy eller BackstopJS kan du automatisera jämförelser av skärmdumpar och kontrollera hur din webbplats ser ut i olika skärmstorlekar – vilket hjälper dig att upptäcka layoutproblem på datorer, surfplattor och mobiler.

Varför är detta viktigt för WordPress-användare?

Om du hanterar en WordPress-webbplats är visuell regressionstestning 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, t.ex. byråer som kör uppdateringar på flera WordPress-webbplatser, frilansare som hanterar klientwebbplatser eller nätbutiksägare som vill se till att produkt- och kassasidorna förblir intakta.

Kort sagt, visuell regressionstestning hjälper dig att undvika frustrerande överraskningar, spara tid och se till att din WordPress-webbplats fungerar smidigt.

Med detta sagt kommer jag att dela med mig av hur man enkelt gör visuella regressionstester i WordPress. Här är en snabb översikt över alla steg som jag kommer att täcka i den här guiden:

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 superlä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 för att köras automatiskt efter att du har gjort ändringar på din webbplats, till exempel uppdaterat ett plugin eller justerat ditt tema.

Plugin-programmet 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 insticksprogrammet 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. Med den kostnadsfria planen kan du testa upp till 3 sidor per dag på en domän och schemalägga dagliga tester.

Å andra sidan kan du med betalda abonnemang testa ett större antal sidor, köra manuella tester och automatiskt köra visuella regressionstester efter uppdateringar av WordPress-kärnan, plugin och teman.

Klicka bara på “Köp nu” eller “Installera nu” under det abonnemang som 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 betalningen kommer du att landa på din VRTs instrumentpanel, där du kan ladda ner plugin-programmet som en .zip-fil.

Gå sedan till Plugins ” Add Plugin och klicka på knappen “Upload Plugin”. Härifrån kan du välja VRTs-plugin .zip-filen som du just laddade ner.

Se till att aktivera insticksprogrammet när det har installerats. Du hittar mer information i vår guide om hur du installerar ett WordPress-tillägg.

Steg 2: Konfigurera inställningarna för VRTs Plugin

När du har aktiverat plugin-programmet är det dags att ställa in när dina visuella regressionstester ska köras.

Gå till VRTs ” Inställningar i din WordPress-adminmeny.

När du väl är inne kan du bläddra ner till avsnittet “Triggers” – det är här du talar om för plugin-programmet när det automatiskt ska ta och jämföra ögonblicksbilder.

Här är de tillgängliga alternativen:

• Kör tester var 24:e timme (gratis) – Detta är standardinställningen. VRTs kommer automatiskt att kontrollera dina valda inlägg eller sidor en gång per dag för visuella förändringar.
• Kör tester efter uppdateringar av WordPress och plugin (Pro) – Perfekt för att fånga upp layoutproblem som orsakas av uppdateringar, direkt när de inträffar.
• Kör tester med dina favoritappar (Pro) – Anslut VRT till externa verktyg eller arbetsflöden med hjälp av webhooks.
• Kör tester på begäran (Pro) – Utlös tester manuellt när du behöver dem, direkt från din WordPress-panel.

När du har valt den trigger som passar ditt arbetsflöde (eller din licens) klickar du bara på knappen “Spara ändringar” längst ned på sidan.

Steg 3: Lägg till nya sidor eller inlägg för 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 nu byta till fliken “Tests”, där du kommer att hantera och köra dina visuella tester.

Härifrån kan du klicka på knappen “Lägg till nytt”. Då kan du välja vilka inlägg eller sidor du vill testa.

I popup-fönstret som visas måste du välja de sidor eller inlägg som du vill utföra den visuella regressionstestningen på.

Klicka sedan på “Add New Test” för att bekräfta dina val.

VRTs plugin kommer att ta en första ö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.

När du har ställt in ditt test ser du en instruktion om att uppdatera sidan för att ladda den första ögonblicksbilden. Gå vidare och gör just det.

När du har gjort det hittar du en länk till den sida eller det inlägg som du har lagt till för testning.

Du kommer också att se att “Teststatus” automatiskt ställs in på “Schemalagd” för nästa dag. Detta beror på att gratisversionen av VRTs kör tester enligt ett 24-timmarsschema.

Du kan klicka på länken “View Snapshot” för att kontrollera den första skärmdumpen.

Den öppnas i en ny flik på det här sättet:

Nu kan du göra de ändringar du behöver på din webbplats. Kom sedan tillbaka i morgon för att granska jämförelsen och upptäcka eventuella oväntade visuella problem.

Steg 4: Kontrollera om det finns visuella skillnader

När testet är slutfört och eventuella visuella fel har upptäckts bör du se en avisering på fliken VRTs ” Runs.

När du väl är inne kan du sväva över körningen med förändringar som upptäcks.

Klicka sedan på länken “Visa detaljer” när den visas.

På nästa skärm ser du en jämförelse sida vid sida av din sida, som visar före- och efterversionerna.

Plugin-programmet markerar automatiskt visuella skillnader, så att du snabbt kan upptäcka dem:

• Layoutförändringar och feljusterade element: Om din design ändras efter en plugin-uppdatering eller temaförändring, som knappar som flyttas på plats eller text som hoppar runt, kommer VRT att flagga det.
• Saknade eller trasiga element: Oavsett om det är en saknad bild, CTA-knapp eller inbäddat formulär gör VRT det enkelt att upptäcka allt som försvinner oväntat, vilket är särskilt användbart för e-handel eller landningssidor.
• 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 glida mellan den gamla och den nya versionen och visuellt bekräfta de exakta ändringarna.

Steg 5: Granska och vidta åtgärder

När du har kört ett visuellt regressionstest kan du 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 genom att justera layouten, flytta element eller lägga till funktioner som saknas.
• Å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 webbplatsens säkerhetskopia eller versionshistorik. Detta hjälper dig att undvika att lämna kvar problem på din webbplats.

Vanliga frågor om visuell regressionstestning i WordPress

Om du precis har kommit igång med visuell regressionstestning är du inte ensam. Här är några snabba svar på vanliga frågor som jag ofta hör från WordPress-användare och utvecklare.

Vad är skillnaden mellan snapshot-testning och visuell regressionstestning?

Snapshot-testning kontrollerar om webbplatsens kod eller innehåll förblir detsamma, ungefär som att spara en säkerhetskopia av hur saker och ting ska vara.

Visuell regressionstestning, å andra sidan, fokuserar på utseendet på din webbplats. Det jämför skärmdumpar före och efter uppdateringar för att fånga layoutändringar, saknade element eller visuella buggar som du kanske inte märker direkt.

Vilket är det bästa verktyget för visuell regressionstestning i WordPress?

Det enklaste alternativet är VRTs – Visual Regression Tests plugin. Det är nybörjarvänligt, kräver ingen kodning och körs direkt från din instrumentpanel. Dessutom har det en gratisversion som är superlätt att använda.

Hur kan jag göra regressionstestning manuellt?

Manuell regressionstestning innebär att du går igenom din webbplats och kontrollerar viktiga sidor efter att du har gjort ändringar, till exempel installerat ett nytt plugin eller uppdaterat ditt tema.

Du bör besöka din hemsida, kontaktsida, kassaprocess (om du har en sådan) och eventuella anpassade layouter för att se till att allt fortfarande ser ut och fungerar som det ska. Det fungerar, men det kan vara tidskrävande om du hanterar en stor eller upptagen webbplats.

Hur snabbar du upp regressionstestningen?

Det bästa sättet att spara tid är att automatisera det. Med hjälp av ett plugin som VRTs – Visual Regression Tests kan du skapa ögonblicksbilder av dina viktiga sidor och snabbt jämföra dem efter en uppdatering.

Du behöver inte klicka igenom varje sida manuellt – plugin-programmet gör den visuella kontrollen åt dig.

Du kan också testa uppdateringar på en staging-webbplats först, så att du inte åtgärdar problem på en live-webbplats.

Vilka är de bästa sätten att testa WordPress-webbplatsdesign?

Här är några tips för att testa din WordPress-design:

• Använd ett visuellt regressionsverktyg som VRT – Visual Regression Tests – för att upptäcka designförändringar.
• Förhandsgranska dina tema- och plugin-uppdateringar på en staging-site.
• Testa på flera olika skärmstorlekar (dator, surfplatta och mobil).
• Använd webbläsarens utvecklingsverktyg för att kontrollera hur din webbplats ser ut i olika visningsfönster.
• Be om feedback från användare eller kunder – de upptäcker ofta saker som du kanske missar.

Jag hoppas att den här artikeln har hjälpt dig att lära dig hur du gör visuella regressionstester i WordPress. Därefter kanske du vill kolla in vår artikel om att skapa chattrum i WordPress för dina användare och de bästa feedbackfrågorna för användarupplevelse att ställa till webbplatsbesökare.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.