Selenium

QA Automation
Engineer

Predavač: Dragana Sekulić

 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.
 CSS Selektori
● Možemo da koristimo CSS selektor ukoliko je jedinstven (sami kreiramo
selektor, na osnovu HTML strukture, kombinujući različite atribute, nazive
tagova, itd.).
● Obavezno moramo da koristimo kod compound klasa, tj. kada class atribut
sadrži kao vrednost 2 ili više naziva klasa (sa razmakom između njih).
● Osnovna pravila:
● Kada u CSS selektor želimo da stavimo ime klase, moramo staviti tačku pre
imena -> .imeKlase
● Kod compound klasa -> obriše se razmak između reči i stavi se tačka između
dve reči.
<input class = “prvoIme drugoIme treceIme”>
driver.findElementByCssSelector(“.prvoIme.drugoIme.treceIme”)
 CSS Selektori
● Kada u CSS selektor želimo da stavimo ID, moramo staviti # pre ID-ja ->
#vrednostId
● Lociranje elementa prema tagu i ID-ju -> nazivTaga#vrednostId
● Lociranje elementa prema tagu i nazivu klase -> nazivTaga.imeKlase
● Lociranje elementa prema nekom atributu (koji nije ID, ime klase ili name)
-> [atribut = "vrednost"]
● Lociranje elementa prema tagu i nekom atributu (koji nije ID ili ime klase)
-> nazivTaga[atribut ="vrednost"]
● Lociranje elementa prema tagu i dva atributa -> nazivTaga[atribut1 =
"vrednost1"][atribut2 = "vrednost2"]
 CSS Selektori
● Lociranje elementa čiji atribut počinje nekim tekstom: [id^="usern"]
● Lociranje elementa čiji atribut se završava sa nekim tekstom: [id$="ame"]
● Lociranje elementa čiji atribut sadrži: [id*="ernm"]
● Kada class atribut sadrži više naziva klasa, kao selektor se može uzeti i samo
jedna od tih klasa, ali njen naziv mora biti jedinstven na stranici. Primer:
○ <input class = “prvoIme drugoIme treceIme”> ->
By.cssSelektor(".treceIme") ili By.cssSelektor(".drugoIme") ili
By.cssSelektor(".prvoIme")
 CSS Selektori - vežba
1. Otići na:
https://opensource-demo.orangehrmlive.com/web/index.php/auth/login
2. U polje "Username" uneti: Admin
3. U Polje "Password" uneti: admin123
4. Kliknuti na dugme "Login".
HTML document tree

● <div> je u ovom slučaju parent tag, a ostali tagovi su

potomci
● U drugom primeru, <ul> je direktni naslednik <div>
tag-a
● <li> tag-ovi su direktni naslednici <ul> tag-a
Kombinovani CSS Selektori
● Parent - direktni child tag: div >
ul
● Parent - bilo koji child tag: div li
● <ul> je “unordered list” tag, gde
su elementi liste (<li>) prikazani
na stranici bez rednih brojeva,
slova i sl.
● <ol> je “ordered list” list, gde su
elementi liste (<li>) prikazani na
stranici pod rednim brojem i sl.
● Element unutar liste:
ul#id li:nth-child(redni broj
elementa u listi)
Kombinovanje parent i child
elemenata
● Kombinovanje atributa iz parent i child tag-ova nam je korisno u slučaju kada
na nivou cele stranice postoji više elemenata koji imaju isti selektor kao
element koji nam je potreban. Tada pretragu možemo da svedemo sa cele
stranice na jedan njen deo (opisan parent tag-om), a onda unutar tog dela da
tražimo naš željeni element.
● Ukoliko unutar istog parent elementa postoji više child elemenata sa istim
selektorom (npr. svi elementi imaju tag "li"), željeni element možemo pronaći
na osnovu njegovog položaja u odnosu na parent element.
 CSS Selektori - vežba
1. Otići na: https://cms.demo.katalon.com/
2. Kliknuti na link "Hello world!" u sekciji "Recent posts".
3. Vratiti se korak nazad.
4. Kliknuti na link "Hello world!" u sekciji "Recent comments".
5. Vratiti se korak nazad.
6. Kliknuti na prvi proizvod.
7. Vratiti se korak nazad.
8. Kliknuti na "My account" u glavnom meniju.
 XPath
● Koristi putanju da se kreće kroz HTML kako bi pronašao određeni element.
● Sporiji od CSS Selektora.
● Omogućava kretanje parent -> child, ali i child -> parent, koje nije moguće sa
CSS selektorima.
● Postoje apsolutni i relativni Xpath
○ Apsolutni: daje putanju od html tag-a do elementa
(html/head/body/table/tbody/tr/th)
○ Relativni: daje najkraću putanju da se pronađe elemenat
(//table/tbody/tr/th)
● Otvoriti Developer Tools -> selektovati element -> u HTML uraditi desni klik
u delu gde je odgovarajući tag -> Copy -> Copy XPath (ili Copy full XPath).
 Osnovna pravila za XPath
● //* - Pronađi bilo gde u HTML-u bilo koji element
● //div – Pronađi bilo gde u HTML-u div element
● Parent -> direct child: div/a
● Parent -> any child: div//a
● Lociranje elementa prema atributu: //div[@class=‘some class’]
● Lociranje elementa prema više atributa: //div[@name=‘some name’][@type=‘text’]
● Lociranje određjenog elementa kada imamo više istih elemenata: (//div[@class=‘some class’])[2]
● Lociranje elementa koji sadrži određeni tekst: //div[contains(text(), ‘some text’)]
● Lociranje prvog sledećeg sibling elementa: //div[@id=‘username’]/following-sibling::*
● Lociranje prvog prethodnog sibling elementa: //div[@id=‘username’]/preceding-sibling::*
● Lociranje prvog sledećeg sibling elementa određenog tipa:
//div(@id=‘user’]/following-sibling::span
● Lociranje elementa koristeći više uslova: //*[@class=‘categories’ and contains ‘France’]
 CSS selektori vs XPath
<button type="button" class="btn btn-lg btn-primary">one</button> CSS selektor XPath
<button type="button" class="btn btn-lg btn-primary">two</button>
<button type="button" class="btn btn-lg btn-primary">three</button>

Po nazivu klase (dobijamo 3 rezultata u ovom slučaju): .btn.btn-lg.btn-primary //button[@class="btn btn-lg

btn-primary"]

Po tekstu koji sadrži: / //button[contains(text(),"one"

)]

Po poziciji, kada imamo više istih elemenata: .btn.btn-lg.btn-primary:nth (//button[@class="btn btn-lg

-child(2) btn-primary"])[2]
Prioritet lokatora
Domaći zadatak br.1 (osnovne komande)
1. Otići na: https://cms.demo.katalon.com/
2. U polje "Type to search" (nalazi se levo od slika) ukucati: Flying Ninja.
3. Kliknuti na ikonicu za pretraživanje (pored polja za pretragu je).
4. Vratiti se korak unazad.
5. Kliknuti na link sa link tekstom "Log in" (u sekciji "Meta je", nešto ispod search
polja).
6. Uneti bilo koji username/email.
7. Uneti bilo koju šifru.
8. Označiti checkbox "Remember me".
9. Kliknuti na "Log in".
10. Kliknuti na link "Back to Katalon Shop" (probati "partial link text" selektor).
 Domaći zadatak br.2 (CSS selektori)
● Otići na: https://demoqa.com/automation-practice-form
● Pronaći polje “First name” pomoću CSS selektora koji sadrži naziv taga + ID.
Popuniti polje.
● Pronaći polje “Last name” pomoću CSS selektora koji sadrži atribut placeholder
i njegovu vrednost. Popuniti polje.
● Pronaći polje “Email” pomoću CSS selektora koji sadrži naziv tag-a i 2 atributa:
placeholder i njegovu vrednost, kao i type i njegovu vrednost. Popuniti polje.
● Pronaći polje “Mobile number” pomoću CSS selektora koji kombinuje klasu iz
parent tag-a i id iz tag-a koji je direktni potomak. Popuniti polje.
Napomena - u svim navedenim poljima postoji id i samim tim je najbolji izbor. U
ovom zadatku ostale selektore koristimo samo zbog vežbe!
 Domaći zadatak br.3 (CSS selektori)
Otići na: https://formy-project.herokuapp.com/buttons
1. Kliknuti na svako dugme iz prvog reda, kao i na "Link".
2. Kliknuti na svako dugme iz drugog reda.
3. Kliknuti na dugme 1 i 2 u trećem redu (koristiti tekst dugmeta u okviru
selektora).
4. Kliknuti na "Dropdown" u trećem redu, a zatim na "Dropdown link 1" (vidljiv
je nakon otvaranja padajućeg menija).
* Na sledećem slajdu se nalaze smernice za pronalazak pojedinih elemenata
(pokušajte prvo bez tih smernica :) )
 Domaći zadatak br.3 (smernice :) )
1. Predlog selektora za "Primary" dugme je Xpath na osnovu teksta (primer
imamo na slajdu "CSS selektori vs XPath"). Ostali elementi u 1. redu imaju
jedinstveni selektor.
2. Biće nam potreban selektor parent sekcije i :nth-child, da bismo odredili
poziciju u odnosu na parent-a, slično primeru sa časa.
3. xPath koji sadrži tekst (prema primeru sa slajda opisanog u tački 1).
4. Za "Dropdown link 1" možemo koristiti linkText ili poziciju u odnosu na
parent sekciju).