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!

Diagram stworzony z użyciem narzędzia: draw.io.
Konfiguracja projektu
-
Zainstaluj wymagane zależności:
npm i -D nightwatch chromedriver
- Stwórz katalog na testy e2e. Moja propozycja:
test/e2e
- Stwórz plik z testami. Moja propozycja
test/e2e/test.js
-
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'); } };
- Stwórz plik z konfiguracją dla Nightwatch.js w katalogu głównym.
Moja propozycja
nightwatch.conf.js
-
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
-
Zainstaluj wymagane zależności:
npm i -D nightwatch-helpers
-
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"] [...] }
-
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
- Test First
- Własna konfiguracja do TSLint
- Jak zmienić motyw strony za pomocą SCSS na przykładzie trybu ciemnego?
- Jak zarządzać baterią w MacBooku? Battery Life Extender
- Jak zwiększyć ilość wolnego miejsca na dysku?
- Git: Jak usunąć rewizję?
- Jak stworzyć Pull Request w terminalu?
- Najlepszy styl pracy z kodem: TDD + Pair programming
- Hexo: Integracja z Google Analytics
- Hexo: Integracja z Disqus
- Jak zmienić domyślny wygląd bloga opartego na Hexo?
- Jak pokonałem Webpacka: Upgrade kilku wersji
- Jak założyć bloga korzystając z Hexo?
- Jak wykorzystać technikę "Man-in-the-middle" na własne potrzeby?
- Jak napisać 'Ź' w WebStorm na macOS?
- Jak usunąć zapytanie HTTP OPTIONS?
- Jak napisać testy end-to-end? Nightwatch.js & Chrome Headless?
- Jak zbudować licznik czasu?
- Kilka wskazówek SEO
- Jak zbudować widget prezentujący testimoniale?
- Angular: Jak zamockować dane do usługi HTTP?
- Jak wyświetlić liczbę osób lajkujących nasz fanpage?
- Jak przerobić stronę na Progressive Web App?
- Jak zbudować plik PDF na podstawie pliku tekstowego w formacie Markdown?
- Jak stworzyć swój szablon do Cleaver?
- Jak zacząć programować?
- Jak podsłuchać iPhona?
- Definicje testów
- Jak założyć bloga korzystając z Jekyll?
- Vimium — plugin do Twojej przeglądarki
- Jak wyłączyć reklamy w systemie?
- CoffeeScript + Windows
- Jak stworzyć przyjazne linki w WordPress?