Ako používať selénové IDE so skriptmi & Príkazy (potvrdiť, overiť)

Obsah:

Anonim

Ako testovanú webovú aplikáciu použijeme webovú stránku Mercury Tours. Jedná sa o online rezervačný systém letov, ktorý obsahuje všetky prvky, ktoré potrebujeme pre tento tutoriál. Jeho adresa URL je http://demo.guru99.com/test/newtours/, a toto bude naša základná adresa URL.

Vytvorte skript nahrávaním

Poďme si teraz vytvoriť náš prvý testovací skript v selenovom IDE pomocou najbežnejšej metódy - nahrávaním. Potom vykonáme náš skript pomocou funkcie prehrávania.

Krok 1

  • Spustite Firefox a Selenium IDE.
  • Zadajte hodnotu pre našu základnú adresu URL: http://demo.guru99.com/test/newtours/.
  • Zapnite tlačidlo Nahrať (ak ešte nie je predvolene zapnuté).
Krok 2

V prehliadači Firefox prejdite na stránku http://demo.guru99.com/test/newtours/. Firefox by vás mal presmerovať na stránku podobnú tej, ktorá je uvedená nižšie.

Krok 3
  • Pravým tlačidlom myši kliknite na akékoľvek prázdne miesto na stránke, napríklad na logo Mercury Tours v ľavom hornom rohu. Zobrazí sa kontextové menu selénu IDE. Poznámka: Neklikajte na žiadne hypertextové odkazy na objekty alebo obrázky
  • Vyberte možnosť „Zobraziť dostupné príkazy“.
  • Potom vyberte možnosť „assertTitle exact: Welcome: Mercury Tours“. Toto je príkaz, ktorý zaisťuje správny názov stránky.
Krok 4
  • Do textového poľa „Meno používateľa“ programu Mercury Tours zadajte neplatné používateľské meno „invalidUNN“.
  • Do textového poľa „Heslo“ zadajte neplatné heslo „invalidPWD“.
Krok 5
  • Kliknite na tlačidlo „Prihlásiť sa“. Firefox by vás mal presmerovať na túto stránku.
Krok 6

Nahrávanie zastavíte prepnutím tlačidla nahrávania. Váš skript by teraz mal vyzerať ako ten, ktorý je uvedený nižšie.

Krok 7

Teraz, keď sme hotoví s našim testovacím skriptom, uložíme ho do testovacieho prípadu. V ponuke Súbor vyberte možnosť „Uložiť testovací prípad“. Prípadne môžete jednoducho stlačiť klávesy Ctrl + S.

Krok 8
  • Vyberte požadované miesto a potom pomenujte Testovací prípad ako „Invalid_login“.
  • Kliknite na tlačidlo „Uložiť“.
Krok 9.

Všimnite si, že súbor bol uložený ako HTML.

Krok 10.

Vráťte sa do selénového IDE a kliknutím na tlačidlo Prehrávanie vykonajte celý skript. Selénové IDE by malo byť schopné replikovať všetko bezchybne.

Úvod do príkazov selénu - selén

  • Selénske príkazy môžu mať najviac dva parametre: cieľ a hodnotu.
  • Parametre nie sú vždy potrebné. Závisí to od toho, koľko bude príkaz potrebovať.

3 typy príkazov

Akcie

Jedná sa o príkazy, ktoré priamo interagujú s prvkami stránky.

Príklad: príkaz „kliknutie“ je akcia, pretože priamo komunikujete s prvkom, na ktorý klikáte.

Príkaz „typ“ je tiež akcia, pretože vkladáte hodnoty do textového poľa a textové pole vám ich na oplátku zobrazí. Medzi vami a textovým poľom je obojstranná interakcia.

Prispôsobitelia

Sú to príkazy, ktoré vám umožňujú ukladať hodnoty do premennej.

Príklad: príkaz "storeTitle" je prístupový objekt, pretože iba "číta" nadpis stránky a ukladá ho do premennej. Neinteraguje so žiadnym prvkom na stránke.

Tvrdenia

Sú to príkazy, ktoré overujú, či je splnená určitá podmienka.

3 typy tvrdení

  • Tvrdiť . Ak príkaz „potvrdiť“ zlyhá, test sa okamžite zastaví.
  • Overiť . Keď zlyhá príkaz „overiť“, selén IDE zaznamená túto chybu a pokračuje v vykonaní testu.
  • WaitFor . Pred pokračovaním k ďalšiemu príkazu budú príkazy „waitFor“ najskôr čakať na splnenie určitej podmienky.
    • Ak sa podmienka stane pravdivou v priebehu čakacej doby, krok prejde.
    • Ak sa podmienka nesplní, krok zlyhá. Zlyhanie sa zaznamená a testovacie vykonávanie pokračuje ďalším príkazom.
    • Predvolene je hodnota časového limitu nastavená na 30 sekúnd. Môžete to zmeniť v dialógovom okne Možnosti selénu IDE na karte Všeobecné.

Assert vs. Verify

Bežné príkazy

Velenie Počet parametrov Popis
otvorené 0 - 2

Otvorí stránku pomocou adresy URL.

click / clickAndWait 1

Kliknutia na zadaný prvok.

typ / typKľúče 2

Zadá postupnosť znakov.

verifyTitle / assertTitle 1

Porovnáva skutočný názov stránky s očakávanou hodnotou.

verifyTextPresent 1

Skontroluje, či sa na stránke nachádza určitý text.

verifyElementPresent 1

Kontroluje prítomnosť určitého prvku.

overiťTabuľka 2

Porovná obsah tabuľky s očakávanými hodnotami.

waitForPageToLoad 1

Pozastaví vykonávanie, kým sa stránka nenačíta úplne.

waitForElementPresent 1

Pozastaví vykonávanie, kým sa uvedený prvok nestane prítomným.

Vytvorte skript manuálne pomocou Firebug

Rovnaký testovací prípad teraz vytvoríme manuálne zadaním príkazov. Tentokrát budeme musieť použiť Firebug.

Krok 1
  • Otvorte prehliadač Firefox a selén IDE.
  • Zadajte základnú adresu URL (http://demo.guru99.com/test/newtours/).
  • Tlačidlo nahrávania by malo byť VYPNUTÉ.
Krok 2: Kliknite na najvyšší prázdny riadok v editore.

Do textového poľa Príkaz zadajte príkaz „otvoriť“ a stlačte kláves Enter.

Krok 3
  • Prejdite prehliadač Firefox na našu základnú adresu URL a aktivujte Firebug
  • Na table editora Selenium IDE vyberte druhý riadok (riadok pod príkazom „otvoriť“) a vytvorte druhý príkaz zadaním „assertTitle“ do poľa Príkaz.
  • Pokojne použite funkciu automatického dopĺňania.
Krok 4
  • Vo Firebug rozbaľte značku , aby sa zobrazila značka .</li> <li>Kliknite na hodnotu značky <title> (čo je „Welcome: Mercury Tours“) a vložte ju do poľa Cieľ v editore.</li> </ul> </td> </tr> <tr> <td><strong>Krok 5</strong> <ul> <li>Ak chcete vytvoriť tretí príkaz, kliknite na tretí prázdny riadok v editore a zadajte „text“ do textového poľa Príkaz.</li> <li>Vo Firebug kliknite na tlačidlo „Skontrolovať“.</li> </ul> </td> </tr> <tr> <td>Kliknite na textové pole Používateľské meno. Všimnite si, že Firebug vám automaticky zobrazí HTML kód pre tento prvok.</td> </tr> <tr> <td><strong>Krok 6</strong> <p>Všimnite si, že textové pole User Name nemá ID, ale má atribút NAME. Preto budeme ako vyhľadávač používať jeho NÁZOV. Skopírujte hodnotu NÁZOV a prilepte ju do poľa Cieľ v IDE selénu.</p> <p>Stále v textovom poli Cieľ predpona „userName“ s „name =“ znamená, že selénové IDE by malo zacieliť na prvok, ktorého atribút NAME je „userName“.</p> <p>Do textového poľa Hodnota selénu IDE zadajte „invalidUN“. Váš testovací skript by mal teraz vyzerať ako na obrázku nižšie. S tretím príkazom sme hotoví. Poznámka: Namiesto neplatnéhoUN môžete zadať akýkoľvek iný textový reťazec. V selénovom IDE sa však rozlišujú veľké a malé písmená a hodnoty / atribúty zadávate presne ako v aplikácii.</p> </td> </tr> <tr> <td><strong>Krok 7</strong> <ul> <li>Štvrtý príkaz vytvoríte tak, že do textového poľa Príkaz zadáte text „zadajte“.</li> <li>Znova použite tlačidlo „Skontrolovať“ nástroja Firebug, aby ste vyhľadali textové pole „Heslo“.</li> </ul> <ul> <li> <p>Vložte atribút NAME („heslo“) do poľa Target a vložte pred neho „name =“</p> </li> <li> <p>Do poľa Hodnota v seléne IDE zadajte „invalidPW“. Váš testovací skript by mal teraz vyzerať ako na obrázku nižšie.</p> </li> </ul> </td> </tr> <tr> <td><strong>Krok 8</strong> <ul> <li>Pre piaty príkaz zadajte do textového poľa Príkaz v seléne IDE „clickAndWait“.</li> <li>Pomocou tlačidla „Skontrolovať“ nástroja Firebug získate lokátor tlačidla „Prihlásiť sa“.</li> </ul> <ul> <li>Vložte hodnotu atribútu NAME („login“) do textového poľa Cieľ a vložte pred ňu „name =“.</li> <li>Váš testovací skript by mal teraz vyzerať ako na obrázku nižšie.</li> </ul> </td> </tr> </tbody> </table> <p><strong>Krok 9:</strong> Uložte testovací prípad rovnakým spôsobom ako v predchádzajúcej časti.</p> <a id="menu-6"></a> <h2>Pomocou tlačidla Nájsť</h2> <p><strong>Tlačidlo Nájsť v Selenium IDE sa používa na overenie, či to, čo sme vložili do textového poľa Cieľ, je skutočne správnym prvkom používateľského rozhrania.</strong></p> <p>Použijme testovací prípad Invalid_login, ktorý sme vytvorili v predchádzajúcich častiach. Kliknite na ľubovoľný príkaz so zadaním cieľa, povedzme tretí príkaz.</p> <p>Kliknite na tlačidlo Nájsť. Všimnite si, že textové pole Meno používateľa na stránke Mercury Tours sa na chvíľu zvýrazní.</p> <p>To naznačuje, že selén IDE dokázal správne detekovať a získať prístup k očakávanému prvku. Ak tlačidlo Nájsť zvýraznilo iný alebo vôbec žiadny prvok, musí byť vo vašom skripte niečo zlé.</p> <a id="menu-7"></a> <h2>Vykonať príkaz</h2> <p><strong>Takto môžete vykonať ľubovoľný príkaz bez spustenia celého testovacieho prípadu</strong> . Stačí kliknúť na riadok, ktorý chcete vykonať, a potom buď kliknúť na „Akcie> Vykonať tento príkaz“ na paneli s ponukami alebo jednoducho stlačiť „X“ na klávesnici.</p> <p><strong>Krok 1.</strong> Uistite sa, že je váš prehliadač na domovskej stránke Mercury Tours. Kliknite na príkaz, ktorý chcete vykonať. V tomto príklade kliknite na riadok „type | userName | invalidUN“.</p> <p><strong>Krok 2.</strong> Na klávesnici stlačte kláves „X“.</p> <p><strong>Krok 3.</strong> Upozorňujeme, že textové pole pre používateľské meno bude vyplnené textom „invalidUN“</p> <p><strong>Vykonávanie príkazov týmto spôsobom veľmi závisí od stránky, ktorú prehľadávač Firefox momentálne zobrazuje</strong> . To znamená, že ak vyskúšate príklad uvedený vyššie so zobrazenou domovskou stránkou Google namiesto prehliadky Mercury Tours, váš krok zlyhá, pretože na domovskej stránke Google nie je textové pole s atribútom „userName“.</p> <a id="menu-8"></a> <h2>Východiskový bod</h2> <p><strong>Počiatočný bod je indikátor, ktorý informuje selénový IDE, ktoré riadky spustenie spustia</strong> . <strong>Jeho klávesová skratka je „S“.</strong></p> <p>Vo vyššie uvedenom príklade sa začne prehrávanie na treťom riadku (zadajte | heslo | neplatnýPW). <strong>V jednom testovacom skripte môžete mať iba jeden začiatočný bod.</strong></p> <p>Počiatočný bod je podobný príkazu Vykonať príkaz v tom, že závisia od aktuálne zobrazenej stránky. Počiatočný bod zlyhá, ak sa nachádzate na nesprávnej stránke.</p> <a id="menu-9"></a> <h2>Hraničné hodnoty</h2> <p>Hraničné hodnoty sú indikátory, ktoré informujú Selenium IDE o tom, kde má byť test automaticky pozastavený. <strong>Klávesová skratka je „B“.</strong></p> <p>Žlté zvýraznenie znamená, že aktuálny krok čaká na spracovanie. To dokazuje, že selén IDE v tomto kroku pozastavil vykonávanie. <strong>V jednom testovacom prípade môžete mať viac bodov prerušenia.</strong></p> <a id="menu-10"></a> <h2>Krok</h2> <p>Umožňuje vám vykonávať nasledujúce príkazy jeden po druhom po pozastavení testovacieho prípadu. Použime scenár z predchádzajúcej časti „Hraničné body“.</p> <table> <tbody> <tr> <td width="50%"> </td> <td> <p><strong>Pred kliknutím na „Krok“.</strong></p> <p>Testovací prípad sa pozastaví na riadku „clickAndWait | prihlásiť“.</p> </td> </tr> <tr> <td width="50%"> </td> <td> <p><strong>Po kliknutí na tlačidlo „Krok“.</strong></p> <p>Spustí sa riadok „clickAndWait | login“, ktorý sa zastaví na ďalší príkaz (verifyTitle | Sign-on: Mercury Tours).</p> <p>Všimnite si, že nasledujúci riadok je pozastavený, aj keď tam nie je žiadny bod prerušenia. Toto je hlavný účel funkcie Krok - vykonáva nasledujúce príkazy jeden po druhom, aby vám po každom kroku poskytoval viac času na kontrolu výsledku.</p> </td> </tr> </tbody> </table> <a id="menu-11"></a> <h2>Dôležité informácie, ktoré je potrebné pamätať pri použití iných formátov v zdrojovom zobrazení</h2> <p><strong>Selénové IDE funguje dobre iba s HTML - ostatné formáty sú stále v experimentálnom režime</strong> . Je to <strong>nie je vhodné</strong> vytvárať alebo upravovať testy za použitia iných formátov zobrazenie zdroje, pretože tam je ešte veľa práce nevyhnutné, aby bol stabilný. Ďalej sú známe chyby od verzie 1.9.1.</p> <ul> <li>Ak sa nevrátite do formátu HTML, nebudete môcť prehrávať ani prepnúť späť na zobrazenie tabuľky.</li> <li>Jediným spôsobom, ako bezpečne pridať príkazy do zdrojového kódu, je zaznamenať ich.</li> <li>Keď zdrojový kód upravíte manuálne, pri prepnutí na iný formát sa celý stratí.</li> <li>Aj keď môžete testovací prípad uložiť v zdrojovom zobrazení, Selenium IDE ho nebude môcť otvoriť.</li> </ul> <p><strong>Odporúčaným spôsobom, ako prevádzať selenské testy, je použitie možnosti „Exportovať testovací prípad ako…“ v ponuke Súbor, a nie prostredníctvom zdrojového zobrazenia.</strong></p> <a id="menu-12"></a> <h2>Zhrnutie</h2> <ul> <li>Testovacie skripty je možné vytvoriť zaznamenaním alebo manuálnym zadaním príkazov a parametrov.</li> <li>Pri ručnom vytváraní skriptov sa na získanie lokátora používa Firebug.</li> <li>Tlačidlo Nájsť slúži na kontrolu, či má príkaz prístup k správnemu prvku.</li> <li>Tabuľkové zobrazenie zobrazuje testovací skript v tabuľkovej forme, zatiaľ čo zdrojové zobrazenie ho zobrazuje vo formáte HTML.</li> <li>Zmena zobrazenia zdroja na formát iný ako HTML je stále experimentálna.</li> <li>Pri vytváraní testov v iných formátoch nepoužívajte zobrazenie zdroja. Namiesto toho použite funkcie Export.</li> <li>Parametre nie sú vždy potrebné. Závisí to od príkazu.</li> <li>Existujú tri typy príkazov:</li> <ul> <li>Akcie - priamo interaguje s prvkami stránky</li> <li>Accessors - „číta“ vlastnosť prvku a ukladá ju do premennej</li> <li>Tvrdenia - porovnáva skutočnú hodnotu s očakávanou</li> </ul> <li>Tvrdenia majú tri typy:</li> <ul> <li>Tvrdiť - pri zlyhaní sa nasledujúce kroky už nevykonávajú</li> <li>Overiť - po zlyhaní sa nasledujúce kroky stále vykonajú.</li> <li>WaitFor - prejde, ak sa zadaná podmienka stane pravdivou v časovom limite; inak zlyhá</li> </ul> <li>Najbežnejšie príkazy sú:</li> <ul> <li>otvorené</li> <li>click / clickAndWait</li> <li>typ / typKľúče</li> <li>verifyTitle / assertTitle</li> <li>verifyTextPresent</li> <li>verifyElementPresent</li> <li>overiťTabuľka</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">Populárne Príspevky</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="/8003607-useful-css3-less-mixins" title="Užitočné CSS3 MENEJ mixínov Triky CSS" rel="bookmark"><img src="https://cdn.css-code.org/8439405/useful_css3_less_mixins_css-tricks.png.webp" loading="lazy" alt="Užitočné CSS3 MENEJ mixínov Triky CSS" title="Užitočné CSS3 MENEJ mixínov Triky CSS" 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="/8003607-useful-css3-less-mixins" title="Užitočné CSS3 MENEJ mixínov Triky CSS" rel="bookmark">Užitočné CSS3 MENEJ mixínov Triky CSS 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="/8003608-turn-off-number-input-spinners" title="Vypnúť číselníky na zadávanie čísel Triky CSS" rel="bookmark"><img src="https://cdn.css-code.org/9450241/turn_off_number_input_spinners_css-tricks.png.webp" loading="lazy" alt="Vypnúť číselníky na zadávanie čísel Triky CSS" title="Vypnúť číselníky na zadávanie čísel Triky CSS" 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="/8003608-turn-off-number-input-spinners" title="Vypnúť číselníky na zadávanie čísel Triky CSS" rel="bookmark">Vypnúť číselníky na zadávanie čísel Triky CSS 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="/8003609-typewriter-effect" title="Efekt písacieho stroja - Triky CSS" rel="bookmark"><img src="https://cdn.css-code.org/3059236/typewriter_effect_css-tricks.png.webp" loading="lazy" alt="Efekt písacieho stroja - Triky CSS" title="Efekt písacieho stroja - Triky CSS" 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="/8003609-typewriter-effect" title="Efekt písacieho stroja - Triky CSS" rel="bookmark">Efekt písacieho stroja - Triky CSS 2025</a></h3> </div> </div> </li> </ul> </div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Najlepšie názory na mesiac</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="/8004283-42-all-about-floats-screencast" title="# 42: Všetko o plavákoch Screencast - Triky CSS" rel="bookmark"># 42: Všetko o plavákoch Screencast - Triky CSS</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="/8004284-45-using-foxycart-for-ecommerce" title="# 45: Používanie FoxyCart pre elektronický obchod Triky CSS" rel="bookmark"># 45: Používanie FoxyCart pre elektronický obchod Triky CSS</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="/8004285-46-domains-dns-hosting-and-google-apps" title="# 46: Domény, DNS, hostenie a Google Apps - Triky CSS" rel="bookmark"># 46: Domény, DNS, hostenie a Google Apps - Triky CSS</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="/8004286-190-css-custom-properties-penetrate-the-shadow-dom" title="# 190: Vlastné vlastnosti CSS prenikajú do tieňového DOM - Triky CSS" rel="bookmark"># 190: Vlastné vlastnosti CSS prenikajú do tieňového DOM - Triky CSS</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="/8004287-47-css-shorthand" title="# 47: Skratka CSS - Triky CSS" rel="bookmark"># 47: Skratka CSS - Triky CSS</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="/8004288-48-skinning-phpbb" title="# 48: Stiahnutie phpBB - Triky CSS" rel="bookmark"># 48: Stiahnutie phpBB - Triky CSS</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="/8004289-49-hodgepodge-of-photoshop-tricks" title="# 49: Hodgepodge of Photoshop Tricks - Triky CSS" rel="bookmark"># 49: Hodgepodge of Photoshop Tricks - Triky CSS</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="/8004290-51-a-lesson-learned-in-accessibility" title="# 51: Poučenie z prístupnosti - Triky CSS" rel="bookmark"># 51: Poučenie z prístupnosti - Triky CSS</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="/8004291-50-building-a-customized-and-dynamic-ordering-form" title="# 50: Vytvorenie prispôsobeného a dynamického objednávkového formulára Triky CSS" rel="bookmark"># 50: Vytvorenie prispôsobeného a dynamického objednávkového formulára Triky CSS</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="/8004292-4-forcing-scrollbars-eliminating-horizontal-jumps" title="# 4: Vynútenie posúvačov: Odstránenie horizontálnych skokov Triky CSS" rel="bookmark"># 4: Vynútenie posúvačov: Odstránenie horizontálnych skokov Triky CSS</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="/8004293-53-customizing-paypal-forms-buttons-and-headers" title="# 53: Prispôsobenie formulárov, tlačidiel a hlavičiek PayPal Triky CSS" rel="bookmark"># 53: Prispôsobenie formulárov, tlačidiel a hlavičiek PayPal Triky CSS</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="/8004294-52-building-a-print-stylesheet" title="# 52: Vytvorenie šablóny štýlov pre tlač Triky CSS" rel="bookmark"># 52: Vytvorenie šablóny štýlov pre tlač Triky CSS</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="/8004295-54-introduction-to-flir" title="# 54: Úvod do FLIR - Triky CSS" rel="bookmark"># 54: Úvod do FLIR - Triky CSS</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="/8004296-55-adding-rss-content-with-simplepie" title="# 55: Pridávanie obsahu RSS pomocou SimplePie Triky CSS" rel="bookmark"># 55: Pridávanie obsahu RSS pomocou SimplePie Triky CSS</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="/8004297-56-integrating-foxycart-and-wordpress" title="# 56: Integrácia FoxyCart a WordPress - Triky CSS" rel="bookmark"># 56: Integrácia FoxyCart a WordPress - Triky CSS</a></h3> </div> </div> </li> </ul> </div> <div id="container-5533149ee6411a5f99b370c693e87966"></div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Najlepšie Články</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="/8004228-182-babys-first-vue-sfc" title="# 182: Baby's First Vue SFC - Triky CSS" rel="bookmark"><img src="https://cdn.css-code.org/2806429/182_babys_first_vue_sfc_css-tricks.png.webp" loading="lazy" alt="# 182: Baby's First Vue SFC - Triky CSS" title="# 182: Baby's First Vue SFC - Triky CSS" 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="/8004228-182-babys-first-vue-sfc" title="# 182: Baby's First Vue SFC - Triky CSS" rel="bookmark"># 182: Baby's First Vue SFC - Triky CSS 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="/8004229-186-notion-for-web-development-teams" title="# 186: Pojem pre tímy pre vývoj webových aplikácií Triky CSS" rel="bookmark"><img src="https://cdn.css-code.org/1816679/186_notion_for_web_development_teams_css-tricks.png.webp" loading="lazy" alt="# 186: Pojem pre tímy pre vývoj webových aplikácií Triky CSS" title="# 186: Pojem pre tímy pre vývoj webových aplikácií Triky CSS" 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="/8004229-186-notion-for-web-development-teams" title="# 186: Pojem pre tímy pre vývoj webových aplikácií Triky CSS" rel="bookmark"># 186: Pojem pre tímy pre vývoj webových aplikácií Triky CSS 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="/8004230-183-art-directing-images-the-picture-element-and-image-cdns" title="# 183: Obrazy s umeleckou réžiou, obrazový prvok a obrazové CDN - Triky CSS" rel="bookmark"><img src="https://cdn.css-code.org/7897527/183_art_directing_images-_the_picture_element-_and_image_cdns_css-tricks.png.webp" loading="lazy" alt="# 183: Obrazy s umeleckou réžiou, obrazový prvok a obrazové CDN - Triky CSS" title="# 183: Obrazy s umeleckou réžiou, obrazový prvok a obrazové CDN - Triky CSS" 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="/8004230-183-art-directing-images-the-picture-element-and-image-cdns" title="# 183: Obrazy s umeleckou réžiou, obrazový prvok a obrazové CDN - Triky CSS" rel="bookmark"># 183: Obrazy s umeleckou réžiou, obrazový prvok a obrazové CDN - Triky CSS 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">Populárne Príspevky</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224945-linuxunix-ssh-ping-ftp-telnet-communication-commands" title="Komunikačné príkazy pre Linux / Unix SSH, Ping, FTP, Telnet" rel="bookmark">Komunikačné príkazy pre Linux / Unix SSH, Ping, FTP, Telnet</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224946-telnet-vs-ssh-key-differences" title="Telnet vs SSH: Kľúčové rozdiely" rel="bookmark">Telnet vs SSH: Kľúčové rozdiely</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224947-pipe-grep-and-sort-command-in-linuxunix-with-examples" title="Príkazy Pipe, Grep a Sort v systéme Linux / Unix s príkladmi" rel="bookmark">Príkazy Pipe, Grep a Sort v systéme Linux / Unix s príkladmi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224948-linux-regular-expression-tutorial-grep-regex-example" title="Výukový program pre regulárne výrazy v Linuxe: Príklad Grep Regex" rel="bookmark">Výukový program pre regulárne výrazy v Linuxe: Príklad Grep Regex</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224949-vi-editor-with-commands-in-linuxunix-tutorial" title="Výukový program editora VI s príkazmi v systéme Linux / Unix" rel="bookmark">Výukový program editora VI s príkazmi v systéme Linux / Unix</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Redakcia Choice</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8222723-connect-mobile-device-with-android-debug-bridgeadb-to-usb-wifi" title="Pripojte mobilné zariadenie s Android Debug Bridge (ADB) k USB, WiFi" rel="bookmark">Pripojte mobilné zariadenie s Android Debug Bridge (ADB) k USB, WiFi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8222724-top-18-appium-interview-questions-and-answers" title="Top 18 Appium Interview Questions & Odpovede" rel="bookmark">Top 18 Appium Interview Questions & Odpovede</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8222725-appium-maven-dependency-project-example" title="Závislosť Appium Maven: Príklad projektu" rel="bookmark">Závislosť Appium Maven: Príklad projektu</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8222726-android-app-testing-tutorial-with-automation-framework" title="Výukový program pre testovanie aplikácií pre Android s automatizačným rámcom" rel="bookmark">Výukový program pre testovanie aplikácií pre Android s automatizačným rámcom</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8222727-robotium-tutorial-your-first-android-framework" title="Výukový program Robotium: Váš prvý rámec pre Android" rel="bookmark">Výukový program Robotium: Váš prvý rámec pre Android</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Najlepšie Články</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003894-working-with-attributes" title="Práca s atribútmi Triky CSS" rel="bookmark">Práca s atribútmi Triky CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003895-append-non-breaking-space-between-last-two-words" title="Pripojte nerozbitný priestor medzi posledné dve slová Triky CSS" rel="bookmark">Pripojte nerozbitný priestor medzi posledné dve slová Triky CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003896-adjust-server-time" title="Upraviť čas servera - Triky CSS" rel="bookmark">Upraviť čas servera - Triky CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003897-append-login-credentials-to-url" title="Pripojiť prihlasovacie údaje k URL Triky CSS" rel="bookmark">Pripojiť prihlasovacie údaje k URL Triky CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003898-associative-array-syntax" title="Syntax asociatívneho poľa - Triky CSS" rel="bookmark">Syntax asociatívneho poľa - Triky CSS</a></h3> </div> </div> </li> </ul> </div> </div> </div> <p>© Copyright sk.css-code.org, 2025 Apríl | <a href="https://sk.css-code.org/about-site" title="O stránke">O stránke</a> | <a href="https://sk.css-code.org/contacts" title="Kontakt">Kontakt</a> | <a href="https://sk.css-code.org/privacy-policy" title="Zásady ochrany osobných údajov">Zásady ochrany osobných údajov</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>