PWA

Testy end-to-end w Continuous Integration

• 3 minuty

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ł.

Baner promujący artykuł

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

Powiązane artykuły