Wizualne testy regresji dla aktualizacji TYPO3 z BackstopJS

Sprawdzanie witryny po aktualizacji TYPO3 jest jednym z najbardziej czasochłonnych i stresujących zadań w codziennej pracy integratora. Ręczne klikanie każdej strony, sprawdzanie każdego typu treści, sprawdzanie każdego widoku - to może szybko pochłonąć godziny, a nawet dni. A jednak pojawia się uczucie niepokoju: Czy naprawdę mam wszystko?

Dlatego wielu integratorów tworzy specjalne strony testowe, na których wszystkie elementy treści są zebrane razem - pragmatyczne podejście do sprawdzania najważniejszych komponentów na pierwszy rzut oka. Ale nawet to nie obejmuje wszystkich możliwości: różnych kontekstów szablonów, zagnieżdżonych struktur, specjalnych stron ze specjalnymi przypadkami. Strona testowa pokazuje, że element text-image działa - ale nie to, czy wygląda tak samo na każdej prawdziwej stronie.

W ciągu ostatnich kilku miesięcy opracowałem narzędzie, które łagodzi właśnie ten ból: Zautomatyzowany przepływ pracy do wizualnego testowania regresji z BackstopJS. To, co wcześniej było ręczne i podatne na błędy, teraz jest ustrukturyzowane i powtarzalne.

Tak, wiem: jeśli masz w pełni zautomatyzowany potok CI/CD z Playwright, Chromatic i Kubernetes, nie potrzebujesz tego. Każdy, kto od lat używa Percy lub Applitools w konfiguracji korporacyjnej, i tak tego nie potrzebuje. To narzędzie jest dla innych - freelancerów i małych agencji, które nie mają działu DevOps, ale nadal chcą testować profesjonalnie. Bez trzech tygodni konfiguracji.

Problem: Ręczne testowanie po aktualizacji jest nieefektywne

Każdy, kto przeprowadza aktualizacje TYPO3, zna ten proces: aktualizacja Composera, migracja bazy danych, czyszczenie pamięci podręcznej - to strona techniczna. Ale potem przychodzi czas na test warunków skrajnych: Czy strona nadal działa jak wcześniej?

Klasyczna metoda wygląda następująco: Klikasz po witrynie, otwierasz różne strony, sprawdzasz różne elementy treści, sprawdzasz różne szablony. W przypadku małej witryny z 20 stronami jest to nadal wykonalne. Przy 200 lub 500 stronach staje się to męką.

I nie chodzi tylko o oczywiste błędy, takie jak całkowicie zepsute układy. Paskudne błędy to te subtelne: Element treści, który przesunął się o dwa piksele w prawo. Brakujący odstęp między nagłówkiem a tekstem. Obraz, który nagle nie jest już wyrównany do lewej, ale wyśrodkowany.

Te wizualne odchylenia stają się widoczne dopiero po dokładnym przyjrzeniu się - lub gdy klient dzwoni i pyta: "Dlaczego to wygląda teraz inaczej?".

Wizualne testy regresji: ich idea

Wizualne testy regresji porównują zrzuty ekranu strony internetowej przed i po zmianie. Oprogramowanie wykonuje obrazy bieżącego stanu (odniesienia) i nowego stanu (test), nakłada je na siebie i zaznacza wszystkie różnice z dokładnością do pikseli.

Czego narzędzie nie może zrobić: Powiedzieć, czy zmiana jest zamierzona, czy jest błędem. Ale pokazuje każde odchylenie - i to ty decydujesz, czy jest w porządku, czy wymaga naprawy.

BackstopJS jest takim narzędziem do wizualnego testowania regresji. Jest ono oparte na Node.js, wykorzystuje przeglądarki headless (Chrome/Firefox) i automatycznie tworzy zrzuty ekranu w różnych rozdzielczościach. Wygenerowane raporty pokazują na pierwszy rzut oka, które strony uległy zmianie i jak wyglądają różnice.

Dlaczego stworzyłem własne narzędzie

BackstopJS jest potężny, ale nie od razu gotowy na większe witryny TYPO3. Ręczna konfiguracja może być uciążliwa, zwłaszcza w przypadku dziesiątek lub setek adresów URL.

Dlatego też opracowałem zautomatyzowany przepływ pracy, który rozwiązuje trzy kluczowe problemy:

1. automatyczne indeksowanie adresów URL

Zamiast ręcznie zbierać adresy URL, skrypt PHP przeszukuje witrynę i zapisuje wszystkie znalezione adresy URL do pliku CSV. Alternatywnie, od wersji 1.1.0 można również odczytać istniejącą mapę witryny XML - jest to znacznie szybsze niż pełne indeksowanie, ale oczywiście działa tylko wtedy, gdy witryna oferuje mapę witryny. Oszczędza to czas i gwarantuje, że żadna strona nie zostanie pominięta.

2. Przetwarzanie wsadowe dla dużych witryn

Tworzenie zrzutów ekranu 500 adresów URL jednocześnie przeciążyłoby system. Narzędzie automatycznie dzieli adresy URL na łatwe do zarządzania partie po 40 stron i przetwarza je jedna po drugiej.

3. ustrukturyzowane zarządzanie przepływem pracy

Narzędzie wiersza poleceń prowadzi użytkownika przez cały proces: aktywuje następną partię, tworzy zrzuty ekranu, porównuje wyniki, oznacza partię jako ukończoną. Pozwala to na śledzenie dużych projektów.

Mój typowy przepływ pracy dla aktualizacji TYPO3

Jak używam narzędzia w praktyce:

Krok 1: Utwórz lokalną kopię

Tworzę lokalną kopię projektu za pomocą DDEV, przeprowadzam aktualizację i upewniam się, że wszystko jest technicznie sprawne. Aktualizacje Composera, migracja bazy danych, dostosowywanie kodu - zwykłe kroki.

Krok 2: Indeksowanie strony

Używam skryptu crawlera do pobrania wszystkich adresów URL strony na żywo. Mam tutaj dwie opcje:

Opcja 1: Wykonanie pełnego indeksowania

ddev exec php crawler.php --url example.com>

Skrypt przeszukuje witrynę, automatycznie filtruje pliki inne niż HTML (PDF, obrazy) i zapisuje wszystkie znalezione strony do pliku CSV. Całość działa w czasie rzeczywistym - adresy URL są zapisywane natychmiast, nie ma problemów z pamięcią w przypadku dużych witryn.

Na koniec otrzymuję szczegółowy przegląd błędów: które strony zwracają 404, które 403, gdzie wystąpiły timeouty. To już może dać mi wstępne wskazówki, gdzie powinienem przyjrzeć się bliżej.

Opcja 2: Odczyt mapy witryny XML (od wersji 1.1.0)

ddev exec php crawler.php --sitemap example.com/sitemap.xml

Jeśli witryna oferuje mapę witryny XML, jest to znacznie szybsze. Skrypt odczytuje mapę witryny i wyodrębnia wszystkie adresy URL bezpośrednio - bez przechodzenia przez każdy pojedynczy link na każdej stronie. Działa to również z zagnieżdżonymi mapami witryn: Grupy map witryn są automatycznie rozpoznawane i przeglądane rekurencyjnie.

Krok 3: Generowanie scenariuszy testowych

Używam zebranych adresów URL do automatycznego tworzenia scenariuszy BackstopJS:

ddev exec php create-backstop-scenarios.php \\
  --test=http://example.ddev.site \\
  --reference=https://example.com

Skrypt podzieli adresy URL na partie i dla każdej z nich utworzy osobny plik scenariusza w folderze scenarios/pending/.

Krok 4: Testowanie partia po partii

Teraz następuje część interaktywna. Aktywuję pierwszą partię:

ddev exec php manage-scenarios.php next

Następnie tworzę referencyjne zrzuty ekranu z działającej witryny i testowe zrzuty ekranu z mojej lokalnej instancji:

backstop reference --config ./backstop.js
backstop test --config ./backstop.js

BackstopJS automatycznie otwiera raport HTML w przeglądarce. Tam mogę zobaczyć dla każdego adresu URL:

• Obraz przed (strona na żywo)
• Obraz po (instancja lokalna)
• Widok różnic z podświetlonymi różnicami

Przeglądam wyniki i decyduję dla każdego odchylenia: czy jest to błąd, czy zamierzona zmiana? Jeśli wszystko jest w porządku, oznaczam partię jako wykonaną:

ddev exec php manage-scenarios.php done

Następnie aktywuję kolejną partię i powtarzam proces. Przy 200 adresach URL oznacza to pięć przebiegów po 40 adresów URL - uporządkowanych i bez utraty przeglądu.

Co to narzędzie faktycznie dla mnie robi

Oszczędność czasu

Oczywiście w przypadku dużych witryn cały proces może zająć od jednej do dwóch godzin. Ale w porównaniu do ręcznego przeklikiwania się przez ponad 200 stron, to żart. A przede wszystkim: oprogramowanie niczego nie pomija. Koniec z "nie zauważyłem tego".

Bezpieczeństwo

Mam dobre przeczucia, gdy przesyłam testowaną stronę do środowiska produkcyjnego. Zrzuty ekranu pokazują czarno na białym: wygląda tak samo jak wcześniej. Albo pokazują, gdzie są problemy - wtedy mogę je naprawić przed uruchomieniem.

Dokumentacja

Zrzuty ekranu i raporty są również cenne później. Jeśli klient powie "To wyglądało inaczej wcześniej" kilka miesięcy po aktualizacji, mogę odkopać stare zrzuty ekranu i pokazać im: Nie, wyglądało dokładnie tak samo.

Gdzie narzędzie ma swoje ograniczenia

Chcę być szczery: Narzędzie nie jest doskonałe. Ma słabe punkty.

Zależność od DDEV

Przepływ pracy jest obecnie oparty na DDEV. Oznacza to, że potrzebujesz DDEV lub natywnego PHP w swoim systemie. Jeśli pracujesz z innymi konfiguracjami, będziesz musiał wprowadzić poprawki.

Wymagana ręczna interpretacja

Narzędzie pokazuje każde odchylenie - nawet te nieszkodliwe. Baner cookie, który zachowuje się inaczej przy pierwszym wywołaniu. Dynamiczny element, który ładuje losową zawartość. Znacznik czasu, który jest naturalnie inny. Musisz sam zdecydować, co jest istotne, a co nie.

Wysiłek związany z konfiguracją dla złożonych witryn

Jeśli witryna ma wiele dynamicznych elementów (obszary logowania, formularze, komponenty JavaScript), należy dostosować konfigurację BackstopJS. Ukryj niektóre selektory, zwiększ opóźnienia, zdefiniuj interakcje. To może być trudne.

Niemniej jednak: dla moich celów narzędzie działa na tyle dobrze, że używam go przy każdej większej aktualizacji TYPO3.

Dla kogo przeznaczone jest to narzędzie?

Jeśli zarządzasz witrynami TYPO3 i regularnie przeprowadzasz aktualizacje, warto przyjrzeć się temu narzędziu. Niezależnie od tego, czy jesteś freelancerem z mniejszymi projektami, czy pracujesz w agencji z większymi klientami - testowanie strukturalne zawsze pomaga.

Jest to szczególnie przydatne, jeśli

• zarządzasz witrynami z wieloma stronami i różnymi szablonami
• aktualizujesz kilka wersji TYPO3 (np. z 9 do 12)
• masz klientów, którzy zwracają szczególną uwagę na spójność wizualną
• chcesz sprofesjonalizować swoje procesy testowania

Wymagania techniczne są proste: powinieneś być w stanie pracować z DDEV, Docker i wierszem poleceń. BackstopJS można zainstalować za pomocą npm install -g backstopjs. Jeśli już pracujesz z tym stosem, krzywa uczenia się jest płaska.

Przetestuj narzędzie i przekaż opinię

Repozytorium jest publicznie dostępne na GitHub: https://github.com/wwagner-net/create-backstop-scenarios

Znajdziesz tam:

• Szczegółowe README ze wszystkimi poleceniami
• Instrukcje krok po kroku dotyczące rozpoczęcia pracy
• Wyjaśnienia wszystkich skryptów i opcji
• Przykłady dla różnych przypadków użycia

Narzędzie jest na licencji MIT, można go swobodnie używać, dostosowywać i rozszerzać.

Byłbym zachwycony, gdybyś je wypróbował i dał mi znać o swoich doświadczeniach:

• Czy przepływ pracy sprawdza się w Twoich projektach?
• Gdzie się zacina?
• Czego brakuje?
• Jakie ulepszenia chcielibyście zobaczyć?

Zachęcam do przesyłania opinii za pośrednictwem zgłoszenia na GitHub. Wciąż rozwijam to narzędzie i czekam na sugestie od użytkowników.

Podsumowanie: Nie jest to cudowne lekarstwo, ale przydatny pomocnik

Wizualne testy regresji nie zastąpią testów manualnych, ale uczynią je znacznie bardziej wydajnymi. Zamiast ślepo przeklikiwać się przez setki stron, otrzymujemy uporządkowany przegląd wszystkich zmian wizualnych.

Opracowane przeze mnie narzędzie sprawia, że BackstopJS jest zarządzalny dla większych projektów TYPO3. Automatyzuje indeksowanie, organizuje przetwarzanie w partiach i prowadzi użytkownika przez przepływ pracy w uporządkowany sposób.

Czy jest idealny? Nie. Czy ma słabe punkty? Tak. Ale pomaga mi spać spokojniej za każdym razem, gdy aktualizuję TYPO3 - ponieważ wiem, że nie przeoczyłem niczego ważnego.

Jeśli przetestujesz to narzędzie, daj mi znać, jak Ci poszło. Z niecierpliwością czekam na Twoje doświadczenia.