Programiranje edukativne igre i automatsko testiranje igre Autor: Marijana Jelenić Fakultet tehničkih nauka, Čačak Master akademskih studija infomacione tehnologije, 2018/2019 marijanajelenic92@gmail.com Mentor rada: dr Vladimir Mladenović, van. prof Apstrakt Kroz projekat će biti prikazan razvoj edukative igre kao i testiranje edukativne igre. Razvoj edukativne igre kroz JavaScript, HTML5 i CSS. Testiranje edukativne igre kroz alat za automatsko testiranje koji se zove Serenity BDD, koji koristi Java programski jezik za pisanje koda, Maven za pokretanje testova, Cucumber i Selenium. Ključne reči JavaScript, CSS, HTML5, Serenity BDD, Testiranje, Hero 1 UVOD Danas postoji veliki broj aplikacija na tržištu, gotovo da nema aspekta u našim životima u kome ne koristimo neku apikaciju. Zbog toga razvoj aplikacija postaje sve važniji, kompleksniji, takođe i raste značaj njihovog kvaliteta. Osiguranje kvaliteta aplikacija postaje važan aspekt koliko i razvoj aplikacija jer greške koje se javljaju u apikaciji ponekad mogu da dovedu do ozbiljnih problema. S obzirom na to da je broj aplikacija raste, veoma je bitno da postoje aplikacije edukativnog tipa. Edukativne apikacije pomažu u razoju sposobnosti za rešavanja problema, stimulišu kreativnost kod čoveka. Iz tog razloga u ovom radu će biti opisana jedna edukativna igra zasnovana na kodiranju. Uz pomoć igre se uče koncepti kodiranja. Cilj rada je da uz pomoć JavaScript jezika, HTML5 I CSS napravi edukativna igra, kao I to da se razvijena igra istestira alatom Serenity BDD koji se koristi za automatizovano testiranje softvera, tehnologije koje se koriste u okviru Serenity BDD-a je Java, Selenium, Maven I Cucumber. 2 HTML5, CSS3 I JAVASCRIPT U ovom radu možemo jasno identifikovati tri osnovna aspekta veb stranice: sadržaj, izgled i ponašanje. Za opis svakog od tih aspekata koristi se poseban jezik. naslove, pasuse, zaglavlja, podnožja, liste, tabele, umetanje slika, linkova i slično, opisuju se jezikom koji se naziva HTML (engl. HyperText Markup Language). Stil stranice, odnosno njen izgled, možemo reći vizuelna prezentacija, opis fontova, boja, okvira, margina, poravnavanja teksta, opisuje se jezikom CSS (engl. Cascading Style Sheets). Ponašanje stranice, dodavanje dinamičnosti i interaktivnosti stranici definiše se u jeziku JavaScript. Sve ove jezike pregledači veba direktno razumeju. HTML i CSS se ne mogu ubrojati u programske jezike jer ne podržavaju standardne programske konstrukcije poput, naredbi, promenljivih, petlji, grananja već u jezike za obeležavanje (engl. markup languages). Sa druge strane, JavaScript je pravi programski jezik. 2.1 HTML5 HTML (Hyper-Text Markup Language) je jezik koji uz pomoć jednostavnih kodova opisuje grafički izgled dokumenta namenjenog objavljivanju na Internetu putem servis World Wide Web (WWW). Osim što određuje kako će se tekst i slika smeštati na dokuementu HTML definiše i način na koji će se različiti dokumenti međusobno povezivati linkovima. Mogućnost takvih veza gotovo su neograničene, pa tako uz njihovu pomoć i pomoć ostalih kontrolnih kodova koje vam pruža HTML možete na jednostavan način napraviti pravu interaktivnu multimedijanu aplikaciju. HTML nije programaski jezik, niti su HTML dokumenti pravi računarski programi. Za HTML možemo reći da je dokument koji daje informacije koje korisnik može da pročita ali ne i da izmeni. [4] Sve veći broj sajtova na vebu, tj ono sto zovemo veb aplikacije, to jeste sve više imamo aplikacija na vebu koji imitiraju desktop aplikacije. Snažna veza sa JavaScript-om su gurnuli prethodne verzije HTML-a na ivicu svoje sposobnisti. I to je dovelo do toga da se koristi HTML5. Nekada je HTML omogućavao samo prikazivanje teksta bez ikakvih dodataka i imao je svega 20 funkcija, nakon čega je konstantno unapređivan. HTML5 poslednja je i najnaprednija verzija ovog koda. Danas gotovo da nema vizuelnog efekta koji HTML5 kod ne podržava, pa su tako i mogućnosti za kreiranje stranica u HTML-u postale neograničene. Novim standardima istovremeno su nadoknađeni nedostaci i greške iz prethodnih verzija, a jezik je postao nezavisan od oslanjanja na druge softvere kao što su Flash Player, Silverlight i
Java. Nova HTML5 sintaksa u stanju je da sama izvršava sve funkcije koje su umesto nje izvršavali ovi programi, pojačana i praćena novom verzijom CSS-a. [6] Osnovni principi HTML5 su kompatibilnost sa prethodnim verzijama, jednostavnost, sigurnost, interoperabilnost i upravljanje greškama. Obogaćen je velikim brojem novih elemenata i funkcionalnosti. Predstavljena je grupa novih elemenata za bolje označavanje strukture veb strana, grupa semantičkih elemenata. HTML5 je podržan u svim modernim pretraživačima, svi pretraživači bilo da je reč o starijim ili novijim, automatski upravljaju nepoznatim elementima. HTML5 uvodi niz novih elemenata i atributa koji vam mogu pomoći u izgradnji modernih veb stranica. Jedan od novih elemenata je canvas. [6] Canvas je inicijano kreiran 2004. godine od strane Apple-a, kao dodatak Dashboard-u i kako bi poboljšao grafiku Safari brauzera, a kasnije je usvojen i od strane Firefox-a, Opera-e i Google Chrome-a. Danas je canvas deo HTML5 specifikacije za sledeću generaciju veb tehnologija. [5] Canvas se pojavio sa HTML5 i jedna je od najpopularnih novina koja se pojavila sa HTM5.. Koristi se za iscrtavanje grafičkih elemenata, fotografskih kompozicija i pravljenje jednostavnih animacija pomoću nekog skriptnog jezika (najčešće javascript). Canvas <canvas> element je samo kontejner za grafiku koji se određuje pomoću width i height atributa.. Upotrebom javascript-a se može pristupiti čitavom setu funkcija za crtanje putanja, kvadrata, krugova, linija, teksta i dodavanje slika. Canvas je ustvari markup tag <canvas> </canvas> čijim navođenjem, unutar vašeg browser-a postavljate površinu koja je spremna za crtanje. Tu su moguća podešavanja dimenzija, boja pozadine canvas-a i ostala prilagođavanja u konkretnoj primeni. Na ovu površinu sada možete da postavljate slike, iscrtavate linije, raznorazne oblike, koristite četkice, vršite rotaciju elemenata unutar canvas-a, skaliranje, translaciju, animaciju. Canvas je pravougaona regija na HTML stranici koja se definiše preko <canvas> elementa. Ima nekoliko metoda za crtanje putanja, pravougaonika, krugova, teksta i dodavanje slika. Dodavanje tagova <canvas></canvas> na veb stranici kreira se pravougaoni prostor na stranici, koji je po osnovi podešavanjima širine 200px i visine 150px, ali se pomoću atributa širine (width) i atributa visine (height) njegove dimenzije mogu menjati. [6] 2.2 CSS3 Prva verzija CSS-a nije postojala nakon što je HTML bio prisutan već par nekoliko godina, postajaći zvanični 1996 godine.[4] CSS je jezik koji opisuje stil HTML dokumenta, opisuje kako treba prikazati HTML elemente. Možemo reći da CSS opisuje kako HTML element treba prikazati na ekranu, papiru ili na drugim medijima. Korišćenje CSS-a štedi vreme i smanjuje obim posla iz razlog što može kontolisati postavljanje više veb stranica odjednom. CSS koristimo za definisanje stilova svoje veb stanice, uključujući dizajn, izgled i varijacije na displeju za različite uređaje i veličine ekrana. CSS je rešio veliki problem za formatiranje veb stranice, zato što HTML nikada nije nameravao da sadrži oznake za formatiranje veb stranice. HTML je kreiran da bi opisao sadržaj stranice, i kada su oznake za boju i font slova dodate u HTML, nastao je problem sa kojim su se mučili programeri, iz razoga sto se razvijao veliki broj stranica, i trebalo je za svaku starnicu posebno napisati font i boju, to je postao dug i skup proces, zato je World Wide Web Consortium (W3C) kreirao CSS. Sada CSS se čuva u posebnim.css datotekama, i promena čitavog izgleda jedne stranice može se promeniti samo jednom zamenom dokumenta. [2] CSS3 je moćniji od ranije verzije CSS-a. CSS3 ima više vizuelnih efekata kao što su senke za padajući tekst, zaobljeni uglovi i nagibi. Važno je istaći da je on kompatibilan sa starijim verzijama CSS-a, tako da su sve dosadašnje funkcionalnosti dostupne., CSS3 doprinosi stvaranju boljeg vizuelnog doživljaja posetiocima, odnosno korisnicima veb sadržaja. Za razliku od JavaScript-a, CSS3 sadrži niz novih atributa koji nisu u potpunosti podržani od strane svih browsera ili su podržani uz odredjeni uslov, tako da prilikom razvoja treba obratiti pažnju na dostupnost i kompatibilnost. 2.3 JavaScript JavaScript je jednostavan programski jezik prventsveno namenjen razvoju interaktivnih HTML stranica. Jezgra JavaScript-a uključena je u većinu današnjih pretraživača. Ovaj jezik omogućuje izvršavanje određenih radnji u inače statičnom HTML dokumentu, na primer kao što je inerakcija sa korisnikom, i neke dinamičke stvari. Jedna od prednosti JavaScript jezika je njegova integrisanost sa HTML-om. U okviru jedne stranice je moguće je na proizvoljan način kombinovati JavaScript i HTML kod. Takođe iz JavaScript-a moguće je generisati sam HTML kod, u zavisnosti od određene akcije korisnika. JavaScript je skriptni jezik, JavaScript nije pojednostavljena verzija programskog jezika Java. Unutar HTML dokumenta JavaScript skripte se pišu između oznaka <script> i </script>. Proizvoljni broj JavaScript naredni određuje se prilikom učitavanja HTML dokumenta i to redom kojim su napisane. Element <script> može se pojaviti u elementu <head> ili u elementu <body>. U elemenut <head> uobičajno je pisati programe koji očekuju neku korisničku radnju, a u <body> je uobičajno pisati programe koji se izvršavaju odmah pri učitavanju. Jedan HTML dokument može sadržati nekoliko elementa <script>, one će se izvršavati redom kojim su napisane u dokumentu. Odvojene skripte čine jedan JavaScript program u jednom HTML dokumentu, tj. funkcije i varijable definisane u jednoj skripti dostupne su u svim sledećim skriptama u istom HTML dokumentu. [8]
3 OPIS RADA APLIKACIJE Kombinovanjem tehnologija HTML5, CSS3 i JavaScript-a, pomenutih iznad dosli smo do kreiranja aplikacije Hero. Aplikacija je edukativnog tipa i cilj je uz pomoć određenih komadi tj fukncija dovedemo junaka do cilja. Na korisničkom interfejsu možemo primetiti više komponenata koje su funkcionalno zavisne jedna od druge. Svaka komponenta predstavlja zasebni deo aplikacije koji funcionise zavisno od drugog i kao takav kreira celinu koja cini aplikaciju. Slika: 1: Izgled aplikacije Komponente koje se može primetiti na korisničkom interfejsu su: 1. Ekran za egzekuciju našeg programa - Kao deo korisničkog interfejsa u gornjem levom uglu nalaze se prikaz rada našeg koda. Junak naše aplikacije će se u ovom prikazu ima prepreke koje se nalaze na matričnoj mapi koju smo mi kreirali. Na ekranu za egzekuciju program imamo početnu poziciju, cilj, prepreke u vidu cigi i imamo mesta gde Junak može da se kreće zelena polja. Početna pozicija je pozicija gde stoji figura čoveka koju smo nazvali Junak, cilj je da dodje do polja koje se naziva Finish tj do cilja. Zelena polja su polja po kojim može da se kreće, a zid je prepreka koju treba da zaobiđe. 2. Editor - Ugrađeni editor u samoj aplikaciji nam pomaže da vrlo lako i jednostavno manipulišemo, naučimo i usavršimo korišćenje ove edukativne aplikacije. Sa pojednostavljenim komandama nama je dozvoljeno da sastavimo niz instrukcija koje očekujemo da Junak izvrši. Upisivanjem funkcija za kretanje, menjanje pravca i smera u odnosu na početak i cilj misije Junak ima mogućnost da završi uspešno svoje kretanje. 3. Dugmići komande: Reset - Nakon loše odabranih instrukcija uvek možemo setovati Junaka na početnu poziciju. Pritiskom na dugme Reset dobijamo mogućnost da bez brisanja keša i restartovanja pretraživača dobijemo novu šansu za instrukciju koja ce dovesti do uspeha. Play - Dugme za pokretanje akcije na ekranu Admin Panel -Čini odvojenu celinu u našem korisničkom interfejsu. Ova komponenta služi za kreiranje i postavljanje mape za prvi deo ekrana na kome se izvršava egzekucija programa. 4. Spisak Instrukcija za izvršavanje - To su već kreirane funkcije za kontrolisanje kretanja junaka. Funkcije su definisane u pozadini aplikacije, ali su korisniku prikazane veoma pojednostavljene. Funkcije je potrebno prekucati po redusledu koji zahteva sama mapa. Kompleksnost koda zavisi od zahteva same mape i mentora koji obučava korisnika. Fukcije koje su na raslopaganju korisniku su: hero.moveonetile(); hero.turnleft(); hero.turnright(); hero.turnup(); hero.turndown(); Admin panel sadrži: klizno dugme za broj vrsta X. Klizač povećava vrednost povlačenjem na desno i obrnuto, on definiše brojem vrsta mape, mora biti najmanje 1 da bi se mapa kreirala. klizno dugme za broj kolona Y. Klizač povećava vrednost povlačenjem na desno i obrnuto, on definiše brojem kolona mape, mora biti najmanje 1 da bi se mapa kreirala.
Apply, nakon podešavanja parametara nakon pritiskanja dugmeta Apply na mapi nam se pojavljuje odabrani broj polja koje smo prethodno definisali sa klizačima X i Y. Save, nakon modifikacije mape do željenog izgleda, da bi se sačuvale izmene za dalje korišćenje, koristi se dugme Save. Pritiskanjem na ovo dugme dobijamo notifikaciju za izvršene promene u aplikaciji. Nakon ove izmene, Mapa će nam se ažuirati na glavnom ekranu aplikacije nakon pritiska na dugme Reset X dugme za zatvaranje editorskog prozora Slika: 2: Izgled Adim Panel-a 4 TESTIRANJE APLIKACIJE Testiranje softvera je proces koji je usmeren ka procenjivanju karakteristika i sposobnosti softvera ili sistema i utvrđivanju da li taj softver ili sistem ispunjava određene uslove. Ovaj proces uključuje izvršavanje programa ili aplikacije sa namerom pronalaženja softverskih grešaka (eng. bug), i svakog vida odstupanja sistema od originalnih zahteva korisnika, u toku izvršavanja programa. Softversko testiranje je veoma važan deo razvoja softvera. Upravo zbog toga testiranje je postalo sastavni deo razvoja softvera, koje je važno kao i sam razvoj. Čest slučaj je da softverski tim ne pridaje mnogo značaja testiranju i složenosti uloga koje postoje u testiranju. Ipak, proces testiranja može da bude složen, da sadrži važne testne planove, strukturu tima i metodologiju rada. Posao ljudi koji su zasluženi za kontrolu kvaliteta softvera zahteva poznavanje kako tehničkih tako i poslovnih aspekata softvera. Timovi za testiranje moraju dobro da razumeju potrebe krajnjeg korisnika kako bi mogli da se identifikuju sa njima, a da takođe razumeju način rada razvojnog tima kako bi se prilagodili načinu njihovog rada. Ono što razlikuje kompaniju sa prosečnim softverom od kompanije sa odličnim softverom je upravo proces kontrole kvaliteta. Aplikacija Hero koja je napisana u programskom jeziku JavaScript biće testirana automatki kroz alat Serenity BDD. Za okruženje je korišćen IntelliJ IDEA Community 2018.2.5 version. Projekat je kreiran kao maven projekat sa arhitekturom za serenity-cucumbre. Programski jezik koji se koristio za testiranje je Java. Aplikacija će biti funkcionalno ispitana. Ispitaće se osnovne funkcionalnosti aplikacije. Testovi će se izvršavati u Google Chrome pretražvaču. 4.1 Serenity BDD Hero aplikaciju ćemo testirati sa framework-ok Serenity BDD. Serenity BDD je biblioteka otvorenog koda. On pomaže da se brže čistije i lakše za održavanje napišu automatski testovi. Serenity koristi rezultate testova da prikaže veoma ilustrovane izveštaje, koji detaljno dokumentuju i opisuju šta aplikacija koja je testirana radi i kako funcioniše. On nam pomaže da vidimo koji su testovi izvšeni ali i koji su zahtevi testirani. Serenity BDD pruža snažnu podršku za automatizovane testove, iz razloga što koristi Selenium, iako on može da testira i da radi i za servis testiranje. Serenity BDD pomaže da se pišu bolji, efikasniji automatski testovi, i koristi acceptance testove kako bi priprelili izvestaje u dokumentu. Reporti koje Serenity generiše nakon završenih testova imaju snimke za svaki određeni korak u testovima, postoje rezultati za svaki test, vreme izvšavanja i poruku o grešci ako test nije uspeo. Serenity koristi Selenium koji je skup softverskih alata za automatizovano testiranje korisnickog interfejsa Web aplikacija. Omogućava testiranje Web aplikacija u gotovo svim dostupnim pretraživačima, dok test skriptovi mogu biti pisani u različitim programskim jezicima. Selenium se lako integriše sa drugim alatima i omogućava istovremeno izvršavanje test skriptova na više različitih platformi. Serenity koristi Cucumber. Cucumber je alat zasnovan na BDD-u, koji se koristi za pisanje testova za aplikaciju. Omogućava automatizaciju funkcionalne validacije. Cucumber datoteke mogu služiti kao dobar dokument za sve. Cucumber-JVM je Java implementacija cucumber.
Feature fajlovi su ulazna tačka za Cucumber testove. Ovo je datotekau kojoj će biti opisani testovi u opisnom jeziku. Ispod svakog tekstualnog koraka će se nalaziti kod koji će se izvršiti za taj korak, a feature fajlovi mogu da služe i za dokumentaciju, tačno će se znati sta je provereno, zasebno mogu da ih koriste i inžinjeri koji rade manuleno testiranje aplikacije. U okviru Cucumber-a, scenariji se pišu u Feature fajlovima i možemo reći reći funkcijske datotetke. Cucumber koristi jezik Gherkin. Gherkin je fleksibilan, vrlo čitljiv format i strukturan jezik. Služi i kao specifikacija i unos u atomatizovane testove. Jezik Gherkin pruža način da se opiše ponašanje aplikacije u jeziku koji je čitljiv korisnicima. Cucumber pruža način da se mapiraju koriaci scenarija tj akcija na stvari kod npr u javi kroz definiciju. koraka. Pomoću jezika Gherkin se pišu Feature fajlovi. Feature fajlovi se obično sastoje od Naslova funkcionalne datoteke (Feature Title), Narativa (Narrative), Pozadine ( Background), Scenarija (Scenarios), koraka (Steps), oznaka (Tags), tabela sa primerima (Example Tables) i dokumenta (Doc Strings). [1] Slika: 3: Izgled Feature fajla Aplikacija pored Feature fajla ima PageObject klase, takodje ima PageSteps klase, Steps klase. Jedan nivo ispod Feature fajlova su Steps fajlovi. U njima se nalazi nazivi stepova iznad metoda u kojima su pozvane odgovarajuce metode. Page Steps je korak ispod steps i tu se nalaze metode koje iznad sebe imaju notaciju @Step. Page steps fajl poziva sve metode sa page.java. Na Na page.java se nalaze svi elementi i sve provere. Serenity ima neke svoje metode za pronadlaženje elementa i on na primer ne definiše elemente kao Serenium sa WebElement, već ih definiše sa WebElementFacade. Serenity BDD projekti mogu se graditi koristeći Gradle, Maven ili Ant. Konigurisanje Java projekta se radi lako samo generalno je samo pitanje dodavanja pravih zavisnosti. Za pokretanje testova koristimo Maven. Maven je alat za menadžment softverskih projekata. Baziran na konceptu projektno objektnog modela (POM). Sve informacije o projektu koje maven koristi čuvaju se u modelu koji je opisan xml datotekom, nalazi se u root direktoriju projekta, po konvenciji se zove pom.xml i naziva se Project Object Model. POM definiše informacije kao što su naziv i vrsta, zavisnosti sa drugim predmetima, osobe zadužene za razvoj, version control sistem i parametre pristupa, način izgradnje. Serenity BDD se integriše Maven preko serenity-maven-plugin. Prvo je potrebno dodati zavisnosti i određeni dodaci na Serenity BDD na projekat. Postoji više načina da se pokrenu testovi, kao na primer: mvn verify -ova komada će pokrenuti sve testove i kreiraće reportž mvn install -ova komanda će povući potrebne zavisnosti ako su potrebne, i odradiće install nekih stvari ako su potrebne Svaki put kad pokrenemo testove sa nekom od komandi mvn verify ili mvn install, napraviće se izveštaji koji će biti smešteni u novom direktorijumu target/site/serenity, komandom mvn clean se ovaj direktorijum briše. Ogromna prednost alata Serenity BDD su izveštaji koji se prikazuju, tj rezultati su veoma detaljni i slikoviti. Rezultati su prikazani u html obliku ali prikazani su i u csv fajlu. Kreira se csv fail koji se naziva results.csv. U njemu možemo videti naziv testa, rezultat testa, da li je test prosao ili pao, zatim možemo videti datum kada je test pušten, takođe je prikazano i vreme izvršavanje svakog scenarija. Slika: 4 Rezultati u csv fajlu Imamo i rezultate koji su prikazani u html fajlu koji se naziva index.html. U index dokumentu možemo videti u tabeli koliko testova je automatizovano, imamo dva Automated, sto znači imamo dva scenarija koja su automatizovana, i piše da je proslo 100%, nemamo testove koji su Pending nema ni testove koji su Ignored ili koji su Manual. Ispod imamo
poređane testove po tagovima, na primer za Herogame tag imamo dva scenarija i u Test count piše da imamo dva i da su oba 100%. 5 ZAKLJUČAK Slika: 5 Rezultati testiranja u html fajlu Tokom razvoja i upotrebe softvera mogu se pojaviti različite greške. Neke greške su manje važne, dok neke mogu biti skupe i opasne. Zbog toga veoma je važno vršiti analizu kvaliteta softvera u svim fazama životnog ciklusa softvera. Zahvaljujući standardizaciji i standaridam koji postoje za upravljenje kvalitetom softvera, procesi za obezbeđivanje kvaliteta su lakši. U ovom radu je opisan razvoj jedne aplikacije i testiranje te iste aplikacije. Na primeru aplikacije prikazan je razvoj aplikacije kao i proces automatskog testiranja korišćenjem Serenity BDD alata. Napisani su i implementirani automatski testovi za testiranje ponašanja aplikacije koja se koristi u edukativne svrhe. Aplikacija je napisana korišćenjem programskog jezika JavaScript, a testovi jezikom Java. Aplikacija je veoma dobra za razvoj logike, iz razloga što se mora razmišljati kako zavšiti zadatu mapu. U aplikaciji u radu prvo mora da se smisli najbolji put do cilja zatim da se upotrebi logika i da se pozovu odgovarajuće fukcije, ako iznova menjamo mapu i dodajemo nove prepreke i time činimo da prelazak bude teži, to će biti uzbudljivije i više će se razmišljati. Mora da se korisiti logika kako bi razmišljali o koracima unapred kako bi rešili probleme i kompletne nivoe. Iako svaki programer teži da napravi aplikaciju bez greške u praksi to bas i nije moguće uvek će se naći neka greška, zato je veoma bitno da postoji provera kvaliteta. Zato kroz ovaj rad su prikazane određene metode kojih se treba pridržavati prilikom ocenjivanja kvaliteta aplikacije. Automatsko testiranje može pomoći i testerima i programerima. Prilikom promene koda testovi se pokreću i proverava se da li je nova promena imala uticaja na postojeću funkcionalnost. Automatizacija testova je najbolji način da se obezbedi efektivnost, efikasnost i pokrivenost svih testnih slučajeva softvera. Serenity BDD je alat koji je korišćen za testiranje aplikacije Hero i koji se koristi za automatsko testiranje i koji generiše izveštaje koji mogu da budu od velike pomoći i razvojom i testnom timu. LITERATURA [1] Behaviour Driven Development: Tips for writing better feature files http://www.bbc.co.uk/blogs/internet/entries/ff14236d-098a-3565-b678-ff4ba5776a5f [2] CSS Tutorial https://www.w3schools.com/css/ [3] Dragan Petrić, Naučite HTML i oblkujte sami efektne WWW stanice [4] Eliyabeth Castro, Bruce hzslop, HTML5 and CSS3 [5] Eric Rowell, HTML5 Canvas Cookbook, Packt Publishing, 2011 [6] HTML Introduction https://www.w3schools.com/html/html_intro.asp [7] Jeremić, Z. Testiranje softvera i upravljanje kvalitetom, Visoka škola elektrotehnike i računarstva strukovnih studija, Beograd 2014. [8] Osnove JavaScripta, Sveučilište u Zagrebu Sveučilišni računski, Zagreb [9] Serenity BDD dokumentacija http://thucydides.info/docs/serenity-staging/