[DajSięPoznać#17] Testy e2e: Aurelia i Protractor

Wstęp

Każdy czuje potrzebę automatycznego testowania aplikacji. Pomysłów i narzędzi do tego, jak testować kod jest mnóstwo, od standardowych jednostkowych aż po mutacyjne, czy code provery takie jak polyspace. Tym razem o testch, które Mike Cohn umieścił na samej górze swojej piramidy – testach UI.

Testy e2e

W odróżnieniu od chociażby testów jednostkowych, tu mamy do czynienia z testowaniem interfejsu użytkownika, a nie testowaniem kodu. W związku z tym często będziemy testowali wiele akcji biznesowych na raz, jest to podejście oparte bardziej o scenariusze, a nie o pojedyncze funkcjonalności. W pewnym sensie chcemy więc symulować i zautomatyzować pracę testera UI. Testy takie odpalane będą w przeglądarce z wykorzystaniem takich narzędzi jak selenium, protractor czy jasmine.

Ten ostatni będzie tu narzędziem do pisania asercji w styli Behavior Driven Development, selenium natomiast jest narzędziem do automatyzacji pracy z przeglądarką. Całość została dobrze zobrazowana przez ten diagram ze strony Aurelii.

protractor

Protractor

Protractor to narzędzie do testów e2e zbudowany wokół Angulara. Pozwala na interakcję z przeglądarką, zarówno w zakresie symulowania akcji użytkownika, jak i odpytywania drzewa DOM w celu weryfikacji wyników akcji. Integrując się z Aurelią warto do konfiguracji dodać wtyczkę aurelia.protractor.js, która dostarcza obsługę zdarzeń drzewa DOM rzucanych przez aurelię.

Praca z Protractorem rozpoczyna się od zainstalowania go poprzez npm oraz aktualizację selenium:

npm install -g protractor
webdriver-manager update

webdriver-manager posłuży do startowania testów przyjmując jako parametr plik z konfiguracją. Sam plik wygląda następująco:

exports.config = {
  directConnect: true,
  capabilities: {
    'browserName': 'chrome'
  },

  seleniumAddress: 'http://0.0.0.0:4444',
  specs: ['./*.js'],

  plugins: [{
    path: 'aurelia.protractor.js'
  }],
  
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000
  }
};

specs to lista plików z testami w jasmine.

Locators

Locators to mechanizm protractora umożliwiający odpytywanie drzewa DOM. Przykłady testów poniżej:

describe('adverts list', function() {

    beforeEach(() => {
        browser.loadAndWaitForAureliaPage('http://localhost:48213/');
    });

    it('should filter adverts by selected district', function(){
        element.all(by.css('.district-filter')).then(function(items) {
            var btn = element(by.id('dropdownMenu1'));            
            var district = items[0];
            district.getInnerHtml().then(districtName => {
                btn.click();
                district.click();

                browser.sleep(1000); //czekaj na AJAX-owe żądanie

                element.all(by.css('.ad-district')).then(districts =>{
                    districts.forEach(district => expect(district.getText()).toBe(districtName));
                });       
            });
        });
    });

    it('should navigate to recommendations page', function(){
        var link = element(by.css('a[href*="#recommendations"]'));
        link.click();
        browser.sleep(200);
        browser.getCurrentUrl().then(url => expect(url).toBe('http://localhost:48213/#recommendations'));
    });

});

Funkcja beforeEach wykona się przed każdym testem.

Efekt po napisaniu takich testów jest całkiem przyjemny: uruchamia nam się przeglądarka, która sama klika, sprawdza i ocenia UI. Wadą może być łatwa podatność na zmiany: przykładowo, gdy programista zmieni klasę stylując element, to może nam to rozsypać wiele testów e2e bazujących na tym elemencie, pomimo, iż funkcjonalność dalej będzie działała be zarzutów.

Advertisements

One thought on “[DajSięPoznać#17] Testy e2e: Aurelia i Protractor

  1. Pingback: [DajSięPoznać] Podsumowanie | When the smoke is going down

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s