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!

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