Kako koristiti selenium IDE sa skriptama & Naredbe (potvrditi, potvrditi)

Sadržaj:

Anonim

Web lokaciju Mercury Tours koristit ćemo kao našu web aplikaciju koja se testira. To je mrežni sustav rezervacije leta koji sadrži sve elemente koji su nam potrebni za ovaj vodič. Njegov je URL http://demo.guru99.com/test/newtours/, a ovo će biti naš osnovni URL.

Stvorite skriptu snimanjem

Stvorimo sada svoju prvu testnu skriptu u Selenium IDE-u korištenjem najčešće metode - snimanjem. Poslije ćemo izvršiti našu skriptu pomoću značajke reprodukcije.

Korak 1

  • Pokrenite Firefox i Selenium IDE.
  • Upišite vrijednost za naš osnovni URL: http://demo.guru99.com/test/newtours/.
  • Uključite gumb Snimanje (ako još nije uključen prema zadanim postavkama).
Korak 2

U Firefoxu idite na http://demo.guru99.com/test/newtours/. Firefox bi vas trebao odvesti na stranicu sličnu onoj prikazanoj u nastavku.
3. korak
  • Desnom tipkom miša kliknite bilo koji prazan prostor na stranici, poput logotipa Mercury Tours u gornjem lijevom kutu. Ovo će otvoriti kontekstni izbornik Selenium IDE. Napomena: Ne kliknite na hiperpovezane predmete ili slike
  • Odaberite opciju "Prikaži dostupne naredbe".
  • Zatim odaberite "assertTitle title: Welcome: Mercury Tours." Ovo je naredba koja osigurava točnost naslova stranice.
4. korak
  • U tekstni okvir "Korisničko ime" Mercury Toursa upišite nevažeće korisničko ime, "invalidUNN".
  • U tekstni okvir "Lozinka" upišite neispravnu lozinku "invalidPWD".
Korak 5
  • Kliknite gumb "Prijava". Firefox bi vas trebao odvesti na ovu stranicu.
Korak 6

Isključite gumb za snimanje da biste zaustavili snimanje. Vaša bi skripta sada trebala izgledati poput one prikazane u nastavku.
Korak 7

Sad kad smo završili s testnom skriptom, spremit ćemo je u testni slučaj. U izborniku Datoteka odaberite "Spremi test slučaj". Možete i jednostavno pritisnuti Ctrl + S.
Korak 8
  • Odaberite željeno mjesto, a zatim Test Case dodajte kao "Invalid_login".
  • Kliknite gumb "Spremi".
Korak 9.

Primijetite da je datoteka spremljena kao HTML.

Korak 10.

Vratite se na Selenium IDE i kliknite gumb Reprodukcija da biste izvršili cijelu skriptu. Selenium IDE trebao bi biti u stanju bez problema replicirati sve.

Uvod u naredbe selena - selenese

  • Selenske naredbe mogu imati najviše dva parametra: cilj i vrijednost.
  • Parametri nisu potrebni cijelo vrijeme. Ovisi koliko će naredbi trebati.

3 vrste naredbi

Akcije

To su naredbe koje izravno komuniciraju s elementima stranice.

Primjer: naredba "klik" je radnja jer izravno komunicirate s elementom koji kliknete.

Naredba "type" također je radnja jer vrijednosti stavljate u okvir za tekst, a okvir za tekst prikazuje vam ih zauzvrat. Između vas i okvira za tekst postoji dvosmjerna interakcija.

Pristupnici

To su naredbe koje omogućuju pohranjivanje vrijednosti u varijablu.

Primjer: naredba "storeTitle" je pristupnik jer samo "čita" naslov stranice i sprema ga u varijablu. Ne komunicira ni s jednim elementom na stranici.

Tvrdnje

To su naredbe koje provjeravaju je li ispunjen određeni uvjet.

3 vrste tvrdnji

  • Tvrditi . Kada naredba "assert" ne uspije, test se odmah zaustavlja.
  • Potvrdite . Kad naredba "provjeri" ne uspije, Selenium IDE bilježi taj kvar i nastavlja s izvršenjem testa.
  • Pričekaj . Prije nastavka na sljedeću naredbu, naredbe "waitFor" prvo će pričekati da određeni uvjet postane istinit.
    • Ako stanje postane istina unutar razdoblja čekanja, korak prolazi.
    • Ako uvjet ne postane istinit, korak ne uspijeva. Neuspjeh se bilježi i izvršavanje testa nastavlja se na sljedeću naredbu.
    • Prema zadanim postavkama vrijednost prekida je postavljena na 30 sekundi. To možete promijeniti u dijaloškom okviru Selenium IDE Options na kartici General.

Tvrditi nasuprot potvrđivati

Uobičajene naredbe

Naredba Broj parametara Opis
otvoren 0 - 2

Otvara stranicu pomoću URL-a.
click / clickAndWait 1

Klikovi na navedeni element.
type / typeKeys 2

Upisuje niz znakova.
verifyTitle / assertTitle 1

Uspoređuje stvarni naslov stranice s očekivanom vrijednošću.
verifyTextPresent 1

Provjerava nalazi li se određeni tekst na stranici.
verifyElementPresent 1

Provjerava prisutnost određenog elementa.
verifyTable 2

Uspoređuje sadržaj tablice s očekivanim vrijednostima.
waitForPageToLoad 1

Pauzira izvršenje dok se stranica ne učita u potpunosti.
waitForElementPresent 1

Pauzira izvršenje dok navedeni element ne postane prisutan.

Stvorite skriptu ručno s Firebugom

Sada ćemo isti testni slučaj ponovno stvoriti ručno, upisivanjem naredbi. Ovaj put trebat ćemo koristiti Firebug.

Korak 1
  • Otvorite Firefox i Selenium IDE.
  • Upišite osnovni URL (http://demo.guru99.com/test/newtours/).
  • Gumb za snimanje trebao bi biti ISKLJUČEN.
Korak 2: Kliknite na gornji prazan redak u uređivaču.

Upišite "open" u tekstni okvir Command i pritisnite Enter.
3. korak
  • Dođite do Firefoxa do našeg osnovnog URL-a i aktivirajte Firebug
  • U oknu Selenium IDE Editor odaberite drugi redak (redak ispod naredbe "otvori") i stvorite drugu naredbu upisivanjem "assertTitle" u naredbeni okvir.
  • Slobodno koristite značajku samodovršavanja.
4. korak
  • U Firebugu proširite oznaku da biste prikazali oznaku .</li> <li>Kliknite vrijednost oznake <title> (koja je "Dobrodošli: Mercury Tours") i zalijepite je u polje Target u uređivaču.</li> </ul> </td> </tr> <tr> <td><strong>Korak 5</strong> <ul> <li>Da biste stvorili treću naredbu, kliknite treći prazni redak u programu Editor i unesite "tip" u tekstni okvir Command.</li> <li>U Firebugu kliknite gumb "Pregledaj".</li> </ul> </td> </tr> <tr> <td>Kliknite tekstni okvir Korisničko ime. Primijetite da vam Firebug automatski prikazuje HTML kôd za taj element.</td> </tr> <tr> <td><strong>Korak 6</strong> <p>Primijetite da tekstni okvir Korisničko ime nema ID, ali ima atribut NAME. Stoga ćemo koristiti njegovo IME kao lokator. Kopirajte vrijednost NAME i zalijepite je u polje Target u programu Selenium IDE.</p> <p>Još uvijek u tekstualnom okviru Target, prefiks "userName" s "name =", što znači da bi Selenium IDE trebao ciljati element čiji je NAME atribut "userName".</p> <p>Upišite "invalidUN" u tekstualni okvir Value Selenium IDE. Vaša testna skripta sada bi trebala izgledati poput donje slike. Gotovi smo s trećom naredbom. Napomena: Umjesto nevaljane UN, možete unijeti bilo koji drugi tekstualni niz. Ali Selenium IDE razlikuje velika i mala slova i upisujete vrijednosti / atribute točno kao u aplikaciji.</p> </td> </tr> <tr> <td><strong>Korak 7</strong> <ul> <li>Da biste stvorili četvrtu naredbu, unesite "type" u tekstni okvir Command.</li> <li>Opet, upotrijebite Firebugov gumb "Inspect" da biste pronašli lokator tekstnog okvira "Password".</li> </ul> <ul> <li> <p>Zalijepite atribut NAME ("lozinka") u polje Cilj i dodajte mu prefiks sa "name ="</p> </li> <li> <p>Upišite "invalidPW" u polje Value u programu Selenium IDE. Vaša testna skripta sada bi trebala izgledati poput donje slike.</p> </li> </ul> </td> </tr> <tr> <td><strong>Korak 8</strong> <ul> <li>Za petu naredbu upišite "clickAndWait" u tekstni okvir Command u programu Selenium IDE.</li> <li>Upotrijebite Firebugov gumb "Inspect" da biste pronašli lokator gumba "Sign In".</li> </ul> <ul> <li>Zalijepite vrijednost atributa NAME ("prijava") u tekstualni okvir Target i dodajte mu prefiks sa "name =".</li> <li>Vaša testna skripta sada bi trebala izgledati poput donje slike.</li> </ul> </td> </tr> </tbody> </table> <p><strong>Korak 9:</strong> Spremite test slučaj na isti način kao i u prethodnom odjeljku.</p> <a id="menu-6"></a> <h2>Korištenje gumba Pronađi</h2> <p><strong>Gumb Pronađi u IDE-u Selenium koristi se za provjeru je li ono što smo stavili u okvir za tekst Target doista ispravan element korisničkog sučelja.</strong></p> <p>Iskoristimo testni slučaj Invalid_login koji smo stvorili u prethodnim odjeljcima. Kliknite bilo koju naredbu s unosom Target, recimo, treću naredbu.</p> <p>Kliknite gumb Pronađi. Primijetite da se okvir za korisničko ime na stranici Mercury Tours na trenutak istakne.</p> <p>To ukazuje da je Selenium IDE uspio ispravno otkriti i pristupiti očekivanom elementu. Ako je gumb Pronađi istaknuo drugi element ili ga uopće nema, onda u vašoj skripti mora biti nešto pogrešno.</p> <a id="menu-7"></a> <h2>Izvrši naredbu</h2> <p><strong>To vam omogućuje izvršavanje bilo koje pojedinačne naredbe bez pokretanja cijelog test slučaja</strong> . Samo kliknite liniju koju želite izvršiti, a zatim na traci izbornika kliknite "Akcije> Izvrši ovu naredbu" ili jednostavno pritisnite "X" na tipkovnici.</p> <p><strong>Korak 1.</strong> Provjerite nalazi li se vaš preglednik na početnoj stranici Mercury Tours. Kliknite naredbu koju želite izvršiti. U ovom primjeru kliknite redak "type | userName | invalidUN".</p> <p><strong>Korak 2.</strong> Pritisnite "X" na tipkovnici.</p> <p><strong>Korak 3.</strong> Primijetite da se tekstualni okvir za korisničko ime popunjava tekstom "invalidUN"</p> <p><strong>Izvršenje naredbi na ovaj način uvelike ovisi o stranici koju Firefox trenutno prikazuje</strong> . To znači da ako isprobate gornji primjer s prikazanom Googleovom početnom stranicom umjesto Mercury Toursa, vaš korak neće uspjeti jer na Googleovoj početnoj stranici nema tekstnog okvira s atributom "userName".</p> <a id="menu-8"></a> <h2>Početna točka</h2> <p><strong>Početna točka je pokazatelj koji Selenium IDE-u govori koje će linije izvršenje započeti</strong> . <strong>Njegova tipka prečaca je "S".</strong></p> <p>U gornjem primjeru reprodukcija započinje u trećem retku (upišite | lozinka | invalidPW). <strong>U jednoj testnoj skripti možete imati samo jednu početnu točku.</strong></p> <p>Početna točka slična je izvedbi naredbe tako da ovisi o trenutno prikazanoj stranici. Početna točka neće uspjeti ako ste na pogrešnoj stranici.</p> <a id="menu-9"></a> <h2>Točke prijeloma</h2> <p>Točke prekida pokazatelji su koji Selenium IDE-u govore gdje automatski pauzirati test. <strong>Tipka prečaca je "B".</strong></p> <p>Žuta oznaka znači da je trenutni korak na čekanju. To dokazuje da je Selenium IDE zaustavio izvršenje na tom koraku. <strong>U jednom testnom slučaju možete imati više točaka prekida.</strong></p> <a id="menu-10"></a> <h2>Korak</h2> <p>Omogućuje vam izvršavanje narednih naredbi jednu po jednu nakon pauze u testnom slučaju. Iskoristimo scenarij u prethodnom odjeljku "Točke prekida".</p> <table> <tbody> <tr> <td width="50%"> </td> <td> <p><strong>Prije nego što kliknete "Korak".</strong></p> <p>Test slučaj zastaje na retku "clickAndWait | prijava".</p> </td> </tr> <tr> <td width="50%"> </td> <td> <p><strong>Nakon što kliknete "Korak".</strong></p> <p>Izvodi se redak "clickAndWait | login" i zaustavlja se do sljedeće naredbe (verifyTitle | Prijava: Mercury Tours).</p> <p>Primijetite da je sljedeći redak pauziran iako tamo nema točke prekida. To je glavna svrha značajke Korak - izvršava slijedeće naredbe jednu po jednu dajući vam više vremena za pregled ishoda nakon svakog koraka.</p> </td> </tr> </tbody> </table> <a id="menu-11"></a> <h2>Važne stvari na koje treba obratiti pažnju prilikom korištenja drugih formata u izvornom prikazu</h2> <p><strong>Selenium IDE dobro funkcionira samo s HTML-om - ostali su formati još uvijek u eksperimentalnom načinu</strong> . To je <strong>nije preporučljivo</strong> za izradu ili uređivanje testova korištenjem drugih formata u izvor Vidi jer postoji još puno posla trebalo da bude stabilan. Ispod su poznati bugovi verzije 1.9.1.</p> <ul> <li>Nećete moći izvesti reprodukciju niti se vratiti na prikaz tablice ako se ne vratite na HTML.</li> <li>Jedini način da se naredbe sigurno dodaju na izvorni kod je njihovo bilježenje.</li> <li>Kada ručno izmijenite izvorni kod, sav će se izgubiti kada se prebacite na drugi format.</li> <li>Iako svoj testni slučaj možete spremiti dok ste u izvornom prikazu, Selenium IDE ga neće moći otvoriti.</li> </ul> <p><strong>Preporučeni način pretvaranja selenskih testova je upotreba opcije "Izvezi testni slučaj kao ..." na izborniku Datoteka, a ne kroz Izvorni prikaz.</strong></p> <a id="menu-12"></a> <h2>Sažetak</h2> <ul> <li>Test skripte mogu se stvoriti snimanjem ili ručnim upisivanjem naredbi i parametara.</li> <li>Pri ručnom kreiranju skripti, Firebug se koristi za dobivanje lokatora.</li> <li>Gumb Pronađi služi za provjeru je li naredba u mogućnosti pristupiti ispravnom elementu.</li> <li>Tablični prikaz prikazuje testnu skriptu u tabličnom obliku, dok ga Izvorni prikaz prikazuje u HTML formatu.</li> <li>Promjena prikaza izvora u format koji nije HTML još uvijek je eksperimentalna.</li> <li>Nemojte koristiti izvorni prikaz za stvaranje testova u drugim formatima. Umjesto toga koristite značajke Izvoz.</li> <li>Parametri nisu potrebni cijelo vrijeme. Ovisi o naredbi.</li> <li>Postoje tri vrste naredbi:</li> <ul> <li>Akcije - izravno komunicira s elementima stranice</li> <li>Pristupnici - "čita" svojstvo elementa i pohranjuje ga u varijablu</li> <li>Tvrdnje - uspoređuje stvarnu vrijednost s očekivanom</li> </ul> <li>Tvrdnje imaju tri vrste:</li> <ul> <li>Tvrditi - nakon neuspjeha se sljedeći koraci više ne izvršavaju</li> <li>Potvrdite - nakon neuspjeha slijedeći koraci se i dalje izvršavaju.</li> <li>WaitFor - prolazi ako navedeni uvjet postane istinit unutar razdoblja isteka vremena; inače će propasti</li> </ul> <li>Najčešće naredbe su:</li> <ul> <li>otvoren</li> <li>click / clickAndWait</li> <li>type / typeKeys</li> <li>verifyTitle / assertTitle</li> <li>verifyTextPresent</li> <li>verifyElementPresent</li> <li>verifyTable</li> <li>waitForPageToLoad</li> <li>waitForElementPresent</li> </ul> </ul> </div> </article> <div id="container-5533149ee6411a5f99b370c693e87966"></div> </div> </div> </div> </div> </div> <aside class="col-lg-4 sidebar sidebar--right"> <div class="widget widget-popular-posts"> <h2 class="widget-title">Popularni Postovi</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8225845-21-best-software-development-tools-in-2021" title="21 najbolji alat za razvoj softvera u 2021. godini" rel="bookmark"><img src="https://cdn.css-code.org/6414907/21_best_software_development_tools_in_2021.png.webp" loading="lazy" alt="21 najbolji alat za razvoj softvera u 2021. godini" title="21 najbolji alat za razvoj softvera u 2021. godini" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225845-21-best-software-development-tools-in-2021" title="21 najbolji alat za razvoj softvera u 2021. godini" rel="bookmark">21 najbolji alat za razvoj softvera u 2021. godini 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8225846-list-in-r-how-to-create-r-lists-select-elements-with-example" title="Popis u R: Kako stvoriti R liste, odaberite elemente s primjerom" rel="bookmark"><img src="https://cdn.css-code.org/4955430/list_in_r_how_to_create_r_lists-_select_elements_with_example.png.webp" loading="lazy" alt="Popis u R: Kako stvoriti R liste, odaberite elemente s primjerom" title="Popis u R: Kako stvoriti R liste, odaberite elemente s primjerom" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225846-list-in-r-how-to-create-r-lists-select-elements-with-example" title="Popis u R: Kako stvoriti R liste, odaberite elemente s primjerom" rel="bookmark">Popis u R: Kako stvoriti R liste, odaberite elemente s primjerom 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8225847-hadoop-mapreduce-join-and-counter-with-example" title="Hadoop MapReduce Pridružite se & Brojač s primjerom" rel="bookmark"><img src="https://cdn.css-code.org/2612424/hadoop_mapreduce_join_ampamp_counter_with_example.png.webp" loading="lazy" alt="Hadoop MapReduce Pridružite se & Brojač s primjerom" title="Hadoop MapReduce Pridružite se & Brojač s primjerom" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225847-hadoop-mapreduce-join-and-counter-with-example" title="Hadoop MapReduce Pridružite se & Brojač s primjerom" rel="bookmark">Hadoop MapReduce Pridružite se & Brojač s primjerom 2025</a></h3> </div> </div> </li> </ul> </div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Najbolje mišljenja za mjesec dana</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004032-sass-things-for-links" title="Sass stvari za linkove - CSS-trikovi" rel="bookmark">Sass stvari za linkove - CSS-trikovi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004034-power-function" title="Funkcija napajanja - CSS-trikovi" rel="bookmark">Funkcija napajanja - CSS-trikovi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004035-simple-asset-helper-functions" title="Jednostavne funkcije pomoćnika imovine - CSS-trikovi" rel="bookmark">Jednostavne funkcije pomoćnika imovine - CSS-trikovi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004036-px-to-em-functions" title="Px do Em funkcije - CSS-trikovi" rel="bookmark">Px do Em funkcije - CSS-trikovi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004037-simplifying-contexts-and-events" title="Pojednostavljivanje konteksta i događaja - CSS-trikovi" rel="bookmark">Pojednostavljivanje konteksta i događaja - CSS-trikovi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004038-strip-unit-function" title="Traka-jedinica Funkcija - CSS-trikovi" rel="bookmark">Traka-jedinica Funkcija - CSS-trikovi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004039-sorting-function" title="Funkcija sortiranja - CSS-trikovi" rel="bookmark">Funkcija sortiranja - CSS-trikovi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004040-str-replace-function" title="Str-replace funkcija - CSS-trikovi" rel="bookmark">Str-replace funkcija - CSS-trikovi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004041-striped-gradient-mixin" title="Prugasti gradijent Mixin - CSS-trikovi" rel="bookmark">Prugasti gradijent Mixin - CSS-trikovi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004043-tint-and-shade-functions" title="Funkcije nijanse i sjene - CSS-trikovi" rel="bookmark">Funkcije nijanse i sjene - CSS-trikovi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004044-use-a-sass-variable-for-a-selector" title="Upotrijebite varijablu Sass za selektor - CSS-trikovi" rel="bookmark">Upotrijebite varijablu Sass za selektor - CSS-trikovi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004045-viewport-sized-typography-with-minimum-and-maximum-sizes" title="Tipografija veličine vidnog polja s minimalnom i maksimalnom veličinom - CSS-trikovi" rel="bookmark">Tipografija veličine vidnog polja s minimalnom i maksimalnom veličinom - CSS-trikovi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004046-svg-hamburger-menu" title="SVG izbornik hamburgera - CSS-trikovi" rel="bookmark">SVG izbornik hamburgera - CSS-trikovi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004047-shape-morphing-icons-in-button-on-click" title="Oblikujte ikone Morphinga u gumbu na klik - CSS-trikovi" rel="bookmark">Oblikujte ikone Morphinga u gumbu na klik - CSS-trikovi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004048-svg-patterns" title="SVG obrasci - CSS-trikovi" rel="bookmark">SVG obrasci - CSS-trikovi</a></h3> </div> </div> </li> </ul> </div> <div id="container-5533149ee6411a5f99b370c693e87966"></div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Top Članci</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003196-023-page-template" title="# 023 - Predložak stranice - CSS-trikovi" rel="bookmark"><img src="https://cdn.css-code.org/4539404/023_-_page_template_css-tricks.png.webp" loading="lazy" alt="# 023 - Predložak stranice - CSS-trikovi" title="# 023 - Predložak stranice - CSS-trikovi" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003196-023-page-template" title="# 023 - Predložak stranice - CSS-trikovi" rel="bookmark"># 023 - Predložak stranice - CSS-trikovi 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003197-pin-scrolling-to-bottom" title="Pomicanje pomoću pribadače do dna - CSS-trikovi" rel="bookmark"><img src="https://cdn.css-code.org/6823930/pin_scrolling_to_bottom_css-tricks.png.webp" loading="lazy" alt="Pomicanje pomoću pribadače do dna - CSS-trikovi" title="Pomicanje pomoću pribadače do dna - CSS-trikovi" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003197-pin-scrolling-to-bottom" title="Pomicanje pomoću pribadače do dna - CSS-trikovi" rel="bookmark">Pomicanje pomoću pribadače do dna - CSS-trikovi 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003198-024-subpage-navigation" title="# 024 - Navigacija na podstranici - CSS-trikovi" rel="bookmark"><img src="https://cdn.css-code.org/1636828/024_-_subpage_navigation_css-tricks.png.webp" loading="lazy" alt="# 024 - Navigacija na podstranici - CSS-trikovi" title="# 024 - Navigacija na podstranici - CSS-trikovi" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003198-024-subpage-navigation" title="# 024 - Navigacija na podstranici - CSS-trikovi" rel="bookmark"># 024 - Navigacija na podstranici - CSS-trikovi 2025</a></h3> </div> </div> </li> </ul> </div> </aside> </div> </div> <footer class="footer footer--dark"> <div class="container"> <div class="footer__widgets"> <div class="row"> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Popularni Postovi</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8222675-what-is-parallel-testing-definition-approach-example" title="Što je paralelno testiranje? Definicija, pristup, primjer" rel="bookmark">Što je paralelno testiranje? Definicija, pristup, primjer</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8222676-what-is-operational-acceptance-testingoat-example-test-cases" title="Što je ispitivanje operativne prihvaćenosti (OAT)? Primjeri ispitnih slučajeva" rel="bookmark">Što je ispitivanje operativne prihvaćenosti (OAT)? Primjeri ispitnih slučajeva</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8222677-storage-testing-tutorial-what-is-type-concepts" title="Vodič za testiranje skladišta: Što je, vrsta, koncepti" rel="bookmark">Vodič za testiranje skladišta: Što je, vrsta, koncepti</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8222678-what-is-module-testing-definition-examples" title="Što je ispitivanje modula? Definicija, primjeri" rel="bookmark">Što je ispitivanje modula? Definicija, primjeri</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8222679-what-is-recovery-testing-with-example" title="Što je ispitivanje oporavka? s Primjerom" rel="bookmark">Što je ispitivanje oporavka? s Primjerom</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Izbor Urednika</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003348-053-responsive-columns-for-the-gallery" title="# 053: Odzivni stupci za galeriju - CSS-trikovi" rel="bookmark"># 053: Odzivni stupci za galeriju - CSS-trikovi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003349-054-tap-to-show-mobile-navigation" title="# 054: Dodirni za prikaz mobilne navigacije - CSS-trikovi" rel="bookmark"># 054: Dodirni za prikaz mobilne navigacije - CSS-trikovi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003351-055-getting-static-mockup-into-version-control" title="# 055: Uključivanje statičkog maketa u kontrolu verzija - CSS-trikovi" rel="bookmark"># 055: Uključivanje statičkog maketa u kontrolu verzija - CSS-trikovi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003352-057-custom-header-for-the-gallery-part-1" title="# 057: Prilagođeno zaglavlje za galeriju, 1. dio - CSS-trikovi" rel="bookmark"># 057: Prilagođeno zaglavlje za galeriju, 1. dio - CSS-trikovi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003353-059-custom-header-for-the-forums-part-1" title="# 059: Prilagođeno zaglavlje foruma, 1. dio - CSS-trikovi" rel="bookmark"># 059: Prilagođeno zaglavlje foruma, 1. dio - CSS-trikovi</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Top Članci</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003721-error-free-console-logging" title="Prijava grešaka bez konzole - CSS-trikovi" rel="bookmark">Prijava grešaka bez konzole - CSS-trikovi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003722-javascript-required-content-with-fallback-content" title="Sadržaj potreban za JavaScript sa rezervnim sadržajem - CSS-trikovi" rel="bookmark">Sadržaj potreban za JavaScript sa rezervnim sadržajem - CSS-trikovi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003723-empty-an-array" title="Ispraznite niz - CSS-trikovi" rel="bookmark">Ispraznite niz - CSS-trikovi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003724-fix-ie-10-on-windows-phone-8-viewport" title="Popravite IE 10 na Windows Phone 8 Viewport - CSS-trikovi" rel="bookmark">Popravite IE 10 na Windows Phone 8 Viewport - CSS-trikovi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003725-format-currency" title="Oblikuj valutu - CSS-trikovi" rel="bookmark">Oblikuj valutu - CSS-trikovi</a></h3> </div> </div> </li> </ul> </div> </div> </div> <p>© Copyright hr.css-code.org, 2025 Veljača | <a href="https://hr.css-code.org/about-site" title="O mjestu">O mjestu</a> | <a href="https://hr.css-code.org/contacts" title="Kontakti">Kontakti</a> | <a href="https://hr.css-code.org/privacy-policy" title="Pravila o privatnosti">Pravila o privatnosti</a>. </p> </div> </div> </footer> <link href="https://css-code.org/template/css/style.min.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" /> </body> </html>