Jak łatwo przeprowadzić testy regresji wizualnej w WordPress

Utrzymanie wyglądu Twojej witryny WordPress tak, jak powinna wyglądać, może być stresujące. Niewielka aktualizacja lub szybka poprawka CSS może potajemnie zepsuć układ, a często nie zauważysz tego, dopóki odwiedzający Cię o tym nie poinformuje.

Testy regresji wizualnej WordPress rozwiązują ten problem, automatycznie porównując, jak Twoje strony wyglądają przed i po każdej zmianie, a następnie powiadamiając Cię w momencie, gdy coś się zmieni.

I chociaż „testowanie regresji wizualnej” brzmi technicznie, nie potrzebujesz narzędzi deweloperskich, aby z niego korzystać. Jest to prosty sposób na zaoszczędzenie godzin ręcznego sprawdzania i uniknięcie kłopotliwych problemów z układem.

Po przetestowaniu różnych narzędzi i metod znalazłem niezawodną opcję, która nie wymaga żadnego kodowania ani wiedzy technicznej. W tym przewodniku pokażę Ci, jak przeprowadzić testy regresji wizualnej na Twojej stronie WordPress w pięciu prostych krokach. 🧑‍💻

Czym jest testowanie regresji wizualnej?

Testowanie regresji wizualnej to sposób na sprawdzenie, czy projekt Twojej witryny nie zmienia się nieoczekiwanie po aktualizacji. Działa poprzez porównywanie migawek stron przed i po, aby wykryć wszystko, co wygląda inaczej.

Za każdym razem, gdy aktualizujesz rdzeń WordPress, instalujesz wtyczkę, zmieniasz motyw lub modyfikujesz kod, istnieje szansa, że coś na froncie może się przesunąć – brakujący przycisk, zepsuty układ lub obraz, który nagle przestaje się ładować.

Problem? Te wizualne błędy często pozostają niezauważone, dopóki odwiedzający nie wskaże ich za pomocą formularza kontaktowego lub ankiety dotyczącej opinii o projekcie. Do tego czasu szkody dla doświadczenia użytkownika Twojej witryny mogły już zostać wyrządzone.

Dlatego przeprowadzanie testów regresji wizualnej jest tak pomocne.

Proces jest prosty: wykonaj migawki swoich stron przed i po aktualizacji, a następnie porównaj je, aby wykryć wszystko, co się zmieniło.

A jeśli testujesz na stronie stagingowej (co polecam), możesz bezpiecznie wprowadzać aktualizacje i przeprowadzać porównania, aby wyłapać problemy wizualne, zanim cokolwiek trafi na żywo.

Nie musisz też przeprowadzać tych porównań ręcznie.

Dzięki narzędziom do testowania regresji wizualnej, takim jak VRTs, Percy czy BackstopJS, możesz zautomatyzować porównywanie zrzutów ekranu i sprawdzić, jak Twoja witryna wygląda na różnych rozmiarach ekranu — pomagając Ci wykryć problemy z układem na komputerach, tabletach i urządzeniach mobilnych.

Dlaczego testowanie regresji wizualnej jest ważne dla użytkowników WordPressa?

Jeśli zarządzasz stroną internetową WordPress, testowanie regresji wizualnej jest oszczędzającą czas siatką bezpieczeństwa.

Witryny WordPress są wyjątkowo podatne na błędy układu, ponieważ są składane z wielu niezależnych części — motyw, kreator stron, bloki i wtyczki — wszystkie zakładają różne rzeczy na temat sposobu renderowania Twoich stron.

Każda z tych rzeczy może potajemnie zmienić wygląd strony:

• Aktualizacja wtyczki zmienia styl przycisku lub formularza
• Aktualizacja rdzenia WordPress zmienia sposób wyświetlania bloku Gutenberg
• Aktualizacja WooCommerce zmienia układ produktów lub pola płatności
• Aktualizacja motywu dostosowuje odstępy, czcionki lub punkty przerwania responsywności
• Edycja niestandardowego CSS wpływa na więcej stron niż oczekiwano

Testowanie regresji wizualnej WordPress wyłapuje te niezamierzone zmiany, zanim zrobią to Twoi odwiedzający. Zamiast klikać przez każdą stronę po każdej aktualizacji, narzędzie porównuje zrzuty ekranu „przed” i „po” i oznacza wszystko, co wygląda inaczej.

Dla zapracowanych właścicieli witryn oznacza to spokój ducha. Dla agencji zarządzających witrynami klientów oznacza to wyłapywanie regresji, zanim klient napisze Ci o nich e-mail.

Mając to na uwadze, pokażę Ci, jak łatwo przeprowadzić testowanie regresji wizualnej w WordPressie. Oto szybki przegląd kroków, które omówimy:

Krok 1: Zainstaluj i aktywuj wtyczkę do testowania regresji wizualnej

Aby rozpocząć, zaloguj się do panelu swojej witryny stagingowej (lub swojej aktywnej witryny, jeśli wolisz).

W tym samouczku użyję wtyczki VRTs, ponieważ jest przyjazna dla początkujących i łatwa w użyciu do testowania regresji wizualnej. Niezależnie od tego, czy jest to przesunięty układ, brakujący przycisk, czy uszkodzony element po aktualizacji, VRTs pomaga go wcześnie wykryć.

Oto jak to działa: Wtyczka wykonuje zrzuty ekranu wybranych stron. Następnie możesz ręcznie wywołać porównania lub zaplanować ich automatyczne uruchamianie po wprowadzeniu zmian w witrynie, takich jak aktualizacja wtyczki lub dostosowanie motywu.

Następnie wtyczka porównuje zrzuty ekranu „przed” i „po” obok siebie i podświetla wszelkie różnice wizualne.

Zamiast ręcznie sprawdzać każdą stronę, otrzymujesz szybki raport wizualny pokazujący, co się zmieniło i czy coś wygląda nie tak.

Aby zainstalować wtyczkę, najpierw musisz odwiedzić stronę internetową VRTs i zarejestrować się w planie, klikając przycisk „Rozpocznij za darmo”.

Następnie możesz wybrać jeden z planów.

W momencie pisania tego tekstu darmowy plan pozwala na testowanie do 3 stron dziennie na jednym domen i planowanie codziennych testów. Płatne plany pozwalają na testowanie większej liczby stron, przeprowadzanie testów ręcznych i automatyczne przeprowadzanie testów regresji wizualnej po aktualizacjach rdzenia WordPress, wtyczek i motywów.

Po prostu kliknij „Kup teraz” lub „Zainstaluj teraz” pod planem, którego chcesz użyć.

Następnie postępuj zgodnie z instrukcjami, aby zarejestrować konto na stronie internetowej VRT i dodać dane dotyczące płatności.

Po ukończeniu rejestracji trafisz na pulpit VRTs, gdzie możesz pobrać wtyczkę jako plik .zip.

Następnie po prostu przejdź do strony Wtyczki » Dodaj wtyczkę i kliknij przycisk „Prześlij wtyczkę”. Stąd możesz wybrać pobrany właśnie plik .zip wtyczki VRTs.

Pamiętaj, aby aktywować wtyczkę po jej zainstalowaniu. Pełne szczegóły znajdziesz w naszym przewodniku jak zainstalować wtyczkę WordPress.

Krok 2: Konfiguracja ustawień wtyczki VRTs

Po aktywacji wtyczki nadszedł czas, aby zdecydować, kiedy mają być uruchamiane testy regresji wizualnej.

Przejdź do VRTs » Ustawienia w swoim menu administracyjnym WordPress.

Na stronie ustawień przewiń w dół do sekcji „Wyzwalacze”. Tutaj informujesz wtyczkę, kiedy ma automatycznie robić i porównywać migawki.

Oto dostępne opcje:

• Uruchamiaj testy co 24 godziny (bezpłatnie) – Jest to domyślne ustawienie. VRT automatycznie sprawdzą wybrane posty lub strony raz dziennie pod kątem zmian wizualnych.
• Uruchamiaj testy po aktualizacjach WordPress i wtyczek (Pro) – Świetne do wykrywania problemów z układem spowodowanych aktualizacjami, natychmiast po ich wystąpieniu.
• Uruchamiaj testy z ulubionymi aplikacjami (Pro) – Połącz VRT z zewnętrznymi narzędziami lub przepływami pracy za pomocą webhooków.
• Uruchamiaj testy na żądanie (Pro) – Ręcznie uruchamiaj testy, kiedy tylko ich potrzebujesz, bezpośrednio z pulpitu WordPress.

Po wybraniu wyzwalacza, który pasuje do Twojego przepływu pracy (lub Twojej licencji), po prostu kliknij przycisk „Zapisz zmiany” u dołu strony.

Krok 3: Dodaj nowe strony lub wpisy do testowania

Po skonfigurowaniu ustawień wtyczki nadszedł czas, aby wybrać, które strony lub wpisy chcesz uwzględnić w swoich testach regresji wizualnej.

Przełączmy się na zakładkę „Testy”, gdzie będziesz zarządzać i uruchamiać swoje testy wizualne. Stąd możesz kliknąć przycisk „Dodaj nowy”. Pozwoli to wybrać posty lub strony do przetestowania.

W wyświetlonym oknie podręcznym wybierz posty lub strony, które chcesz uwzględnić w testowaniu regresji wizualnej.

Następnie kliknij „Dodaj nowy test”, aby potwierdzić swoje wybory.

Wtyczka VRTs wykona początkowy zrzut ekranu każdej wybranej strony. Działa to jako Twoja linia bazowa – zasadniczo wersja „przed” tego, jak Twoje wpisy lub strony wyglądają teraz.

Po skonfigurowaniu testu zobaczysz instrukcję odświeżenia strony, aby załadować początkową migawkę. Odśwież.

Po odświeżeniu zobaczysz link do migawki dla strony lub posta, który dodałeś do testowania.

Zobaczysz również, że „Status testu” jest automatycznie ustawiony na „Zaplanowany” na następny dzień. Dzieje się tak, ponieważ darmowa wersja VRT uruchamia testy w 24-godzinnym harmonogramie.

Możesz kliknąć link „Wyświetl migawkę”, aby sprawdzić początkowy zrzut ekranu.

Otworzy się w nowej karcie w ten sposób:

Jeśli korzystasz z wersji darmowej, Twój test został zaplanowany na następny dzień. Możesz kontynuować pracę nad swoją witryną i wrócić za 24 godziny, aby zobaczyć raport porównawczy.

Ale jeśli masz wersję Pro, możesz uruchomić test natychmiast, aby od razu wykryć problemy.

Krok 4: Sprawdź różnice wizualne

Po zakończeniu testu i wykryciu zmian wizualnych zobaczysz powiadomienie w zakładce VRTs » Runs.

Na ekranie Runs możesz najechać kursorem na przebieg z wykrytymi zmianami.

Następnie kliknij link „Pokaż szczegóły”, gdy się pojawi.

Na następnym ekranie zobaczysz porównanie swojej strony obok siebie, pokazujące wersje przed i po.

Wtyczka automatycznie podświetla różnice wizualne, dzięki czemu możesz szybko wykryć problemy, takie jak:

• Przesunięcia układu i niedopasowane elementy: Jeśli Twój projekt zmieni się po aktualizacji wtyczki lub zmianie motywu, na przykład przyciski zmienią położenie lub tekst będzie się przesuwał, VRTs to zaznaczy.
• Brakujące lub uszkodzone elementy: Niezależnie od tego, czy jest to brakujący obraz, przycisk CTA, czy osadzony formularz, VRTs ułatwia wykrycie wszystkiego, co niespodziewanie znika.
• Dynamic Content (False Positives): Czasami narzędzie może oznaczyć zmianę, która nie jest błędem. Często dzieje się tak w przypadku sliderów obrazów, reklam lub rotujących opinii klientów, które zmieniają się przy każdym ładowaniu strony.
• Nieoczekiwane zmiany treści: Wtyczka powiadomi Cię również o zmianach w tekście, linkach lub obrazach, dzięki czemu możesz wykryć nieautoryzowane edycje lub błędy publikacji, zanim zrobią to użytkownicy.

Możesz użyć uchwytu przeciągania na środku ekranu, aby przesuwać między starą i nową wersją i wizualnie potwierdzić dokładne zmiany.

Jeśli zmiana była zamierzona (jak planowana redesign strony głównej), możesz po prostu zatwierdzić nowy zrzut ekranu, aby wtyczka wiedziała, że ma go używać jako nowej podstawy na przyszłość.

Krok 5: Przejrzyj i podejmij działania

Po przeprowadzeniu testu regresji wizualnej podejmij działania w oparciu o wyniki.

Jedna rzecz, którą warto wiedzieć przed rozpoczęciem przeglądania alertów: nie każda oznaczona różnica jest faktycznie błędem. Czasami strona faktycznie zmienia się przy każdej wizycie, a test również oznaczy te zmiany.

Nazywa się to fałszywymi pozytywami i jest to najczęstszy powód, dla którego nowi użytkownicy frustrują się testowaniem regresji wizualnej. Ponieważ narzędzie zasadniczo sprawdza, czy Różnica Pikseli > 0%, każdy dynamiczny element, który przesuwa piksele, wywoła alert.

Oto najczęstsze wyzwalacze fałszywych pozytywów na stronach WordPress:

• Suwaki i animacje(karuzele obrazów, animacje hero, efekty najechania)
• Dane na żywo(najnowsze wpisy, liczba komentarzy, liczniki stanów magazynowych WooCommerce)
• Umiejscowienia reklam i trackeryktóre ładują różne treści przy każdej wizycie
• Banery zgody na pliki cookie lub RODOktóre pojawiają się nieprzewidywalnie
• Obrazy ładowane leniwiektóre mogły zostać załadowane lub nie podczas przechwytywania zrzutu ekranu
• Czcionkiktóre renderują się nieco inaczej, zanim zakończą ładowanie

Gdy zobaczysz jeden z tych oznaczonych elementów, otwórz widok porównania w VRT i użyj opcji „ukryj elementy”, aby wykluczyć ten region z przyszłych testów. Następnie będziesz widzieć tylko rzeczywiste zmiany projektu, które warto przejrzeć — co jest dokładnie tym, czego chcesz.

Oto, co możesz zrobić dalej:

• Ręcznie edytuj stronę: Jeśli zmiany są niewielkie, możesz naprawić problemy bezpośrednio, edytując stronę, na przykład dostosowując układ, przenosząc elementy lub przywracając brakujące funkcje.
• Przywróć kopię zapasową: Jeśli zmiany w układzie są niewielkie, często można je cofnąć, przywracając stronę do poprzedniej wersji. Jeśli duża aktualizacja zepsuła całą witrynę, być może będziesz musiał przywrócić niedawną kopię zapasową witryny. Pamiętaj jednak, że spowoduje to przywrócenie wszystkich danych Twojej witryny, potencjalnie usuwając ostatnie sprzedaże lub komentarze.

Niemniej jednak pamiętaj, że jeśli naprawisz problem, a test nadal pokazuje błąd, upewnij się, że wyczyściłeś pamięć podręczną WordPress, a także wszelkie pamięci podręczne CDN lub hostingu. W ten sposób narzędzie zobaczy najnowszą wersję Twojej witryny.

FAQ: Jak przeprowadzić testowanie regresji wizualnej w WordPressie

Jeśli dopiero zaczynasz przygodę z testowaniem regresji wizualnej, nie jesteś sam. Oto kilka szybkich odpowiedzi na często zadawane pytania od użytkowników i deweloperów WordPress.

Jaka jest różnica między testowaniem migawek a testowaniem regresji wizualnej?

Testowanie migawkowe to termin deweloperski, który zazwyczaj odnosi się do sprawdzania ukrytego kodu Twojej witryny, aby zobaczyć, czy pasuje do poprzedniej wersji, zamiast tego, jak wygląda na ekranie.

Testowanie regresji wizualnej sprawdza, jak Twoja witryna faktycznie wygląda dla ludzkiego oka, porównując zrzuty ekranu, aby wykryć zmiany w układzie lub projekcie.

Jakie jest najlepsze narzędzie do testowania regresji wizualnej w WordPressie?

Najłatwiejszą opcją jest wtyczka VRTs – Visual Regression Tests. Jest przyjazna dla początkujących, działa w Twoim panelu administracyjnym i nie wymaga żadnego kodowania. Bezpłatna wersja działa dobrze dla większości użytkowników.

Jak mogę przeprowadzić testowanie regresji ręcznie?

Testowanie ręczne oznacza klikanie przez Twoje ważne strony po aktualizacji, aby upewnić się, że wszystko nadal wygląda poprawnie. Będziesz chciał sprawdzić strony takie jak strona główna, strona kontaktowa, wpisy na blogu oraz wszelkie niestandardowe układy lub kroki realizacji zakupu. Działa, ale może zająć dużo czasu.

Jak przyspieszyć testowanie regresji?

Zautomatyzuj to. Wtyczka taka jak VRTs – Visual Regression Tests może przechwytywać zrzuty ekranu Twoich kluczowych stron i porównywać je za Ciebie, dzięki czemu nie musisz sprawdzać wszystkiego ręcznie.
Korzystanie z witryny stagingowej pomaga również wykryć problemy przed aktualizacją Twojej aktywnej witryny.

Jakie są najlepsze sposoby na testowanie projektów stron internetowych WordPress?

Narzędzie do wizualnej regresji to jeden z najprostszych sposobów na wykrycie zmian w układzie po aktualizacji. Pomaga również podglądać aktualizacje na witrynie stagingowej przed ich publikacją.

Pamiętaj, aby sprawdzić, jak Twoje strony wyglądają na komputerze, tablecie i telefonie komórkowym. Narzędzia deweloperskie przeglądarki ułatwiają szybkie testowanie różnych rozmiarów ekranu. I wreszcie, uzyskanie opinii od prawdziwych użytkowników lub klientów może pomóc Ci wykryć szczegóły, które możesz przeoczyć.

Kiedy powinienem uruchamiać testy regresji wizualnej na mojej witrynie WordPress?

Najlepsze czasy na przeprowadzenie testu regresji wizualnej to tuż przed i tuż po każdej zmianie, która może wpłynąć na projekt Twojej witryny. Obejmuje to aktualizacje rdzenia WordPress, aktualizacje wtyczek i motywów, edycje niestandardowego CSS oraz dodawanie nowych bloków lub elementów kreatora stron.

Jeśli nie wprowadzasz częstych zmian, wystarczą zaplanowane codzienne testy, aby wykryć powolne problemy, takie jak aktualizacja wtyczki, która potajemnie zepsuła układ, którego nie pomyślałeś, aby sprawdzić.

Co powoduje fałszywe pozytywy w testowaniu regresji wizualnej?

Fałszywe pozytywy występują, gdy test oznacza różnicę, która w rzeczywistości nie jest błędem. Najczęstsze przyczyny w witrynach WordPress to suwaki, animacje, umiejscowienie reklam, banery dotyczące plików cookie, obrazy ładowane leniwie i dane na żywo, takie jak najnowsze posty lub liczniki stanów magazynowych WooCommerce.

W VRT możesz ukryć te elementy, aby zostały wykluczone z porównania, co oznacza, że przyszłe testy będą oznaczały tylko rzeczywiste zmiany projektu.

Następne kroki: Ulepsz projekt swojej strony WordPress

Mam nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak przeprowadzać testy regresji wizualnej w WordPress. Jeśli chcesz nadal ulepszać swoją witrynę, możesz również polubić:

• Przewodnik dla początkujących, jak przeprojektować witrynę WordPress
• Kluczowe elementy projektowe skutecznej strony internetowej WordPress
• Jak uzyskać opinie na temat projektu strony internetowej w WordPress
• Jak poprawić doświadczenie użytkownika w WordPress
• Pytania dotyczące opinii o doświadczeniu użytkownika, które należy zadać odwiedzającym stronę internetową

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.