W zeszłym tygodniu zadzwonił do mnie w panice znajomy, który zarządza wieloma witrynami WordPress. Rutynowa aktualizacja pluginu zepsuła menu nawigacyjne jego klienta, ale nie zauważył tego, aż klienci zaczęli narzekać.
Jest to powszechny problem, który widziałem niezliczoną ilość razy i właśnie dlatego testowanie regresji wizualnej jest tak ważne dla właścicieli stron internetowych WordPress.
Testowanie regresji wizualnej może brzmieć skomplikowanie. Jest to jednak proste rozwiązanie, które może zaoszczędzić godziny ręcznego sprawdzania i zapobiec krępującym problemom z układem.
Zazwyczaj działa to poprzez automatyczne porównywanie zrzutów ekranu stron przed i po aktualizacji. Pomaga to wykryć nawet najmniejsze zmiany wizualne, które mogą zepsuć wygląd Twojej witryny. 🔍
W tym przewodniku pokażę Ci, jak przeprowadzić testy regresji wizualnej na Twojej stronie WordPress. Po przetestowaniu wielu narzędzi i metod, znalazłem najbardziej niezawodne rozwiązanie, które nie wymaga żadnej wiedzy programistycznej ani technicznej.
Czym jest testowanie regresji wizualnej i dlaczego jest ważne? 🤔
Za każdym razem, gdy aktualizujesz swoją witrynę – czy to aktualizacja rdzenia WordPress, nowy wtyczka, zmiana motywu, czy tylko drobna poprawka kodu – istnieje szansa, że coś na froncie może się przesunąć.
Na przykład przycisk może zniknąć, układ może się zepsuć, lub obraz produktu może przestać się poprawnie ł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 projektu.
Do tego czasu szkody dla doświadczenia użytkownika Twojej witryny mogą już być wyrządzone.
W tym właśnie pomaga testowanie regresji wizualnej.
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 witrynie stagingowej (co zalecamy), możesz bezpiecznie wprowadzać aktualizacje i przeprowadzać porównania, aby wykryć problemy wizualne, zanim cokolwiek trafi na żywo.
Dobra wiadomość? Nie musisz tego robić ręcznie.
Dzięki narzędziom do testowania regresji wizualnej, takim jak VRTs, Percy lub BackstopJS, możesz zautomatyzować porównywanie zrzutów ekranu i sprawdzić, jak Twoja witryna wygląda na różnych rozmiarach ekranu — pomagając wykryć problemy z układem na komputerach stacjonarnych, tabletach i urządzeniach mobilnych.
Dlaczego jest to ważne dla użytkowników WordPressa?
Jeśli zarządzasz stroną WordPress, testowanie regresji wizualnej to oszczędzająca czas siatka bezpieczeństwa. Zamiast klikać przez każdą stronę po aktualizacji, to narzędzie daje Ci wizualny raport tego, co się zmieniło – i czy jest to coś, co musisz naprawić.
Jest to szczególnie pomocne w wielu scenariuszach, takich jak agencje aktualizujące wiele stron WordPress, freelancerzy zarządzający stronami klientów lub właściciele sklepów internetowych, którzy chcą mieć pewność, że strony produktów i płatności pozostaną nienaruszone.
Krótko mówiąc, testowanie regresji wizualnej pomaga uniknąć frustrujących niespodzianek, oszczędza czas i zapewnia płynne działanie Twojej witryny WordPress.
Mając to na uwadze, podzielę się tym, jak łatwo przeprowadzić testowanie regresji wizualnej w WordPressie. Oto szybki przegląd wszystkich kroków, które omówię w tym przewodniku:
- Krok 1: Zainstaluj i aktywuj wtyczkę do testowania regresji wizualnej
- Krok 2: Konfiguracja ustawień wtyczki VRTs
- Krok 3: Dodaj nowe strony lub wpisy do testowania
- Krok 4: Sprawdź różnice wizualne
- Krok 5: Przejrzyj i podejmij działania
- FAQ dotyczące przeprowadzania testów regresji wizualnej w WordPress
🧑💻 Wskazówka Pro: Przed uruchomieniem testów regresji wizualnej lub wprowadzeniem zmian projektowych, zdecydowanie zalecam użycie strony stagingowej.
Strona tymczasowa to prywatna kopia Twojej aktywnej strony internetowej, na której możesz bezpiecznie testować aktualizacje, zmiany w wtyczkach lub modyfikacje projektu – bez wpływu na użytkowników. Pomaga wykryć problemy z układem, brakujące przyciski lub błędy wizualne zanim zostaną opublikowane.
Nie wiesz, jak go skonfigurować? Po prostu zapoznaj się z naszym przewodnikiem krok po kroku na temat tworzenia witryny stagingowej WordPress, aby uzyskać wszystkie szczegóły.
Krok 1: Zainstaluj i aktywuj wtyczkę do testowania regresji wizualnej
W tym samouczku użyję pluginu VRTs, ponieważ jest przyjazny dla początkujących i bardzo łatwy 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 robi zrzuty ekranu wybranych przez Ciebie stron. Następnie możesz wywołać porównania ręcznie lub zaplanować ich automatyczne uruchomienie po wprowadzeniu zmian na stronie, 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ę, musisz najpierw odwiedzić stronę internetową VRTs i zarejestrować się w planie, klikając przycisk „Rozpocznij za darmo”.
Następnie możesz wybrać jeden z planów. Darmowy plan pozwoli Ci przetestować do 3 stron dziennie na jednym domen i zaplanować codzienne testy.
Z drugiej strony, płatne plany pozwolą Ci przetestować większą liczbę stron, przeprowadzić testy ręczne i automatycznie uruchomić testy 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 zakończeniu płatności znajdziesz się na pulpicie nawigacyjnym VRT, gdzie możesz pobrać wtyczkę jako plik .zip.
Następnie po prostu przejdź do Pluginy » Dodaj plugin i kliknij przycisk „Prześlij plugin”. Stąd możesz wybrać plik .zip pluginu VRTs, który właśnie pobrałeś.
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 skonfigurować, kiedy powinny być uruchamiane testy regresji wizualnej.
Przejdź do VRT » Ustawienia w swoim menu administracyjnym WordPress.
Po wejściu możesz przewinąć 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 panelu administracyjnego 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.
Przejdźmy teraz do zakładki „Testy”, gdzie będziesz zarządzać i uruchamiać swoje testy wizualne.
Stąd możesz kliknąć przycisk „Dodaj nowy”. Pozwoli Ci to wybrać wpisy lub strony do przetestowania.
W wyświetlonym oknie dialogowym musisz wybrać strony lub posty, na których chcesz przeprowadzić testy 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 w celu załadowania początkowej migawki. Zrób to.
Po wykonaniu tej czynności znajdziesz link do zrzutu ekranu strony lub wpisu, 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:
Teraz możesz wprowadzić wszelkie potrzebne zmiany na swojej stronie. Następnie wróć jutro, aby przejrzeć porównanie i wykryć wszelkie nieoczekiwane problemy wizualne.
Krok 4: Sprawdź różnice wizualne
Po zakończeniu testu i wykryciu wszelkich błędów wizualnych, powinieneś zobaczyć powiadomienie w zakładce VRTs » Runs.
Po wejściu możesz najechać kursorem na uruchomienie z wykrytymi zmianami.
Następnie kliknij link „Pokaż szczegóły”, gdy się pojawi.
Na następnym ekranie zobaczysz porównanie strony obok siebie, pokazujące wersje przed i po.
Wtyczka automatycznie podświetla wizualne różnice, dzięki czemu możesz szybko zidentyfikować:
- 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ą swoje położenie lub tekst zacznie 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, VRT ułatwiają wykrycie wszystkiego, co niespodziewanie znika, co jest szczególnie przydatne w przypadku stron e-commerce lub stron docelowych.
- 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.
Krok 5: Przejrzyj i podejmij działania
Po przeprowadzeniu testu regresji wizualnej możesz podjąć działania na podstawie wyników. Oto, co możesz zrobić dalej:
- Ręczna edycja strony: Jeśli zmiany są niewielkie, możesz naprawić problemy bezpośrednio poprzez edycję strony, na przykład dostosowanie układu, przeniesienie elementów lub przywrócenie brakujących funkcji.
- Przywróć kopię zapasową: Jeśli zmiany są większe lub trudniejsze do naprawienia, możesz przywrócić stronę do poprzedniej wersji, korzystając z kopii zapasowej witryny lub historii wersji. Pomaga to uniknąć pozostawienia problemów na stronie.
✋ Potrzebujesz rekomendacji narzędzia do tworzenia kopii zapasowych? Duplicator to doskonały wybór. Jest łatwy w użyciu i pozwala sklonować Twoją witrynę WordPress za pomocą zaledwie kilku kliknięć.
Niektóre z naszych stron biznesowych obecnie korzystają z Duplicator do tworzenia kopii zapasowych i migracji stron, i gorąco polecam zapoznanie się z nią. Przeczytaj naszą pełną recenzję Duplicator, aby dowiedzieć się więcej!
FAQ dotyczące przeprowadzania testów regresji wizualnej w WordPress
Jeśli dopiero zaczynasz przygodę z testowaniem regresji wizualnej, nie jesteś sam. Oto kilka szybkich odpowiedzi na często zadawane pytania, które często słyszę od użytkowników i programistów WordPressa.
Jaka jest różnica między testowaniem migawek a testowaniem regresji wizualnej?
Testowanie migawek sprawdza, czy kod lub treść Twojej witryny pozostają takie same, trochę jak zapisywanie kopii zapasowej tego, jak rzeczy powinny wyglądać.
Testowanie regresji wizualnej z drugiej strony skupia się na wyglądzie Twojej witryny. Porównuje zrzuty ekranu przed i po aktualizacjach, aby wykryć zmiany w układzie, brakujące elementy lub błędy wizualne, których możesz od razu nie zauważyć.
Jakie jest najlepsze narzędzie do testowania regresji wizualnej w WordPressie?
Najłatwiejszą opcją jest plugin VRTs – Visual Regression Tests. Jest przyjazny dla początkujących, nie wymaga kodowania i działa bezpośrednio z Twojego panelu. Ponadto ma darmową wersję, która jest bardzo łatwa w użyciu.
Jak mogę przeprowadzić testowanie regresji ręcznie?
Ręczne testowanie regresji polega na przechodzeniu przez Twoją witrynę i sprawdzaniu kluczowych stron po wprowadzeniu zmian, takich jak instalacja nowego pluginu lub aktualizacja motywu.
Chcesz odwiedzić swoją stronę główną, stronę kontaktową, proces realizacji zakupu (jeśli go masz) i wszelkie niestandardowe układy, aby upewnić się, że wszystko nadal wygląda i działa tak, jak powinno. Działa, ale może być czasochłonne, jeśli zarządzasz dużą lub ruchliwą witryną.
Jak przyspieszyć testowanie regresji?
Najlepszym sposobem na oszczędność czasu jest jego automatyzacja. Użycie wtyczki takiej jak VRTs – Visual Regression Tests pozwala tworzyć migawki ważnych stron i szybko porównywać je po aktualizacji.
Nie ma potrzeby ręcznego klikania każdej strony – wtyczka wykonuje wizualne sprawdzenie za Ciebie.
Możesz również najpierw przetestować aktualizacje na stronie stagingowej, aby nie naprawiać problemów na żywej stronie.
Jakie są najlepsze sposoby na testowanie projektów stron internetowych WordPress?
Oto kilka wskazówek dotyczących testowania projektu WordPress:
- Użyj narzędzia do regresji wizualnej, takiego jak VRTs – Visual Regression Tests, aby wykrywać zmiany w projekcie.
- Podglądaj aktualizacje swojego motywu i wtyczek na stronie tymczasowej.
- Testuj na wielu rozmiarach ekranu (komputer, tablet i telefon komórkowy).
- Użyj narzędzi deweloperskich przeglądarki, aby sprawdzić, jak Twoja strona wygląda w różnych widokach.
- Poproś o opinię użytkowników lub klientów – często zauważają oni rzeczy, które Ty możesz przeoczyć.
Mam nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak przeprowadzać testy regresji wizualnej w WordPressie. Następnie możesz zapoznać się z naszym artykułem na temat tworzenia pokoi czatu w WordPressie dla użytkowników oraz najlepszymi pytaniami dotyczącymi opinii użytkowników, które należy zadać odwiedzającym witrynę.
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.
Masz pytanie lub sugestię? Zostaw komentarz, aby rozpocząć dyskusję.