Як використовувати Selenium IDE зі сценаріями & Команди (затвердити, перевірити)

Зміст:

Anonim

Ми будемо використовувати веб-сайт Mercury Tours як наш веб-додаток, що перевіряється. Це онлайн-система бронювання польотів, яка містить усі елементи, необхідні для цього підручника. Його URL-адреса - http://demo.guru99.com/test/newtours/, і це буде нашою базовою URL-адресою.

Створіть сценарій шляхом запису

Давайте зараз створимо наш перший тестовий скрипт в Selenium IDE за допомогою найпоширенішого методу - шляхом запису. Потім ми виконаємо наш сценарій за допомогою функції відтворення.

Крок 1

  • Запустіть Firefox та Selenium IDE.
  • Введіть значення для нашої базової URL-адреси: http://demo.guru99.com/test/newtours/.
  • Увімкніть кнопку Record (якщо вона ще не ввімкнена за замовчуванням).
Крок 2

У Firefox перейдіть на сторінку http://demo.guru99.com/test/newtours/. Firefox повинен перейти на сторінку, подібну до наведеної нижче.
Крок 3
  • Клацніть правою кнопкою миші на будь-якому порожньому місці на сторінці, наприклад на логотипі Mercury Tours у верхньому лівому куті. Після цього з’явиться контекстне меню Selenium IDE. Примітка: Не клацайте на будь-які гіперпосилання на об’єкти чи зображення
  • Виберіть опцію "Показати доступні команди".
  • Потім виберіть «assertTitle точно: Ласкаво просимо: Mercury Tours». Це команда, яка гарантує правильність назви сторінки.
Крок 4
  • У текстовому полі "Ім'я користувача" Mercury Tours введіть недійсне ім'я користувача "invalidUNN".
  • У текстовому полі "Пароль" введіть недійсний пароль, "invalidPWD".
Крок 5
  • Натисніть кнопку "Вхід". Firefox повинен перейти на цю сторінку.
Крок 6

Вимкніть кнопку запису, щоб зупинити запис. Тепер ваш сценарій повинен виглядати так, як показано нижче.
Крок 7

Тепер, коли ми закінчили роботу з нашим тестовим сценарієм, ми збережемо його у тестовому випадку. У меню Файл виберіть «Зберегти тест». Крім того, ви можете просто натиснути Ctrl + S.
Крок 8
  • Виберіть потрібне місце, а потім назвіть Тестовий кейс як "Недійсний_логін".
  • Натисніть кнопку «Зберегти».
Крок 9.

Зверніть увагу, що файл було збережено як HTML.

Крок 10.

Поверніться до Selenium IDE і натисніть кнопку Відтворення, щоб виконати весь сценарій. Селен IDE повинен мати можливість бездоганно копіювати все.

Вступ до команд селену - Селен

  • Команди Селену можуть мати максимум два параметри: ціль і значення.
  • Параметри не потрібні постійно. Це залежить від того, скільки буде потрібно команді.

3 типи команд

Дії

Це команди, які безпосередньо взаємодіють з елементами сторінки.

Приклад: команда "клацніть" - це дія, оскільки ви безпосередньо взаємодієте з елементом, на якому ви натискаєте.

Команда "type" - це також дія, оскільки ви вставляєте значення в текстове поле, а текстове поле показує їх вам у відповідь. Існує двостороння взаємодія між вами та текстовим полем.

Аксесуари

Вони являють собою команди, що дозволяють зберігати значення у змінній.

Приклад: команда "storeTitle" є засобом доступу, оскільки вона лише "зчитує" заголовок сторінки та зберігає її у змінній. Він не взаємодіє з жодним елементом на сторінці.

Твердження

Вони являють собою команди, які перевіряють, чи виконується певна умова.

3 типи тверджень

  • Стверджувати . Коли команда "assert" не вдається, тест негайно зупиняється.
  • Перевірити . Коли команда "перевірити" не вдається, Selenium IDE реєструє цю помилку та продовжує виконання тесту.
  • Зачекайте . Перш ніж перейти до наступної команди, команди "waitFor" спочатку дочекаються, коли певна умова стане істинною.
    • Якщо умова стає істинним протягом періоду очікування, крок проходить.
    • Якщо умова не стає істинним, крок не вдається. Помилка реєструється, і виконання тесту переходить до наступної команди.
    • За замовчуванням значення часу очікування встановлено на 30 секунд. Ви можете змінити це у діалоговому вікні "Параметри середовища IDE" на вкладці "Загальні".

Затвердити проти Перевірити

Загальні команди

Команда Кількість параметрів Опис
відчинено 0 - 2

Відкриває сторінку за допомогою URL-адреси.
click / clickAndWait 1

Клацання по вказаному елементу.
type / typeKeys 2

Вводить послідовність символів.
verifyTitle / assertTitle 1

Порівнює фактичний заголовок сторінки з очікуваним значенням.
verifyTextPresent 1

Перевіряє, чи на сторінці знайдено певний текст.
verifyElementPresent 1

Перевіряє наявність певного елемента.
verifyTable 2

Порівнює вміст таблиці з очікуваними значеннями.
waitForPageToLoad 1

Призупиняє виконання, поки сторінка не буде завантажена повністю.
waitForElementPresent 1

Призупиняє виконання, доки вказаний елемент не з’явиться.

Створіть сценарій вручну за допомогою Firebug

Тепер ми відтворимо той самий тестовий приклад вручну, ввівши команди. Цього разу нам потрібно буде використовувати Firebug.

Крок 1
  • Відкрийте Firefox та Selenium IDE.
  • Введіть базову URL-адресу (http://demo.guru99.com/test/newtours/).
  • Кнопка запису повинна бути ВИМКНЕНО.
Крок 2: Клацніть на верхньому порожньому рядку в редакторі.

Введіть "open" у текстовому полі Command і натисніть Enter.
Крок 3
  • Перейдіть до Firefox до нашої базової URL-адреси та активуйте Firebug
  • На панелі редактора IDE Selenium виберіть другий рядок (рядок під командою "відкрити") і створіть другу команду, ввівши "assertTitle" у поле Команда.
  • Не соромтеся користуватися функцією автозаповнення.
Крок 4
  • У Firebug розгорніть тег , щоб відобразити тег .</li> <li>Клацніть на значення тегу <title> (тобто "Ласкаво просимо: Mercury Tours") і вставте його в поле Target у редакторі.</li> </ul> </td> </tr> <tr> <td><strong>Крок 5</strong> <ul> <li>Щоб створити третю команду, натисніть на третій порожній рядок у редакторі та введіть "type" у текстовому полі Command.</li> <li>У Firebug натисніть на кнопку "Перевірити".</li> </ul> </td> </tr> <tr> <td>Клацніть на текстове поле Ім'я користувача. Зверніть увагу, що Firebug автоматично показує вам HTML-код для цього елемента.</td> </tr> <tr> <td><strong>Крок 6</strong> <p>Зверніть увагу, що в текстовому полі Ім'я користувача немає ідентифікатора, але він має атрибут NAME. Тому ми будемо використовувати його ІМЯ як локатор. Скопіюйте значення NAME і вставте його в поле Target у IDEI Selenium.</p> <p>Досі в текстовому полі Цільова префікс "userName" з "name =", вказуючи, що Selenium IDE повинен націлюватись на елемент, атрибут NAME якого "userName".</p> <p>Введіть "invalidUN" у текстовому полі Значення Selenium IDE. Тепер ваш тестовий сценарій повинен виглядати як на малюнку нижче. Ми закінчили з третьою командою. Примітка: Замість invalidUN, ви можете ввести будь-який інший текстовий рядок. Але Selenium IDE чутливий до регістру, і ви вводите значення / атрибути точно так, як у програмі.</p> </td> </tr> <tr> <td><strong>Крок 7</strong> <ul> <li>Щоб створити четверту команду, введіть "type" у текстовому полі Command.</li> <li>Знову ж таки, використовуйте кнопку Firebug "Перевірити", щоб отримати локатор для текстового поля "Пароль".</li> </ul> <ul> <li> <p>Вставте атрибут NAME ("пароль") у поле Ціль і поставте перед ним префікс "name ="</p> </li> <li> <p>Введіть "invalidPW" у поле Значення в ID середовища Selenium. Тепер ваш тестовий сценарій повинен виглядати як на малюнку нижче.</p> </li> </ul> </td> </tr> <tr> <td><strong>Крок 8</strong> <ul> <li>Для п’ятої команди введіть "clickAndWait" у текстовому полі Команда в Selenium IDE.</li> <li>Використовуйте кнопку Firebug «Перевірити», щоб отримати локатор для кнопки «Увійти».</li> </ul> <ul> <li>Вставте значення атрибута NAME ("логін") у текстове поле Target і поставте перед ним префікс "name =".</li> <li>Тепер ваш тестовий сценарій повинен виглядати як на малюнку нижче.</li> </ul> </td> </tr> </tbody> </table> <p><strong>Крок 9:</strong> Збережіть тестовий приклад так само, як і в попередньому розділі.</p> <a id="menu-6"></a> <h2>Використання кнопки пошуку</h2> <p><strong>Кнопка "Знайти" в ID середовища Selenium використовується, щоб перевірити, чи те, що ми помістили в текстове поле Target, є справді правильним елементом інтерфейсу.</strong></p> <p>Давайте скористаємося тестом Invalid_login, який ми створили в попередніх розділах. Клацніть на будь-яку команду з цільовим записом, скажімо, третю команду.</p> <p>Клацніть на кнопку Знайти. Зверніть увагу, що текстове поле Ім'я користувача на сторінці Mercury Tours стає виділеним на секунду.</p> <p>Це вказує на те, що програма IDE Selenium змогла правильно виявити очікуваний елемент і отримати до нього доступ. Якщо кнопка "Знайти" виділила інший елемент або його взагалі не було, то у вашому сценарії має бути щось не так.</p> <a id="menu-7"></a> <h2>Виконати команду</h2> <p><strong>Це дозволяє виконувати будь-яку окрему команду, не запускаючи весь тест</strong> . Просто натисніть на рядок, який ви хочете виконати, а потім натисніть "Дії> Виконати цю команду" в рядку меню або просто натисніть "X" на клавіатурі.</p> <p><strong>Крок 1.</strong> Переконайтеся, що ваш браузер знаходиться на домашній сторінці Mercury Tours. Клацніть на команду, яку ви хочете виконати. У цьому прикладі натисніть рядок "type | userName | invalidUN".</p> <p><strong>Крок 2.</strong> Натисніть "X" на клавіатурі.</p> <p><strong>Крок 3.</strong> Зверніть увагу, що текстове поле для імені користувача заповнюється текстом "invalidUN"</p> <p><strong>Виконання команд таким чином сильно залежить від сторінки, яку Firefox відображає в даний час</strong> . Це означає, що якщо ви спробуєте наведений вище приклад із домашньою сторінкою Google, яка відображається замість Mercury Tours, тоді ваш крок не вдасться, оскільки на домашній сторінці Google немає текстового поля з атрибутом "userName".</p> <a id="menu-8"></a> <h2>Початкова точка</h2> <p><strong>Точка початку - це індикатор, який повідомляє Selenium IDE, з яких ліній розпочнеться виконання</strong> . <strong>Клавіша швидкого доступу - "S".</strong></p> <p>У наведеному вище прикладі відтворення розпочнеться з третього рядка (введіть | пароль | invalidPW). <strong>Ви можете мати лише одну початкову точку в одному тестовому сценарії.</strong></p> <p>Початкова точка подібна до команди "Виконати", оскільки вона залежить від поточної сторінки. Точка початку не вдасться, якщо ви опинитеся не на тій сторінці.</p> <a id="menu-9"></a> <h2>Точки зупинки</h2> <p>Точки зупинку - це показники, які вказують Selenium IDE, де автоматично зупинити тест. <strong>Клавіша швидкого доступу - "B".</strong></p> <p>Жовте виділення означає, що поточний крок очікує на розгляд. Це доводить, що Selenium IDE призупинила виконання на цьому кроці. <strong>Ви можете мати кілька точок зупинки в одному тестовому випадку.</strong></p> <a id="menu-10"></a> <h2>Крок</h2> <p>Це дозволяє виконувати наступні команди по черзі після паузи тесту. Давайте скористаємося сценарієм у попередньому розділі "Точки зупинки".</p> <table> <tbody> <tr> <td width="50%"> </td> <td> <p><strong>Перш ніж натиснути "Крок".</strong></p> <p>Тестовий випадок призупиняється у рядку "clickAndWait | login".</p> </td> </tr> <tr> <td width="50%"> </td> <td> <p><strong>Після натискання кнопки "Крок".</strong></p> <p>Запущений рядок "clickAndWait | login" та призупинення до наступної команди (verifyTitle | Sign-on: Mercury Tours).</p> <p>Зверніть увагу, що наступний рядок призупинено, хоча там немає точки зупинки. Це головне призначення функції «Крок» - вона виконує наступні команди по черзі, щоб дати вам більше часу для перевірки результату після кожного кроку.</p> </td> </tr> </tbody> </table> <a id="menu-11"></a> <h2>Важливі речі, на які слід звернути увагу при використанні інших форматів у поданні джерела</h2> <p><strong>Селен IDE добре працює лише з HTML - інші формати все ще перебувають у експериментальному режимі</strong> . Це <strong>НЕ рекомендується</strong> створювати і редагувати тести з використанням інших форматів в Source View , тому що є ще багато роботи , необхідно , щоб зробити її більш стабільною. Нижче наведені відомі помилки станом на версію 1.9.1.</p> <ul> <li>Ви не зможете виконати відтворення або повернутися до перегляду таблиці, якщо не повернетесь до HTML.</li> <li>Єдиний спосіб безпечного додавання команд у вихідний код - це їх запис.</li> <li>При зміні вихідного коду вручну весь його буде втрачено при переході на інший формат.</li> <li>Хоча ви можете зберегти свій тестовий приклад, перебуваючи у режимі перегляду джерел, Selenium IDE не зможе його відкрити.</li> </ul> <p><strong>Рекомендований спосіб конвертувати тести Selenese - використовувати опцію "Експортувати тест як ..." у меню Файл, а не через подання джерела.</strong></p> <a id="menu-12"></a> <h2>Резюме</h2> <ul> <li>Тестові сценарії можна створити або записавши, або ввівши команди та параметри вручну.</li> <li>При створенні сценаріїв вручну Firebug використовується для отримання локатора.</li> <li>Кнопка Знайти використовується для перевірки можливості команди отримати доступ до правильного елемента.</li> <li>Табличний вигляд відображає тестовий сценарій у табличній формі, тоді як Source View відображає його у форматі HTML.</li> <li>Зміна подання джерела на формат, який не є HTML, досі експериментальний.</li> <li>Не використовуйте Source View для створення тестів в інших форматах. Натомість використовуйте функції експорту.</li> <li>Параметри не потрібні постійно. Це залежить від команди.</li> <li>Існує три типи команд:</li> <ul> <li>Дії - безпосередньо взаємодіє з елементами сторінки</li> <li>Accessors - "зчитує" властивість елемента і зберігає його у змінній</li> <li>Твердження - порівнює фактичне значення з очікуваним</li> </ul> <li>Твердження мають три типи:</li> <ul> <li>Стверджувати - при відмові наступні кроки більше не виконуються</li> <li>Перевірка - при відмові наступні кроки все ще виконуються.</li> <li>WaitFor - проходить, якщо зазначена умова стає істинною протягом періоду очікування; інакше він зазнає невдачі</li> </ul> <li>Найпоширеніші команди:</li> <ul> <li>відчинено</li> <li>click / clickAndWait</li> <li>type / typeKeys</li> <li>verifyTitle / assertTitle</li> <li>verifyTextPresent</li> <li>verifyElementPresent</li> <li>verifyTable</li> <li>waitForPageToLoad</li> <li>waitForElementPresent</li> </ul> </ul> </div> </article> <div id="container-5533149ee6411a5f99b370c693e87966"></div> </div> </div> </div> </div> </div> <aside class="col-lg-4 sidebar sidebar--right"> <div class="widget widget-popular-posts"> <h2 class="widget-title">Популярні Пости</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="/8003051-text-combine-upright" title="Текст-комбінат-вертикально - CSS-хитрощі" rel="bookmark"><img src="https://cdn.css-code.org/7425163/text-combine-upright_css-tricks.png.webp" loading="lazy" alt="Текст-комбінат-вертикально - CSS-хитрощі" title="Текст-комбінат-вертикально - CSS-хитрощі" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003051-text-combine-upright" title="Текст-комбінат-вертикально - CSS-хитрощі" rel="bookmark">Текст-комбінат-вертикально - CSS-хитрощі 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003052-text-indent" title="Текст-відступ - CSS-хитрощі" rel="bookmark"><img src="https://cdn.css-code.org/1168268/text-indent_css-tricks.png.webp" loading="lazy" alt="Текст-відступ - CSS-хитрощі" title="Текст-відступ - CSS-хитрощі" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003052-text-indent" title="Текст-відступ - CSS-хитрощі" rel="bookmark">Текст-відступ - CSS-хитрощі 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003053-text-decoration-skip-ink" title="Text-decoration-skip-ink - CSS-хитрощі" rel="bookmark"><img src="https://cdn.css-code.org/4511046/text-decoration-skip-ink_css-tricks.png.webp" loading="lazy" alt="Text-decoration-skip-ink - CSS-хитрощі" title="Text-decoration-skip-ink - CSS-хитрощі" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003053-text-decoration-skip-ink" title="Text-decoration-skip-ink - CSS-хитрощі" rel="bookmark">Text-decoration-skip-ink - CSS-хитрощі 2025</a></h3> </div> </div> </li> </ul> </div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Кращі огляди за місяць</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="/8003127-link" title=": посилання - CSS-хитрощі" rel="bookmark">: посилання - CSS-хитрощі</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003128-matches" title=": збіги () - CSS-хитрощі" rel="bookmark">: збіги () - CSS-хитрощі</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003129-focus-visible" title=": фокус-видимий - CSS-хитрощі" rel="bookmark">: фокус-видимий - CSS-хитрощі</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003132-nth-last-of-type" title=": n-й останній із типу - CSS-хитрощі" rel="bookmark">: n-й останній із типу - CSS-хитрощі</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003133-nth-child" title=": n-та дитина - CSS-хитрощі" rel="bookmark">: n-та дитина - CSS-хитрощі</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003134-out-of-range" title=": поза зоною дії - CSS-хитрощі" rel="bookmark">: поза зоною дії - CSS-хитрощі</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003135-only-child" title=": єдиношкіра дитина - CSS-хитрощі" rel="bookmark">: єдиношкіра дитина - CSS-хитрощі</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003137-nth-last-child" title=": n-та-остання-дитина - CSS-хитрощі" rel="bookmark">: n-та-остання-дитина - CSS-хитрощі</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003138-optional" title=": необов’язково - CSS-хитрощі" rel="bookmark">: необов’язково - CSS-хитрощі</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003139-nth-of-type" title=": n-го типу - CSS-хитрощі" rel="bookmark">: n-го типу - CSS-хитрощі</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003140-only-of-type" title=": лише типу - CSS-хитрощі" rel="bookmark">: лише типу - CSS-хитрощі</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003141-not" title=": not () - CSS-хитрощі" rel="bookmark">: not () - CSS-хитрощі</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003143-marker" title=":: маркер - CSS-хитрощі" rel="bookmark">:: маркер - CSS-хитрощі</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003146-root" title=": корінь - CSS-хитрощі" rel="bookmark">: корінь - CSS-хитрощі</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003147-required" title=": обов’язково - CSS-хитрощі" rel="bookmark">: обов’язково - CSS-хитрощі</a></h3> </div> </div> </li> </ul> </div> <div id="container-5533149ee6411a5f99b370c693e87966"></div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Кращі Статті</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="/8003648-embedding-quicktime" title="Вбудовування Quicktime - CSS-хитрощі" rel="bookmark"><img src="https://cdn.css-code.org/1019347/embedding_quicktime_css-tricks.png.webp" loading="lazy" alt="Вбудовування Quicktime - CSS-хитрощі" title="Вбудовування Quicktime - CSS-хитрощі" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003648-embedding-quicktime" title="Вбудовування Quicktime - CSS-хитрощі" rel="bookmark">Вбудовування Quicktime - CSS-хитрощі 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003649-cufon-101" title="Cufon 101 - CSS-хитрощі" rel="bookmark"><img src="https://cdn.css-code.org/6407556/cufon_101_css-tricks.png.webp" loading="lazy" alt="Cufon 101 - CSS-хитрощі" title="Cufon 101 - CSS-хитрощі" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003649-cufon-101" title="Cufon 101 - CSS-хитрощі" rel="bookmark">Cufon 101 - CSS-хитрощі 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003650-embedding-flash" title="Вбудовування Flash - CSS-хитрощі" rel="bookmark"><img src="https://cdn.css-code.org/6394917/embedding_flash_css-tricks.png.webp" loading="lazy" alt="Вбудовування Flash - CSS-хитрощі" title="Вбудовування Flash - CSS-хитрощі" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003650-embedding-flash" title="Вбудовування Flash - CSS-хитрощі" rel="bookmark">Вбудовування Flash - CSS-хитрощі 2025</a></h3> </div> </div> </li> </ul> </div> </aside> </div> </div> <footer class="footer footer--dark"> <div class="container"> <div class="footer__widgets"> <div class="row"> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Популярні Пости</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225935-top-10-excel-formulas-asked-in-an-interview-and-answers" title="10 найкращих формул Excel, заданих в інтерв’ю & Відповіді" rel="bookmark">10 найкращих формул Excel, заданих в інтерв’ю & Відповіді</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225936-13-best-free-microsoft-courses-and-certification-2021-update" title="13 найкращих безкоштовних курсів Microsoft & Сертифікація (оновлення 2021 р.)" rel="bookmark">13 найкращих безкоштовних курсів Microsoft & Сертифікація (оновлення 2021 р.)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225937-excel-pdf" title="Excel PDF" rel="bookmark">Excel PDF</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225938-vba-in-excel-what-is-visual-basic-for-applications-how-to-use" title="VBA в Excel: Що таке Visual Basic для програм, як користуватися" rel="bookmark">VBA в Excel: Що таке Visual Basic для програм, як користуватися</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225939-15-best-excel-books-2021-update" title="15 КРАЩИХ книг Excel (оновлення 2021 р.)" rel="bookmark">15 КРАЩИХ книг Excel (оновлення 2021 р.)</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Вибір Редакції</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224960-15-best-free-and-paid-sftp-servers-for-windowslinux" title="15+ НАЙКРАЩИХ (БЕЗКОШТОВНИХ і платних) серверів SFTP для Windows / Linux" rel="bookmark">15+ НАЙКРАЩИХ (БЕЗКОШТОВНИХ і платних) серверів SFTP для Windows / Linux</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224961-top-50-shell-scripting-interview-questions-and-answers" title="50 найкращих запитань для інтерв’ю для сценаріїв оболонки & Відповіді" rel="bookmark">50 найкращих запитань для інтерв’ю для сценаріїв оболонки & Відповіді</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224962-top-60-linux-interview-questions-and-answers-download-pdf" title="60 найкращих запитань та відповідей на інтерв’ю в Linux (завантажте PDF)" rel="bookmark">60 найкращих запитань та відповідей на інтерв’ю в Linux (завантажте PDF)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224963-oracle-plsql-bulk-collect-forall-example" title="Oracle PL / SQL BULK COLLECT: FORALL Приклад" rel="bookmark">Oracle PL / SQL BULK COLLECT: FORALL Приклад</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224964-mysql-union-complete-tutorial" title="MySQL UNION - повний посібник" rel="bookmark">MySQL UNION - повний посібник</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Кращі Статті</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003005-orphans" title="Сироти - CSS-хитрощі" rel="bookmark">Сироти - CSS-хитрощі</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003006-offset-path" title="Зміщений шлях - CSS-хитрощі" rel="bookmark">Зміщений шлях - CSS-хитрощі</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003007-outline" title="Контур - CSS-хитрощі" rel="bookmark">Контур - CSS-хитрощі</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003008-overflow-anchor" title="Перелив-якір - CSS-хитрощі" rel="bookmark">Перелив-якір - CSS-хитрощі</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003009-outline-offset" title="Контур-зміщення - CSS-хитрощі" rel="bookmark">Контур-зміщення - CSS-хитрощі</a></h3> </div> </div> </li> </ul> </div> </div> </div> <p>© Copyright uk.css-code.org, 2025 Червень | <a href="https://uk.css-code.org/about-site" title="Про сайт">Про сайт</a> | <a href="https://uk.css-code.org/contacts" title="Контакти">Контакти</a> | <a href="https://uk.css-code.org/privacy-policy" title="Політика конфіденційності">Політика конфіденційності</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>