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

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="/8223838-how-to-open-and-close-periods-in-posting-period-variant-in-sap" title="Perioodide avamine ja sulgemine postitusperioodi variandis SAP-is" rel="bookmark"><img src="https://cdn.css-code.org/9265791/how_to_open_and_close_periods_in_posting_period_variant_in_sap.png.webp" loading="lazy" alt="Perioodide avamine ja sulgemine postitusperioodi variandis SAP-is" title="Perioodide avamine ja sulgemine postitusperioodi variandis SAP-is" 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="/8223838-how-to-open-and-close-periods-in-posting-period-variant-in-sap" title="Perioodide avamine ja sulgemine postitusperioodi variandis SAP-is" rel="bookmark">Perioodide avamine ja sulgemine postitusperioodi variandis SAP-is 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="/8223840-how-to-define-posting-period-variant-in-sap" title="Kuidas määratleda postitusperioodi variant SAP-is" rel="bookmark"><img src="https://cdn.css-code.org/9722551/how_to_define_posting_period_variant_in_sap.png.webp" loading="lazy" alt="Kuidas määratleda postitusperioodi variant SAP-is" title="Kuidas määratleda postitusperioodi variant SAP-is" 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="/8223840-how-to-define-posting-period-variant-in-sap" title="Kuidas määratleda postitusperioodi variant SAP-is" rel="bookmark">Kuidas määratleda postitusperioodi variant SAP-is 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="/8223853-how-to-perform-a-journal-entry-posting-fb50-in-sap" title="Kuidas teostada päeviku kirjet, postitades FB50 SAP-i" rel="bookmark"><img src="https://cdn.css-code.org/8781622/how_to_perform_a_journal_entry_posting_fb50_in_sap.png.webp" loading="lazy" alt="Kuidas teostada päeviku kirjet, postitades FB50 SAP-i" title="Kuidas teostada päeviku kirjet, postitades FB50 SAP-i" 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="/8223853-how-to-perform-a-journal-entry-posting-fb50-in-sap" title="Kuidas teostada päeviku kirjet, postitades FB50 SAP-i" rel="bookmark">Kuidas teostada päeviku kirjet, postitades FB50 SAP-i 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="/8225718-5-best-copy-trading-platforms-in-2021" title="5 parimat Copy Trading platvormi aastal 2021" rel="bookmark">5 parimat Copy Trading platvormi aastal 2021</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="/8225719-best-25-coinbase-alternatives-2021-update" title="PARIMAD 25 mündibaasi alternatiivi (2021. aasta värskendus)" rel="bookmark">PARIMAD 25 mündibaasi alternatiivi (2021. aasta värskendus)</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="/8225720-what-is-waterfall-model-in-sdlc-advantages-and-disadvantages" title="Mis on juga mudel SDLC-s? Eelised ja Puudused" rel="bookmark">Mis on juga mudel SDLC-s? Eelised ja Puudused</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="/8225721-what-is-rad-model-phases-advantages-and-disadvantages" title="Mis on RAD-mudel? Faasid, eelised ja puudused" rel="bookmark">Mis on RAD-mudel? Faasid, eelised ja puudused</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="/8225722-10-best-crypto-trading-bots-bitcoin-bots-free-and-paid" title="10+ parimat krüptokaubandusroboti - Bitcoini robotid (tasuta ja tasulised)" rel="bookmark">10+ parimat krüptokaubandusroboti - Bitcoini robotid (tasuta ja tasulised)</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="/8225723-incremental-model-in-sdlc-use-advantage-and-disadvantage" title="Lisamudel SDLC-s: kasutamine, eelis & Puudus" rel="bookmark">Lisamudel SDLC-s: kasutamine, eelis & Puudus</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="/8225727-10-best-really-free-web-hosting-sites-in-2021" title="10 parimat (TÕESTI TASUTA) veebimajutussaiti aastal 2021" rel="bookmark">10 parimat (TÕESTI TASUTA) veebimajutussaiti aastal 2021</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="/8225728-what-is-hadoop-introduction-architecture-ecosystem-components" title="Mis on Hadoop? Sissejuhatus, arhitektuur, ökosüsteem, komponendid" rel="bookmark">Mis on Hadoop? Sissejuhatus, arhitektuur, ökosüsteem, komponendid</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="/8225729-15-best-jenkins-alternatives-and-competitors-open-sourcepaid" title="15 parimat Jenkinsi alternatiivi ja Konkurendid (avatud lähtekoodiga / tasulised)" rel="bookmark">15 parimat Jenkinsi alternatiivi ja Konkurendid (avatud lähtekoodiga / tasulised)</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="/8225730-top-10-best-domain-registrars-in-2021-how-to-buy-a-domain" title="Kümme parimat parimat domeeniregistrit 2021. aastal (kuidas domeeni osta)" rel="bookmark">Kümme parimat parimat domeeniregistrit 2021. aastal (kuidas domeeni osta)</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="/8225735-25-best-favicon-generators-in-2021" title="25 PARIMAT Faviconi generaatorit 2021. aastal" rel="bookmark">25 PARIMAT Faviconi generaatorit 2021. aastal</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="/8225736-20-best-web-analytics-tools-to-track-your-website-performance" title="20 parimat veebianalüütika tööriista oma veebisaidi toimivuse jälgimiseks" rel="bookmark">20 parimat veebianalüütika tööriista oma veebisaidi toimivuse jälgimiseks</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="/8225737-difference-between-domain-name-and-web-hosting" title="Domeeninime ja veebimajutuse erinevus" rel="bookmark">Domeeninime ja veebimajutuse erinevus</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="/8225738-difference-between-blog-and-website" title="Erinevus ajaveebi ja veebisaidi vahel" rel="bookmark">Erinevus ajaveebi ja veebisaidi vahel</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="/8225739-19-best-wordpress-hosting-providers-in-2021" title="19 PARIMAT WordPressi hostimise pakkujat aastal 2021" rel="bookmark">19 PARIMAT WordPressi hostimise pakkujat aastal 2021</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="/8004242-178-percy-catches-visual-changes-in-any-workflow" title="# 178: Percy tabab visuaalseid muudatusi mis tahes töövoos - CSS-trikid" rel="bookmark"><img src="https://cdn.css-code.org/8971817/178_percy_catches_visual_changes_in_any_workflow_css-tricks.png.webp" loading="lazy" alt="# 178: Percy tabab visuaalseid muudatusi mis tahes töövoos - CSS-trikid" title="# 178: Percy tabab visuaalseid muudatusi mis tahes töövoos - 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="/8004242-178-percy-catches-visual-changes-in-any-workflow" title="# 178: Percy tabab visuaalseid muudatusi mis tahes töövoos - CSS-trikid" rel="bookmark"># 178: Percy tabab visuaalseid muudatusi mis tahes töövoos - 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="/8004243-19-designing-a-unique-page-for-twitter-updates" title="# 19: unikaalse lehe kujundamine Twitteri värskenduste jaoks - CSS-trikid" rel="bookmark"><img src="https://cdn.css-code.org/1155916/19_designing_a_unique_page_for_twitter_updates_css-tricks.png.webp" loading="lazy" alt="# 19: unikaalse lehe kujundamine Twitteri värskenduste jaoks - CSS-trikid" title="# 19: unikaalse lehe kujundamine Twitteri värskenduste jaoks - 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="/8004243-19-designing-a-unique-page-for-twitter-updates" title="# 19: unikaalse lehe kujundamine Twitteri värskenduste jaoks - CSS-trikid" rel="bookmark"># 19: unikaalse lehe kujundamine Twitteri värskenduste jaoks - 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="/8004244-198-about-the-position-property" title="# 198: positsiooni atribuudi kohta CSS-trikid" rel="bookmark"><img src="https://cdn.css-code.org/4713010/198_about_the_position_property_css-tricks.png.webp" loading="lazy" alt="# 198: positsiooni atribuudi kohta CSS-trikid" title="# 198: positsiooni atribuudi kohta 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="/8004244-198-about-the-position-property" title="# 198: positsiooni atribuudi kohta CSS-trikid" rel="bookmark"># 198: positsiooni atribuudi kohta 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="/8222589-what-is-static-testing-what-is-a-testing-review" title="Mis on staatiline testimine? Mis on testimise ülevaade?" rel="bookmark">Mis on staatiline testimine? Mis on testimise ülevaade?</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8222590-mccabes-cyclomatic-complexity-calculate-with-flow-graph-example" title="Mccabe tsüklomaatiline keerukus: arvutage vooskeemiga (näide)" rel="bookmark">Mccabe tsüklomaatiline keerukus: arvutage vooskeemiga (näide)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8222591-code-coverage-tutorial-branch-statement-decision-fsm" title="Koodikatvuse õpetus: haru, avaldus, otsus, Mikroneesia" rel="bookmark">Koodikatvuse õpetus: haru, avaldus, otsus, Mikroneesia</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8222592-path-testing-and-basis-path-testing-with-examples" title="Tee testimine & Aluse raja testimine NÄIDETEGA" rel="bookmark">Tee testimine & Aluse raja testimine NÄIDETEGA</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8222593-what-is-volume-testing-learn-with-examples" title="Mis on helitugevuse testimine? Õppige näidete abil" rel="bookmark">Mis on helitugevuse testimine? Õppige näidete abil</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="/8003365-068-photoshopping-the-footer-part-3" title="# 068: jalusega fotode ostmine, 3. osa - CSS-trikid" rel="bookmark"># 068: jalusega fotode ostmine, 3. osa - CSS-trikid</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003366-067-photoshopping-the-footer-part-2" title="# 067: jalusega fotode ostmine, 2. osa - CSS-trikid" rel="bookmark"># 067: jalusega fotode ostmine, 2. osa - CSS-trikid</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003367-069-photoshopping-the-footer-part-4" title="# 069: jalusega fotode ostmine, 4. osa - CSS-trikid" rel="bookmark"># 069: jalusega fotode ostmine, 4. osa - CSS-trikid</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003368-071-cssing-the-footer-part-1" title="# 071: jalus, CSSing, 1. osa - CSS-trikid" rel="bookmark"># 071: jalus, CSSing, 1. osa - CSS-trikid</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003369-077-custom-header-for-snippets" title="# 077: Juppide kohandatud päis - CSS-trikid" rel="bookmark"># 077: Juppide kohandatud päis - CSS-trikid</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="/8004025-mixin-to-manage-breakpoints" title="Mixin murdepunktide haldamiseks - CSS-trikid" rel="bookmark">Mixin murdepunktide haldamiseks - CSS-trikid</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8004026-mixin-for-offset-positioning" title="Mixin positsioneerimiseks - CSS-trikid" rel="bookmark">Mixin positsioneerimiseks - CSS-trikid</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8004027-material-shadows-mixin" title="Materiaalsed varjud Mixin CSS-trikid" rel="bookmark">Materiaalsed varjud Mixin CSS-trikid</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8004028-maintain-aspect-ratio-mixin" title="Säilitage kuvasuhe Mixin CSS-trikid" rel="bookmark">Säilitage kuvasuhe Mixin CSS-trikid</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8004029-mixin-to-qualify-a-selector" title="Mixin valiku kvalifitseerumiseks - CSS-trikid" rel="bookmark">Mixin valiku kvalifitseerumiseks - CSS-trikid</a></h3> </div> </div> </li> </ul> </div> </div> </div> <p>© Copyright et.css-code.org, 2025 September | <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>