sobota, 27 maja 2017

Backstopjs - testy regresyjne dla front-endu

Ile razy podczas tworzenia stron internetowych, by艂e艣 w sytuacji, gdy poprawki wprowadzone w jednym miejscu, pojawia艂y si臋 niechc膮cy w innym? Je艣li edytujesz elementy i klasy globalne, do takiej sytuacji dochodzi do艣膰 cz臋sto.

Gruntowne testowanie front-endu jest m臋cz膮ce i wymaga otwarcia kilkudziesi臋ciu podstron oraz ich wizualnego przejrzenia na r贸偶nych rozdzielczo艣ciach. Dodatkowo, cz艂owiek nie jest do艣膰 dobry, je艣li chodzi o wychwytywanie niewielkich zmian, kt贸re mog膮 pojawi膰 si臋, na przyk艂ad po zmianie margines贸w.

"Czy偶 nie by艂oby cudownie, gdyby istnia艂a mo偶liwo艣膰 przetestowania ca艂ej strony lub aplikacji, bez konieczno艣ci 偶mudnego przegl膮dania ka偶dej podstrony?"
Problem ten jest na tyle denerwuj膮cy, 偶e dobrzy deweloperzy znale藕li rozwi膮zanie - testy regresyjne. BackstopJS to cudowne narz臋dzie, kt贸re dzia艂a na bardzo prostej zasadzie.

A - Tworzenie zrzut贸w ekranu z wybranych stron (mo偶esz wybra膰 te偶, jakie elementy maj膮 by膰 brane pod uwag臋)

B - Tworzenie zrzut贸w po Twoich zmianach

C - Pokazanie zmian w formie test贸w zielone/czerwone i zmian naniesionych na zrzuty ekranu.

D - Gdy nie ma 偶adnych niepo偶膮danych zmian, mo偶esz zatwierdzi膰 zmiany i b臋d膮 one brane pod uwag臋 jako referencja do nast臋pnego testu.

Jak korzysta膰 z backstopJS?

Aplikacja jest bardzo prosta w u偶yciu. Instalujesz j膮 globalnie za pomoc膮 NPM.

Polecenie backstop genConfig generuje pliki z testami i konfiguracj膮. Testy warto doda膰 do .gitignore, poniewa偶 z czasem zaczynaj膮 zajmowa膰 coraz wi臋cej miejsca.

backstop reference generuje pliki referencyjne.
backstop test tworzy testy i pokazuje ich wynik w konsoli oraz w przegl膮darce. Mo偶esz zmieni膰 spos贸b wy艣wietlania test贸w czy ich pr贸g dok艂adno艣ci.
backstop approve zatwierdza testy jako pliki referencyjne.

Ustawienia zmieniasz w pliku konfiguracyjnym - w najprostszym przypadku, b臋d膮 si臋 one ogranicza艂y do dodawania kolejnych podstron, na kt贸rych maj膮 by膰 przeprowadzane teksty. Mo偶na to robi膰, wraz z tworzeniem strony WWW, ale nast臋pnie konieczne jest dodanie referencji.

Dok艂adn膮 instrukcj臋 u偶ywania backstopJS znajdziesz na stronie projektu - https://github.com/garris/BackstopJS.

Bardzo polecam!!!

Brak komentarzy:

Prze艣lij komentarz