Testiranje softvera - SI3TS, 2012.

Selenium framework Alat za testiranje web aplikacija

Dražen Drašković, asistent

1. Snimanje testa koristeći Selenium IDE Pokazaćemo kako se snima test korišćenjem Selenium IDE. Da bi pokrenuli snimanje testova, moramo pokrenuti web browser Mozilla Firefox. Nakon toga pokrenućemo Selenium IDE, dodatak za Firefox, koji treba biti instaliran. Njega možemo pronaći u Tools meniju. Kada se prvi put pokrene Selenium, snimanje testa je već uključeno. Da bismo pokrenuli snimanje testova, potrebno je uraditi sledeće:

1. Promeniti Base URL na glavnu URL adresu aplikacije koju želimo da testiramo. U ovoj vežbi, mi ćemo koristiti stranicu http://book.theautomatedtester.co.uk/.

2. Kliknuti na Chapter1. 3. Kliknuti na radio dugme. 4. Promeniti vrednost padajuće 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 izvrši, on izgleda slično kao na slici 2.

Slika 2: Izgled test primera nakon pokretanja

Šta smo dobili?

Uspešno smo snimili naš test i pokrenuli ga ponovo. Kao što možemo primetiti, Selenium IDE pokušava da primeni prvo pravilo automatskog testiranja tako što koristi OPEN komandu (u ovom slučaju biramo Chapter1), a zatim korak po korak snima izvršavanje komandi koje želimo da testiramo.

Kada se sve akcije izvrše, videćemo da sve akcije imaju zelenu pozadinu. To označava da su sve izvršene uspešno.

2. Ažuriranje testa za proveru elemenata na stranici Koristićemo istu stranicu kao i ranije, ali ćemo se uveriti da su različiti elementi na toj stranici. Postoje dva mehanizma validacije elemenata, koji su dostupni na aplikaciji koja se testira. Prvi mehanizam je assert: on omogućava da se proveri da li je element na stranici. Ako on nije dostupan, test će biti prekinut u određenom koraku koji se nije uspešno izvršio. Drugi mehanizam je verify: on takođe omogućava da proverimo da li je element na stranici, ali čak i ako nije, test će nastaviti dalje izvršavanje. Kako bismo dodali assert ili verify u testove, moramo da koristimo sadržaj 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: Padajući meni za proveru elemenata

Ažuriranje testa za verifikaciju stavki

1. Otvoriti Selenium IDE, tako da započnemo snimanje testa. 2. Postaviti Base URL na http://book.theautomatedtester.co.uk/. 3. Kliknuti na Chapter1. 4. Kliknuti na radio dugme. 5. Izabrati u padajućoj listi Selenium Grid. 6. Proveriti da li postoji sledeći tekst desno od padajuće liste: Assert that this text is

on the page. To možemo da uradimo tako što kliknemo desnim dugmetom miša na element i dobićemo meni, slično kao na slici 3.

7. Proveriti da li je dugme na stranici. I u tom slučaju koristi se padajući meni. 8. Kada završimo prethodne korake, Selenium IDE treba da izgleda kao na slici 4.

Slika 4: Dodavanje komandi za proveru elemenata

Ako sada pokrenemo izvršavanje testa, videćemo 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 uspešno završena? Javila bi se greška da očekivana komanda nije izvršena, ali bi test bio izvršen do kraja, što možemo videti na slici 5.

Slika 5: Greška u slučaju da određeni tekst ne postoji na stranici

Test ne bi nastavio izvršavanje, 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 budući testeri mogli da koriste testove za neki softver.

Dodavanje komentara kod Selenium IDE

Da bismo dodali komentare u naše testove, moramo da uradimo sledeće korake:

1. U testu koji smo kreirali ranije, kliknemo desnim dugmetom miša. 2. Dobićemo padajući meni, kao na slici 6.

Slika 6: Dodavanje komentara

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

(ovo je moguće uraditi i komandom EDIT > Insert New Comment) 4. Kliknemo na Command tekstualno polje i dodamo komentar koji želimo da

koristimo za buduće održavanje. Sada će test primer izgledati kao na slici 7 (komentari se uvek pojavljuju kao ljubičasti tekst).

Slika 7: Test primer sa dodatim komentarom

4. Rad sa više prozora

Rad sa više prozora može biti jedna od najtežih stvari pri pravljenju Selenium testa. To znači da pretraživač mora dozvoliti Selenium-u da programski zna koliko dece-pretraživača procesa je napravio.

U ovim primerima, mi ćemo kliknuti na element na stranici, koji će izazvati otvaranje novog

prozora. U slučaju da je uključena blokada pop-up prozora, potrebno ga je isključiti za

korišćenje ovih primera.

Koraci:

1. Otvorićemo Selenium IDE i odabrati stranicu Chapter1. 2. Kliknuti na jedan element na stranici sa sledećim tekstom Click this link to launch

another window. To će izazvati otvaranje novog prozora.

3. Kada se prozor učita, 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, možemo da primetimo da kada otvorimo novi prozor, ubacuje se komanda waitForPopUp. Ovo se dešava zato što test zna da sačeka veb server da obradi zahtev i da generiše stranicu. Takođe, bilo koja komanda koja čeka da se učita veb stranica sa servera, ima komandu waitFor.

Sledeća komanda je selectWindow komanda. Ta komanda govori Selenium-u da prebaci kontekst na prozor koji se zove popupwindow i da će se izvršavati sve komande koje slede u tom prozoru, osim ako drugačije ne bude rečeno drugom komandom. Kada test završi rad sa pop-up prozorom, on će se vratiti u roditeljski prozor sa početka testa. Da bismo to uradili, moramo da označimo null za prozor. Ovo će naterati selectWindow da pomeri kontekst testa u pozadini na roditeljski prozor.

Promena konteksta među više prozora

U sledećem primeru, mi ćemo otvoriti dva pop-up prozora i kretati se između njih i roditeljskog prozora, kao što je prikazano u sledećim koracima.

1. Pokrenućemo Selenium IDE i otići na stranicu Chapter1. 2. Kliknuti na prvi link za otvaranje pop-up prozora. 3. Potvrditi tekst na stranici komandom assert. 4. Otići na roditeljsku stranicu i kliknuti na link koji otvara drugi pop-up prozor. 5. Potvrditi tekst na stranici komandom verify. 6. Vratiti se na prvi pop-up prozor i zatvoriti ga koristeći link za zatvaranje. 7. Vratiti se na drugi pop-up prozor i zatvoriti ga koristeći link za zatvaranje. 8. Vratiti se na roditeljski prozor i proveriti neki element na stranici komandom verify. 9. Pokrenuti test i videti kako se izvršavanje prelazi sa prozora na prozor. Kada se

završi test, uspešno izvršavanje treba da bude prikazano kao na slici 9.

Slika 9: Rad sa više prozora

5. Selenium testovi nad AJAX aplikacijama

Veb aplikacije danas su dizajnirane tako da su slične desktop aplikacijama. Brzina u radu sa veb aplikacijama dobijena je korišćenjem AJAX tehnologije. AJAX je skraćenica za Asynchronous JavaScript and XML zato što se oslanja na JavaScript tehnologiju za stvaranje asinhronih poziva i vraćanje XML sa podacima koje korisnik ili aplikacija zahteva za nastavak rada. AJAX se ne oslanja na XML, zato što sve više i više ljudi prelazi na JavaScript Object Notation (JSON), koji predstavlja lak način za prenos podataka.

Rad na stranicama sa AJAX-om

U našem primeru, kliknućemo 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 sličan sadržaj 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 završi sa radom, treba da izgleda kao na

slici 11.

Slika 11: Greška prilikom nalaženja 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 prošao - zašto? Test nije prošao uspešno, zato što smo stigli do te tačke izvršavanja testa, a element koji sadrži taj tekst se još uvek nije učitao u DOM (Document Object Model). To se dešava zbog toga što je element zahtevan i renderovan sa veb servera u pretraživač. Kako bismo prevazišli ovaj problem, mi ćemo morati da dodamo novu komandu u naš test, tako da naši testovi prolazi u budućnosti.

1. Desnim dugmetom miša kliknuti na korak koji nije prošao pa će se pojaviti meni. 2. Kliknuti na Insert New Command. 3. U Command select box, postaviti waitForElementPresent ili odabrati iz padajuće

liste. 4. U Target box, dodati cilj koji se koristi u verifyText komandi. 5. Pokrenuti test ponovo, i on treba da prođe 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 možete čekati i duže, definišite samo setTimeout komandu. Ona služi za postavljanje pauze koju će testovi koristiti u budućim komandama.

Rad sa AJAX aplikacijama

1. Kliknite na dugme load text to the page. 2. Sačekati da se pojavi tekst I have been added with a timeout.

Vaš test će izgledati slično 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 različitih komandi koje možemo da koristimo za čekanje. Nekoliko takvih komandi se pokreću kada se druga komanda pokrene. Primer takve komande je clickAndWait. Drugi primer je open komanda, koja će biti izvršena tek pošto se stranica kompletno učita.

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 sačuvan, vi ga možete zahtevati iz JavaScript rečnika, o kome Selenium vodi evidenciju. Da biste koristili promenljivu, morate koristiti jedan od sledeća dva formata, koji izgledaju ovako: ${variableName} ili storedVars['variableName'].

Čuvanje elemenata na stranici

1. Otvoriti Selenium i isključiti Record dugme. 2. Desnim dugmetom miša kliknuti na Assert that this text is on the page, zatim otići

na storeText komandu u meniju i kliknuti na nju. Ako se ona ne prikaže, ići na Show all Available Commands i kliknuti na tu komandu.

3. Pojaviće se dijalog slično kao na slici 14. Unesite ime varijable koju želite da koristite. Na primer: textOnThePage

Slika 14: Dijalog za unošenje imena varijable

4. Kliknuti na red ispod storeText komande u Seleniumu. 5. Uneti komandu type u Command tekstualno polje. 6. Uneti storeinput u ciljno tekstualno polje. 7. Uneti javascript{storedVars['textOnThePage'];} u polje za vrednost. 8. Pokrenuti test. Test treba da izgleda kao na slici 15.

Slika 15: Test koji poziva sačuvanu varijablu

Šta smo dobili?

Kada se vaš test izvrši, videćete da je na željenom mestu upisana vrednost u tekstualno polje.

7. Otklanjanje grešaka u testovima (Debugging) Ova dva koraka su jako važna kada vaš test ne radi, a vi želite da izvršite određenu komandu:

1. Obeležite komandu. 2. Pritisnite dugme X: To će izvršiti komandu u okviru Seleniuma.

Šta smo dobili?

Kada je test pokrenut, možete kliknuti na dugme Pause da biste pauzirali test nakon koraka koji se trenutno izvršava. Kada je test pauziran, Step dugme nije više neaktivirano, i možete kliknuti na njega, ukoliko želite da prolazite kroz test, korak po korak. Ukoliko imate problema sa elementima na stranici, možete uneti nazive i kliknuti na dugme Find. Kada se element pronađe, oko elementa će trepereti zelena ivica nekoliko sekundi.

8. Grupa testova Možemo otvoriti grupu testova koje smo pripremili i pokrenuti veći 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. Primetićete da je Selenium otvorio novi prozor na levoj strani konzole, kao što

možete da vidite na slici 16.

Slika 16: Pravljenje grupe testova

To možete raditi više puta, a kada kliknete na dugme Run Entire Test Suite biće pokrenuti svi testovi u grupi testova. Svi neupešni prolazi i pokušaji biće 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 može da se uradi, da biste znali šta koji test označava. To se može uraditi desnim klikom na test i klikom na Properties u meniju.

Slika 17: Promena imena

9. Snimanje testova

Snimanje testova se vrši na isti način kao i snimanje grupe testova. Kliknuti na File i odabrati Save Test Case. Ovo će prikazati dijalog za snimanje, tako da kasnije možete pokrenuti neki od snimljenih testova.

10. Selenium Remote Control Selenuim IDE pruža testiranje samo preko Firefox-a, što predstavlja manu jer korisnici koriste i druge pretraživače poput Internet Explorer, Google Chrome i Operu. Selenium RC (Remote Control) je alat koji nam omogućava testiranje preko različitih pretraživača koji pritom ne moraju da imaju instaliran Selenium Core na web serveru. Selenium RC se ponaša kao proxy između 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 pretraživače, interpretira i izvršava Selenium komande dobijene od test programa, ponaša se kao HTTP proxy, presreće i verifikuje HTTP poruke razmenjene između pretraživača i AUT(application under test).

• Klijentske biblioteke koje sprovode interfejs između svakog programskog jezika i Selenium RC servera.

Klijentske biblioteke komuniciraju sa serverom slanjem svake Selenijum komande

na izvršavanje. Zatim server prosleđuje komandu pretraživaču koristeći Selenium Core

JavaScript komande. Pretraživač, koristeći JavaScript Interpreter, izvršava Selenium

komandu.

Puštanje TestSuite-a preko Selenium RC-a

Da bi Seleniun RC koristio na mašini mora biti instalirana, po mogućstvu, poslednja Java

JRE verzija. Selenium RC u obliku zip fajla skidamo sa sajta:

http://seleniumhq.org/download.

Da bi počeli 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 smešten Test Suite i gde treba rezultat testiranja da bude sačuvan.

*firefox argument označava da se testiranje vrši preko Firefox pretraživača, i zato se

koriste selenium-server-standalone-<broj verzije>.jar, da su u pitanju drugi

pretraživači koristio bi se selenium-server.jar.

Kada testiranje počne otvoriće se dva prozora navedenog pretraživača. Prvi će imati

Selenium Core okvir sa TestSuite-om, korake testa i rezultat. Na drugom će se videti

izvršavanje TestSuite komandi. Kada se test završi 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 uspešno 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 pregledaču: localhost/phpmyadmin, pa ići na dugme Import i onda odabrati skript za MySQL bazu podataka - opcija Choose File). 4) Nakon učitavanja baze, pokrenuti aplikaciju tako što u veb pregledaču kucate: localhost/naziv_projekta