Andreja Mirchevska

TESTIRANJE APLIKACIJ ANGULAR 2 Z UPORABO OGRODJA PROTRACTOR

Diplomsko delo

Maribor, avgust 2017

2

TESTIRANJE APLIKACIJ ANGULAR 2 Z UPORABO OGRODJA PROTRACTOR

Diplomsko delo

Študent: Andreja Mirchevska

Študijski program: Univerzitetni študijski program

računalništvo in informacijske tehnologije

Mentor FERI:

Lektor:

doc. dr. Tomaž Kosar

Jasmina Kodrič

3

4

TESTIRANJE APLIKACIJ ANGULAR 2 Z UPORABO OGRODJA PROTRACTOR

Ključne besede: Angular 2, Protractor, testiranje, Jenkins

UDK: 366.624.2:681.7.055(043.2)

Povzetek

V diplomskem delu so predstavljeni koncepti testiranja spletne aplikacije in sprotno testiranje

programske opreme. Implementiran je avtomatiziran proces testiranja aplikacije. Testiranje je izvedeno

na aplikaciji Angular 2, načrtovani so scenariji za funkcijske teste in implementirani s pomočjo ogrodja

Protractor. V diplomskem delu smo predstavili dokumentacijo in organizacijo teh testov. Implementirali

smo proces gradnje aplikacije, izvajanja testov in prikaz rezultatov z ogrodjem Jenkins. Predstavljena je

tudi analiza rezultatov izvajanih testov.

5

TESTING ANGULAR 2 APPLICATIONS WITH PROTRACTOR FRAMEWORK

Key words: Angular 2, Protractor, testing, Jenkins

UDK: 366.624.2:681.7.055(043.2)

Abstract

This diploma thesis presents the concepts of testing web applications and on-the-fly software testing. We

implemented an automated process for testing web applications. Testing is implemented for an Angular

2 application and test scenarios are created for functional testing and implemented using the Protractor

framework. In this thesis we present organization and implementation of these tests. We implement a

process for building an application, executing tests, and displaying results of the tests. Also presented is

analysis of the test results.

6

VSEBINA

1 UVOD ..................................................................................................................................................... 8

2 TESTIRANJE SPLETNE APLIKACIJE .......................................................................................................... 9

2.1 Metode testiranja ....................................................................................................................... 10

2.2 Tehnike testiranja ....................................................................................................................... 10

2.3 Protractor .................................................................................................................................... 12

3 ZVEZNA INTEGRACIJA .......................................................................................................................... 14

3.1 Kaj je zvezna integracija .............................................................................................................. 14

3.2 Jenkins ......................................................................................................................................... 14

4 IMPLEMENTACIJA................................................................................................................................ 15

4.1 Opis problema ............................................................................................................................. 15

4.2 Uporaba ogrodja Protractor ....................................................................................................... 16

4.2.1 Nastavitve in konfiguracija .................................................................................................. 16

4.2.2 Implementacija scenarijev za funkcijsko testiranje ............................................................ 17

4.2.3 Organizacija testov .............................................................................................................. 21

4.3 Uporaba orodja Jenkins .............................................................................................................. 23

4.3.1 Namestitev .......................................................................................................................... 23

4.3.2 Vnašanje poslov .................................................................................................................. 24

4.4 Izvajanje testov, pregled poročila in analiza rezultatov .............................................................. 29

5 ZAKLJUČEK ........................................................................................................................................... 34

6 VIRI IN LITERATURA ............................................................................................................................. 35

7

KAZALO SLIK

Slika 1: Vrstni red izvajanja testov .............................................................................................................. 10

Slika 2: Arhitektura ogrodja Protractor ....................................................................................................... 13

Slika 3: Primer procesa od razvoja do testiranja kode ................................................................................ 16

Slika 4: Konfiguracijska datoteka ................................................................................................................ 17

Slika 5: Spletna stran za prijavo .................................................................................................................. 18

Slika 6: Lokatorji .......................................................................................................................................... 18

Slika 7: Interakcija z elementi ..................................................................................................................... 19

Slika 8: Pričakovani rezultat funkcijskega testa .......................................................................................... 19

Slika 9: Test za prijavno stran ...................................................................................................................... 20

Slika 10: Koda za izbiro vrednosti znotraj select box-a ............................................................................... 20

Slika 11: Objekt strani za ustvarjeno objavo ............................................................................................... 21

Slika 12: Testni primerek ............................................................................................................................. 22

Slika 13: Objekt za prijavno stran ................................................................................................................ 22

Slika 14: Testni paketi ................................................................................................................................. 23

Slika 15: Nadzorna plošča ........................................................................................................................... 24

Slika 16: Nastavitve repozitorija Git ............................................................................................................ 25

Slika 17: Nastavitev za sprožitev posla........................................................................................................ 26

Slika 18: Dodajanje zagona zunanjega ukaza v orodju Jenkins ................................................................... 28

Slika 19: Nastavitve v orodju Jenkins za poročila ........................................................................................ 29

Slika 20: Dokumentiranje testnih primerkov .............................................................................................. 30

Slika 21: Graf zadnjih izvajanj testov ........................................................................................................... 31

Slika 22: Podrobnosti o izvajanju posameznega testa ................................................................................ 32

Slika 23: Podrobnosti testov pri posameznem izvajanju ............................................................................ 32

Slika 24: Podrobnosti napake ...................................................................................................................... 33

Slika 25: Primer kode za testiranje ustvarjene objace ................................................................................ 33

8

1 UVOD

Programska oprema se danes razvija čedalje hitreje. Ekipe razvijalcev so vse večje in stranke

vedno bolj zahtevne. Posledično se programska oprema izboljšuje in razvija nova. Iz teh

razlogov in kajpada dejavnika človeške zmotljivosti se pojavljajo v fazi razvoja številne napake.

Pomembno je imeti avtomatiziran sistem testiranja, ki učinkovito, hitro ter poceni zagotavlja

zanesljivo delovanje in kakovost programske opreme.

V diplomski nalogi se bomo ukvarjali z avtomatskim testiranjem spletnih aplikacij. V ta namen

bomo uporabili že obstoječo aplikacijo, izdelano s pomočjo ogrodja Angular 2, za katero bomo

načrtovali in razvijali funkcijske teste. Za implementacijo testov bomo uporabili ogrodje

Protractor. Ker v fazi razvoja programske opreme obstajajo številni ponavljajoči se koraki

(npr. razvoj, testiranje), se pojavlja potreba po avtomatizaciji teh korakov. V ta namen bomo

uporabili orodje Jenkins, s katerim bomo zagotovili avtomatizacijo gradnje aplikacije in

avtomatizirano izvajanje testiranja z namenom ustvariti čim učinkovitejši pregled in analizo

stanja kakovosti programske opreme.

9

2 TESTIRANJE SPLETNE APLIKACIJE

Testiranje programske opreme je pomembno, saj je prisotnost napak v programski kodi

neizogibna. Programska koda lahko vsebuje veliko napak. Temeljne vzroke za njeno okvaro je

mogoče uvrstiti v več skupin:

Pomanjkljivost komunikacije - zahteve sistema niso natančno opredeljene med

strankami, razvijalci in testnimi inženirji, in tako končni izdelek ne deluje po

pričakovanjih.

Zahtevnost programske opreme - razumevanje aplikacij ni preprosto, še posebno to

velja za razvijalce brez izkušenj na področju razvoja sodobnih programskih rešitev.

Tako kot kdor koli lahko tudi razvijalci naredimo napake.

Spreminjanje zahtev - v to skupino sodijo preoblikovanje, prerazporejanje razvijalcev

znotraj razvojne skupine, soodvisnost med projekti, zaključeno delo, ki ga moramo

preurediti ali odstraniti itd. Vsakršna sprememba, odvisna od drugih delov projekta ali

kompleksnosti usklajevanja sprememb, lahko povzroči napake.

Nezadostna dokumentacija - težko je vdrževati in spreminjati programsko kodo, ki je

slabo napisana ali slabo dokumentirana.

Orodja za razvoj programov - knjižnice, prevajalniki itd. lahko vsebujejo napake ali so

nezadostno dokumentirani, s čimer nastanejo še dodatne napake.

Opredelitve testiranja programske opreme:

Testiranje je proces ustvarjanja zaupanja v programe ali sisteme, da naredijo tisto, kar

morajo. (HETZEL, 1973)

Testiranje je proces izvajanja programov, da najdemo napake. (Myers, 1979)

Cilj testa je zaznati napake. "Uspešen test" je tisti, ki ne zazna napake. (ISEB, 1999)

10

2.1 Metode testiranja

Glavni cilj testiranja je odkriti in popraviti napake ter prikazati kakovost izdelka glede na zahteve

in specifikacije aplikacije. Sestoji iz določitve ciljev, izbora strategij testiranja, načrtovanja

testov, izvajanja testov in analize rezultatov.

Obstajata dve glavni metodi testiranja glede na dostopnost programske kode.

Metoda bele škatle je strukturno testiranje, pri katerem je notranja struktura aplikacije znana

testnim inženirjem. Predstavlja testiranje notranjih enot programske kode. Testi so namenjeni

preverjanju obnašanja aplikacije na njenih posameznih enotah. Gre za eno najboljših metod za

odkrivanje napak v zgodniji fazi razvoja programske opreme.

Testiranje programske opreme po metodi črne škatle temelji na njenih izhodnih zahtevah.

Poznavanje notranjih struktur ni potrebno. Pri tej metodi gre za testiranje funkcionalnosti

programske opreme.

2.2 Tehnike testiranja

V tem poglavju so predstavljene najpogosteje uporabljane tehnike testiranja spletnih aplikacij.

Slika 1 prikazuje vrstni red izvajanja testov.

Slika 1: Vrstni red izvajanja testov

3. Funkcijsko testiranje

2. Integracijsko testiranje

1. Testiranje modulov

11

1. Testiranje modulov izvajajo razvijalci programske opreme. Modulno testiranje sledi pristopu

bele škatle, kjer razvijalec testira enote izvorne kode, kot so pogojni stavki, funkcije, veje,

metode itd [1]. Namen je potrditi, ali se vsaka enota izvorne kode izvaja v skladu z načrtom.

Testiranje modulov je prva stopnja testiranja in se izvaja pred integracijskim testiranjem. Te

teste lahko uporabimo za pomoč pri oblikovanju kode kot varnostni sistem pri spreminjanju

kode.

2. Integracijsko testiranje je druga stopnja testiranja. Namen teh testov je preveriti

medsebojno delovanje delov sistema. Namen je poiskati napake v interakciji med integriranimi

enotami, komponentami, paketi in vmesniki. Integracijski testi so podobni testiranju modulov,

vendar obstaja ena velika razlika: pri testiranju modulov so komponente izolirane od drugih

komponent, v integracijskih testih pa ne. Lahko so pisani z istimi orodji kot modulni testi.

3. Funkcijsko testiranje je testiranje celotne funkcionalnosti aplikacije. Za namen testiranja

spletne aplikacije se uporablja ogrodje, ki izvaja vnaprej določene ukaze v brskalniku. Ogrodje

uporabljamo za izvajanje akcij, kot bi jih uporabnik, npr. klik gumba na spletni strani. Trajanje

izvajanja testov je zamudno, saj simuliramo realne interakcije uporabnikov. Funkcijske teste

validiramo na enak način kot uporabnik. Glavni namen teh testov je za razliko od namena

testiranja modulov zmanjšati čas pri izvajanju regresijskih testov, ki so preveč zamudni in

trajajoči, da bi se izvajali ročno.

V tabeli 1 so prikazana najbolj uporabljana ogrodja za izvajanje funkcijskih testov, integracijskih

testov in testov modulov.

12

Tehnike testiranja Namen Ogrodja

Testiranje modulov Testiranje enote

izvorne kode

Jasmine (https://mochajs.org/),

JUnit (http://junit.org/junit4/),

Karma (https://karma-runner.github.io)

Integracijsko

testiranje

Testiranje

medsebojnega

delovanja enot

(delov) izvorne kode

Jasmine, JUnit, Karma

Funkcijsko testiranje Testiranje celotne

fukcionalnosti

sistema

Protractor (http://www.protractortest.org/),

PhantomJS (http://phantomjs.org/),

CasperJS (http://casperjs.org/),

Cucumber (https://cucumber.io/),MochaJS

(https://mochajs.org/)

Tabela 1 Tehnike testiranja, njihov namen in ogrodja

V naslednjih poglavjih bomo predstavili pisanje in izvajanje funkcijskih testov, ki so namenjeni

testiranju aplikacije Angular 2 s pomočjo ogrodja Protractor.

2.3 Protractor

Protractor je ogrodje za avtomatizirano testiranje spletnih aplikacij. Sestavljajo ga zmogljive

tehnologije, kot so Node.js, Jasmine, Selenium Webdriver itd. Namenjen je testiranju aplikacij

Angular 2, a se lahko uporablja tudi za druge spletne aplikacije. Protractor izvaja teste v pravem

brskalniku in simulira uporabnikova dejanja.

13

WebDriverJS je knjižnica, ki je ovita z ogrodjem Protractor in uporablja sintakso JasminJS.

WebDriverJS predstavlja asinhroni vmesnik za izvajanje ukazov do strežnika Selenium, ki izvaja

ukaze v brskalniku in komunicira z gonilnikom brskalnika. Jasmine je vedenjsko usmerjena

knjižnica za testiranje, ki zagotavlja sintakso in ogrodje za dajanje ukazov brskalniku. Slika 2

prikazuje zgradbo ogrodja Protractor.

Slika 2: Arhitektura ogrodja Protractor

14

3 ZVEZNA INTEGRACIJA

3.1 Kaj je zvezna integracija

Zvezna integracija je praksa, ki vzpodbuja razvijalce, da integrirajo programsko kodo v glavne

veje skupnega repozitorija. Namesto razvoja programske kode v izolaciji in integracije na koncu

razvojnega cikla je posameznikova programska koda integrirana s skupnim repozitorijem

večkrat na dan. Glavni cilj zvezne integracije je čimprej ugotoviti napake ob integraciji kode, saj

se vsaka integracija preveri s testi. Tako se občutno zmanjšajo stroški in skrajša čas za zaznavo

in odpravo napak. Orodja za zvezno integracijo so Jenkins, Hudson in Team City.

3.2 Jenkins

Jenkins je odprtokodno orodje za sprotno integracijo, zgrajeno s programskim jezikom Java.

Razvojne ekipe ga uporabljajo za projekte različnih velikosti in projekte v različnih jezikovnih

tehnologijah, kot so .NET, PHP, Ruby, JavaScript, Java itd. Jenkins je preprost za uporabo,

uporabniški vmesnik je preprost, intuitiven in vizualno privlačen. Je izjemno prožen in preprost

za prilagajanje našim potrebam. Na voljo je na stotine odprtokodnih vtičnikov. Ti vtičniki

zajemajo sisteme za nadzor različic, orodja za razvoj projektov, meritve kakovosti, integracijo z

zunanjimi sistemi itd.

Glavni namen Jenkinsa je avtomatizirati ponavljajoče se korake razvojnega procesa aplikacije,

kot so prevajanje programske kode ter gradnja izvedljivih paketov, izvedba avtomatiziranih

testov (lahko so modulni, integracijski, funkcijski ali testi sprejemljivosti (angl.

Acceptance Test)), meritve kakovosti kode, distribucija aplikacije v produkcijo.

15

4 IMPLEMENTACIJA

4.1 Opis problema

V fazi razvoja programske opreme se lahko pojavijo številne napake, zato je pogosto prisotna

potreba po preverjanju medsebojnega delovanja integriranih komponent. V praksi se lahko

pojavi več integracij na dan s strani različnih razvijalcev, zato prihaja do potrebe po

avtomatizaciji procesov za integracijo programske kode in njihovega testiranja. V tej diplomski

nalogi predstavljamo implementacijo avtomatiziranega procesa razvoja, integracije in funkcijsko

testiranje programske opreme.

Primer procesa od razvoja do integracije in testiranja programske opreme (Slika 3) je naslednji:

Načrtovanje in razvoj programske kode.

Načrtovanje, razvoj in izvajanje testov z namenom preveriti delovanje programske kode

(testiranje modulov), torej morebitne napake.

Razvijalci zgradijo programsko opremo pred pošiljanjem programske kode v sistem za

nadzor različic, da ugotovijo, ali spremembe vplivajo na integracijsko gradnjo

programske opreme.

Razvijalci pošljejo programsko kodo v sistem za nadzor različic.

Izvajanje integracijske gradnje programske opreme v sistemu za testiranje programske

opreme.

Testiranje delovanja integrirane programske opreme.

Izvajanje funkcijskih testov na integriranem produktu, ki je že opravil vse integracijske

teste.

Pregled poročila o gradnji, pregled poročila o opravljenih testih, analiza poročila z

namenom poiskati območje za izboljšavo programske opreme.

16

Slika 3: Primer procesa od razvoja do testiranja kode

4.2 Uporaba ogrodja Protractor

Z ogrodjem Protractor smo implementirali funkcijske teste, namenjene testiranju aplikacij

AngularJS 2. Med testiranjem se generirajo poročila, ki jih kasneje uporabimo za prikaz

rezultatov v orodju Jenkins.

4.2.1 Nastavitve in konfiguracija

Najprej smo namestili knjižnice, potrebne za razvoj in izvajanje testov v aplikaciji Angular 2.

Naslednji ukaz smo uporabili za namestitev ogrodja Protractor in webdriver-menager ter ga

shranili v package.js, ki vsebuje zagonske nastavitve za pogon projekta AngularJS:

npm install protractor --save

17

Potem smo namestili gonilnik Selenium z ukazom:

webdriver-manager update

Za izvajanje testov je treba imeti zagnan strežnik. To smo naredili z naslednjim ukazom:

webdriver-manager start

Za izvajanje testov smo ustvarili konfiguracijsko datoteko (Slika 4), ki je vsebovala podatke o

poti do datoteke s testi, ki jih uporablja brskalnik, in podatke za komunikacijo z brskalnikom

Selenium ter druge nastavitve kot npr. funkcijo onPrepare. Ta funkcija se pokliče, kadar je

Protractor že pripravljen oziroma pred izvajanjem testov.

Slika 4: Konfiguracijska datoteka

4.2.2 Implementacija scenarijev za funkcijsko testiranje

V nadaljevanju predstavljamo način pisanja testov za določeno funkcionalnost. Funkcionalnost,

ki smo jo vzeli kot primer, je prijava uporabnikov. Spletna stran za prijavo uporabnikov vsebuje

naslednje elemente HTML (Slika 5):

18

Slika 5: Spletna stran za prijavo

Nato smo izvedli naslednji scenarij:

Značilnost: Prijava v spletno aplikacijo

Scenarij: Izpolni podatke in pritisni gumb "Login"

Podano: Odprta spletna stran in pravilni podatki za prijavo

Kdaj: Izpolnimo podatke uporabniškega imena in gesla

ter pritisnemo na gumb "Login"

Potem: Vidimo spletno stran z nadzorno ploščo

Pri implementaciji scenarija smo morali najprej najti elemente HTML za uporabniško ime, polje

za geslo in gumb za prijavo. To smo naredili z uporabo fukcije element (ki se uporablja za

dostopanje do elementov HTML), ki kot vhodni parameter prejme lokator. Lokator predstavlja

objekt, s katerim se opisuje, kako poiskati element znotraj objektnega modela DOM. To smo

implementirali z naslednjo programsko kodo (Slika 6).

Slika 6: Lokatorji

V tem primeru smo uporabili dvoje lokatorjev:

19

by.css - funkcija, s katero najdemo element s podanim css selector.

by.id - funkcija, s katero najdemo element s podanim id.

Iskanje elementov smo uredili na dva načina:

Funkcija element, ki nam vrne objekt, ki zna poiskati prvi element DOM za podani

lokator.

Funkcija element.all, ki vrne polje objektov za podani lokator. Znotraj polja lahko

manipuliramo z različnimi funkcijami. V našem primeru uporabimo first funkcijo, ki nam

vrne prvi element, in funkcijo get(1), ki nam vrne element z indeksom 1.

Potem ko smo našli elemente, je bil naslednji korak interakcija z elementi, kot je npr. vnos

teksta v polje, branje teksta, klikanje gumba. Primer te kode je prikazan na Sliki 7.

Slika 7: Interakcija z elementi

Za izvajanje interakcije z elementi kličemo funkcije nad najdenimi elementi, kot npr. funkcijo

sendKey, ki vpisuje tekst znotraj vnosnega polja, in funkcijo click, ki opravlja klik.

Najpomembnejši in zadnji korak pri pisanju testa je preverjanje pričakovanega rezultata

scenarija s funkcijo expect, v katero pošljemo dejansko vrednost, dobljeno po izvedbi dejanja.

Na to funkcijo prilepimo dodatno funkcijo, ki vsebuje pričakovano vrednost rezultata scenarija.

Primer programske kode, ki smo ga ustvarili z njeno uporabo, je prikazan na Sliki 8. Pri tem

pričakujemo, da element z značko dashboard obstaja znotraj spletne strani.

Slika 8: Pričakovani rezultat funkcijskega testa

Vsak test zapišemo s klicem globalne funkcije describe, ki vsebuje dva parametra oziroma niza

in funkcijo. Prvi parameter predstavlja ime funkcionalnosti, ki jo testiramo. Drugi parameter -

funkcija je blok koda, v kateri lahko implementiramo več testov. Vsak test definiramo s pomočjo

20

funkcije it, ki vsebuje ustrezne interakcije z elementi in pričakovani izhod. Celotni

implementirani test je prikazan na Sliki 9.

Slika 9: Test za prijavno stran

Spodaj (Sliki 10 in 11) je predstavljen še en primer kode testa, ki smo ga ustvarili za testiranje

funkcionalnosti ustvarjanja objave v testni spletni strani. Pri ustvarjanju objave izpolnimo dve

vnosni polji oziroma opis objave in tip objave, nato kliknemo gumb "Post". Tip objave je select

box element, za katerega smo uporabili filter funkcijo, s katero poiščemo opcijo z vrednostjo

enako tekstu, ki ga iščemo.

Slika 10: Koda za izbiro vrednosti znotraj select box-a

21

Slika 11: Objekt strani za ustvarjeno objavo

Zagon testov poteka preko ukazne vrstice z ukazom protractor, ki mu sledi ime konfiguracijske

datoteke. Primer:

protractor conf.js

4.2.3 Organizacija testov

Teste smo organizirali v pakete (angl. container). Sami paketi vsebujejo zbirko testov, ki imajo

skupen cilj. Z njimi preverimo, ali ima aplikacija določen sklop vedenj. Definiranje paketov

opravimo s funkcijo define. Testne pakete lahko sestavljamo z več testnimi primerki (scenariji).

Scenarije ustvarimo, da bi preverili skladnost funkcionalnosti glede določenih zahtev. Pri

implementaciji smo jih definirali s pomočjo funkcije it. Testne pakete shranimo v posebne

datoteke s končnico .spec. Primer testnega paketa, ki smo ga sestavlili iz enega testnega

primerka, je prikazan na Sliki 12.

22

Slika 12: Testni primerek

Z uporabo objekta spletne strani smo ustvarili vmesnik med dejansko spletno stranjo in logiko

testa. Razred testne strani vsebuje storitve, ki jih določena stran ali katera sekcija programskega

koda, ki se ponavlja večkrat znotraj testov, ponuja. Datoteke za razred spletne strani

poimenujemo s končnico .pageObject. Če se v prihodnosti odločimo spremeniti ime elementa

razreda .css, nam ne bo treba spreminjati programskega koda v vseh testih, ampak bomo zgolj

spremenili razred spletne strani. Na Sliki 13 je predstavljen razred za prijavno stran v naši

implementaciji. Uporaba objekta za prijavno stran je prikazana na Sliki 12.

Slika 13: Objekt za prijavno stran

23

Na Sliki 14 je predstavljena struktura testov z uporabo testnih paketov in testnih primerkov, ki

smo jih ustvarili v praktični implementaciji diplomske naloge. Naslovi znotaj tabel predstavljajo

testni paket, seznami pa testne primerke (scenarije).

Slika 14: Testni paketi

Ko se konča izvajanje testov z uporabo paketa jasmine-reports v funkciji onPrepare znotraj

konfiguracijske datoteke, se generirajo xml poročila.

4.3 Uporaba orodja Jenkins

4.3.1 Namestitev

Najprej smo na naš računalnik namestili programski jezik Java. Ker je Jenkins Javina aplikacija,

potrebujemo za zagon vsaj izvajalno okolje JRE. Eden od mnogih načinov namestitve orodja

Jenkins je nalaganje z ukazno vrstico. Jenkins vsebuje izvršljivo datoteko WAR. Orodje Jenkins se

Login page

• it should login

Dashboard

• follow post

• unfollow post

• open shop window

• sort dashboard

• open contact page

• check chat action of post

• check book action of post

• check call action of post

Create post than

• check if url is redirected

• check if exist inside dashboard

• check if popup is showed

• check validation of call action

• check if action is showed inside dashboard

Check list with posts

• check post values

• check removing post item

24

bo izvajalo prevzeto na vratih 8080. Tako lahko do orodja dostopamo v brskalniku s povezavo

http://localhost:8080.

Jenkinsa zaženemo z naslednjim ukazom:

$ java -jar jenkins.war

Začetna stran orodja Jenkins vsebuje nadzorno ploščo, v kateri imamo pregled poslov z

informacijami o zadnjih uspešnih in neuspešnih izvajanjih ter gumbe za ročni zagon poslov

(Slika 15).

Slika 15: Nadzorna plošča

4.3.2 Vnašanje poslov

Najosnovnejša funkcija orodja Jenkins je spremljanje izvorne kode v sistemu za nadzor različic in

grajenje najnovejše različice izvorne kode vsakič, kadar so narejene kakršne koli spremembe v

projektu. Za nadzor različic v našem primeru smo uporabili orodje Git.

Preden začetkom implementacije smo potrebovali še nekaj dodatnih nastavitev. Namestili smo

vtičnik Git, ki smo ga poiskali na spletni strani http://localhost:8080/pluginManager/ za

upravljanje z vtičniki, do katerih dostopamo z upraviteljem orodja Jenkins.

25

Potem smo s pomočjo Jenkins build job ustvarili posebno opravilo, ki je izvajalo gradnjo izvorne

kode in funkcijsko testiranje. To smo naredili tako, da smo v stranskem meniju domače spletne

strani izbrali »New Item«. Nato se je prikazala spletna stran, ki je vsebovala vnosno polje kot

naslov opravila in izbirni seznam med dvema tipoma opravila v orodju Jenkins. Za gradnjo

programske kode smo uporabljali Freestyle Job, ki se je izkazal kot zelo prožno in konfigurabilno

opravilo.

Opravila Jenkins lahko uporabljamo kot korak v razvojnem procesu programske opreme, in sicer

pri izvajanju integracijskih testov, modularnem testiranju, merjenju pokritosti kode, postavitvi

aplikacije v produkciji itd.

Ko smo namestili vtičnik Git, je bilo treba v orodju Jenkins (Slika 16) nastaviti, kje lahko najde

izvorno kodo našega projekta. To smo nastavili v sekciji »Source Code Menagement« za

upravljanje izvorne kode, ki je vsebovala dve vnosni polji: povezavo do repozitorija Git in ime

veje. Jenkins deluje tako, da preverja izvorno kodo in osvežuje spremembe v svojem delovnem

prostoru.

Slika 16: Nastavitve repozitorija Git

26

Vtičnik Git omogoča dodatne nastavitve, s katerimi je bilo mogoče prilagajati naš projekt. Ena

izmed njih je bila Clean before checkout, ki očisti delovni prostor pred vsakim preverjenjem

repozitorija z brisanjem vseh datotek brez sledenja. V našem primeru zbriše stare gradnje

projekta, vključno z naštetimi v datoteki .gitignore.

Naslednje, kar smo nastavili v orodju Jenkins, je pogostnost preverjanja posodobitev v

repozitoriju Git. Želimo, da Jenkins spremlja repozitorij in začne izvajati svoje delo vsakič, ko so

spremembe v repozitoriju. V našem primeru smo uporabili zunanjo skripto Git (hook), ki se

izvaja, ko je celotni postopek združevanja izvorne kode v sistemu za upravljanje različic končan

po ukazu git push. To smo uredili z dodajanjem v skripto post-receive.sample v oddaljeni

direktorij Git v mapi hook. Hook skripta izvaja "GET" avtenticirano zahtevo do Jenkins URL, s

katerim sprožimo izvajanje dela, pri čemer gre za izvajanje na daljavo. Primer kode v post-

receive skripti je:

#!/bin/sh

cur --user Admin:789456 http://localhost:8080/job/diplomska/build?token=nananna

echo 'Jenkins build from push'

Sprožitev posla na daljavo nastavimo tudi v orodju Jenkins znotraj sekcije Build, v kateri smo

izbrali potrditveno polje »Trigger builds remotely«, ki je omogočilo in nastavilo avtentikacijski

žeton (angl. Token). Pod vnosnim poljem je zapisana povezava URL za zagon posla na daljavo, ki

smo ga uporabili v post-receive skripti (Slika 17).

Slika 17: Nastavitev za sprožitev posla

27

Izvajanje gradnje programske kode je lahko tudi v rednih intervalih (npr. enkrat na dan) ali

ročno. Izvajanje z intervali je pomembno v projektih z veliko razvijalci, kjer bi se lahko zgodilo

več hkratnih klicev za izvajanje poslov. Za ta namen lahko nastavimo polje Poll SCM (glej Sliko

17). Primer: z dodajanjem vrednosti "H 5 * * *" lahko nastavimo izvajanje posla vsak dan ob

5:00.

Naslednji korak je konfiguriranje akcij posla, ki sestojijo iz več korakov. Naša aplikacija je

AngularJS, zato smo začeli z nastavitvijo namestive paketov, ki jih uporabljamo v aplikaciji

(vključili smo ogrodje Protractor, za gradnjo poročila orodje Jasmin). Nadaljevali smo z

nastavitvijo za gradnjo aplikacije, ukazom za kreiranje virtualnega strežnika, prek katerega

dostopamo na spletno stran, in zagonom strežnika Selenium. Počakali smo, da je strežnik

Selenium začel delovati, nato pa začeli izvajate teste. Na koncu strežnik smo strežnik Selenium

izklopili. Te nastavitve vidimo spodaj:

$ npm install

$ npm start

$ move "%WORKSPACE%\dist\*" "%WORKSPACE%\src

$ ./node_modules/protractor/bin/webdriver-manager update

$ ./node_modules/protractor/bin/webdriver-manager start > /dev/null 2>&1 &

$ ./node_modules/http-server/bin/http-server ./src -a localhost -p 1234 > /dev/null 2>&1 &

$ ./wait_selenium_server.sh

$ ./node_modules/protractor/bin/protractor ./tests/conf.js

$ ./node_modules/protractor/bin/webdriver-manager shutdown

Ukaze izvajamo neposredno na podlagi operacijskega sistema. To lahko izvajamo v orodju

Jenkins z "Execute Shell" ali "Windows Bach command". Na Sliki 18 v sekciji Build uporabljamo

nastavitev "Execute Widnows bach command", s katero smo dodali korak za izvajanje ukaza

Windows (v našem primeru npm install namestitev paketov AngularJS).

28

Slika 18: Dodajanje zagona zunanjega ukaza v orodju Jenkins

Pomemben del pri testiranju sta pregled testov in analiza poročil. Ko končamo z izvajanjem

testov, generiramo datoteko .xml, s katero beremo podatke o izvajanih testih. V orodju Jenkins

smo konfigurirali posel, ki se izvaja po testiranju in generiranju poročila. To smo uredili v sekciji

»Post build actions«, ki lahko vsebuje akcije, kot so branje poročila, e-poštna obvestila,

arhiviranje datotek itd.

V našem primeru smo dodali akcijo Publish JUnit test results report (Slika 19), v kateri smo

nastavili pot do zgeneriranega poročila in ocenitveni faktor, s katerim ocenujemo uspešnost

testov (npr. ocenitveni faktor 10.0 pomeni, da bo ob 10 % neuspešnih testov uspešnost

testiranja 0-odstotna, glej Sliko 15).

29

Slika 19: Nastavitve v orodju Jenkins za poročila

Naslednje, kar smo nastavili z uporabo post build actions, je bilo pošiljanje e-pošte razvijalcem,

ki bodo s svojim dodajanjem sprememb v repozitorij povzočili neuspešno gradnjo aplikacije (glej

Sliko 19).

Poteku izvajanja ukazov lahko sledimo prek konzole. V spletni strani z nadzorno ploščo obstaja

okno »Build Executor Status«, ki vsebuje seznam poslov, ki se trenutno izvajajo. S klikom na

enega izmed njih se odpre stran z informacijami o trenutnem poslu. S klikom na opcijo "Console

log" znotraj menija odpremo konzolo. Konzola izpiše izvajanje ukazov v realnem času in na

koncu poda podatek o statusu izvajanja poslov.

4.4 Izvajanje testov, pregled poročila in analiza rezultatov

Testna poročila so potrebna za formalen prikaz testnih rezultatov, s katerimi ocenimo rezultate

testiranja. Formalni prikaz je dokument, ki organizirano evidentira podatke, dobljene iz

testnega poskusa.

Nadzorniki rezultatov potrebujejo dokumentirane testne primerke za analizo in pregled teh

rezultatov. Vsak testni primerek vsebuje zbirko podatkov, predpogoje in pričakovane rezultate.

30

Na Sliki 20 so prikazani rezultati testnih primerkov, ki smo jih ustvarili v praktičnem delu

diplomske naloge.

Slika 20: Dokumentiranje testnih primerkov

Za pregled rezultatov smo opravili teste s spremembo v repozitoriju z izvajanjem ukaza git push.

Rezultat zadnjega izvedenega testa je bil prikazan v nadzorni plošči orodja Jenkins. Do

rezultatov testa dostopamo prek nadzorne plošče ali spletne strani posla, ki vsebuje seznam

zgodovine poslov in seznam z zadnjim uspešnim poslom, zadnjim neuspešnim poslom, zadnjim

stabilnim poslom ter zadnjim nestabilnim poslom. V nadzorni plošči je bil prikazan še grafikon z

zadnjimi devetimi izvajanimi posli. Iz grafikona dobimo podatke o številu izvajanj testov in

številu uspešno zaključenih testov (glej Sliko 21). Iz že izvršenega posla z zaporedno številko

#160 (Slika 21) lahko sklepamo, da so bili vsi testi uspešno zaključeni. Iz posla s številko #163 pa,

da je pet neuspešnih testov od skupno 16.

31

Slika 21: Graf zadnjih izvajanj testov

Kot najboljša predstavitev podrobnosti testov v orodju Jenkins lahko služi primer posla s

številko #163. Jenkins omogoča zaznavanje podatkov v zvezi s statusom testov, poslanimi

spremembami v repozitorij, podatki o razvijalcu, ki je posel pognal, vejo repozitorija, v kateri so

te spremembe dodane, ter podrobnostmi pregleda testnih rezultatov. Status testov je označen

z veliko obarvano točko rumena barva pomeni, da je test nestabilen, modra pa, da je stabilen.

Le-tega določimo glede na ocenitveni faktor testov (glej Sliko 22).

Jenkins omogoča podroben pregled testnih rezultatov ter prikaže listo z imeni vseh neuspešnih

testov in njihov čas trajanja. Ime testov sestoji iz imena paketa in imena testnega primerka. S

pomočjo teh imen in dokumentacije testnih paketov lahko nadzornik dobi podatke o stanju

testirane funkcionalnosti brez pregleda in zaznavanja kode testov.

32

Slika 22: Podrobnosti o izvajanju posameznega testa

Primer neuspešnega testa je test z imenom "create post than check if exist inside dashboard"

(Slika 22), za katerega preko dokumentacije primerkov (Slika 20) zaznamo, da je paket z

imenom "create post" in testni primerek "than check if exist inside dashboard". Tako dobimo

opis testa, ki je ''ustvarimo objavo in preverimo, ali je rezultat prikazan znotraj nadzorne strani''.

Slika 23: Podrobnosti testov pri posameznem izvajanju

33

Jenkins omogoča tudi podroben pregled za posamezni test, kar nam je v pomoč pri zaznavanju

napak v programski kodi (Slika 24). Ti pregledi pomagajo razvijalcem programske opreme.

Takšen pregled je prikazan za test na Sliki 23 z imenom "create post then check it if exist inside

dashboard". Glede naše kode (Slika 25) lahko zaznamo, da se opis ustvarjene objave "nova

vrednost567" in opis zadnje objave v nadzorni strani ne ujemata.

Slika 24: Podrobnosti napake

Slika 25: Primer kode za testiranje ustvarjene objace

34

5 ZAKLJUČEK

V sklopu diplomskega dela smo predstavili koncepte testiranja programske opreme in sprotno

testiranje le-te. V teoretičnem delu smo predstavili metode in tehnike testiranja, zvezno

integracijo programske opreme, ogrodji Protractor in Jenkins. V praktičnem delu smo načrtovali

in implementirali funkcijske teste s pomočjo ogrodja Protractor ter avtomatizirali proces za

gradnjo in izvajanje testov z orodjem Jenkins.

Avtomatizirano testiranje je pomemben del vsakega zveznega integracijskega okolja in ga je

treba jemati resno. Ker so povratne informacije o stanju projekta zelo pomembne, je treba

zagotoviti hiter potek testov. Pri implementaciji praktičnega dela smo ugotovili, da je Jenkins

enostavno konfigurabilen, s preprostim vmesnikom in omogoča številne vtičnike za

poenostavitve postopkov za avtomatizacijo procesov. Eden najpomembnejših delov za vsakega

razvijalca je pregled poročila o izvajanju testov. Orodje Jenkins daje dober pregled nad

trenutnim stanjem testov in indikacijo o njihovi zgodovini. Podaja tudi časovni pokazatelj, se

pravi, kako hitri so naši testi.

Protractor deluje kot orodje za testiranje aplikacij Angular. Njegova uporaba pomeni velik korak

naprej za podjetja oziroma njihova prizadevanja za hitrejše zaznavanje napak in razvoj

stabilnejših aplikacij.

Pri uporabi avtomatiziranega testiranja smo ugotovili, da to skrajša čas testiranja, zmanjšuje

človeške vire ter omogoča zaznavo napak v zgodnejši fazi razvoja programske opreme. Prav

tako imamo pregled nad tem, kaj so razvijalci naredili, katere skripte so spreminjali, katere teste

so izvajali ter katere napake so se pojavile in so bile odpravljene.

35

6 VIRI IN LITERATURA

[1] Giuseppe A. Di Lucca , Anna Rita Fasolino, "Testing Web-based applications: The state of the art and

future trends", [Elektronski]. Dostopno:

http://web.cs.du.edu/~sazghand/background_chap_papers/Testing%20Web-

based%20applications%20-%20The%20state%20of%20the%20art%20and%20future%20trends.pdf.

[17.08.2017]

[2] "Protractor style guide", [Elektronski]. Dostopno: https://github.com/CarmenPopoviciu/protractor-

styleguide#unit-testing. [17.08.2017]

[3] "Protractor", [Elektronski]. Dostopno: http http://www.protractortest.org. [17.08.2017]

[4] "Continuous integration", [Elektronski]. Dostopno:

https://en.wikipedia.org/wiki/Continuous_integration. [17.08.2017]

[5] Paul M. Duvall "Continuous integration", [Elektronski]. Dostopno:

https://app.assembla.com/spaces/cie/documents/c5Sfa6Lq8r3yLWab7jnrAJ/download/c5Sfa6Lq8r3yLW

ab7jnrAJ [17.08.2017]

[6] John Ferguson Smart, " Jenkins - The define guide", [Knjiga]. [17.08.2017]

[7] "How to develop a template for test cases", [Elektronski]. Dostopno:

http://reqtest.com/tutorials/how-to-develop-a-template-for-test-cases/.[17.08.2017]

[8] "Protractor testing", [Elektronski]. Dostopno: https://www.guru99.com/protractor-testing.html.

[17.08.2017]

[9] Roman Braun, "Creating maintainable E2E tests with Protractor and Cucumber", [Elektronski].

Dostopno: https://medium.com/osldev-blog/tutorial-creating-maintainable-e2e-tests-with-protractor-

and-cucumber-513435a71db3 . [17.08.2017]

[10] "Angular 2", [Elektronski]. Dostopno: https://angular.io/ .[17.08.2017]

[11] "Protractor testing tool for End-to-end Testing of AngularJS Applications", [Elektronski]. Dostopno:

http://www.softwaretestinghelp.com/protractor-testing-tutorial/ . [17.08.2017]