Selenium

QA Automation
Engineer

Predavač: Dragana Sekulić

Selenium
https://www.selenium.dev/
● Automatizovanje web aplikacija. “Selenium automates
● Selenium WebDriver - učimo na ovom browsers. That’s it!
kursu :) What you do with that
● Selenium IDE - “record & playback opcija” power is entirely up to
you.”
● Selenium Grid - za pokretanje testova na
različitim mašinama istovremeno.
Selenium WebDriver
Arhitektura
 Kreiranje Maven projekta
File -> New -> Maven Project
Kreiranje Maven projekta
U Location polju ne bi trebalo da bude upisana putanja ka nekom drugom fajlu ili folderu!
Kreiranje Maven projekta
All Catalogs -> Internal
Kreiranje Maven projekta
 Kreiranje Maven projekta
Artifact id -> naziv projekta
Group id -> naziv kompanije, tima i sl.
Kreiranje Maven projekta
 Dodavanje Selenium biblioteke (library) u
projekat
1. https://mvnrepository.com/search?q=selenium
2.
3.
4. Otići u Selenium projekat, pa otvoriti pom.xml fajl.
Kliknuti nakon <dependencies>, pa Enter
U novi red kopirati kod sa Maven repozitorijuma.
Rezultat:
Napomena: ukoliko se desi da program pokazuje grešku kao na slici, uraditi sledeće: desni klik na
ime projekta -> Maven -> Update project -> OK
WebDriver
https://www.selenium.dev/selenium/docs/api/java/org/openqa/selenium/WebDriver.html

● Interfejs sa definisanim metodama, kao što su, npr: findElements(),

close(), navigate(), itd.
● Neke od klasa koje implementiraju WebDriver interfejs:
○ ChromeDriver
○ FirefoxDriver
○ SafariDriver
○ EdgeDriver
● Potrebno je “pozvati driver”, tj. instancirati objekat driver. Primer za
test koji će se izvršiti u Chrome-u:

WebDriver driver = new ChromeDriver();

 Putanja do browser driver-a,
samo informativno :)
● U ranijim verzijama Selenium-a (pre verzije 4.6.0),bilo je potrebno postaviti u
testu putanju do browser driver-a sa našeg računara. Kao prva linija koda u testu
pisalo se:

System.setProperty("webdriver.chrome.driver", "putanja do exe

fajla\\chromedriver.exe");

● Primer putanje do fajla, ako je browser driver u “Download” folder-u:

“C:\\Users\\YourUsername\\Downloads\\chromedriver_win32\\chromedriver.
exe”

● Verzija 4.6.0 donosi mogućnost da se ova putanja više ne piše, jer sada
Selenium Manager vodi računa o browser driver-u.
 Download ChromeDriver-a,
samo informativno :)
1. Proveriti koju verziju Chrome-a imamo na svom računaru: klik na “3
tačke” u gornjem desnom uglu -> Help -> About Google Chrome
 Download ChromeDriver-a,
samo informativno :)
2. Otići na https://chromedriver.chromium.org/downloads
- Download-ovati verziju Chrome driver-a koja odgovara verziji Chrome-a
na našem računaru.
 Download ChromeDriver-a,
samo informativno :)
3. Za Windows, biramo “chromedriver_win32.zip”

4. Unzip-ovati “chromedriver_win32.zip folder”.

 Inicijalizacija WebDriver-a
● U zavisnosti od browser-a na kom želimo da izvršavamo testove, WebDriver
inicijalizujemo na jedan od sledećih načina:

WebDriver driver = new ChromeDriver();

WebDriver driver = new FirefoxDriver();
WebDriver driver = new SafariDriver();
WebDriver driver = new EdgeDriver();
 Inicijalizacija WebDriver-a
● Kada inicijalizujemo browser, primetićemo da je npr. ChromeDriver()
podvučen crvenom bojom, jer je potrebno da se importuje odgovarajući
paket.
● Paket importujemo na sledeći način - prislonimo kursor na ChromeDriver() i
biramo opciju “Import ChromeDriver…”
 Inicijalizacija WebDriver-a
● Ukoliko ne uspevamo da pokrenemo test (na pojedinim verzijama
Chrome-a), inicijalizaciju driver-a radimo:

ChromeOptions options = new ChromeOptions();

options.addArguments("--remote-allow-origins=*");
driver = new ChromeDriver(options);
 Selenium komande
Driver komande za rad sa browserom:
● Komanda za otvaranje browser-a:
○ driver.navigate().to("https://www.google.com")
○ driver.get("https://www.google.com")
● Komanda za maximizovanje stranice: driver.manage().window().maximize();
● Komanda za odlazak na prethodno posecenu stranicu: driver.navigate().back();
● Komanda za odlazak na sledecu posecenu stranicu: driver.navigate().forward();
● Komanda za refresh stranice: driver.navigate().refresh();
● Komanda za zatvaranje driver-a (browsera): driver.quit(); (zatvara sve tabove
koji su otvoreni tokom testa), driver.close();(zatvara samo tab koji je inicijalno
otvoren)
 Selenium komande - vežba
1. Otvoriti Google (https://www.google.com)
2. Maximizovati prozor
3. Refreshovati stranicu
4. Otići na drugu stranicu (npr. https://www.selenium.dev/)
5. Vratiti se nazad (na prethodnu stranicu)
6. Otići napred
7. Otići na treću stranicu (npr. https://demoqa.com/)
8. Zatvoriti driver
Struktura web stranice

1. HTML (Hyper Text Mark up language) -

daje strukturu stranici.
2. CSS (Cascading Style Sheet) - stilizuje
stranicu, čini da je stranica “responsive”,
tj. da se sadržaj pravilno prikazuje na
svim veličinama ekrana.
3. JavaScript - čini stranicu interaktivnom.
HTML format elementa
● Selenium traži elemente u HTML-u, na osnovu vrednosti različitih
atributa.

<nazivTaga atribut =”vrednost”>sadržaj </nazivTaga>

Otvarajući tag Zatvarajući tag

● Neki tipovi tag-ova nemaju zatvarajući tag!

HTML format elemenata
● Dugme (button)
<button type="submit" name="add-to-cart" value="54" class="single_add_to_cart">Add cart</button>

● Input polja (za unos teksta)

<input type="text" class="text input-text" name="username" id="username" autocomplete="username"
value="">

● Checkbox (za štikliranje polja)

<input class="input-checkbox" name="rememberme" type="checkbox" id="rememberme" value="forever">

● Link
<a href="https://cms.demo.katalon.com/my-account/lost-password/">Lost your password?</a>
Lokatori/selektori
Najčešći lokatori koje koristimo za
pronalaženje elemenata:

➔ ID

➔ ClassName

➔ Name

➔ CssSelector

➔ LinkText

➔ XPath
 ● Ima prioritet.

01 ID ●
●
Jedinstveno identifikuje element (najverovatnije).
Neki elementi nemaju id.
●
● Može (i ne mora) biti jedinstven.

02 ClassName
● Često se sastoji iz više klasa (prepoznajemo po tome
što ima “space” između reči u class atributu). U ovom
slučaju, koristimo CSS selektor.

● Često nije jedinstven.

03 Name ●
●
Može da se menja sa prevodima.
Često je sličan ID-u.

● Možemo koristiti kada imamo tag-ove sa linkom.

04 LinkText, partialLinkText
●
●
Često se menja, pa nije sasvim pouzdan..
Za pretragu elementa možemo koristiti ceo tekst
linka ili deo teksta linka (različite su metode).

- O CSS selektorima i XPath-u ćemo pričati nešto kasnije…

 Selektori
By.id("vrednost") -> By.id("first-name")

● Ukoliko postoji, id nam je prioritetni selektor.

● Međutim, može se dogoditi da više elemenata na jednoj stranici ima isti id ili da
se id menja nakon svakog refresh-a stranice.

By.name("vrednost") -> By.name("username")

 Selektori
By.linkText("ceoTekstLinka"), By.partialLinkText("deoTekstaLinka")
● Da bismo koristili ovaj selektor, neophodno je da bude u pitanju link, a
prepoznaćemo ga po tagu <a>.
● Link tekst je tekst koji je vidljiv krajnjem korisniku i na koji je potrebno
kliknuti. Partial link tekst je deo teksta linka, koji možemo koristiti ako
nijedan drugi link nema takav tekst (npr. "Lost your", "Katalon Shop").

By.linkText("Lost your password?")

By.partialLinkText("to Katalon Shop")
 Selektori
By.className("nazivKlase") možemo koristiti samo ako u nazivu klase ne postoje
razmaci!
By.className("custom-control-input")

Primer naziva klase sa razmakom:

U slučaju kada postoje razmaci, koristi se CSS selektor, u okviru kog se ispred naziva klase
stavlja tačka, a zatim se svaki razmak briše i zamenjuje tačkom.
By.cssSelector(".oxd-input.oxd-input--active")
 Selektori
By.tagName("nazivTaga") -> By.tagName("h1")

● Naziv tag-a je retko kada jedinstven (osim u slučaju <h1> koji predstavlja
naslov)
● Ređe se koristi sam kao selektor, a češće u kombinaciji sa ostalim
selektorima (u sklopu CSS selektora)
Developer tools

● Koristimo kako bismo pregledali HTML i locirali elemente.

● Otvaramo pomoću F12 na tastaturi ili uradimo desni klik -> Inspect.
● Kako bismo videli određeni element u HTML-u, možemo uraditi jednu od
sledećih opcija:
1. Prisloniti kursor na taj element -> Desni klik -> Inspect
2. Desni klik bilo gde na stranici -> Inspect -> Kliknuti na ikonicu za pretragu
elemenata u Developer tools-u (pogledati sledeći slajd)
 Developer tools
Developer tools

- Koristimo kako bismo pregledali HTML

i locirali elemente.
 Selenium komande
Driver komande za pronalaženje web elemenata:
● Koriste se već ugrađene(built in) Selenium metode findElement i findElements.
WebElement element = driver.findElement(By.How?(“WithWhat?”))
○ How? = tip lokatora (id, className, name…)
○ WithWhat? = string lokatora
○ Primer: WebElement login = driver.findElement(By.id(“login_form”));
● Možemo pronaći prvo neki web element pa unutar njega pronaći sledeći:
○ WebElement loginPanel = driver.findElement(By.id(“login_form”));
○ WebElement usernameField = loginPanel.findElement(By.id(“username”));
Nije potrebno uvek kreirati promenljivu za neki web element!
 Selenium komande
findElement:
● Ako nađe jedan element: vraća taj element
● Ako nađe više takvih elemenata: vraća prvi na koji naiđe (možda nije ono što nam je
potrebno?)
● Ako ne nađe traženi element: dobijamo “NoSuchElementException”.
findElements
● Ako nađe jedan element: vraća taj jedan element
● Ako nađe više takvih elemenata: vraća listu sa svim elementima koji odgovaraju
uslovu
● Ako ne nađe traženi element: vraća praznu listu (ne “puca” test u tom momentu).
 Selenium komande
click()
● Izvršava klik nad web elementom.
● Uglavnom se koristi za button, radio button , checkbox, linkove itd.
● Nema ulazne parametre i nema povratnu vrednost.
● Piše se: element.click();
● Problem: ne znamo da li se klik izvršio.
 Selenium komande
sendKeys(“Tekst koji upisujemo”)

● Unošenje teksta u polje.

● Koristi se za input i textArea tipove polja.
● Prihvata string kao parametar metode i nema povratnu vrednost.
● Moze slati prečice sa tastature: Enter, Tab, F5
element.sendKeys(“Neki tekst.”);
element.sendKeys(Keys.Enter);
 Selenium komande
clear()
● Brisanje teksta iz polja.
● Koristi se za input i za textArea tipove polja.
● Dobra praksa: uvek pre nego sto upišemo nešto u polje, pozovemo clear()
element.clear();
element.sendKeys(“Neki tekst.”);
 Selenium komande - vežba
1. Otići na https://formy-project.herokuapp.com/
2. Maksimizirati prozor.
3. Kliknuti na link “Complete Web Form”.
4. Popuniti sva polja za unos teksta - ime, prezime, radnu poziciju.
5. Označiti jedno od polja za “Highest level of education”.
6. Označiti jedno od polja za pol.
7. Upisati datum u formi npr 16/11/2022.
8. Kliknuti na “Submit”.
Napomena: na stranici se nalazi i opcija da se odaberu godine iskustva, ali to za sada
preskačemo.
 Domaći zadatak
1. Otići na https://formy-project.herokuapp.com/
2. Maksimizirati prozor.
3. Kliknuti na link “Checkbox”.
4. Kliknuti na polje “Checkbox 1”.
5. Kliknuti na polje “Checkbox 2”.
6. Kliknuti na polje “Checkbox 3”.
7. Refresh-ovati stranicu.
8. Vratiti se korak nazad.
9. Zatvoriti driver.
* Nakon inicijalizacije driver-a dodati komandu:
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(2));
* Checkbox 1, 2 i 3 birati prema ID-u.
* Nema potrebe da se kreiraju promenljive koje će čuvati elemente, to ćemo raditi
zajedno na času :)