Przejdź do treści
PWA
@piecioshka

Piotr Kowalski

Developer Trener YouTuber

ConFrontJS 2019 — Discount 20%

Testy end-to-end w Continuous Integration

Podczas jednego z moich webinarów chciałem skonfigurować testy end-to-end na Travisie. Nie udało się, z prostego powodu — od ostatniego czasu kiedy to robiłem upłynęło trochę czasu tym samym sposób się zmienił.

W tym artykule chciałem odświeżyć temat jak skonfigurować testy e2e w 2019 roku.

2 lata temu napisałem artykuł o tym jak łatwo jest uruchomić prosty scenariusz testów end-to-end. Artykuł wprowadza w tematykę testów e2e.

Ten artykuł będzie opisywał co się stało w tej rewizji 97a75d7c.

Co jest potrzebne?

  • Serwer CI — np. Travis (najpopularniejszy)
  • Środowisko do tworzenie testów e2e — np. Nightwatch.js (popularny, używany przez Vue.js)
  • Komunikacja z przeglądarką — np. ChromeDriver (Chrome to według mnie najlepsza przeglądarka)

UWAGA: Na ten moment Travis nie supportuje w 100% platformy Windows. Dlatego warto uważać podczas konfiguracji testów na tą platformę.

Co się zmieniło?

Nie trzeba już explicit uruchamiać serwera Selenium!

Komunikacja Nightwatch.js z serwerem webowych
Schemat działania .
Diagram stworzony z użyciem narzędzia: draw.io.

Konfiguracja projektu

  1. Zainstaluj wymagane zależności:

     npm i -D nightwatch chromedriver
    
  2. Stwórz katalog na testy e2e. Moja propozycja: test/e2e
  3. Stwórz plik z testami. Moja propozycja test/e2e/test.js
  4. Dodaj w powyższym pliku prosty scenariusz:

     module.exports = {
         'Spr. czy istnieje nagłówek?': async (client) => {
             await client.url('http://example.org');
             await client.waitForElementVisible('body');
             await client.assert.elementPresent('h1');
         }
     };
    
  5. Stwórz plik z konfiguracją dla Nightwatch.js w katalogu głównym. Moja propozycja nightwatch.conf.js
  6. Umieść w powyższym pliku podstawową konfigurację:

     module.exports = {
    
         // Katalog z testami
         "src_folders": ["test/e2e/"],
    
         // Konfiguracja sterownika przeglądarki w której uruchomią się testy
         "webdriver": {
             "start_process": true,
             "server_path": 'node_modules/.bin/chromedriver',
             "port": 9515
         },
    
         // Informacja jaka przeglądarka zostanie użyta do testów
         // oraz w jakim trybie zostanie uruchomiona (headless)
         "test_settings": {
             "default": {
                 "desiredCapabilities": {
                     "browserName": "chrome",
                     "chromeOptions": {
                         "args": [
                             "--headless"
                         ]
                     }
                 }
             }
         }
     };
    

Bonus: Użyjmy pluginu nightwatch-helpers

  1. Zainstaluj wymagane zależności:

     npm i -D nightwatch-helpers
    
  2. Do pliku z konfiguracją Nightwatch.js (czyli nightwatch.conf.js) dodaj:

     {
         [...]
         "custom_commands_path": ["node_modules/nightwatch-helpers/commands"],
         "custom_assertions_path": ["node_modules/nightwatch-helpers/assertions"]
         [...]
     }
    
  3. Do pliku test/e2e/test.js dodaj nowy test:

     [...]
     'Spr. czy istnieją wymagane paragrafy?': async (client) => {
         await client.url('http://example.org');
         await client.waitForElementVisible('body');
    
         // to polecenie zawdzięczamy pluginowi
         await client.assert.count('p', 2);
     }
     [...]
    

Rewizja, gdzie został użyty plugin ac78a0556.

Zerknij do projektu test-nightwatch-chrome-headless aby zobaczyć jak wygląda kod źródłowy aplikacji z testami end-to-end.

Zerknij na Travisa projektu aby zweryfikować stan testów.
Aktualny status