Testiranje softvera - SI3TS, 2012.

Selenium framework
Alat za testiranje web aplikacija

Draen Drakovi, asistent

1. Snimanje testa koristei Selenium IDE

Pokazaemo kako se snima test korienjem Selenium IDE. Da bi pokrenuli snimanje
testova, moramo pokrenuti web browser Mozilla Firefox. Nakon toga pokrenuemo
Selenium IDE, dodatak za Firefox, koji treba biti instaliran. Njega moemo pronai u Tools
meniju. Kada se prvi put pokrene Selenium, snimanje testa je ve ukljueno.
Da bismo pokrenuli snimanje testova, potrebno je uraditi sledee:
1. Promeniti Base URL na glavnu URL adresu aplikacije koju elimo da testiramo. U
ovoj vebi, mi emo koristiti stranicu http://book.theautomatedtester.co.uk/.
2. Kliknuti na Chapter1.
3. Kliknuti na radio dugme.
4. Promeniti vrednost padajue liste Select na Selenium RC.
5. Kliknuti na link HomePage.

Slika 1: Izgled test primera nakon snimanja

6. Na test je sada snimljen i treba da izgleda kao na slici 1. Kliknuti na PLAY dugme.
7. Kada se jedan test izvri, on izgleda slino kao na slici 2.

Slika 2: Izgled test primera nakon pokretanja

ta smo dobili?
Uspeno smo snimili na test i pokrenuli ga ponovo. Kao to moemo primetiti, Selenium
IDE pokuava da primeni prvo pravilo automatskog testiranja tako to koristi OPEN
komandu (u ovom sluaju biramo Chapter1), a zatim korak po korak snima izvravanje
komandi koje elimo da testiramo.
Kada se sve akcije izvre, videemo da sve akcije imaju zelenu pozadinu. To oznaava da su
sve izvrene uspeno.

2. Auriranje testa za proveru elemenata na stranici

Koristiemo istu stranicu kao i ranije, ali emo se uveriti da su razliiti elementi na toj
stranici. Postoje dva mehanizma validacije elemenata, koji su dostupni na aplikaciji koja se
testira. Prvi mehanizam je assert: on omoguava da se proveri da li je element na stranici.
Ako on nije dostupan, test e biti prekinut u odreenom koraku koji se nije uspeno izvrio.
Drugi mehanizam je verify: on takoe omoguava da proverimo da li je element na stranici,
ali ak i ako nije, test e nastaviti dalje izvravanje.
Kako bismo dodali assert ili verify u testove, moramo da koristimo sadraj menija koji
Selenium IDE dodaje u Firefox. Potrebno je da kliknemo desnim dugmetom na element,
nakon ega e se pojaviti meni kao na slici 3.

Slika 3: Padajui meni za proveru elemenata

Auriranje testa za verifikaciju stavki

1.
2.
3.
4.
5.
6.

Otvoriti Selenium IDE, tako da zaponemo snimanje testa.

Postaviti Base URL na http://book.theautomatedtester.co.uk/.
Kliknuti na Chapter1.
Kliknuti na radio dugme.
Izabrati u padajuoj listi Selenium Grid.
Proveriti da li postoji sledei tekst desno od padajue liste: Assert that this text is
on the page. To moemo da uradimo tako to kliknemo desnim dugmetom mia na
element i dobiemo meni, slino kao na slici 3.
7. Proveriti da li je dugme na stranici. I u tom sluaju koristi se padajui meni.
8. Kada zavrimo prethodne korake, Selenium IDE treba da izgleda kao na slici 4.

Slika 4: Dodavanje komandi za proveru elemenata

Ako sada pokrenemo izvravanje testa, videemo da e provere koje smo dodali da budu
deo testa. Test e sada proveriti da li na stranici postoji tekst, koji smo odabrali da
proverimo, i da li postoji dugme na stranici.
ta bi se dogodilo da provera nije uspeno zavrena? Javila bi se greka da oekivana
komanda nije izvrena, ali bi test bio izvren do kraja, to moemo videti na slici 5.

Slika 5: Greka u sluaju da odreeni tekst ne postoji na stranici

Test ne bi nastavio izvravanje, da smo u testu koristili proveru assert kao mehanizam za
proveru da li elementi postoje na stranici. Videli smo da provere elemenata moraju uvek da
se dodaju kao manuelni korak (Selenium ne radi automatski assert/verify)

3. Komentari
Dobra praksa u testiranju softvera, kao i u programiranju, je dodavati komentare, da bi
budui testeri mogli da koriste testove za neki softver.

Dodavanje komentara kod Selenium IDE

Da bismo dodali komentare u nae testove, moramo da uradimo sledee korake:
1. U testu koji smo kreirali ranije, kliknemo desnim dugmetom mia.
2. Dobiemo padajui meni, kao na slici 6.

Slika 6: Dodavanje komentara

3. Kliknemo na Insert New Comment na eljeno mesto u test primeru.

(ovo je mogue uraditi i komandom EDIT > Insert New Comment)
4. Kliknemo na Command tekstualno polje i dodamo komentar koji elimo da
koristimo za budue odravanje. Sada e test primer izgledati kao na slici 7
(komentari se uvek pojavljuju kao ljubiasti tekst).

Slika 7: Test primer sa dodatim komentarom

4. Rad sa vie prozora

Rad sa vie prozora moe biti jedna od najteih stvari pri pravljenju Selenium testa. To
znai da pretraiva mora dozvoliti Selenium-u da programski zna koliko dece-pretraivaa
procesa je napravio.
U ovim primerima, mi emo kliknuti na element na stranici, koji e izazvati otvaranje novog
prozora. U sluaju da je ukljuena blokada pop-up prozora, potrebno ga je iskljuiti za
korienje ovih primera.
Koraci:
1. Otvoriemo Selenium IDE i odabrati stranicu Chapter1.
2. Kliknuti na jedan element na stranici sa sledeim tekstom Click this link to launch
another window. To e izazvati otvaranje novog prozora.

3. Kada se prozor uita, kliknuti na Close the window tekst unutar prozora.
4. Dodati verify komandu za element na stranici. Na test treba da izgleda kao na slici
8.
5. Kliknuti na Close the window link.
6. Proveriti element u originalnom prozoru.

Slika 8: Dodavanje verifikacije za prozor

ta smo dobili?
U ovom test skriptu, moemo da primetimo da kada otvorimo novi prozor, ubacuje se
komanda waitForPopUp. Ovo se deava zato to test zna da saeka veb server da obradi
zahtev i da generie stranicu. Takoe, bilo koja komanda koja eka da se uita veb stranica
sa servera, ima komandu waitFor.

Sledea komanda je selectWindow komanda. Ta komanda govori Selenium-u da prebaci

kontekst na prozor koji se zove popupwindow i da e se izvravati sve komande koje slede
u tom prozoru, osim ako drugaije ne bude reeno drugom komandom.
Kada test zavri rad sa pop-up prozorom, on e se vratiti u roditeljski prozor sa poetka
testa. Da bismo to uradili, moramo da oznaimo null za prozor. Ovo e naterati
selectWindow da pomeri kontekst testa u pozadini na roditeljski prozor.

Promena konteksta meu vie prozora

U sledeem primeru, mi emo otvoriti dva pop-up prozora i kretati se izmeu njih i
roditeljskog prozora, kao to je prikazano u sledeim koracima.
1.
2.
3.
4.
5.
6.
7.
8.
9.

Pokrenuemo Selenium IDE i otii na stranicu Chapter1.

Kliknuti na prvi link za otvaranje pop-up prozora.
Potvrditi tekst na stranici komandom assert.
Otii na roditeljsku stranicu i kliknuti na link koji otvara drugi pop-up prozor.
Potvrditi tekst na stranici komandom verify.
Vratiti se na prvi pop-up prozor i zatvoriti ga koristei link za zatvaranje.
Vratiti se na drugi pop-up prozor i zatvoriti ga koristei link za zatvaranje.
Vratiti se na roditeljski prozor i proveriti neki element na stranici komandom verify.
Pokrenuti test i videti kako se izvravanje prelazi sa prozora na prozor. Kada se
zavri test, uspeno izvravanje treba da bude prikazano kao na slici 9.

Slika 9: Rad sa vie prozora

5. Selenium testovi nad AJAX aplikacijama

Veb aplikacije danas su dizajnirane tako da su sline desktop aplikacijama. Brzina u radu sa
veb aplikacijama dobijena je korienjem AJAX tehnologije. AJAX je skraenica za
Asynchronous JavaScript and XML zato to se oslanja na JavaScript tehnologiju za
stvaranje asinhronih poziva i vraanje XML sa podacima koje korisnik ili aplikacija zahteva
za nastavak rada. AJAX se ne oslanja na XML, zato to sve vie i vie ljudi prelazi na
JavaScript Object Notation (JSON), koji predstavlja lak nain za prenos podataka.

Rad na stranicama sa AJAX-om

U naem primeru, kliknuemo na neki link i proveriti da li je neki tekst vidljiv na ekranu:
1. Pokrenuti Selenium IDE i pritisnuti dugme Record.
2. Klikunti na tekst Click this link to load a page with AJAX.

3. Proveriti da li se tekst pojavio na ekranu. U testu treba da se pojavi slian sadraj

kao na slici 10. Selenium e generisati sve lokatore koji su potrebni u ovom testu.

Slika 10: Izgled testa nakon pokretanja Ajax komande

4. Pokrenuti test koji smo kreirali. Kada se zavri sa radom, treba da izgleda kao na
slici 11.

Slika 11: Greka prilikom nalaenja teksta dobijenog AJAX-om

Ako pogledate stranicu, koju smo pokrenuli, vidimo da se tekst nalazi na njoj, nakon klika
na link. Dakle, tekst se pojavljuje, a na test nije proao - zato?
Test nije proao uspeno, zato to smo stigli do te take izvravanja testa, a element koji
sadri taj tekst se jo uvek nije uitao u DOM (Document Object Model). To se deava zbog
toga to je element zahtevan i renderovan sa veb servera u pretraiva. Kako bismo
prevazili ovaj problem, mi emo morati da dodamo novu komandu u na test, tako da nai
testovi prolazi u budunosti.
1. Desnim dugmetom mia kliknuti na korak koji nije proao pa e se pojaviti meni.
2. Kliknuti na Insert New Command.
3. U Command select box, postaviti waitForElementPresent ili odabrati iz padajue
liste.
4. U Target box, dodati cilj koji se koristi u verifyText komandi.
5. Pokrenuti test ponovo, i on treba da proe nakon ovoga.

Slika 12: Dodavanje waitFor elementa

ta smo dobili?
Selenium ne eka implicitno na pojavljivanje stavke sa kojom komunicira, pa kao to ste
mogli da vidite, dobra praksa je ubaciti stavku za ekanje nekog elementa koji nam je
potreban.
Komande waitFor e ekati nakon 30 podrazumevanih sekundi, ali ako je potrebno moete
ekati i due, definiite samo setTimeout komandu. Ona slui za postavljanje pauze koju e
testovi koristiti u buduim komandama.

Rad sa AJAX aplikacijama

1. Kliknite na dugme load text to the page.

2. Saekati da se pojavi tekst I have been added with a timeout.
Va test e izgledati slino kao na slici 13.

Slika 13: Dodavanje waitForTextPresent elementa

ta smo dobili?
U prethodnim primerima, ekali smo da se pojavi element na stranici. Postoji veliki broj
razliitih komandi koje moemo da koristimo za ekanje.
Nekoliko takvih komandi se pokreu kada se druga komanda pokrene. Primer takve
komande je clickAndWait. Drugi primer je open komanda, koja e biti izvrena tek poto se
stranica kompletno uita.

6. uvanje informacija sa stranice u testu

Ponekad postoji potreba za memorisanjem elemenata koji se uvaju na stranici, a koriste se
kasnije u testu. Kada element postoji sauvan, vi ga moete zahtevati iz JavaScript renika,
o kome Selenium vodi evidenciju.
Da biste koristili promenljivu, morate koristiti jedan od sledea dva formata, koji izgledaju
ovako:
${variableName}
ili
storedVars['variableName'].

uvanje elemenata na stranici

1. Otvoriti Selenium i iskljuiti Record dugme.
2. Desnim dugmetom mia kliknuti na Assert that this text is on the page, zatim otii
na storeText komandu u meniju i kliknuti na nju. Ako se ona ne prikae, ii na Show
all Available Commands i kliknuti na tu komandu.
3. Pojavie se dijalog slino kao na slici 14. Unesite ime varijable koju elite da
koristite. Na primer: textOnThePage

Slika 14: Dijalog za unoenje imena varijable

4.
5.
6.
7.
8.

Kliknuti na red ispod storeText komande u Seleniumu.

Uneti komandu type u Command tekstualno polje.
Uneti storeinput u ciljno tekstualno polje.
Uneti javascript{storedVars['textOnThePage'];} u polje za vrednost.
Pokrenuti test. Test treba da izgleda kao na slici 15.

Slika 15: Test koji poziva sauvanu varijablu

ta smo dobili?
Kada se va test izvri, videete da je na eljenom mestu upisana vrednost u tekstualno
polje.

7. Otklanjanje greaka u testovima (Debugging)

Ova dva koraka su jako vana kada va test ne radi, a vi elite da izvrite odreenu
komandu:
1. Obeleite komandu.
2. Pritisnite dugme X: To e izvriti komandu u okviru Seleniuma.

ta smo dobili?
Kada je test pokrenut, moete kliknuti na dugme Pause da biste pauzirali test nakon
koraka koji se trenutno izvrava. Kada je test pauziran, Step dugme nije vie neaktivirano, i
moete kliknuti na njega, ukoliko elite da prolazite kroz test, korak po korak.
Ukoliko imate problema sa elementima na stranici, moete uneti nazive i kliknuti na dugme
Find. Kada se element pronae, oko elementa e trepereti zelena ivica nekoliko sekundi.

8. Grupa testova
Moemo otvoriti grupu testova koje smo pripremili i pokrenuti vei broj testova koji su
kreirani.

Kreiranje grupe testova

Ako imate otvorene prethodne korake u Seleniumu, kliknite na File meni.
1. Kliknuti na New Test Case.
2. Primetiete da je Selenium otvorio novi prozor na levoj strani konzole, kao to
moete da vidite na slici 16.

Slika 16: Pravljenje grupe testova

To moete raditi vie puta, a kada kliknete na dugme Run Entire Test Suite bie pokrenuti
svi testovi u grupi testova. Svi neupeni prolazi i pokuaji bie prikazani u logu, u donjem
delu prozora.
Ako elite da snimite grupu testova, kliknuti na File i odabrati Save Test Suite.
Promena imena grupe testova moe da se uradi, da biste znali ta koji test oznaava. To se
moe uraditi desnim klikom na test i klikom na Properties u meniju.

Slika 17: Promena imena

9. Snimanje testova
Snimanje testova se vri na isti nain kao i snimanje grupe testova. Kliknuti na File i
odabrati Save Test Case. Ovo e prikazati dijalog za snimanje, tako da kasnije moete
pokrenuti neki od snimljenih testova.

10. Selenium Remote Control

Selenuim IDE prua testiranje samo preko Firefox-a, to predstavlja manu jer korisnici
koriste i druge pretraivae poput Internet Explorer, Google Chrome i Operu.
Selenium RC (Remote Control) je alat koji nam omoguava testiranje preko razliitih
pretraivaa koji pritom ne moraju da imaju instaliran Selenium Core na web serveru.
Selenium RC se ponaa kao proxy izmeu testirane aplikacije i samih test skripti. Selenium
Core je spojen sa Selenium RC-om umesto da bude instaliran na server.
Komponente Selenium RC-a su:
Selenium server koji pali i gasi pretraivae, interpretira i izvrava Selenium
komande dobijene od test programa, ponaa se kao HTTP proxy, presree i
verifikuje HTTP poruke razmenjene izmeu pretraivaa i AUT(application under
test).
Klijentske biblioteke koje sprovode interfejs izmeu svakog programskog jezika i
Selenium RC servera.

Klijentske biblioteke komuniciraju sa serverom slanjem svake Selenijum komande

na izvravanje. Zatim server prosleuje komandu pretraivau koristei Selenium Core
JavaScript komande. Pretraiva, koristei JavaScript Interpreter, izvrava Selenium
komandu.

Putanje TestSuite-a preko Selenium RC-a

Da bi Seleniun RC koristio na maini mora biti instalirana, po mogustvu, poslednja Java
JRE verzija. Selenium RC u obliku zip fajla skidamo sa sajta:
http://seleniumhq.org/download.
Da bi poeli sa radom treba da se otvori Command Prompt i da se navodi do fajla gde je
raspakovan zip fajl. Onda u Command Prompt kucamo:
Java jar selenium-server-standalone-<broj verzije>.jar htmlsuite *firefox
http://book.theautomatedtester.co.uk/ c:\path\to\testsuite.html
c:\path\to\result.html

htmlsuite argument govori Selenium-u da otvori Test Suite koji je kreiran. Kasnije
navodimo gde je smeten Test Suite i gde treba rezultat testiranja da bude sauvan.
*firefox argument oznaava da se testiranje vri preko Firefox pretraivaa, i zato se
koriste selenium-server-standalone-<broj verzije>.jar, da su u pitanju drugi
pretraivai koristio bi se selenium-server.jar.
Kada testiranje pone otvorie se dva prozora navedenog pretraivaa. Prvi e imati
Selenium Core okvir sa TestSuite-om, korake testa i rezultat. Na drugom e se videti
izvravanje TestSuite komandi. Kada se test zavri rezultat e biti upisan u navedenu
direktoriju u HTML formatu.
Pokretanje Selenium IDE testa preko Internet Explorer-a:
java jar selenium-server.jar htmlsuite *iexplore
http://book.theautomatedtester.co.uk/ c:\path\to\ testsuite.html
c:\path\to\result.html
Pokretanje Selenium IDE testa preko Google Chrome-a:
java jar selenium-server.jar htmlsuite *googlechrome
http://book.theautomatedtester.co.uk c:\path\ to\testsuite.html
c:\path\to\result.html

11. Va zadatak
Testirati PHP veb aplikaciju koju ste dobili metodom crne kutije.
Koraci za uspeno pokretanje veb aplikacije:
1) Prebaciti veb aplikaciju sa diska Materijali u folder: C:\wamp\www
2) Pokrenuti Wamp server (Start > WampServer > Start WampServer).
3) Potrebno je importovati bazu podataka, koja se nalazi u DB podfolderu projekta koji ste
kopirali (kucati u veb pregledau: localhost/phpmyadmin, pa ii na dugme Import i onda
odabrati skript za MySQL bazu podataka - opcija Choose File).
4) Nakon uitavanja baze, pokrenuti aplikaciju tako to u veb pregledau kucate:
localhost/naziv_projekta