fbpx
,

5 nieoczywistych tricków w Selenium WebDriver

    Selenium WebDriver – popularne narzędzie wykorzystywane do automatyzacji testów. Często, gdy rozmawiam z innymi testerami lub osobami, które tworzą testy UI to opowiadam im o pomysłach, na ciekawe zastosowania Selenium WebDrivera. Przygotowałem dla Ciebie 5 nieoczywistych trików!

    Czego potrzebujemy, aby użyć tych trików?

    • Rider/Visual Studio – przykład będzie realizowany w C#, jednak te same koncepcje są możliwe do zaimplementowania również w innych językach programowania. Tych, które wspierają Selenium WebDriver.
    • Applitools konto – jeżeli w testach chcemy skorzystać z Visual Regression, to należy utworzyć konto w tej aplikacji. Konto jest darmowe, jednak zawiera limit na ilość sprawdzeń naszego interfejsu użytkownika, podczas testów.
    • Mailosaur konto – jeżeli w testach chcemy skorzystać z testowania treści maila, to należy utworzyć tu konto, które zawiera 14-dniowy trial, więc jeżeli chcemy sprawdzić, czy to rozwiązanie jest dla nas, w tym czasie zdążymy to zrobić.

    1) Tryb Headless

    Tryb headless jest opcją, która pozwala uruchamiać testy Selenium WebDriver bez graficznego interfejsu użytkownika przeglądarki. Ten tryb wspierany jest przez drivera dla Chrome i Firefox. W jednym z projektów, które realizowałem nie było zbyt dużego budżetu na serwer, dlatego też korzystałem z instancji, do której miałem dostęp tylko poprzez konsole. Instancja nie posiadała dużych zasobów, więc tryb graficzny znacznie obciążałby ten serwer. Dzięki trybie headless mogłem nadal uruchamiać testy UI dla ChromeDrivera. 

    Inną zaletą trybu headless jest to, że sam driver pobiera mniej pamięci niż standardowy chrome z gui. Czyli oprócz oszczędności pamięci poprzez używanie instancji bez trybu graficznego, mamy drugą oszczędność – ChromeDriver w tym trybie jest lżejszy.

    Headless – Zalety

    • Uruchamianie testów bez „wyskakujących okienek”.
    • Tworzenia zrzutu ekranu z testów, pomimo korzystania z ChromeDrivera bez trybu graficznego.
    • Możliwość uruchamiania testów na środowiskach bez interfejsu graficznego (środowisko może być słabsze, bo nie potrzebuje pamięci i procesora na elementy graficzne).

    Headless – Wady

    Możliwe różnice pomiędzy wersją okienkową Chrome, a trybem headless. Sam Simon Stewart (jeden z głównych rozwijających Selenium WebDriver) sugeruje, żeby podchodzić z rezerwą do trybu headless w tej prezentacji.


    2) Testowanie treści maila

    mailosaur
    źródło: ” https://mailosaur.com/blog/

    Czy kiedykolwiek miałeś wyzwanie testowania treści maila lub chciałeś przetestować funkcje resetowania hasła? 

    Jest to jak najbardziej możliwe do zrobienia. Z pomocą przychodzi Mailosaur. 

    Mailosaur jest aplikacją, która udostępnia api, jak również bibliotekę dla większości języków programowania. Pozwala ona obsługiwać skrzynkę mailową przypisaną do konta w aplikacji. 

    W prosty sposób można zintegrować Selenium WebDriver z Mailosaurem.

    Mailosaur – Zalety

    • Możliwość dostępu do dedykowanej poczty, do której możemy odwołać się przez API. 
    • Dostarczenia dedykowanej biblioteki dla większości popularnych języków wraz z dokumentacją.

    Mailosaur –  Wady

    • Rozwiązanie jest płatne. Mailosaur oferuje konto trial na 14 dni.

    3) Emulator mobile

    5 nieoczywistych tricków w Selenium WebDriver
    źródło: ” https://developers.google.com/web/tools/chrome-devtools/device-mode/

    Jest to opcja, o której nie wszyscy wiedzą, a pozwala  emulować wyświetlanie strony jako przeglądarka mobilna. Oczywiście jest to tryb, który wyświetla stronę w emulatorze, więc nie będzie to tak dobre rozwiązanie, jak natywne urządzenie. Jednak korzystałem z tego rozwiązania kilka razy i pozwoliło ono znaleźć ciekawe błędy. Jest też znacznie lepsze niż całkowite odpuszczenie testowania wyświetlania strony na urządzeniu mobilnym. Ma to oczywiście sens, jeżeli strona www, którą testujemy, jest responsywna. 

    Emulator mobile – zalety

    • Możliwość emulowania renderowania strony przez urządzenie mobilne.

    Emulator mobile – wady

    • Są sytuacje, gdzie tego typu emulator nie wystarcza i potrzebne jest urządzenie natywne.

    4) Visual Regression – Applitools

    5 nieoczywistych tricków w Selenium WebDriver
    źródło: ” https://applitools.com/

    Jedną z mniej oczywistych opcji jest skorzystanie z Visual Regression podczas testów w Selenium WebDriver.

    Visual Regression jest to metoda, która pozwala uniknąć wizualnych regresji aplikacji dzięki temu, że możemy dodać kod, który będzie robił zrzuty ekranu po każdej akcji i porównywał je z następnym uruchomieniem. Możliwe jest również porównywać zrobione zrzuty ekranu pomiędzy środowiskami. Możemy na przykład chcieć porównać naszą wersję produkcyjną z wersją deweloperską i sprawdzić, czy nowe funkcje nie wprowadziły regresji w jakimś miejscu. 

    Narzędziem do visual regression jest np. Applitools, który pozwala robić screenshoty podczas testów. W swojej aplikacji zawiera mechanizm porównywania tego z następnym uruchomieniem dzięki temu możemy widzieć, czy regresja wizualna nie nastąpiła.

    Gdy chcemy skorzystać z Applitools z .net corem na MacOS to potrzebujemy zainstalować paczkę mono-libgdiplus. Robimy to na MacOS:

     brew install mono-libgdiplus

     W innym wypadku test podczas uruchomienia będzie zwracał nam błąd z brakiem .dll, której Appitools potrzebuje do prawidłowego działania. 

    Zalety – Applitools

    • Możliwość integracji bezpośrednio z testami UI – łatwe wdrożenie.
    • Przyjazny interfejs, dodawanie nowych funkcji.
    • Darmowa wersja, która pozwala wykonać 100 sprawdzeń.

    Wady – Applitools

    • Cena – wysoka cena, jednak są darmowe dla projektów open source.
    • Spowolnienie testów – przez to, że screenshoty są robione i wysłane podczas testów, czas egzekucji testów się zwiększa. Zależy to też oczywiście od liczby testów, którą mamy oraz od tego, jak często je uruchamiamy.
    • Dobrym pomysłem może być stworzenie tylko kilku/kilkudziesięciu scenariuszy, w których bezpośrednio chcemy sprawdzić interfejs w aplikacji, a nie używanie przy każdym z testów Applitoolsów.

    5)  Podświetlenie przed kliknięciem

    5 nieoczywistych tricków w Selenium WebDriver

    Jest to opcja, którą często wykorzystuję testach, które implementuje. Przed kliknięciem dodaje mały kod js, który umieszcza podświetlenie dla elementu, który będzie miał być kliknięty. W screenshotach z testów widzę, który element był kliknięty.

    Jak to zrobić?

    Najłatwiej jest dodać metodę rozszerzającą, która zawiera kliknięcie i dodanie kodu js przed kliknięciem. 

    Zalety

    • Widać od razu, który element był kliknięty.
    • Podświetlenie widoczne, również na zrzutach ekranu

    Wady

    • Nie widzę, wad. Możemy dodać kod dodający ramkę, jak również usuwający ją, więc na każdym zrzucie ekranu możemy mieć tylko podświetlony ten element, który chcemy.

    Jak skorzystać w Selenium z trybu headless w Chrome?

    Jednym ze sposobów skorzystania z trybu headless dla Selenium i Chrome Drivera jest skorzystanie z klasy ChromeOptions, która pozwala przekazywać określone argumenty dla Chrome. W tym przypadku będzie to argument „—headless”, który uruchomi przeglądarkę w tym trybie. Tryb headless charakteryzuje się tym, że nie będziemy widzieć okna GUI dla Chrome, jednak sam proces chrome będzie uruchomiony.

    Jak skorzystać z Mailosaura?

    Mailosaur pozwala nam stworzyć konto trial na 14 dni, dzięki temu możemy sprawdzić możliwości tego narzędzia. Poza mailosaurem możemy skorzystać np. z api gmaila i w ten sposób też możemy również testować treść otrzymywanych maili. Mailosaur wspiera większość popularnych języków programowania.

    Zaczynamy!

    Test będzie wykorzystywał wszystkie z przedstawionych trików. Korzystamy w nim z formularza do resetowania hasła dla WordPress.

    Dlaczego WordPress?

    Często w swoich publikacjach/szkoleniach korzystam z testowych stron postawionych na WordPressie dlatego, że jest to popularna platforma oraz pozwala ona na łatwe rozszerzanie strony o nowe elementy. 

    Jak wygląda test?

    Test polega na przejściu do strony z resetowaniem hasła dla WordPress. Następnie wpisaniu loginu konta, dla którego chcę zresetować hasło. Wysłanie tego formularza i pobranie adresu url, który pozwala ustawić nowe hasło dla tego konta i test kończy się asercją, która sprawdza poprawność tekstu o zmianie hasła.

    Framework testowy

    Wybrałem NUnit, bo w łatwy sposób można zintegrować testy wraz z Allure report. Czego dokonam w kolejnej części tego artykułu. Dodatkowo ulepszę kod i zaimplementujemy page object pattern.

    Rozpoczynam pracę od stworzenia projektu w .net core. Instaluje wszystkie potrzebne paczki NuGetowe. Czyli:

    • Chrome WebDriver
    • Selenium WebDriver
    • NUnit (dlatego, że wspiera lepiej Allure report niż XUnit)
    • Eyes.Sdk

    Następnie przechodzę do stworzenia pomocniczej klasy, która będzie rozszerzała możliwości WebDrivera. Tworzę klasę SeleniumExtension.cs.

    5 nieoczywistych tricków w Selenium WebDriver
    SeleniumExtension.cs

    W niej dodaję metodę ClickOnElement, która będzie zawierała wcześniej wspomniane podświetlenie przed kliknięciem, jak i również driver.WaitForClickable(by) metoda, która czeka aż element jest klikalny – czyli wyświetla się już na stronie i mogę w niego kliknąć. Na końcu dodaję metodę driver.FindElement(by).Click();, która klika w ten element.
    Dodaję do projektu klasę WebDriverFactory, w której znajduje się metoda GetWebDriver, z której będziemy korzystać, żeby uzyskać nasz obiekt Drivera, który chcemy w danym momencie. Jako parametr użyję enuma BrowserType, który będzie odpowiadała za możliwość wyboru określonego Drivera.

    5 nieoczywistych tricków w Selenium WebDriver
    WebDriverFactory.cs


    Metoda zawiera switcha, który korzysta z enuma BrowserType.

    BrowserType.cs

    BrowserType.cs

    GetWebDriver zwraca ChromeDriver takiego, jakiego chcemy korzystając z parametru BrowserType. Pierwszą opcją jest ChromeDriver w trybie headless. Aby go użyć musimy skorzystać z ChromeOptions i dodać argument –headless. Kolejnym trybem będzie uruchomienie domyślnego ChromeDrivera, który będzie uruchamiał się standardowo. Robię to poprzez zwrócenie ChromeDrivera.

    Następnie przechodzę do dodania implementacji dla BrowserType.EmulatorMobile, który będzie emulował nam IPhone 6. Kolejną klasą, którą potrzebuję jest klasa WaitExtension, która będzie zawierać Extension Method dla Drivera. Będzie to metoda WaitForClickable, która korzysta z klasy WebDriverWait i pozwala zaimplementować dynamiczne czekanie w Selenium tzw. explicit wait. Dodaję metodę WaitForClickable, która pozwala czekać na to aż element jest możliwy do kliknięcia.

    5 nieoczywistych tricków w Selenium WebDriver
    WaitExtension.cs

    Po dodaniu klas wspierających przechodzę do dodania klasy z testem. Klasę nazywam FiveTricksInSelenium.cs

    FiveTricksInSelenium.cs

    5 nieoczywistych tricków w Selenium WebDriver

    Klasa rozpoczyna się skorzystaniem z TestFixture, które pozwala przekazać określony parametr do konstruktora dla klasy z testem, czyli w skrócie dla tej klasy. W tym przypadku jest to parametr BrowserType, który jest przekazywany do konstruktora i przypisywana jest wartość dla pola browserType. Poza polem browserType deklaruje pola dla WebDriverFactory klasy, która będzie nam zwracać określonego Drivera. Również dodaję pole dla IWebDriver driver, które będzie używane dla wszystkich akcji Selenium WebDriver.

    Ostatnim polem, które zadeklarowałem jest Eyes jest to pole z biblioteki Applitools. Kolejnym krokiem jest dodanie metody inicjalizującej i przypisującej. Tworzę nowy obiekt klasy, WebDriverFactory, który również w metodzie Setup używamy do określenia, jaki Driver ma być zainicjalizowany, dlatego korzystam z parametru browserType. Dla przypomnienia wartość tego parametru będzie ustawiona poprzez konstruktor tej klasy. Inicjalizując klasę Eyes przekazuje również swój ApiKey, który pozwala korzystać z Appitools.

    Test rozpoczyna się od skorzystania z metody Open, która określa nazwę testu w panelu Appitools. Po tym kroku przechodzę do witryny WordPress, która zawiera formularz resetowania hasła. Klikamy w pole, w którym podajemy login naszego użytkownika i wpisuje mój login w to pole. Kolejnym krokiem jest użycie metody CheckWindow, która robi zrzut ekranu, który jest wysyłany do Appitools. Jest to moje pierwsze uruchomienie, więc screenshot nie będzie z niczym jeszcze porównywany. Teraz dodaję obiekt dla Mailosaura, który będzie potrzebny do pobrania naszej wiadomości z serwera. 

    5 nieoczywistych tricków w Selenium WebDriver

    Po pobraniu wiadomości z określonymi kryteriami przechodzę do wyciągnięcia adresu url z naszej wiadomości. Korzystam w tym miejscu z wyrażenia regularnego. Przypisuje ten adres do zmiennej value i udaje się pod ten adres. Po przejściu na stronę z ustalaniem nowego hasła wpisuje nowe hasło dla mojego użytkownika i potwierdzam formularz klikając w przycisk submit, który ma selektor By.CssSelector(“#wp-submit”). Po tym kroku czekam na pojawienie się komunikatu i pobieram jego wartość tekstową z selektora By.CssSelector(“.rest-pass”). Test kończę asercją, która sprawdza poprawność spodziewanego tekstu, który powinien się ukazać po zmienieniu hasła.

    Applitools – dashboard

    Appitools dashboard

    Kod z tego postu znajduje się na naszym DevOwlsowym GitHubie.

    https://github.com/devowlsgithub/FiveTricksInSelenium

    Dalsze inspiracje

    Jeżeli interesują Cię inne tricki, których można dokonać wraz Selenium WebDriverem to polecam Ci dwie prezentacje, które były dla mnie inspiracją do podzielenia się tym tekstem z Tobą. 

    Podsumowanie

    Te sposoby pozwalają na jeszcze bardziej aktywne użycie Selenium WebDrivera. Poprzez korzystanie z podświetlenia przed kliknięciem możemy mieć znacznie bardziej jasną sytuację na naszych zrzutach ekranu. Widzimy od razu, jaki element był kliknięty co ułatwia nam późniejszą analizę wyników testów. Dzięki skorzystaniu z Mailosaura możemy testować formularz m.in. zapomnianego hasła i wszystkie inne funkcje, które korzystają z maila, jak również sprawdzanie samej treści maila, czy posiada tę treść, której się spodziewamy. Emulator mobile pozwala sprawdzić, czy strona, którą testujemy, dobrze wspiera tryb mobilny. W następnej części artykułu dodamy Allure Report do naszego projektu oraz przeniesiemy nasz kod do page objectów i określonych metod. Poza tym wykorzystamy Appitools do sprawdzenia tego jak działa. Jeżeli masz jakieś pytania zachęcamy do kontaktu.

      About Michał Ślęzak

      Szukam miejsc, gdzie automatyzacja może pomóc. Lubię prowadzić prezentacje i warsztaty związane z automatyzacją testów i procesów. Często szukam i wdrażam narzędzia, które mogą pomóc organizacjom, dla których pracuje. Dzielę się wiedzą przez różne aktywności. Prowadzę bloga – testingplus.me. Jestem jednym z liderów PTaQ.org – poznańskiego meetup testerskiego oraz Testing Parrot jednego z pierwszy podcastów o testowaniu. Obecnie pracuje w Sii jako Test Development Engineer gdzie zajmuję się rozwojem frameworku testów UI oraz wdrażaniu innych narzędzi, które pomagają w szybszym dostarczaniu oprogramowania. W wolnych chwilach lubię poznawać nowe i smaczne kulinarne miejsca m.in. w Poznaniu.

      Dodaj komentarz