Protractor - jak zacząć?

Jak wygląda testowanie end to end aplikacji AngularJS? Od jakiegoś czasu w dokumentacji frameworka można się natknąć na testy e2e pisane za pomocą narzędza zwanego Protractor. Co to jest i z czym to się je?

Protractor to narzędzie, które udostępnia nam pewne narzędzia służące konkretnie do testowania aplikacji Angular.js, jednocześnie odpalając w tle serwer Selenium. W ninejszym poście pokażę najprostszy (moim zdaniem) sposób na odpalenie testów e2e za pomocą protractora zainstalowanego lokalnie w konkretnym projekcie. Do testowania użyjemy przeglądarki PhantomJS.

Przede wszystkim musimy zainstalować potrebne narzędzia:

npm install protractor phantomjs

Powyższa komenda instaluje zarówno protractora, jak i przeglądarkę PhantomJS. Ponieważ protractor musi jeszcze pobrać serwer Selenium (do odpalenia którego potrzebować będziemy Javy, tak na marginesie), odpalamy następującą komendę:

node_modules/.bin/webdriver-manager update

Po pobraniu serwera Selenium, musimy jeszcze napisać konfigurację Protractora. Domyślnie znajduje się ona w pliku protractor.conf.js i właśnie taki plik stwórzmy. Jego zawartość jest następująca:

exports.config = {
    specs: [
        "./tests/e2e/**/*.js"
    ],
    baseUrl: "http://localhost:8080",
    capabilities: {
        browserName: "phantomjs",
        "phantomjs.binary.path": "./node_modules/phantomjs/bin/phantomjs"
    }
};

Własność specs wskazuje wzorce ścieżek plików z testami e2e. W baseUrl podajemy adres, pod którym jest odppalony jakiś serwer deweloperski. W moim przypadku jest to serwer wbudowany w PHP, jednak możemy tu użyć dowolnego narzędzia, od wihajstrów w stylu Httpster po rasowego Nginx. Ważne, by podana tu ścieżka faktycznie była w stanie wywołać naszą aplikację w dowolnej przeglądarce.

Na koniec coś opcjonalnego, czyli capabilities. Możemy tu podać przeglądarkę, której chcemy użyć (np. "firefox"); ja podałem zainstalowanego uprzednio PhantomJS. Dodatkowo musiałem określić ścieżkę do pliku wykonywalnego PhantomJS — protractor sam z siebie nie zna ścieżki do instalacji lokalnej (co innego z globalną, ale takową się nie zajmujemy).

Teraz czas napisać jakiś test. Na screencaście Joela Hooksa możemy zobaczyć prosty test sprawdzający wyświetlony tytuł dokumentu. Po uproszczeniu, kod wygląda następująco:

describe("Example", function() {
    var ptor = protractor.getInstance();

    it("should display the correct title", function() {
        ptor.get("/");
        expect(ptor.getTitle()).toBe("Hello world");
    });
});

Na koniec zostaje nam tylko jedno: odpalić maszynerię i uruchomić test! Na początek musimy uruchomić serwer deweloperski, a następnie uruchomić testy komendą:

node_modules/.bin/protractor

I to tyle — na ekranie powinien znaleźć się jeden (prawdopodobnie failujący) test.


Komentarze

Artur

2017-03-01, 09:38

"I to tyle" ???? kolego, nie wiem jak piszesz kod ale za pisanie tutoriali się nie bierz, bo tak to opisałeś że nadal nie wiadomo o co chodzi :(. Tworzysz jakiś plik konfiguracyjny, ale gdzie go umieścić już nie piszesz, później wstawiasz jakiś kod testu, ale co z nim zrobić, też w jakiś plik go opakować?

Artur

2017-03-01, 09:39

Szczerze pisząc to gó....o żeś wytłumaczył :(

Dominik

2017-04-28, 02:13

Po pierwsze: zamiast bezmyślnie krytykować, zwyczajnie zapytaj. Dla mnie mogło być oczywiste coś, co dla kogo innego nie jest.
Po drugie: w tekście odwołuję się do screencastu. Jest podlinkowany. Obejrzyj i wszystko będziesz wiedział.


Napisz komentarz


Szukaj wpisów


Chmura tagów