Введение на фактическое тестирование

Тестирующий код Frontend по-прежнему является запутанной практикой для многих разработчиков. Но с развитием Frontend становится более сложным и с разработчиками, ответственными за стабильность и последовательность, как никогда до того, что Frontend тестирование должно быть принято как равный гражданин в пределах вашей кодовой базы. Мы разбиваем ваши разные варианты тестирования и объясним, какие ситуации они лучше всего используются.

Тестирование Frontend - это одеяло срок, который охватывает различные автоматизированные стратегии тестирования. Некоторые из них, как и тестирование подразделения и интеграции, были принятыми лучшими практикой в ​​рамках сообщества Backenc Development в течение многих лет. Другие стратегии новее, и стебель от изменений в том, что сейчас используются разрабатывание Backend и Frontend.

К концу этой статьи вы должны чувствовать себя комфортно, оценивая, какие стратегии тестирования лучше всего подходят с вашей командой и кодовыми базами. Следующие примеры кода будут записаны с использованием структуры жасмина, но правила и процессы аналогичны большинству структуре тестирования.

• Лучшие куски пользовательского тестирования программного обеспечения

01. Тестирование подразделений

Устройство тестирования, одно из ветеранов тестирования, находится на самом низком уровне всех типов тестирования. Его цель состоит в том, чтобы обеспечить наименьшие биты вашего кода (называемые единицы) функции независимо, как и ожидалось.

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

Это помогает подумать о модульных тестах в тандеме с мантрой «сделать одно хорошо». Если у вас есть кусок кода с одной ответственностью, вы, вероятно, захотите написать тест подразделения для него.

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

 Опишите («Операции калькулятора», функция () {
  Это ("следует добавлять два числа", функция () {
    Calculator.init ();
    VAR результат = калькулятор. Addnumbers (7,3);
    ожидать (результат) .tobe (10);
  });
}); 

В нашем Калькулятор Применение, мы хотим убедиться, что расчеты всегда функционируют независимо от того, как мы ожидаем. В этом примере мы хотим убедиться, что мы всегда можем точно добавить два числа вместе.

Первое, что мы делаем, это описать серию испытаний, которые мы собираемся работать, используя жасмин описывать Отказ Это создает тестовый набор - группирование тестов, связанных с определенной областью приложения. Для нашего калькулятора мы будем группировать каждый вычислений в своем собственном номере.

Люксы великолепны не только для организации кода, но и потому, что они позволяют вам работать самостоятельно. Если вы работаете над новой функцией для приложения, вы не хотите проводить каждый тест во время активного развития, так как это было бы очень много времени. Тестирование люксов индивидуально позволяет развиваться быстрее.

Далее мы пишем наши фактические тесты. С использованием Это Функция, мы пишем функцию или фракцию, которую мы тестируем. Наш пример проверяет функцию добавления, поэтому мы будем запускать сценарии, которые подтверждают, что он работает правильно.

Затем мы пишем наше испытание, где мы тестируем, если наш код функционирует, как мы ожидаем. Мы инициализируем наш калькулятор и беги addnumbers. Функция с двумя числами, которые мы хотим добавить. Мы храним число в результате, а затем утверждаем, что это равно числу, которое мы ожидаем (в нашем случае, 10).

Если addnumbers. Не удается вернуть правильные цифры, наш тест потерпит неудачу. Мы бы написали аналогичные тесты для наших других расчетов - вычитание, умножение и т. Д.

02. Приемные тесты

Если тесты единиц похожи на проверку каждого элемента Lego, тесты приемки проверяют, могут быть завершены каждый этап здания. Только потому, что все части учитываются, не означает, что инструкции должным образом исполняются и позволит вам построить окончательную модель.

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

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

 Опишите («Зарегистрировать состояние отказа», функцию () {
  Это («не должно разрешить регистрацию с ограниченной информацией», функция () {
    var page = посещение ("/ home");
    Page.fill_in («Вход [name = 'Email»] «,« Не письмо »);
    Page.click (кнопка «Кнопка [TYPE = PUBD]»);
    Page.click (кнопка «Кнопка [TYPE = PUBD]»);
    Ожидайте (страница. Обратитесь ("# Signuperror"). Hasclass («скрытый»)). Tobefalty ();
  });
}); 

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

Вместо того, чтобы тестирование по определенным функциям и значениям, однако, здесь мы тестируем, чтобы увидеть, ведет ли конкретный рабочий процесс (поток регистрации), как и ожидается, когда мы заполним некоторую плохую информацию. Здесь происходит более минутные действия, такие как валидации формы, которые могут быть тестированными подразделениями, а также любую обработку для того, что показывает наше состояние ошибки, продемонстрированное элементом с идентификатором Signuperror. Отказ

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

При рассмотрении того, что писать приемочные тесты, ваши пользовательские истории - отличное место для начала. Как ваш пользователь взаимодействует с вашим сайтом, и какой ожидаемый результат этого взаимодействия? Это отличается от модульного тестирования, что лучше соответствует чему-то вроде требований к функциям, таких как требования вокруг подтвержденного поля.

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

Как уже упоминалось во введении, некоторые типы тестирования уникальны для Worldred World. Первый из них - визуальное тестирование регрессии. Это не проверяет ваш код, а скорее сравнивает оказанный результат вашего кода - ваш интерфейс - с отображаемой версией вашего приложения в производстве, постановке или предварительно измененной локальной среде.

Это обычно делается путем сравнения скриншотов, предпринятых в браузере без головы (браузер, который работает на сервере). Инструменты сравнения изображения затем обнаруживают любые различия между двумя выстрелами.

Использование такого инструмента, как Phantomcss, ваши тесты указывают, где Test Runner должен перейти к, возьмите скриншот, и каркас показывает вам различия, которые пришли в эти представления.

 Casper.Start («/ Home»). Затем (функция () {

  // начальное состояние формы
  phantomcss.screenshot ("# foreupform", "Форма регистрации");

  // нажмите кнопку регистрации (должен запускать ошибку)
  Casper.click (кнопка # регистрация »);

  // возьми скриншот компонента пользовательского интерфейса
  Phantomcss.screenshot («# Signupform», «Ошибка регистрации формы»);

  // заполнить форму по имени атрибуты и AMP; Разместить
  Casper.fill ("# forepform", {
    Имя: «Алисия Седи»,
    Электронная почта: "[email protected]"
  }, истинный);

  // возьми второй скриншот состояния успеха
 Phantomcss.screenshot («# Fightupform», «Зарегистрироваться Форма успеха»);
}); 

В отличие от принятия и тестирования подразделения, тестирование визуального регрессии трудно извлечь выгоду из, если вы строете что-то новое. Поскольку ваш интерфейс увидит быстрые и радикальные изменения на протяжении всего процесса активного развития, вы, вероятно, сохраняете эти тесты, когда кусочки интерфейса визуально завершены. Следовательно, проверки визуальных регрессионов являются последними тестами, которые вы должны писать.

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

Это просто из-за характера развития - изменения в Ui Может быть преднамеренным, но тесты только знают «Да, это то же самое» или «Нет, это другое». Однако, если визуальные регрессии являются болевой точкой в ​​вашем приложении, этот подход может сэкономить ваше время и усилие команды в целом по сравнению с постоянно исправленными регрессиями.

04. Тесты на доступность и производительность

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

Если у вас возникли проблемы с обеспечением обеспечения эффективности бюджетов или стандартов доступности, это способ сохранить эти требования на переднем крае умов людей.

Оба эти проверки могут быть либо интегрированы в ваш рабочий процесс с помощью инструментов сборки, такие как Grunt и Glp, или полу-вручную в вашем терминале. Для бюджетов производительности инструмент, такой как Grunt-Perfbudget, дает вам возможность автоматически запускать свой сайт через WebPAGETEST в течение определенной задачи.

Однако, если вы не используете задача Runner, вы также можете захватить Perfbudget в качестве автономного NPM модуля и запустите тесты вручную.

Вот что похоже, чтобы запустить это через терминал:

 PerfBudget --URL http://www.alicabless..com --key [ключ WebPagetest API] --speedindex 2000 --render 400

И также, настраивая через руку:

Перфбуджет: {
  дефолт: {
    опции: {
      URL: 'http://alicable..com',
      Ключ: «WebPagetest API ключ»,
      бюджет: {
        Speedindex: '2000',
        Визуализация: '400'
      }
    }
  }
}

[...]

Grunt.registerTark («по умолчанию», «jshint ',' perfbudget ']); 

Эти же варианты доступны для тестирования на доступность. Так что для PA11Y вы можете либо запустить PA11Y. Команда в вашем браузере для вывода или настройки задачи для автоматизации этого шага. В терминале:

 PA11Y ALICALICALIC.COM

// как команда JavaScript после установки NPM

var pa11y = требует ('pa11y'); // требуют PA11Y
var test = pa11y (); // Получить PA11Y готов к установке

TEST.RUN («ALICALIMENT.COM», функция (ошибка, результаты) {
  // Журнал наш анализ ваших результатов
}); 

Большинство инструментов в этих категориях довольно подключаются и играют, но также дают вам возможность настроить, как тесты получают - например, вы можете установить их, чтобы игнорировать определенные стандарты WCAG.

Следующая страница: Как представить тестирование в ваш рабочий процесс

• 1.
• 2.

Текущая страница: Различные типы испытаний на внешний вид (и когда их использовать)