Seleeni IDE kasutamine skriptidega & Käsud (kinnita, kinnita)

Lang L: none (table-of-contents):

Anonim

Testitava veebirakendusena kasutame Mercury Toursi veebisaiti. See on veebipõhine lennupiletite broneerimissüsteem, mis sisaldab kõiki selle õpetuse jaoks vajalikke elemente. Selle URL on http://demo.guru99.com/test/newtours/ ja see on meie põhi-URL.

Looge skript salvestamise abil

Loogem nüüd oma esimene testskript Selenium IDE-s, kasutades kõige tavalisemat meetodit - lindistades. Seejärel käivitame skripti taasesitusfunktsiooni abil.

Samm 1

  • Käivitage Firefox ja Selenium IDE.
  • Sisestage meie põhi-URL väärtus: http://demo.guru99.com/test/newtours/.
  • Lülitage nupp Salvesta sisse (kui see pole veel vaikimisi sisse lülitatud).
2. samm

Firefoxis navigeerige saidile http://demo.guru99.com/test/newtours/. Firefox peaks teid viima lehele, mis sarnaneb allpool näidatuga.

3. samm
  • Paremklõpsake lehe mis tahes tühjal alal, nagu näiteks Mercury Toursi logol vasakus ülanurgas. See avab kontekstimenüü Selenium IDE. Märkus. Ärge klõpsake hüperlingitud objektidel ega piltidel
  • Valige suvand "Kuva saadaolevad käsud".
  • Seejärel valige "assertTitle täpne: Tere tulemast: Merkuuri tuurid". See on käsk, mis tagab lehe pealkirja õigsuse.
4. samm
  • Sisestage Mercury Toursi tekstikasti "Kasutajanimi" vale kasutajanimi "invalidUNN".
  • Sisestage tekstiväljale "Parool" vale parool "invalidPWD".
5. samm
  • Klõpsake nuppu "Logi sisse". Firefox peaks teid viima sellele lehele.
6. samm

Salvestamise peatamiseks lülitage salvestusnupp välja. Teie skript peaks nüüd välja nägema selline, nagu allpool näidatud.

7. samm

Nüüd, kui oleme oma testiskripti teinud, salvestame selle testjuhtumi. Valige menüüs Fail "Salvesta testjuhtum". Teise võimalusena võite lihtsalt vajutada klahvikombinatsiooni Ctrl + S.

8. samm
  • Valige soovitud asukoht ja seejärel nimetage testjuhtum nimeks "Invalid_login".
  • Klõpsake nuppu "Salvesta".
9. samm.

Pange tähele, et fail salvestati HTML-na.

10. samm.

Minge tagasi Selenium IDE juurde ja klõpsake kogu skripti käivitamiseks nuppu Taasesitus. Seleen IDE peaks suutma kõike laitmatult korrata.

Seleeni käskude tutvustus - Selenese

  • Selenese käskudel võib olla kuni kaks parameetrit: sihtmärk ja väärtus.
  • Parameetreid pole kogu aeg vaja. See sõltub sellest, kui palju käsku vaja läheb.

3 käskude tüüpi

Toimingud

Need on käsud, mis suhtlevad otse lehe elementidega.

Näide: käsk "click" on toiming, kuna suhtlete otse elemendiga, millel klõpsate.

Käsk "tüüp" on ka toiming, kuna sisestate väärtusi tekstikasti ja tekstikast näitab teile neid vastutasuks. Teie ja tekstikasti vahel on kahepoolne suhtlus.

Juurdepääsud

Need on käsud, mis võimaldavad teil väärtusi muutujale salvestada.

Näide: käsk "storeTitle" on juurdepääs, kuna see ainult "loeb" lehe pealkirja ja salvestab selle muutujasse. See ei suhtle lehe ühegi elemendiga.

Väited

Need on käsud, mis kontrollivad, kas teatud tingimus on täidetud.

3 väidete tüüpi

  • Kinnitada . Kui "kinnitada" käsk ebaõnnestub, katkestatakse test kohe.
  • Kontrollige . Kui käsk "kontroll" ebaõnnestub, logib Selenium IDE selle tõrke ja jätkab testi käivitamist.
  • WaitFor . Enne järgmise käsu juurde minekut ootavad käsud "waitFor" kõigepealt teatud tingimuse tõeks saamist.
    • Kui tingimus saab ooteperioodi jooksul tõeks, siis samm möödub.
    • Kui tingimus ei saa tõeks, nurjub samm. Rike logitakse ja testi täitmine jätkub järgmise käsuga.
    • Vaikimisi on ajalõpu väärtuseks seatud 30 sekundit. Saate seda muuta vahekaardi Üldine dialoogis Selenium IDE suvandid.

Kinnita vs kinnita

Ühised käsud

Käsk Parameetrite arv Kirjeldus
avatud 0 - 2

Avab lehe URL-i abil.

klõpsake / klõpsakeJaoot 1

Klõpsud määratud elemendil.

type / typeKeys 2

Sisestab märkide jada.

verifyTitle / assertTitle 1

Võrdleb tegelikku lehe pealkirja oodatava väärtusega.

verifyTextPresent 1

Kontrollib, kas lehel on teatud tekst.

verifyElementPresent 1

Kontrollib teatud elemendi olemasolu.

kontrolltabel 2

Võrdleb tabeli sisu eeldatavate väärtustega.

waitForPageToLoad 1

Peatab täitmise, kuni leht on täielikult laaditud.

waitForElementPresent 1

Peatab täitmise, kuni määratud element on kohal.

Looge skript käsitsi Firebugiga

Nüüd loome sama testjuhtumi käsitsi uuesti, sisestades käsud. Seekord peame kasutama Firebugi.

Samm 1
  • Avage Firefox ja Selenium IDE.
  • Sisestage põhi-URL (http://demo.guru99.com/test/newtours/).
  • Salvestusnupp peaks olema VÄLJAS.
2. samm: klõpsake redaktori kõige ülemisel tühjal real.

Sisestage tekstiväljale Command käsk "open" ja vajutage sisestusklahvi.

3. samm
  • Liikuge Firefoxis meie põhi-URL-ile ja aktiveerige Firebug
  • Valige paanil Selenium IDE Editor teine ​​rida (rida käsu "avatud" all) ja looge teine ​​käsk, tippides käsuväljale "assertTitle".
  • Kasutage julgelt automaatse täitmise funktsiooni.
4. samm
  • Firebugis laiendage silti , et kuvada silt .</li> <li>Klõpsake märgendi <title> (mis on "Welcome: Mercury Tours") väärtust ja kleepige see redaktoris väljale Siht.</li> </ul> </td> </tr> <tr> <td><strong>5. samm</strong> <ul> <li>Kolmanda käsu loomiseks klõpsake redaktori kolmandal tühjal real ja sisestage käsuväljale käsk "tüüp".</li> <li>Firebugis klõpsake nuppu "Kontrolli".</li> </ul> </td> </tr> <tr> <td>Klõpsake tekstikastil Kasutajanimi. Pange tähele, et Firebug kuvab teile automaatselt selle elemendi HTML-koodi.</td> </tr> <tr> <td><strong>6. samm</strong> <p>Pange tähele, et tekstikastil Kasutajanimi pole ID-d, kuid sellel on atribuut NAME. Seetõttu kasutame selle nime NIMI. Kopeerige väärtus NAME ja kleepige see seleeni IDE väljale Siht.</p> <p>Ikka tekstiväljale Sihtmärk sisestage eesliide "kasutajaNimi" sõnaga "nimi =", mis näitab, et seleeni IDE peaks sihtima elemendi, mille atribuut NAME on "kasutajaNimi".</p> <p>Sisestage seleeni IDE tekstikasti VäärtusUNUN. Teie testskript peaks nüüd välja nägema nagu allolev pilt. Kolmanda käsuga oleme valmis. Märkus. KehtetuUN asemel võite sisestada mis tahes muu tekstistringi. Kuid Selenium IDE on tõstutundlik ja tippite väärtused / atribuudid täpselt nagu rakenduses.</p> </td> </tr> <tr> <td><strong>7. samm</strong> <ul> <li>Neljanda käsu loomiseks sisestage tekstikasti Command "tüüp".</li> <li>Jällegi kasutage Firebugi nuppu "Kontrolli", et leida tekstikasti "Parool" leid.</li> </ul> <ul> <li> <p>Kleepige atribuut NAME ("parool") väljale Siht ja lisage sellele eesliide "name ="</p> </li> <li> <p>Sisestage seleeni IDE väljale Väärtus väärtus "invalidPW". Teie testskript peaks nüüd välja nägema nagu allolev pilt.</p> </li> </ul> </td> </tr> <tr> <td><strong>8. samm</strong> <ul> <li>Viienda käsu jaoks tippige seleeni IDE-s olevasse käsku Tekstikast käsk "clickAndWait".</li> <li>Kasutage Firebugi nuppu "Kontrolli", et leida nupp "Sisselogimine" lokaator.</li> </ul> <ul> <li>Kleepige atribuudi NAME väärtus ("login") tekstiväljale Siht ja lisage sellele eesliide "name =".</li> <li>Teie testskript peaks nüüd välja nägema nagu allolev pilt.</li> </ul> </td> </tr> </tbody> </table> <p><strong>9. samm:</strong> salvestage testjuhtum samamoodi nagu eelmises jaotises.</p> <a id="menu-6"></a> <h2>Nupu Leia kasutamine</h2> <p><strong>Selenium IDE nuppu Leia kasutatakse selleks, et kontrollida, kas tekstiväljale Sihtmärk pandud olime tõesti õige kasutajaliidese element.</strong></p> <p>Kasutagem eelmistes jaotistes loodud Invalid_login testjuhtumit. Klõpsake suvalise käsu, millel on Sihtmärk, näiteks kolmas käsk.</p> <p>Klõpsake nuppu Leia. Pange tähele, et Mercury Toursi lehe tekstikast Kasutaja nimi muutub sekundiks esiletõstetuks.</p> <p>See näitab, et Selenium IDE suutis oodatud elemendi õigesti tuvastada ja sellele juurde pääseda. Kui nupp Leia tõstis esile mõne muu elemendi või puudus see üldse, siis peab skriptis midagi valesti olema.</p> <a id="menu-7"></a> <h2>Käsu täitmine</h2> <p><strong>See võimaldab teil käivitada mis tahes ühe käsu ilma kogu testjuhtumit käivitamata</strong> . Klõpsake lihtsalt real, mida soovite käivitada, ja klõpsake siis menüüribal nuppu "Toimingud> Käivita see käsk" või vajutage lihtsalt klaviatuuril nuppu "X".</p> <p><strong>Samm 1.</strong> Veenduge, et teie brauser oleks Mercury Toursi avalehel. Klõpsake käsul, mida soovite täita. Selles näites klõpsake real "type | kasutajanimi | invalidUN".</p> <p><strong>Samm 2.</strong> Vajutage klaviatuuril nuppu "X".</p> <p><strong>3. samm.</strong> Pange tähele, et kasutajanime tekstikast täidetakse tekstiga "invalidUN"</p> <p><strong>Sel viisil käskude täitmine sõltub suuresti lehest, mida Firefox praegu kuvab</strong> . See tähendab, et kui proovite ülaltoodud näidet, kus Mercury Toursi asemel kuvatakse Google'i avaleht, siis teie samm ebaõnnestub, kuna Google'i avalehel pole atribuudiga "userName" tekstikasti.</p> <a id="menu-8"></a> <h2>Alguspunkt</h2> <p><strong>Alguspunkt on indikaator, mis ütleb Selenium IDE-le, millised read käivitatakse</strong> . <strong>Selle otseteeklahv on "S".</strong></p> <p>Ülaltoodud näites alustatakse taasesitust kolmandal real (tüüp | parool | invalidPW). <strong>Ühes testskriptis võib olla ainult üks alguspunkt.</strong></p> <p>Alguspunkt sarnaneb käskuga Execute selliselt, et need sõltuvad praegu kuvatavast lehest. Alguspunkt ebaõnnestub, kui olete valel lehel.</p> <a id="menu-9"></a> <h2>Murdepunktid</h2> <p>Murdepunktid on näitajad, mis ütlevad Selenium IDE-le, kus test automaatselt peatada. <strong>Otseteeklahv on "B".</strong></p> <p>Kollane esiletõst tähendab, et praegune samm on ootel. See tõestab, et Selenium IDE on selle sammu täitmise peatanud. <strong>Ühes testjuhtumis võib olla mitu murdepunkti.</strong></p> <a id="menu-10"></a> <h2>Samm</h2> <p>See võimaldab teil täita järgmisi käske ükshaaval pärast testjuhtumi peatamist. Kasutagem stsenaariumi eelmises jaotises "Murdepunktid".</p> <table> <tbody> <tr> <td width="50%"> </td> <td> <p><strong>Enne kui klõpsate nupul „Samm”.</strong></p> <p>Testjuhtum peatub real "clickAndWait | login".</p> </td> </tr> <tr> <td width="50%"> </td> <td> <p><strong>Pärast nuppu "Samm" klõpsamist.</strong></p> <p>Käivitatakse rida "clickAndWait | login" ja peatub järgmise käsuga (verifyTitle | Sign-on: Mercury Tours).</p> <p>Pange tähele, et järgmine rida on peatatud, kuigi seal pole katkestuspunkti. See on funktsiooni Samm põhieesmärk - see täidab järgnevad käsud ükshaaval, et anda teile pärast iga sammu tulemuse kontrollimiseks rohkem aega.</p> </td> </tr> </tbody> </table> <a id="menu-11"></a> <h2>Olulised asjad, mida tuleb märkida allikavaates muude vormingute kasutamisel</h2> <p><strong>Seleen IDE töötab hästi ainult HTML-iga - muud vormingud on endiselt eksperimentaalses režiimis</strong> . Allikavaates ei <strong>ole soovitav</strong> teste luua ega muuta, kasutades muid vorminguid, kuna selle stabiilseks muutmiseks on vaja veel palju tööd teha. Allpool on teadaolevad vead alates versioonist 1.9.1.</p> <ul> <li>Te ei saa taasesitust teha ega tabelivaatesse tagasi lülituda, kui pöördute tagasi HTML-i juurde.</li> <li>Ainus viis lähtekoodile ohutult käske lisada on nende salvestamine.</li> <li>Kui muudate lähtekoodi käsitsi, läheb see teisele vormingule üleminekul kaotsi.</li> <li>Allikavaates olles saate oma testjuhtumi salvestada, kuid Selenium IDE ei saa seda avada.</li> </ul> <p><strong>Soovitatav viis Selenese testide teisendamiseks on kasutada menüü Fail käsku "Ekspordi testjuhtum kui ...", mitte allikavaate kaudu.</strong></p> <a id="menu-12"></a> <h2>Kokkuvõte</h2> <ul> <li>Testskripte saab luua kas käskude ja parameetrite käsitsi salvestamise või tippimisega.</li> <li>Käsitsi skriptide loomisel kasutatakse lokaatori hankimiseks Firebugi.</li> <li>Nuppu Otsi kasutatakse selleks, et kontrollida, kas käsuga on võimalik õigele elemendile juurde pääseda.</li> <li>Tabelivaates kuvatakse testskript tabelina, allikavaates aga HTML-vormingus.</li> <li>Allikavaate muutmine mitte-HTML-vorminguks on endiselt eksperimentaalne.</li> <li>Ärge kasutage allikavaadet testide loomiseks teistes vormingutes. Kasutage selle asemel funktsioone Eksport.</li> <li>Parameetreid pole kogu aeg vaja. See sõltub käsust.</li> <li>On kolme tüüpi käske:</li> <ul> <li>Toimingud - suhtleb otse lehe elementidega</li> <li>Accessors - "loeb" elemendi omadust ja salvestab selle muutujasse</li> <li>Väited - võrdleb tegelikku väärtust eeldatava väärtusega</li> </ul> <li>Väidetel on kolme tüüpi:</li> <ul> <li>Kinnita - ebaõnnestumisel järgmisi samme enam ei tehta</li> <li>Kontrolli - ebaõnnestumise korral tehakse järgmised sammud endiselt.</li> <li>WaitFor - möödub, kui määratud tingimus saab tõendatud ajavahemiku jooksul; muidu see ebaõnnestub</li> </ul> <li>Kõige tavalisemad käsud on:</li> <ul> <li>avatud</li> <li>klõpsake / klõpsakeJaoot</li> <li>type / typeKeys</li> <li>verifyTitle / assertTitle</li> <li>verifyTextPresent</li> <li>verifyElementPresent</li> <li>kontrolltabel</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">Lemmik Postitused</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="/8222979-selenium-exception-handling-common-exceptions-list" title="Seleeni erandite käitlemine (üldine erandite loend)" rel="bookmark"><img src="https://cdn.css-code.org/2226079/selenium_exception_handling_common_exceptions_list.png.webp" loading="lazy" alt="Seleeni erandite käitlemine (üldine erandite loend)" title="Seleeni erandite käitlemine (üldine erandite loend)" 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="/8222979-selenium-exception-handling-common-exceptions-list" title="Seleeni erandite käitlemine (üldine erandite loend)" rel="bookmark">Seleeni erandite käitlemine (üldine erandite loend) 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="/8222980-how-to-download-and-install-selenium-ide-for-firefox" title="Kuidas alla laadida & Installige Firefoxi jaoks Selenium IDE" rel="bookmark"><img src="https://cdn.css-code.org/7418176/how_to_download_ampamp_install_selenium_ide_for_firefox.png.webp" loading="lazy" alt="Kuidas alla laadida & Installige Firefoxi jaoks Selenium IDE" title="Kuidas alla laadida & Installige Firefoxi jaoks Selenium IDE" 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="/8222980-how-to-download-and-install-selenium-ide-for-firefox" title="Kuidas alla laadida & Installige Firefoxi jaoks Selenium IDE" rel="bookmark">Kuidas alla laadida & Installige Firefoxi jaoks Selenium IDE 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="/8222981-selenium-ide-tutorial-for-beginners" title="Seleeni IDE õpetus algajatele" rel="bookmark"><img src="https://cdn.css-code.org/5743999/selenium_ide_tutorial_for_beginners.png.webp" loading="lazy" alt="Seleeni IDE õpetus algajatele" title="Seleeni IDE õpetus algajatele" 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="/8222981-selenium-ide-tutorial-for-beginners" title="Seleeni IDE õpetus algajatele" rel="bookmark">Seleeni IDE õpetus algajatele 2025</a></h3> </div> </div> </li> </ul> </div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Lang L: none (reviews-best-month)</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="/8004279-44-hodgepodge-of-wordpress-tricks" title="# 44: WordPressi trikkide hodgepodge - CSS-trikid" rel="bookmark"># 44: WordPressi trikkide hodgepodge - CSS-trikid</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="/8004280-40-how-z-index-works" title="# 40: Kuidas z-indeks töötab - CSS-trikid" rel="bookmark"># 40: Kuidas z-indeks töötab - CSS-trikid</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="/8004281-43-how-to-use-css-sprites" title="# 43: Kuidas kasutada CSS Sprite'i CSS-trikid" rel="bookmark"># 43: Kuidas kasutada CSS Sprite'i CSS-trikid</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="/8004282-41-wordpress-as-a-cms" title="# 41: WordPress kui CMS - CSS-trikid" rel="bookmark"># 41: WordPress kui CMS - CSS-trikid</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="/8004283-42-all-about-floats-screencast" title="# 42: All About Floats Screencast - Kõik CSS-trikid" rel="bookmark"># 42: All About Floats Screencast - Kõik CSS-trikid</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: FoxyCarti kasutamine e-kaubanduses - CSS-trikid" rel="bookmark"># 45: FoxyCarti kasutamine e-kaubanduses - CSS-trikid</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: Domeenid, DNS, hostimine ja Google Apps - CSS-trikid" rel="bookmark"># 46: Domeenid, DNS, hostimine ja Google Apps - CSS-trikid</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: CSS-i kohandatud atribuudid tungivad läbi varju DOM - CSS-trikid" rel="bookmark"># 190: CSS-i kohandatud atribuudid tungivad läbi varju DOM - CSS-trikid</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: CSS-i lühikirjeldus - CSS-trikid" rel="bookmark"># 47: CSS-i lühikirjeldus - CSS-trikid</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: nülgimine phpBB - CSS-trikid" rel="bookmark"># 48: nülgimine phpBB - CSS-trikid</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: Photoshopi trikkide Hodgepodge - CSS-trikid" rel="bookmark"># 49: Photoshopi trikkide Hodgepodge - CSS-trikid</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: ligipääsetavuse õppetund - CSS-trikid" rel="bookmark"># 51: ligipääsetavuse õppetund - CSS-trikid</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: Kohandatud ja dünaamilise tellimisvormi koostamine - CSS-trikid" rel="bookmark"># 50: Kohandatud ja dünaamilise tellimisvormi koostamine - CSS-trikid</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: Kerimisribade sundimine: "Horisontaalsete hüpete" kõrvaldamine - CSS-trikid" rel="bookmark"># 4: Kerimisribade sundimine: "Horisontaalsete hüpete" kõrvaldamine - CSS-trikid</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: PayPali vormide, nuppude ja päiste kohandamine - CSS-trikid" rel="bookmark"># 53: PayPali vormide, nuppude ja päiste kohandamine - CSS-trikid</a></h3> </div> </div> </li> </ul> </div> <div id="container-5533149ee6411a5f99b370c693e87966"></div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Üles Artiklid</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="/8004268-31-introduction-to-google-analytics" title="# 31: Google Analyticsi sissejuhatus - CSS-trikid" rel="bookmark"><img src="https://cdn.css-code.org/4219171/31_introduction_to_google_analytics_css-tricks.png.webp" loading="lazy" alt="# 31: Google Analyticsi sissejuhatus - CSS-trikid" title="# 31: Google Analyticsi sissejuhatus - CSS-trikid" 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="/8004268-31-introduction-to-google-analytics" title="# 31: Google Analyticsi sissejuhatus - CSS-trikid" rel="bookmark"># 31: Google Analyticsi sissejuhatus - CSS-trikid 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="/8004269-34-integrating-and-customizing-google-maps" title="# 34: Google Mapsi integreerimine ja kohandamine - CSS-trikid" rel="bookmark"><img src="https://cdn.css-code.org/3620436/34_integrating_and_customizing_google_maps_css-tricks.png.webp" loading="lazy" alt="# 34: Google Mapsi integreerimine ja kohandamine - CSS-trikid" title="# 34: Google Mapsi integreerimine ja kohandamine - CSS-trikid" 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="/8004269-34-integrating-and-customizing-google-maps" title="# 34: Google Mapsi integreerimine ja kohandamine - CSS-trikid" rel="bookmark"># 34: Google Mapsi integreerimine ja kohandamine - CSS-trikid 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="/8004270-32-using-the-unit-png-fix" title="# 32: Unit PNG Fixi kasutamine - CSS-trikid" rel="bookmark"><img src="https://cdn.css-code.org/9774768/32_using_the_unit_png_fix_css-tricks.png.webp" loading="lazy" alt="# 32: Unit PNG Fixi kasutamine - CSS-trikid" title="# 32: Unit PNG Fixi kasutamine - CSS-trikid" 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="/8004270-32-using-the-unit-png-fix" title="# 32: Unit PNG Fixi kasutamine - CSS-trikid" rel="bookmark"># 32: Unit PNG Fixi kasutamine - CSS-trikid 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">Lemmik Postitused</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225189-python-list-index-with-example" title="Pythoni loendi register () koos näitega" rel="bookmark">Pythoni loendi register () koos näitega</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225190-python-internet-access-using-urllib-request-and-urlopen" title="Pythoni Interneti-juurdepääs, kasutades Urllibi. Request ja urlopen ()" rel="bookmark">Pythoni Interneti-juurdepääs, kasutades Urllibi. Request ja urlopen ()</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225191-python-xml-parser-tutorial-read-xml-file-exampleminidom-elementtree" title="Pythoni XML-i parseri õpetus: lugege xml-faili näidet (Minidom, ElementTree)" rel="bookmark">Pythoni XML-i parseri õpetus: lugege xml-faili näidet (Minidom, ElementTree)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225192-python-calendar-tutorial-with-example" title="Pythoni kalendri juhendaja näide" rel="bookmark">Pythoni kalendri juhendaja näide</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225194-import-module-in-python-with-examples" title="Impordi moodul Pythonis koos näidetega" rel="bookmark">Impordi moodul Pythonis koos näidetega</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Toimetaja Valik</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225073-php-regular-expressionregex-preg-match-preg-replace" title="PHP regulaaravaldis / regex: preg_match () - preg_replace ()" rel="bookmark">PHP regulaaravaldis / regex: preg_match () - preg_replace ()</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225074-php-object-oriented-programming-oops-concept-tutorial-with-example" title="PHP Object Oriented Programming (OOP) kontseptsiooni õpetus koos näitega" rel="bookmark">PHP Object Oriented Programming (OOP) kontseptsiooni õpetus koos näitega</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225075-php-xml-tutorial-create-parse-read-with-example" title="PHP XML-i õpetus: loomine, sõelumine, näitega lugemine" rel="bookmark">PHP XML-i õpetus: loomine, sõelumine, näitega lugemine</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225076-php-date-and-time-function-how-to-get-current-timestamp" title="PHP kuupäev () & Ajafunktsioon: kuidas saada praegust ajatemplit?" rel="bookmark">PHP kuupäev () & Ajafunktsioon: kuidas saada praegust ajatemplit?</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225077-php-security-function-strip-tags-filter-var-md5-and-sha1" title="PHP turbefunktsioon: strip_tags, filter_var, Md5 ja sha1" rel="bookmark">PHP turbefunktsioon: strip_tags, filter_var, Md5 ja sha1</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Üles Artiklid</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8004332-87-moving-up-with-mamp" title="# 87: MAMPiga liikumine üles CSS-trikid" rel="bookmark"># 87: MAMPiga liikumine üles CSS-trikid</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8004333-85-best-practices-with-dynamic-content" title="# 85: Dünaamilise sisuga parimad tavad - CSS-trikid" rel="bookmark"># 85: Dünaamilise sisuga parimad tavad - CSS-trikid</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8004334-88-intro-to-compasssass" title="# 88: kompassi / sassi tutvustus - CSS-trikid" rel="bookmark"># 88: kompassi / sassi tutvustus - CSS-trikid</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8004335-8-css-formatting" title="# 8: CSS-i vormindamine - CSS-trikid" rel="bookmark"># 8: CSS-i vormindamine - CSS-trikid</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8004336-89-organizing-a-photoshop-document" title="# 89: Photoshopi dokumendi korraldamine - CSS-trikid" rel="bookmark"># 89: Photoshopi dokumendi korraldamine - CSS-trikid</a></h3> </div> </div> </li> </ul> </div> </div> </div> <p>© Copyright et.css-code.org, 2025 Juuli | <a href="https://et.css-code.org/about-site" title="Saidi kohta">Saidi kohta</a> | <a href="https://et.css-code.org/contacts" title="Kontaktid">Kontaktid</a> | <a href="https://et.css-code.org/privacy-policy" title="Privaatsuspoliitika">Privaatsuspoliitika</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>