Вступ до тестування інтерфейсу

Sep 11, 2025
Як

Тестовий фронтальний код залишається заплутаною практикою для багатьох розробників. Але з розвитком Frontend стає більш складним і з розробниками, відповідальними за стабільність та послідовність, як ніколи раніше, тестування інтерфейсу повинна бути охоплена як рівноправним громадянином у вашій кодовій базі. Ми розбиваємо різні варіанти тестування і пояснюємо, які ситуації, яких вони найкраще використовуються.

Тестування інтерфейсу - це повний термін, який охоплює різноманітні автоматичні стратегії тестування. Деякі з них, як тестування одиниць та інтеграції, були прийнятною найкращою практикою у спільноті розвитку бекенда протягом багатьох років. Інші стратегії є новими, і випливає з змін у тому, що розробляється в даний час.

До кінця цієї статті ви повинні відчувати себе комфортно оцінюючи, які стратегії тестування найкраще підходять у вашій команді та кодованих базах. Наведені наступні приклади коду, використовуючи рамки жасмину, але правила та процеси є подібними до більшості тестувальних рамок.

  • Кращі частини програмного забезпечення для тестування користувачів

01. Тестування одиниць

Тестування одиниць, один з ветеранів тестування, знаходиться на найнижчому рівні всіх типів тестування. Його метою є забезпечення найменших бітів вашого коду (називаються підрозділами) незалежно, як очікувалося.

Уявіть, що у вас є lego set для будинку. Перш ніж почати будівництво, ви хочете переконатися, що кожен індивідуальний шматок припадає (п'ять червоних квадратів, три жовті прямокутники). Тестування одиниць полягає в тому, що індивідуальні набори коду - такі речі, такі як вхідні перевірки та розрахунки - працюють як передбачено, перш ніж створити більшу функцію.

Це допомагає думати про тести підрозділів у тандемі з "робити одну річ добре" мантру. Якщо у вас є шматок коду з однією відповідальністю, ви, ймовірно, хочете написати це тест на одиницю.

Давайте подивимося на наступний фрагмент коду, в якому ми пишемо блок-тест для простого калькулятора: 

 Опишіть ("Операції калькулятора", функція () {
  Це ("слід додати два числа", функція () {
    Calculator.init ();
    var result = calculator.addnumbers (7,3);
    очікувати (результат).
  });
});

В нашому Калькулятор Застосування, ми хочемо забезпечити, щоб розрахунки завжди функціонували незалежно так, як ми очікуємо. У прикладі ми хочемо переконатися, що ми завжди можемо точно додати два числа разом.

Перше, що ми робимо, це описує серію тестів, які ми будемо працювати, використовуючи Jasmine's описувати . Це створює тест-набір - групування тестів, пов'язаних з певною областю застосування. Для нашого калькулятора ми будемо групувати кожен розрахунок у власному номері.

Люкси знаходяться не тільки для кодової організації, але, оскільки вони дозволять вам виконувати люкси самостійно. Якщо ви працюєте над новою функцією для програми, ви не хочете запускати кожен тест під час активного розвитку, оскільки це буде дуже багато часу. Тестування люксів індивідуально дозволяє розвиватися швидше.

Далі ми пишемо наші фактичні тести. За допомогою це Функція, ми пишемо функцію або фрагмент, ми тестування. Наш приклад виводить функцію додавання, тому ми запустимо сценарії, які підтверджують, що він правильно працює.

Потім ми пишемо наш тестовий затвердження, де ми перевіряємо, якщо наші функції коду, як ми очікуємо. Ми ініціалізуємо наш калькулятор, і запустіть наш додого функція з двома числами, які ми хочемо додати. Ми зберігаємо номер як результат, а потім стверджуємо, що це дорівнює кількості, який ми очікуємо (у нашому випадку 10).

Якщо додого Не вдалося повернути правильні цифри, наш тест не зможе. Ми будемо писати подібні тести для наших інших розрахунків - віднімання, множення тощо.

02. Приймальні тести

Якщо тести одиниць є як перевірка кожна частина LEGO, тести приймання перевіряються, чи можна завершити кожен етап будівництва. Просто тому, що всі частини враховуються, це не означає, що інструкції правильно виконуються, і дозволить вам побудувати кінцеву модель.

Приймальні тести проходять через вашу запущену програму та забезпечують призначені дії, входи користувачів та потоки користувачів є завершеними та функціонуючими.

Тільки тому, що наша програма додого Функція повертає правильний номер, не означає, що інтерфейс калькулятора, безумовно, буде працювати, як очікується, дасть правильний результат. Що робити, якщо наші кнопки вимкнені, або результат розрахунку не відображається? Приймальні тести допомагають нам відповісти на ці питання. 

 Опишіть ("Зареєструватися Повна держава", функція () {
  це ("не повинно дозволити реєстрацію з недійсною інформацією", функція () {
    var page = Відвідайте ("/ home");
    page.fill_in («Вхідний [ім'я = 'email']», «не електронна пошта»);
    page.click ("кнопка [type = submit]");
    page.click ("кнопка [type = submit]");
    Очікуйте (сторінка.Зад ("# signuperror"). HasClass ("приховано")). Tobefalsy ();
  });
});

Структура виглядає дуже схоже на наш одиничний тест: ми визначаємо люкс описувати , потім напишіть наш тест у межах це Функція, потім виконуйте якийсь код і перевірте його результат.

Однак, а не тестування навколо конкретних функцій та цінностей, однак, тут ми перевіряємо, чи є певний робочий процес (потік реєстрації) поводиться, як очікувалося, коли ми заповнюємо деяку погану інформацію. Тут є більш хвилинні дії, такі як форми перевірки, які можуть бути перевірені одиницею, а також будь-яка обробка для того, що показує нашу стану помилок, демонструється елементом з ідентифікатором знайомий .

Приймальні тести - це чудовий спосіб, щоб переконатися, що потоки ключових досків завжди працюють правильно. Також легко додати тести навколо краю, і допомогти своїм команд QA знаходити їх у вашій заявці.

При розгляді того, що писати тести прийому, ваші історії користувачів - це чудове місце для початку. Як ваш користувач взаємодіє з вашим веб-сайтом, і який очікуваний результат цієї взаємодії? Це відрізняється від тестування одиниць, що краще відповідає тому, що вимоги до функції, таких як вимоги до підтвердженого поля.

03. Тестування візуального регресії

Як згадувалося в введенні, деякі види тестування унікальні для Frontend World. Перша з них - це візуальне регресійне тестування. Це не перевіряє ваш код, а скоріше порівнює даний результат вашого коду - ваш інтерфейс - з наданою версією вашої програми у виробництві, постановці або попередньо зміненому місцевому середовищі.

Це, як правило, здійснюється шляхом порівняння скріншотів, взятих у заголовному браузері (браузер, який працює на сервері). Інструменти порівняння зображень потім виявляють будь-які відмінності між двома пострілами.

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

 CASPER.START ("/ HOME"). Потім (функція () {

  // початковий стан форми
  phantomcs.screenshot ("# signupform", "Зареєструватися");

  // Натисніть кнопку реєстрації (повинна викликати помилку)
  Casper.Click ("Кнопка # Реєстрація");

  // Зробити скріншот компонента інтерфейсу UI
  phantomcs.screenshot ("# signupform", "Зареєструватися Помилка форми");

  // заповнити форму за атрибутами імені та amp; подавати
  casper.ilfl ("# signupform", {
    Ім'я: "Алісія Седлок",
    Електронна пошта: "[email protected]"
  }, true);

  // зайняти другий скріншот держави успіху
 phantomcs.screenshot ("# signupform", "Зареєструватися Форма успіху");
});

This visual regression framework illustrates decision trees in your application, exposing complexity to those outside of development

Ця візуальна регресійна база ілюструє дерева рішень у вашій заявці, викриваючи складність до тих, хто за межами розвитку

На відміну від тестування прийому та одиниці, тестування візуального регресії важко виграти, якщо ви будуєте щось нове. Оскільки ваш інтерфейс буде шукати швидкі та різкі зміни протягом усього активного розвитку, ви, швидше за все, зберегти ці тести, коли шматки інтерфейсу візуально завершені. Тому візуальні регресійні тести є останніми тестами, які ви повинні писати.

В даний час багато інструментів візуального регресії вимагають трохи ручних зусиль. Можливо, вам доведеться запустити захоплення скріншот, перш ніж почати розробку у вашій галузі, або вручну оновити скріншоти з базової лінії, оскільки внесення змін до інтерфейсу.

Це просто через природу розвитку - зміни до Інтерфейс Може бути навмисне, але тести знають лише "Так, це те ж саме" або "ні, це інше". Однак, якщо візуальні регресії є біль у вашій заявці, цей підхід може заощадити ваш час та зусилля в цілому, у порівнянні з постійно закріпленими регресіями.

04. Тести доступності та продуктивності

Оскільки культура та обізнаність навколо тестування рослин зростає, тому робить нашу здатність перевіряти різні аспекти екосистеми. З огляду на збільшення уваги доступність І продуктивність у нашій технічній культурі, інтегрування цього у ваш тест-люкс допомагає забезпечити ці концепції, залишаються пріоритетом.

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

Обидва ці чеки можуть бути інтегровані у ваш робочий процес з інструментами для створення, як Grunt та Gulp, або напів-вручну у вашому терміналі. Для бюджетів продуктивності інструмент, як Grunt-Perfbudget, дає вам можливість автоматично запускати ваш сайт через веб-сайт автоматично в межах заданого завдання.

Однак, якщо ви не використовуєте бігун задач, ви також можете захопити перфбузу, як автономний модуль NPM та запустити тести вручну.

Ось що виглядає як запустити це через термінал: 

 Perfbudget --url http://www.aliciveia.com - ключ API WebPagetest] - Speedindex 2000 -Render 400

І те ж саме, налаштування через грунт:

perfbudget: {
  за замовчуванням: {
    Опції: {
      URL: "http://aliciveia",
      Ключ: "WebPagetest API ключ",
      Бюджет: {
        Speedindex: "2000",
        Рендер: "400"
      }
    }
  }
}

[...]

grunt.registertask ("за замовчуванням", ['jshint', "perfbudget ']);

Ті самі варіанти доступні для тестування доступності. Так для pa11y, ви можете або запустити pa11 команду у вашому браузері для виведення або налаштування завдання автоматизувати цей крок. У терміналі: 

 pa11y alicibility.com

// як команда JavaScript після встановлення NPM

var pa11y = вимагає ('pa11y'); // вимагають pa11y
var test = pa11y (); // Отримайте PA11Y готовий до встановлення

test.run ("aliciagration.com", функція (помилка, результати) {
  // Журнал наш аналіз ваших результатів
});

Більшість інструментів у цих категоріях є досить плагіном, але також дайте вам можливість налаштувати, як тести отримують, наприклад, ви можете встановити їх, щоб ігнорувати певні стандарти WCAG.

Resemble.js is a popular image comparison library, and gives you a lot of control over what triggers a visual differentiation

Resemble.js - це популярна бібліотека порівняння зображення, і дає вам багато контролю над тим, що викликає візуальну диференціацію

Наступна сторінка: Як запровадити тестування у ваш робочий процес

  • 1
  • 2

Поточна сторінка: Різні типи інтерфейсів тестів (і коли їх використовувати)

Як - Найпопулярніші статті

Як зробити Мандельбульб

Як Sep 11, 2025

Мандельбульб - це тривимірне фрактальне, яке стає все більш популярним..

5 Речі, які вам потрібно для масляного живопису

Як Sep 11, 2025

Там є необґрунтована містика навколо нафтового живопису, яка поставил..

Створіть символ з сильною позою в Photoshop

Як Sep 11, 2025

Створення перебільшених чоловічих персонажів - це все про перебільшен..

Як рухатися між студією DAZ та Zbrush

Як Sep 11, 2025

Для новачків Zbrush , інтерфейс здається дуже різним для інших 3D-м..

Як імітувати вибухи в майя

Як Sep 11, 2025

Page 1 з 2: Сторінка 1 Сторінка 1 ..

Як створити реалістичну тканину CG

Як Sep 11, 2025

При роботі з тканиною та тканинами в 3D, це може бути важко досягти як га..

Об'єднати традиційні та цифрові навички для створення комічного покриття

Як Sep 11, 2025

Протягом багатьох років я залякав роботу цифрово. Щось про пластмасов�..

Неймовірна потужність Flexbox

Як Sep 11, 2025

FLEXBOX або гнучкий макет коробки - це потужний модуль макета CSS, який дає в..

Категорії