Skip links

Applitools – Visual Regression Testing pierwsze narzędzie

W dzisiejszym wpisie chcę rozpocząć serię narzędzi, które pomagają w znajdywaniu regresji w obszarze wizualnym naszej aplikacji www. Czy zdarzyło się wam mieć sytuacje, że określony element źle wyświetlił się na produkcji? Im większymi aplikacjami się zajmujemy to takie sytuacje stają się częstsze. Przedstawię wam Applitools pierwszą aplikację z cyklu Visual Regression Testing.

Czy testy manualne nie wystarczą?

Nasze aplikacje www składają się często ze znaczącej liczby elementów tych, które są ważne dla biznesu. Narzędzia do regresji wizualnej mogą wspomóc testerów w procesie testowania. Trzeba również pamiętać, że te narzędzia porównują piksel po pikselu stronę, więc niektóre przesunięcia elementu mogą być trudne do zauważenia przez testera. Zauważmy również, że gdy zmieniamy znacznie layout strony to wyzwanie spada po części na barki testera. Narzędzie tego typu może mu pomóc. Testerzy mogą skupić się na bardziej przyjemnych i kreatywnych testach eksploracyjnych niż testy wizualnej regresji.

 

Applitools-Czym jest?

Jest to aplikacja, która pozwala nam wychwytywać regresję naszej strony dzięki ulepszeniu naszych testów funkcjonalnych w Selenium WebDriverze. Praktycznie w dowolnej technologii (Java, Appium, Python, Ruby, .NET, JavaScript). Oczywiście możemy sami tworzyć wiele asercji i porównywać jak nasza strona docelowa powinna wyglądać. Jednak w narzędziach do visual regression np. takim jak Applitools szybciej zrobimy to, zamiast tworzyć koło na nowo. Applitools (jako firma) wspiera wiele wydarzeń związanych z Selenium np. SeleniumConf.

Zalety

  • Możliwość integracji z praktycznie wszystkimi technologiami Integracja naszych dotychczasowych testów raz z Applitolsem zajmuje nie wiele czasu
  • Możliwość dokonywania screenshotów całych stron, nawet jeżeli strona zawiera bardzo długie artykuły, wpisy.
  • Szukanie wizualnej regresji w pomiędzy przeglądarkami.

Wady

  • Cena-Applitools jest dość, drogi, ale pozwala wykonać 100 testów w miesiącu za darmo oraz wspiera aplikacje Open Source.
  • Również wspierają startupy, więc posiadacie lub pracujecie w mniejszej firmie warto odezwać się do nich jest szansa, że będziecie mogli korzystać za darmo. Jest to jego największa wada.
  • W przyszłych częściach tej serii pokażę darmowe utrzymywane alternatywy.

Zaczynamy

Napiszemy prosty test w SpecFlow oraz Selenium WebDriver, który pokażę wam możliwości Applitoolsa.

Czego potrzebujemy?

  • Standardowo Visual Studio 2017
  • Kod znajdziecie na GitHubie link. Jedyną rzeczą, którą trzeba do niego dodać jest secret key z Applitools’a.
  • Założyć konto na applitools.com.

Zaczynamy od rejestracji na stronie applitools.com. Po rejstracji i zalogowaniu naszym oczom powinien ukazać się taki ekran

applitools
Dashboard Applitools

Przechodzimy do Visual Studio 2017

Tworzymy projekt typu Class Library. Następnie dodajemy potrzebne pakiety do NuGet’a.

  • SpecFlow
  • NUnit
  • Eyes
  • Selenium WebDriver
  • Chrome Driver

 

Następnie przechodzimy do naszego scenariusza. Scenariusz jest prosty składa się tylko z jednego kroku. Nie chce zaciemniać więc przykład jest zwięzły.

applitools
Scenariusz CheckVisualRegression.feature

Scenariusz polega na wejściu na stronę bloga. Przyjmujemy, że mamy dwa środowiska naszego bloga (Aby jak najbardziej odzwierciedlić komercyjną sytuację). Są to dwa testowe blogi, które mają wgrany ten sam motyw.

TestSettings wraz z dwoma URLami staging oraz production

 

SeleniumHooks wraz z metodami BeforeScenario oraz AfterScenario.

SeleniumHooks zawiera konstruktor przez, który wstrzykujemy obiekt typu IObjectContainer. Następnie korzystamy z metody BeforeScenario(), która zawiera ApiKey do Applitoolsa, który możemy wziąć z ustawień naszego konta.

My API Key

następnię definiujemy obiekty typu Eyes oraz IWebDriver do kontenera. W metodzie AfterScenario() usuwamy obiekty po scenariuszu.

Przechodzimy do klasy VisualRegressionSteps.cs

Klasa VisualRegressionSteps

Klasa ma zdefiniowane pole dla IWebDrivera, które pobiera obiekt z kontenera. W konstruktor wstrzykujemy obiekt typu IObjectContainer aby mieć dostęp do zarejestrowanych obiektów.

Metoda GivenIEnterToBlog(string envType)

Wyrażenie regularne dla metody GivenIEnterToBlog

Nad metodą korzystamy z zapisu (staging|production) to pozwala uniknąć błędu, jaki by mógł się zdarzyć poprzez np. pomylenie nazwy czy wpisaniu danej nazwy ze spacją. Następnie przechodzimy do  skorzystania z metody Eyes.Open jest to metoda, która przyjmuje obiekt Drivera, jaki mamy, nazwę testu, oraz to, w jakiej rozdzielczości chcemy zrobić nasz test.

Kolejnym krokiem jest sprawdzenie jakie środowisko jest obecnie w testach i ten adres przypisujemy do Driver.Url.

Metoda Eyes.CheckWindow(„Name of snapshot”) – dokonuje screenshota z określoną nazwą całego okna aplikacji, którą testujemy.

Eyes.CheckElement(By) – pozwala zrobić snapshot elementu z określonym selectorem. Pozwala nam to na wzięcie pod uwagę najważniejszy elementów i dzięki temu możemy szybko wyłapać ew. regresję.

Po dodaniu tego kroku przechodzimy do uruchomienia testów, a w zasadzie dwóch testów, bo korzystamy z Scenario Outline: i Examples:, które pozwalają przekazywać kolejne parametry i tworzyć kolejny test case.

Po uruchomieniu widzimy, że nasze testy zakończyły się błędem. Jest to spowodowane tym, że obie strony różnią się wizualnie.

Błąd zawiera link do testu.

Jak to możemy sprawdzić?

Przechodzimy do naszego dashboardu Applitoolsa. Lub poprzez link, który dostaliśmy w błędzie naszego testu.

Applitools dashboard

Aplikacja prezentuje nam ekran wraz z ostatnio uruchomionymi testami. W naszym przypadku są to dwa testy. Na fioletowo mamy zaznaczone różnice, które applitools znalazł pomiędzy obrazami. Oczywiście sami możemy definiować, jaką chcemy tolerancję procentową różnic akceptować.

Po wejściu w test mamy kilka ciekawych możliwości:

 

 

Po kliknięciu

Opcja pozwalająca podkreślić różnice wizualne.

 

Widzimy jeszcze bardziej podkreślone, które elementy różnią się pomiędzy stronami.

Widzimy również od razu, na jakim systemie został przeprowadzony test.

Ta opcja pozwala nam porównać różnice (jeżeli jakieś są) pomiędzy screenshotami tych samych elementów, ale pomiędzy innymi wersjami strony.

Przykład:

Dzięki temu od razu widzimy różnice pomiędzy stanami wizualnymi obu tych elementów.

Po wykonanym teście stan był „Unresolved” jednak były podkreślone różnice pomiędzy screenshotami. Oprócz automatycznego sprawdzania pomiędzy stronami. Sami dokonujemy approve lub nie dla danej różnicy wyglądu. Pozwala to potwierdzić czy aby na pewno zmiana wizualna, która się zadziała  jest regresją lub błędem.

 

Jakie zastosowania mogą być dla Visual Regression Testing?

  • Gdy chcemy porównać wygląd pomiędzy branchami. Pozwoli to uniknąć błędu takie jak zniknięcia jakiegoś przycisku.
  • Możliwość utworzenia testów, które będą sprawdzały najważniejsze elementy pomiędzy stagingiem oraz produkcją, czy aby wszystkie, które mają być na miejscu.
  • Również Applitools pozwala tworzyć screenshot całego ekranu, gdy skorzystam z opcji ForceFullScreenshot.

 

Podsumowanie

W dzisiejszym wpisie pokazałem wam, czym jest Applitools. Ten wpis ma rozpocząć serie pokazania kilku narzędzi tego typu. Jest to kolejny etap, który może pomóc nam wychwycić defekt przed klientem.

Zachęcam do spróbowania, również możliwość jest zintegrowania Applitoolsa z naszym procesem budowania aplikacji. W następnym wpisie opowiem o BackStopJS jednym z najlepiej rozwijanych frameworków do regresji wyglądu strony (visual regression testing).