Cum se utilizează Selenium IDE cu Scripturi & Comenzi (Afirmați, verificați)

Cuprins:

Anonim

Vom folosi site-ul web Mercury Tours ca aplicație web testată. Este un sistem de rezervare de zbor online care conține toate elementele de care avem nevoie pentru acest tutorial. URL-ul său este http://demo.guru99.com/test/newtours/ și acesta va fi URL-ul nostru de bază.

Creați un script prin înregistrare

Să ne creăm acum primul script de testare în Selenium IDE folosind cea mai obișnuită metodă - prin înregistrare. Ulterior, vom executa scriptul nostru folosind funcția de redare.

Pasul 1

  • Lansați Firefox și Selenium IDE.
  • Tastați valoarea pentru adresa URL de bază: http://demo.guru99.com/test/newtours/.
  • Activați butonul Înregistrare (dacă nu este încă activat în mod implicit).
Pasul 2

În Firefox, navigați la http://demo.guru99.com/test/newtours/. Firefox ar trebui să vă ducă la pagina similară cu cea prezentată mai jos.
Pasul 3
  • Faceți clic dreapta pe orice spațiu gol din pagină, cum ar fi pe sigla Mercury Tours din colțul din stânga sus. Aceasta va afișa meniul contextual Selenium IDE. Notă: Nu faceți clic pe niciun obiect sau imagine hyperlink
  • Selectați opțiunea „Afișează comenzile disponibile”.
  • Apoi, selectați „assertTitle exact: Welcome: Mercury Tours”. Aceasta este o comandă care vă asigură că titlul paginii este corect.
Pasul 4
  • În caseta de text „Nume utilizator” din Mercury Tours, tastați un nume de utilizator nevalid, „invalidUNN”.
  • În caseta de text „Parolă”, tastați o parolă nevalidă, „invalidPWD”.
Pasul 5
  • Faceți clic pe butonul „Conectare”. Firefox ar trebui să vă ducă la această pagină.
Pasul 6

Dezactivați butonul de înregistrare pentru a opri înregistrarea. Scriptul dvs. ar trebui să arate acum ca cel prezentat mai jos.
Pasul 7

Acum că am terminat cu scriptul nostru de testare, îl vom salva într-un caz de testare. În meniul Fișier, selectați „Salvați cazul de testare”. Alternativ, puteți apăsa pur și simplu Ctrl + S.
Pasul 8
  • Alegeți locația dorită, apoi denumiți Cazul de test ca „Invalid_login”.
  • Faceți clic pe butonul „Salvați”.
Pasul 9.

Observați că fișierul a fost salvat ca HTML.

Pasul 10.

Reveniți la Selenium IDE și faceți clic pe butonul Redare pentru a executa întregul script. Selenium IDE ar trebui să poată reproduce totul fără cusur.

Introducere în comenzile Selenium - Selenese

  • Comenzile Selenese pot avea până la maximum doi parametri: țintă și valoare.
  • Parametrii nu sunt necesari tot timpul. Depinde de câți comanda va avea nevoie.

3 tipuri de comenzi

Acțiuni

Acestea sunt comenzi care interacționează direct cu elementele paginii.

Exemplu: comanda „clic” este o acțiune deoarece interacționați direct cu elementul la care faceți clic.

Comanda „tip” este, de asemenea, o acțiune, deoarece introduceți valori într-o casetă de text, iar caseta de text vi le arată în schimb. Există o interacțiune bidirecțională între dvs. și caseta de text.

Accesorii

Sunt comenzi care vă permit să stocați valorile unei variabile.

Exemplu: comanda „storeTitle” este un accesor deoarece „citește” doar titlul paginii și o salvează într-o variabilă. Nu interacționează cu niciun element de pe pagină.

Afirmații

Sunt comenzi care verifică dacă este îndeplinită o anumită condiție.

3 tipuri de afirmații

  • Afirmați . Când o comandă „afirmă” eșuează, testul este oprit imediat.
  • Verificați . Când o comandă de „verificare” eșuează, Selenium IDE înregistrează această eroare și continuă cu executarea testului.
  • WaitFor . Înainte de a trece la următoarea comandă, comenzile „waitFor” vor aștepta mai întâi ca o anumită condiție să devină adevărată.
    • Dacă starea devine adevărată în perioada de așteptare, pasul trece.
    • Dacă condiția nu devine adevărată, pasul eșuează. Eșecul este înregistrat, iar executarea testului continuă cu următoarea comandă.
    • În mod implicit, valoarea de expirare este setată la 30 de secunde. Puteți schimba acest lucru în dialogul Opțiuni Selenium IDE din fila General.

Afirmați vs. Verificați

Comenzi comune

Comanda Numărul de parametri Descriere
deschis 0 - 2

Deschide o pagină utilizând o adresă URL.
faceți clic / faceți clic și Așteptați 1

Clicuri pe un element specificat.
type / typeKeys 2

Tastați o secvență de caractere.
verifyTitle / assertTitle 1

Compară titlul paginii cu o valoare așteptată.
verifyTextPresent 1

Verifică dacă un anumit text se găsește în pagină.
verifyElementPresent 1

Verifică prezența unui anumit element.
verifyTable 2

Compară conținutul unui tabel cu valorile așteptate.
waitForPageToLoad 1

Întrerupe executarea până când pagina este încărcată complet.
waitForElementPresent 1

Întrerupe executarea până când elementul specificat devine prezent.

Creați manual un script cu Firebug

Acum, vom recrea același caz de testare manual, tastând comenzile. De data aceasta, va trebui să folosim Firebug.

Pasul 1
  • Deschideți Firefox și Selenium IDE.
  • Tastați adresa URL de bază (http://demo.guru99.com/test/newtours/).
  • Butonul de înregistrare trebuie să fie OPRIT.
Pasul 2: Faceți clic pe linia goală din partea de sus a Editorului.

Tastați „deschide” în caseta de text Comandă și apăsați Enter.
Pasul 3
  • Navigați Firefox la adresa URL de bază și activați Firebug
  • În panoul Editor Selenium IDE, selectați a doua linie (linia de sub comanda „deschide”) și creați a doua comandă tastând „assertTitle” în caseta de comandă.
  • Simțiți-vă liber să utilizați funcția de completare automată.
Pasul 4
  • În Firebug, extindeți eticheta pentru a afișa eticheta .</li> <li>Faceți clic pe valoarea etichetei <title> (care este „Welcome: Mercury Tours”) și lipiți-o în câmpul Țintă din Editor.</li> </ul> </td> </tr> <tr> <td><strong>Pasul 5</strong> <ul> <li>Pentru a crea a treia comandă, faceți clic pe a treia linie goală din Editor și introduceți „tastați” în caseta de text Comandă.</li> <li>În Firebug, faceți clic pe butonul „Inspectați”.</li> </ul> </td> </tr> <tr> <td>Faceți clic pe caseta de text Nume utilizator. Observați că Firebug vă arată automat codul HTML pentru acel element.</td> </tr> <tr> <td><strong>Pasul 6</strong> <p>Observați că caseta de text Nume utilizator nu are un ID, dar are un atribut NAME. Prin urmare, vom folosi NOMUL său ca localizator. Copiați valoarea NAME și lipiți-o în câmpul țintă din Selenium IDE.</p> <p>Încă în caseta de text Țintă, prefixează „userName” cu „name =”, indicând faptul că Selenium IDE ar trebui să vizeze un element al cărui atribut NAME este „userName”.</p> <p>Tastați „invalidUN” în caseta de text Value din Selenium IDE. Scriptul de testare ar trebui să arate acum ca imaginea de mai jos. Am terminat cu a treia comandă. Notă: În loc de invalidUN, puteți introduce orice alt șir de text. Dar Selenium IDE este sensibil la majuscule și minuscule și introduceți valori / atribute exact ca în aplicație.</p> </td> </tr> <tr> <td><strong>Pasul 7</strong> <ul> <li>Pentru a crea a patra comandă, introduceți „tastați” în caseta de text Comandă.</li> <li>Din nou, utilizați butonul „Inspectați” de Firebug pentru a obține localizatorul pentru caseta de text „Parolă”.</li> </ul> <ul> <li> <p>Lipiți atributul NAME („parolă”) pe câmpul țintă și prefixați-l cu „nume =”</p> </li> <li> <p>Tastați „invalidPW” în câmpul Value din Selenium IDE. Scriptul de testare ar trebui să arate acum ca imaginea de mai jos.</p> </li> </ul> </td> </tr> <tr> <td><strong>Pasul 8</strong> <ul> <li>Pentru a cincea comandă, tastați „clickAndWait” pe caseta de text Command din Selenium IDE.</li> <li>Utilizați butonul „Inspectați” de Firebug pentru a obține localizatorul pentru butonul „Conectare”.</li> </ul> <ul> <li>Lipiți valoarea atributului NAME („autentificare”) în caseta de text Țintă și prefixați-l cu „nume =”.</li> <li>Scriptul de testare ar trebui să arate acum ca imaginea de mai jos.</li> </ul> </td> </tr> </tbody> </table> <p><strong>Pasul 9:</strong> Salvați cazul de testare la fel ca în secțiunea anterioară.</p> <a id="menu-6"></a> <h2>Folosind butonul Căutare</h2> <p><strong>Butonul Găsiți în Selenium IDE este utilizat pentru a verifica dacă ceea ce am introdus în caseta de text Țintă este într-adevăr elementul corect al interfeței de utilizare.</strong></p> <p>Să folosim cazul de test Invalid_login pe care l-am creat în secțiunile anterioare. Faceți clic pe orice comandă cu o intrare țintă, să zicem, a treia comandă.</p> <p>Faceți clic pe butonul Găsiți. Observați că caseta de text Nume utilizator din pagina Mercury Tours devine evidențiată pentru o secundă.</p> <p>Acest lucru indică faptul că Selenium IDE a reușit să detecteze și să acceseze corect elementul așteptat. Dacă butonul Căutare a evidențiat un alt element sau niciun element deloc, atunci trebuie să fie ceva în neregulă cu scriptul.</p> <a id="menu-7"></a> <h2>Executați comanda</h2> <p><strong>Acest lucru vă permite să executați orice comandă fără a rula întregul caz de testare</strong> . Doar faceți clic pe linia pe care doriți să o executați, apoi faceți clic pe „Acțiuni> Executați această comandă” din bara de meniu sau pur și simplu apăsați „X” pe tastatură.</p> <p><strong>Pasul 1.</strong> Asigurați-vă că browserul dvs. se află pe pagina de pornire Mercury Tours. Faceți clic pe comanda pe care doriți să o executați. În acest exemplu, faceți clic pe linia „type | userName | invalidUN”.</p> <p><strong>Pasul 2.</strong> Apăsați „X” pe tastatură.</p> <p><strong>Pasul 3.</strong> Observați că caseta de text pentru numele de utilizator devine populată cu textul „invalidUN”</p> <p><strong>Executarea comenzilor în acest fel depinde în mare măsură de pagina pe care Firefox o afișează în prezent</strong> . Aceasta înseamnă că, dacă încercați exemplul de mai sus cu pagina de pornire Google afișată în locul celei de la Mercury Tours, atunci pasul dvs. va eșua, deoarece nu există nicio casetă text cu atributul „userName” în pagina de pornire Google.</p> <a id="menu-8"></a> <h2>Punctul de inceput</h2> <p><strong>Un punct de pornire este un indicator care indică Selenium IDE care linii vor începe executarea</strong> . <strong>Tasta de comandă rapidă este „S”.</strong></p> <p>În exemplul de mai sus, redarea va începe pe a treia linie (tastați | parolă | invalidPW). <strong>Puteți avea un singur punct de pornire într-un singur script de testare.</strong></p> <p>Punctul de pornire este similar cu Execute Command, astfel încât acestea să depindă de pagina afișată în prezent. Punctul de pornire nu va reuși dacă sunteți pe pagina greșită.</p> <a id="menu-9"></a> <h2>Puncte de întrerupere</h2> <p>Punctele de întrerupere sunt indicatori care indică Selenium IDE unde trebuie să întrerupă automat testul. <strong>Tasta de comandă rapidă este „B”.</strong></p> <p>Marcarea galbenă înseamnă că pasul curent este în așteptare. Acest lucru demonstrează că Selenium IDE a întrerupt executarea la acel pas. <strong>Puteți avea mai multe puncte de întrerupere într-un singur caz de testare.</strong></p> <a id="menu-10"></a> <h2>Etapa</h2> <p>Vă permite să executați comenzi succesive pe rând după întreruperea cazului de testare. Să folosim scenariul din secțiunea anterioară „Puncte de întrerupere”.</p> <table> <tbody> <tr> <td width="50%"> </td> <td> <p><strong>Înainte de a da clic pe „Pas”.</strong></p> <p>Cazul de test se întrerupe la rândul „clickAndWait | login”.</p> </td> </tr> <tr> <td width="50%"> </td> <td> <p><strong>După ce faceți clic pe „Pas”.</strong></p> <p>Se execută linia „clickAndWait | login” și se oprește la următoarea comandă (verifyTitle | Sign-on: Mercury Tours).</p> <p>Observați că următoarea linie este întreruptă, chiar dacă nu există un punct de întrerupere acolo. Acesta este scopul principal al caracteristicii Step - execută comenzile succesive pe rând pentru a vă oferi mai mult timp pentru a inspecta rezultatul după fiecare pas.</p> </td> </tr> </tbody> </table> <a id="menu-11"></a> <h2>Lucruri importante de reținut atunci când utilizați alte formate în vizualizarea sursă</h2> <p><strong>Selenium IDE funcționează bine numai cu HTML - alte formate sunt încă în modul experimental</strong> . <strong>NU</strong> este <strong>recomandabil</strong> să creați sau să editați teste folosind alte formate în Vizualizarea sursă, deoarece este încă multă muncă necesară pentru a-l stabiliza. Mai jos sunt erorile cunoscute de la versiunea 1.9.1.</p> <ul> <li>Nu veți putea efectua redarea și nici să reveniți la vizualizarea în tabel decât dacă reveniți la HTML.</li> <li>Singura modalitate de a adăuga comenzi în siguranță pe codul sursă este prin înregistrarea acestora.</li> <li>Când modificați manual codul sursă, totul se va pierde atunci când treceți la un alt format.</li> <li>Deși vă puteți salva cazul de test în timp ce se află în Vizualizarea sursă, Selenium IDE nu îl va putea deschide.</li> </ul> <p><strong>Modul recomandat de a converti testele Selenese este de a utiliza opțiunea „Export Test Case As…” din meniul Fișier și nu prin vizualizarea sursă.</strong></p> <a id="menu-12"></a> <h2>rezumat</h2> <ul> <li>Scripturile de testare pot fi create fie prin înregistrarea, fie prin tastarea manuală a comenzilor și parametrilor.</li> <li>Când creați scripturi manual, Firebug este utilizat pentru a obține localizatorul.</li> <li>Butonul Găsire este utilizat pentru a verifica dacă comanda poate accesa elementul corect.</li> <li>Vizualizarea în tabel afișează un script de test în formă tabelară, în timp ce Vizualizarea sursă îl afișează în format HTML.</li> <li>Schimbarea vizualizării sursă într-un format non-HTML este încă experimentală.</li> <li>Nu utilizați vizualizarea sursă pentru a crea teste în alte formate. Folosiți în schimb funcțiile Export.</li> <li>Parametrii nu sunt necesari tot timpul. Depinde de comandă.</li> <li>Există trei tipuri de comenzi:</li> <ul> <li>Acțiuni - interacționează direct cu elementele paginii</li> <li>Accesorii - „citește” o proprietate de element și o stochează într-o variabilă</li> <li>Afirmații - compară o valoare reală cu una așteptată</li> </ul> <li>Afirmațiile au trei tipuri:</li> <ul> <li>Afirmați - la eșec, pașii care urmează nu mai sunt executați</li> <li>Verificați - la eșec, pașii care urmează sunt încă executați.</li> <li>WaitFor - trece dacă condiția specificată devine adevărată în perioada de expirare; în caz contrar, va eșua</li> </ul> <li>Cele mai frecvente comenzi sunt:</li> <ul> <li>deschis</li> <li>faceți clic / faceți clic și Așteptați</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">Posturi Populare</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="/8004192-147-starting-a-react-powered-comment-form" title="# 147: Lansarea unui formular de comentarii cu reacție - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/4837526/147_starting_a_react-powered_comment_form_css-tricks.png.webp" loading="lazy" alt="# 147: Lansarea unui formular de comentarii cu reacție - CSS-Tricks" title="# 147: Lansarea unui formular de comentarii cu reacție - CSS-Tricks" 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="/8004192-147-starting-a-react-powered-comment-form" title="# 147: Lansarea unui formular de comentarii cu reacție - CSS-Tricks" rel="bookmark"># 147: Lansarea unui formular de comentarii cu reacție - CSS-Tricks 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="/8004193-149-a-quick-intro-to-pattern-lab-node-with-brian-muenzenmeyer" title="# 149: O introducere rapidă la nodul modelului de laborator cu Brian Muenzenmeyer - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/7851408/149_a_quick_intro_to_pattern_lab_node_with_brian_muenzenmeyer_css-tricks.png.webp" loading="lazy" alt="# 149: O introducere rapidă la nodul modelului de laborator cu Brian Muenzenmeyer - CSS-Tricks" title="# 149: O introducere rapidă la nodul modelului de laborator cu Brian Muenzenmeyer - CSS-Tricks" 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="/8004193-149-a-quick-intro-to-pattern-lab-node-with-brian-muenzenmeyer" title="# 149: O introducere rapidă la nodul modelului de laborator cu Brian Muenzenmeyer - CSS-Tricks" rel="bookmark"># 149: O introducere rapidă la nodul modelului de laborator cu Brian Muenzenmeyer - CSS-Tricks 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="/8004194-14-converting-a-photoshop-mockup-part-two-episode-three" title="# 14: Conversia unei machete Photoshop: partea a doua, episodul trei - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/8976697/14_converting_a_photoshop_mockup_part_two-_episode_three_css-tricks.png.webp" loading="lazy" alt="# 14: Conversia unei machete Photoshop: partea a doua, episodul trei - CSS-Tricks" title="# 14: Conversia unei machete Photoshop: partea a doua, episodul trei - CSS-Tricks" 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="/8004194-14-converting-a-photoshop-mockup-part-two-episode-three" title="# 14: Conversia unei machete Photoshop: partea a doua, episodul trei - CSS-Tricks" rel="bookmark"># 14: Conversia unei machete Photoshop: partea a doua, episodul trei - CSS-Tricks 2025</a></h3> </div> </div> </li> </ul> </div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Comentarii Cel mai bun pentru luna</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="/8003934-email-protector" title="Protector de e-mail - CSS-Tricks" rel="bookmark">Protector de e-mail - CSS-Tricks</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="/8003935-english-time-to-seconds" title="English Time to Seconds - CSS-Tricks" rel="bookmark">English Time to Seconds - CSS-Tricks</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="/8003936-email-address-validation" title="Validare adresă de e-mail - CSS-Tricks" rel="bookmark">Validare adresă de e-mail - CSS-Tricks</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="/8003937-extract-email-addresses" title="Extrageți adresele de e-mail - CSS-Tricks" rel="bookmark">Extrageți adresele de e-mail - CSS-Tricks</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="/8003938-error-page-to-handle-all-errors" title="Pagina de erori pentru a gestiona toate erorile - CSS-Tricks" rel="bookmark">Pagina de erori pentru a gestiona toate erorile - CSS-Tricks</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="/8003939-find-all-links-on-a-page" title="Găsiți toate linkurile pe o pagină - CSS-Tricks" rel="bookmark">Găsiți toate linkurile pe o pagină - CSS-Tricks</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="/8003940-find-file-extension" title="Găsiți extensia de fișier - CSS-Tricks" rel="bookmark">Găsiți extensia de fișier - CSS-Tricks</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="/8003941-find-highest-numerically-named-file" title="Găsiți cel mai mare fișier numit numeric - CSS-Tricks" rel="bookmark">Găsiți cel mai mare fișier numit numeric - CSS-Tricks</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="/8003942-force-leading-zero" title="Forța care conduce zero - CSS-Tricks" rel="bookmark">Forța care conduce zero - CSS-Tricks</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="/8003943-find-the-full-path-to-a-file" title="Găsiți calea completă către un fișier - CSS-Tricks" rel="bookmark">Găsiți calea completă către un fișier - CSS-Tricks</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="/8003944-generate-csv-from-array" title="Generați CSV din Array - CSS-Tricks" rel="bookmark">Generați CSV din Array - CSS-Tricks</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="/8003945-get-current-file-name" title="Obțineți numele fișierului curent - CSS-Tricks" rel="bookmark">Obțineți numele fișierului curent - CSS-Tricks</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="/8003946-generate-expiring-amazon-s3-link" title="Generați linkul Amazon S3 care expiră - CSS-Tricks" rel="bookmark">Generați linkul Amazon S3 care expiră - CSS-Tricks</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="/8003947-find-urls-in-text-make-links" title="Găsiți adrese URL în text, creați legături - CSS-Tricks" rel="bookmark">Găsiți adrese URL în text, creați legături - CSS-Tricks</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="/8003948-get-all-time-number-of-mysql-queries" title="Obțineți numărul permanent de interogări MySQL - CSS-Tricks" rel="bookmark">Obțineți numărul permanent de interogări MySQL - CSS-Tricks</a></h3> </div> </div> </li> </ul> </div> <div id="container-5533149ee6411a5f99b370c693e87966"></div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Top Articole</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="/8004246-196-learning-grid-and-flexbox-with-kyle-simpson" title="# 196: Learning Grid & Flexbox cu Kyle Simpson - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/2573925/196_learning_grid_flexbox_with_kyle_simpson_css-tricks.png.webp" loading="lazy" alt="# 196: Learning Grid & Flexbox cu Kyle Simpson - CSS-Tricks" title="# 196: Learning Grid & Flexbox cu Kyle Simpson - CSS-Tricks" 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="/8004246-196-learning-grid-and-flexbox-with-kyle-simpson" title="# 196: Learning Grid & Flexbox cu Kyle Simpson - CSS-Tricks" rel="bookmark"># 196: Learning Grid & Flexbox cu Kyle Simpson - CSS-Tricks 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="/8004247-180-tinkering-with-video-on-mobile" title="# 180: Tinkering cu video pe mobil - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/2614613/180_tinkering_with_video_on_mobile_css-tricks.png.webp" loading="lazy" alt="# 180: Tinkering cu video pe mobil - CSS-Tricks" title="# 180: Tinkering cu video pe mobil - CSS-Tricks" 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="/8004247-180-tinkering-with-video-on-mobile" title="# 180: Tinkering cu video pe mobil - CSS-Tricks" rel="bookmark"># 180: Tinkering cu video pe mobil - CSS-Tricks 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="/8004248-1-converting-a-photoshop-mockup-part-1-of-3" title="# 1: Conversia unui Mockup Photoshop (partea 1 din 3) - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/3586618/1_converting_a_photoshop_mockup_part_1_of_3_css-tricks.png.webp" loading="lazy" alt="# 1: Conversia unui Mockup Photoshop (partea 1 din 3) - CSS-Tricks" title="# 1: Conversia unui Mockup Photoshop (partea 1 din 3) - CSS-Tricks" 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="/8004248-1-converting-a-photoshop-mockup-part-1-of-3" title="# 1: Conversia unui Mockup Photoshop (partea 1 din 3) - CSS-Tricks" rel="bookmark"># 1: Conversia unui Mockup Photoshop (partea 1 din 3) - CSS-Tricks 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">Posturi Populare</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003045-text-decoration-color" title="Text-decor-culoare - CSS-Tricks" rel="bookmark">Text-decor-culoare - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003046-text-decoration" title="Decorare text - CSS-Tricks" rel="bookmark">Decorare text - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003047-text-decoration-line" title="Text-decor-linie - CSS-Tricks" rel="bookmark">Text-decor-linie - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003048-text-decoration-skip" title="Text-decorare-săritură - CSS-Tricks" rel="bookmark">Text-decorare-săritură - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003049-text-decoration-style" title="Text-decor-stil - CSS-Tricks" rel="bookmark">Text-decor-stil - CSS-Tricks</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Alegerea Editorului</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003192-020-the-blog-part-2" title="# 020 - Blogul, partea 2 - CSS-Tricks" rel="bookmark"># 020 - Blogul, partea 2 - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003193-placeholder-shown" title=": substituent-arătat - CSS-Tricks" rel="bookmark">: substituent-arătat - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003194-021-the-blog-part-3" title="# 021 - Blogul, partea 3 - CSS-Tricks" rel="bookmark"># 021 - Blogul, partea 3 - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003195-022-blog-archives" title="# 022 - Arhive blog - CSS-Tricks" rel="bookmark"># 022 - Arhive blog - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003196-023-page-template" title="# 023 - Șablon de pagină - CSS-Tricks" rel="bookmark"># 023 - Șablon de pagină - CSS-Tricks</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Top Articole</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003971-mysql-backup-class" title="MySQL Backup Class - CSS-Tricks" rel="bookmark">MySQL Backup Class - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003972-intelligent-php-cache-control" title="Control inteligent al cache-ului PHP - CSS-Tricks" rel="bookmark">Control inteligent al cache-ului PHP - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003973-mysql-database-access-class" title="Clasa de acces la baza de date MySQL - CSS-Tricks" rel="bookmark">Clasa de acces la baza de date MySQL - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003974-mysql-restore-class" title="Clasa de restaurare MySQL - CSS-Tricks" rel="bookmark">Clasa de restaurare MySQL - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003975-pagination-function" title="Funcția de paginare - CSS-Tricks" rel="bookmark">Funcția de paginare - CSS-Tricks</a></h3> </div> </div> </li> </ul> </div> </div> </div> <p>© Copyright ro.css-code.org, 2025 Aprilie | <a href="https://ro.css-code.org/about-site" title="Despre site">Despre site</a> | <a href="https://ro.css-code.org/contacts" title="Contacte">Contacte</a> | <a href="https://ro.css-code.org/privacy-policy" title="Politica de Confidențialitate">Politica de Confidențialitate</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>