Обзор тестирования JavaScript в 2019 году

Это руководство предназначено, чтобы познакомить вас с наиболее важными рассуждениями, терминами, инструментами и подходами к тестированию JavaScript в 2019 году. (Версия 2018 года доступна здесь)

*********** Важное обновление: ***********

Щелкните здесь, чтобы перейти к новой версии этого руководства.

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

Это немного длинновато. Знаю: D: D. Но тот, кто прочитает и поймет это руководство, может с уверенностью предположить, что он знает общую картину состояния тестирования JavaScript в сообществе веб-разработчиков на 2019 год. Это отличная причина поделиться ею со всеми своими коллегами, семьей и друзьями: )

Посмотрите на слоган Cypress.io выше. Они правы. Интернет эволюционировал, и было удивительно следить за развитием тестирования веб-сайтов в последние годы.

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

Но, согласно The State of JavaScript 2018, никогда не было лучшего времени для разработки JavaScript, чем сейчас. Это особенно верно в отношении тестирования JavaScript, где за последний год общее счастье заметно выросло с 3,2 / 5 до 3,8 / 5.

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

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

• Если вы видите что-то, что я пропустил или сделал не так, оставьте комментарий, и я немедленно исправлю его.
• Я буду обновлять это руководство в течение 2019 года, поэтому, если вы обнаружите что-нибудь устаревшее, дайте мне знать, оставив комментарий ниже.
• Обратите внимание на ссылки внизу страницы. Их чтение приведет вас от простого понимания общей картины к тому, чтобы стать экспертом (теоретически).

Наслаждаться :)

*********** Важное обновление: ***********

Щелкните здесь, чтобы перейти к новой версии этого руководства.

Типы тестов

Более подробно о различных типах тестов можно прочитать здесь, здесь и здесь.

В общем, наиболее важными типами тестов для веб-сайта являются:

• Модульные тесты - тестирование отдельных модулей, таких как функции или классы, путем ввода данных и проверки ожидаемых результатов на выходе:

• Интеграционные тесты - тестирование процессов в нескольких подразделениях для достижения поставленных целей, включая их побочные эффекты:

• Функциональные тесты (также известные как тесты e2e) - проверка того, как сценарии работают в самом продукте, путем управления браузером или веб-сайтом. Эти тесты обычно игнорируют внутреннюю структуру приложения в целом и смотрят на них снаружи, как на черный ящик.

Запуск тестов

Тесты можно запускать в браузере, создав HTML-страницу с тестовыми библиотеками и тестами, включенными в виде файлов JS.

Тесты также можно выполнять в Node.js, просто импортировав тесты и зависимые библиотеки. jsdom обычно используется в Node.js для имитации среды, подобной браузеру, с использованием чистого JavaScript. Он предоставляет окно, документ, тело, местоположение, файлы cookie, селекторы и все, что вы получаете, когда запускаете свой JS в браузере, но не отображает ничего реального. Это отличается от безголового режима, потому что для безголового режима вам нужен настоящий браузер, и он даже может делать снимки экрана, в отличие от jsdom.

Мы предлагаем второй метод (Node.js + jsdom), потому что он намного быстрее, чем запуск тестов в браузере. Первый метод может быть более надежным, потому что вы используете то же самое программное обеспечение, которое будет отображать ваш сайт в реальной жизни. Однако использовать jsdom проще и его должно хватить для большинства случаев использования.

Типы средств тестирования

Инструменты тестирования можно разделить на следующие функции. Некоторые предоставляют нам только одну функцию, а некоторые - комбинацию.

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

1. Средства запуска тестов запускают ваши тесты в браузере или на Node.js с пользовательской конфигурацией, используя интерфейс командной строки или пользовательский интерфейс. Этого также можно добиться, открыв браузер вручную. (Карма, Жасмин, Шутка, TestCafe, Кипарис)
2. Поставщики структуры тестирования помогут вам организовать ваши тестовые файлы. (Мокко, Жасмин, Шутка, Огурец, TestCafe, Кипарис)
3. Функции утверждения проверяют, соответствуют ли результаты теста ожидаемым. (Чай, Жасмин, Шутка, Неожиданно, TestCafe, Кипарис)
4. Создание и отображение хода и результатов тестирования. (Мокко, Жасмин, Шутка, Карма, TestCafe, Cypress)
5. Моки, шпионы и заглушки для выделения определенных частей тестов и выявления их побочных эффектов. (Синон, Жасмин, Фермент, Шутка, тестдабл)
6. Создавайте и сравнивайте снимки компонентов и структур данных, чтобы убедиться, что изменения, внесенные в предыдущие запуски, являются целенаправленными. (Шутка, Ава)
7. Создавайте отчеты о покрытии кода, чтобы узнать, какая часть кода покрывается вашими тестами. (Стамбул, Шутка, Одеяло)
8. Контроллеры браузера имитируют действия пользователя для функциональных тестов. (Ночной дозор, Кошмар, Фантом , Кукловод, TestCafe, Кипарис)
9. Визуальная регрессия Инструменты используются для визуального сравнения вашего сайта с предыдущими версиями с помощью методов сравнения изображений.
   (Applitools, Percy, Wraith , WebdriverCSS)

Поясним некоторые из терминов, упомянутых выше:

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

Структура тестирования относится к организации ваших тестов. В настоящее время тесты обычно организованы в структуру BDD, которая поддерживает разработку, управляемую поведением (BDD). Часто это выглядит так:

Функции утверждения используются, чтобы убедиться, что проверяемые переменные содержат ожидаемое значение. Обычно они выглядят так, причем первые два стиля являются наиболее распространенными:

СОВЕТ: Вот хорошая статья о продвинутых утверждениях Jasmine и Jest.

Шпионы предоставляют нам информацию о функциях. Например, сколько раз они вызывались, в каких случаях и кем?

Шпионы используются в интеграционных тестах, чтобы убедиться, что побочные эффекты процесса ожидаются. Например, сколько раз функция вычисления вызывалась во время какого-либо процесса?

Обратите внимание, как мы запускаем father.execute() и подсчитываем, сколько раз father.child запускалось в течение этого процесса.

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

Чтобы гарантировать, что user.isValid() всегда будет возвращать true во время теста, когда вы тестируете другой компонент, вы можете использовать:

Моки или Подделки используются для подделки определенных модулей или поведения для тестирования различных частей процессов.

Sinon может, например, подделать сервер, чтобы гарантировать офлайн, быстрые и ожидаемые ответы при тестировании определенного потока.

Тестирование снимков - это сравнение структуры данных с ожидаемой.

Следующий пример из официальной документации Jest показывает тест снимка определенного компонента Link.

На самом деле он не отображает и не делает снимок компонента, но сохраняет свои внутренние данные в отдельном файле, например:

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

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

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

Node.js <=> WebDriver <=> FF/Chrome/IE/Safari drivers <=> browser

Или путем внедрения сценария JS-кода, который имеет доступ ко всей среде приложения: DOM, сеть, файлы cookie и т. Д. И может вызывать события, имитирующие поведение пользователя. Например:
document.getElementByID('someButton').dispatchEvent(clickEvent).

Node.js <=> FF/Chrome/IE/Safari injected script <=> Simulated events

Собираем все вместе

Начните с выбора структуры и синтаксиса тестирования (2), которая вам нравится, функции утверждения (3) библиотеки, и решите, как вы хотите запустить тесты (1).

Некоторые фреймворки, такие как Jest, Jasmine, TestCafe и Cypress, предоставляют все это из коробки. Некоторые из них предоставляют только некоторые функции, и следует использовать комбинацию библиотек: (mocha + chai + sinon)

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

Подумайте, когда уместно проводить каждый тип тестов. Например:

Модуль + интеграция при каждом изменении, функциональные тесты только перед фиксацией.

Единичные тесты

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

Модульные тесты - одна из причин, по которой следует как можно чаще использовать функциональное программирование и чистые функции.

Чем чище ваше приложение, тем проще его протестировать.

Интеграционные тесты

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

Лучшая демонстрация того, почему важно тестирование более чем каждой части системы в отдельности, можно увидеть в этом замечательном GIF-изображении.

Я создал этот GIF на основе слайда из этой отличной лекции
Вив Ричардс, которую рекомендую посмотреть.

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

Интеграционные тесты должны охватывать важные кросс-модульные процессы. Иногда они распространяются на процессы нескольких классов, а иногда на тестирование различных систем, таких как взаимодействия Front-End-Back-End.

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

Кроме того, в отличие от модульных тестов, для доступа к window. может потребоваться браузер или среда, подобная браузеру (jsdom).

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

Функциональные тесты

Иногда бывает недостаточно быстрых и эффективных модульных и интеграционных тестов.

Функциональные тесты управляют браузерами (7) и имитируют поведение пользователей в этих средах (щелчки, ввод текста, прокрутка и т. Д.), А также убедитесь, что эти сценарии действительно работают с точки зрения конечный пользователь.

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

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

*********** Важное обновление: ***********

Щелкните здесь, чтобы перейти к новой версии этого руководства.

Список основных инструментов тестирования

Есть десятки отличных инструментов. Я не смог включить сюда все, но я попытался включить самые важные, самые поддерживаемые и самые приняли инструменты из следующего списка:

jsdom

jsdom - это JavaScript-реализация стандартов WHATWG DOM и HTML. Другими словами, jsdom имитирует среду браузера без запуска чего-либо, кроме простого JS.

Как упоминалось ранее, в этой смоделированной среде браузера тесты могут выполняться очень быстро. Недостатком jsdom является то, что не все можно смоделировать вне реального браузера (например, вы не можете сделать снимок экрана), поэтому его использование ограничит охват вашего теста.

Стоит отметить, что сообщество JS быстро улучшает jsdom, и текущая версия очень близка к реальному браузеру.

Электрон

Платформа Electron позволяет писать кроссплатформенные настольные приложения с использованием JavaScript, HTML и CSS. Также есть безголовый режим.

У него огромное сообщество, и на его основе построено множество важных приложений, поэтому предполагается, что он будет постоянно обновляться:
Atom, Slack, Skype, GitHub Desktop и многие другие.

Инструменты тестирования, такие как Cypress.io, используют Electron для запуска тестов с максимальным контролем браузера.

Стамбул

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

Карма

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

Чай

Chai - самая популярная библиотека утверждений. Имеет множество плагинов и расширений.

Непредвиденный

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

Sinon.JS

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

testdouble.js

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

Валлаби

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

Огурец

Cucumber помогает с написанием тестов в BDD, разделяя их между файлами критериев приемлемости с использованием синтаксиса Gherkin и соответствующими им тестами.

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

Многие команды сочтут этот синтаксис более удобным, чем TDD.

Выберите свой модуль и платформу интеграционных тестов

Первый выбор, который вам, вероятно, следует сделать, - это то, какой фреймворк вы хотите использовать. Рекомендуется использовать инструменты, предоставляемые вашим фреймворком, до тех пор, пока не возникнет потребность в уникальных инструментах.

* Короче говоря, если вы хотите «только начать» или ищете быструю структуру для больших проектов, вы не ошибетесь, выбрав Jest.

* Если вам нужна очень гибкая и расширяемая конфигурация, выберите Mocha.

* Если вам нужна простота, выберите Ava.

* Если вы хотите работать на низком уровне, используйте ленту.

Вот список наиболее известных инструментов с некоторыми их характеристиками:

Шутка

Jest - это среда тестирования, созданная и поддерживаемая Facebook. Его популярность резко возросла и стала самой популярной библиотекой в ​​2017 году (судя по состоянию Javascript 2017 против 2018).

Он основан на Жасмин, о котором мы поговорим позже. Со временем Facebook заменил большую часть своей функциональности и добавил к ней множество функций.

После прочтения огромного количества статей и сообщений в блогах невероятно, насколько люди впечатлены скоростью и удобством Jest.

• Производительность. Прежде всего, считается, что Jest работает быстрее для больших проектов с большим количеством тестовых файлов за счет реализации умного механизма параллельного тестирования (это верно по нашему опыту и также обсуждались в этих сообщениях блога: здесь, здесь, здесь, здесь, здесь).
• UI - Понятно и удобно.
• Ready-To-Go - поставляется с утверждениями, шпионами и имитаторами, которые эквивалентны библиотекам, которые делают то же самое, что и Sinon. Библиотеки по-прежнему можно легко использовать, если вам нужны некоторые уникальные функции.
• Глобальные объекты. Как и в случае с Jasmine, по умолчанию он создает тестовые глобальные объекты, поэтому в них нет необходимости. Это можно считать плохим, поскольку это делает ваши тесты менее гибкими и менее управляемыми, но в большинстве случаев это просто облегчает вашу жизнь:

• Тестирование снимков. jest-snapshot разрабатывается и поддерживается Facebook, хотя его можно использовать практически в любой другой платформе как часть интеграции инструмента в структуру или с помощью подходящих плагинов.
• Улучшенный имитатор модулей - Jest предоставляет вам простой способ имитировать тяжелые модули для повышения скорости тестирования. Например, служба может быть смоделирована для выполнения обещания вместо выполнения сетевого запроса.
• Покрытие кода - включает мощный и быстрый встроенный инструмент покрытия кода, основанный на Стамбуле.
• Надежность. Хотя это относительно молодая библиотека, в 2017 и 2018 годах Jest стабилизировалась и теперь считается надежной. В настоящее время он поддерживается всеми основными IDE и инструментами.
• Разработка- jest обновляет только обновленные файлы, поэтому в режиме просмотра тесты выполняются очень быстро.

жасмин

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

Кроме того, Angular по-прежнему предлагает использовать его вместо Jest, хотя Jest идеально подходит и для запуска тестов Angular, и многие люди это делают.

• Готово к работе - поставляется со всем необходимым для начала тестирования.
• Globals - также включает в себя все важные функции тестирования в глобальном масштабе.
• Сообщество. Он существует на рынке с 2009 года и собрал огромное количество статей, предложений и инструментов, основанных на нем.
• Angular - имеет широкую поддержку Angular для всех его версий и рекомендован в официальной документации Angular.

мокко

Mocha - самая используемая библиотека. В отличие от Jasmine, он используется со сторонними утверждениями, насмешливыми и шпионскими инструментами (обычно Sinon и Chai).

Это означает, что Mocha немного сложнее настроить и разделить на большее количество библиотек, но он более гибкий и открыт для расширений.

Например, если вам нужна особая логика утверждений, вы можете разветвить Chai и заменить только Chai своей собственной библиотекой утверждений. Это также можно сделать в Jasmine, но в Mocha это изменение будет более четким и очевидным.

• Сообщество. Имеет множество плагинов и расширений для тестирования уникальных сценариев.
• Расширяемость - очень расширяемый до такой степени, что плагины, расширения и библиотеки предназначены только для работы поверх них.
• Глобальные объекты - по умолчанию создает глобальные структуры теста, но, очевидно, не утверждения, шпионы и насмешки, такие как Jasmine. некоторые люди удивляются такой кажущейся непоследовательности глобальных переменных.

AVA

Ava - это минималистичная библиотека тестирования, которая запускает тесты параллельно.

• Ready-To-Go - поставляется со всем необходимым для начала тестирования (кроме шпионажа и дубляжа, которые можно легко добавить). Использует следующий синтаксис для тестовой структуры и утверждений и работает в Node.js:

• Глобальные объекты. Как показано выше, он не создает тестовых глобальных объектов, поэтому вы можете лучше контролировать свои тесты.
• Простота - простая структура и утверждения без сложного API при поддержке множества дополнительных функций.
• Разработка - Ava обновляет только обновленные файлы, поэтому тесты будут выполняться быстро в режиме просмотра.
• Скорость - тесты запускаются параллельно как отдельные процессы Node.js.
• Тестирование снимков поддерживается как часть платформы.

Лента

Лента - самый простой из них. Это просто JS-файл, который вы запускаете с помощью node с очень коротким и точным API.

• Простота - минималистичная структура и утверждения без сложного API. Даже больше, чем Ава.
• Глобальные объекты - не создает тестовых глобальных объектов, поэтому вы можете лучше контролировать свои тесты.
• Отсутствие общего состояния между тестами. Лента не рекомендует использовать такие функции, как «beforeEach», чтобы обеспечить модульность тестирования и максимальный контроль пользователя над циклом тестирования.
• Не требуется интерфейс командной строки. Лента будет работать везде, где может работать JS.

Инструменты функционального тестирования

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

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

* Короче говоря, если вы хотите просто начать с помощью простого в настройке кроссбраузерного универсального инструмента, выберите TestCafe.

* Удобный пользовательский интерфейс, понятная документация, классные инструменты и универсальный инструмент для удовольствия. Функциональное тестирование - это Cypress.io.

* Если вы предпочитаете более старые и проверенные временем инструменты, вы можете просто начать с Nightwatch.js.

* Если вы предпочитаете более старые и проверенные временем инструменты с максимальной поддержкой сообщества и гибкостью, вам подойдет WebdriverIO ».

* Если вам нужно самое надежное и дружественное к Angular решение, используйте Транспортир.

селен

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

Node.js <=> WebDriver <=> FF/Chrome/IE/Safari drivers <=> browser

Доступ к Selenium WebDriver можно получить разными способами и с использованием множества языков программирования, а также с некоторыми инструментами даже без какого-либо реального программирования.

WebDriver можно импортировать в вашу среду тестирования, и тесты могут быть написаны как ее часть:

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

И действительно, упаковка WebDriver может добавить избыточный код и усложнить отладку, тогда как ее разветвление может отвлечь его от очень активной текущей разработки WebDriver.

Тем не менее, некоторые люди предпочитают не использовать его напрямую. Давайте посмотрим на некоторые библиотеки для селена:

Транспортир

Protractor - это библиотека, которая обертывает Selenium и предоставляет нам улучшенный синтаксис и специальные встроенные хуки для Angular.

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

WebdriverIO

WebdriverIO имеет собственную реализацию selenium WebDriver.

• Синтаксис - очень простой и читаемый.
• Гибкость - очень простая, гибкая и расширяемая библиотека.
• Сообщество. У него хорошая поддержка и сообщество разработчиков.

Ночной дозор

Nightwatch имеет собственную реализацию Selenium WebDriver. И предоставляет собственную среду тестирования с тестовым сервером, утверждениями и инструментами.

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

Аппиум

Apium предоставляет API, аналогичный Selenium, для тестирования веб-сайтов на мобильном устройстве с использованием следующих инструментов:

• iOS 9.3+: XCUITest от Apple.
• До iOS 9.3: Автоматизация UIA от Apple.
• Android 4.2+: Google UiAutomator / UiAutomator2
• Android 2.3+: Инструментарий Google. (Инструментальная поддержка предоставляется путем включения отдельного проекта Selendroid)
• Windows Phone: Microsoft WinAppDriver

Поэтому, если вы используете инструменты на основе Selenium или Selenium, вы также можете использовать Apium для тестирования на мобильных устройствах.

TestCafe

TestCafe - отличная альтернатива инструментам на основе Selenium. Он был переписан и открыт в конце 2016 года.

У TestCafe также была платная версия, предлагавшая инструменты тестирования, не связанные с программированием. Он устарел и будет заменен новой TestCafe Studio, которая на данный момент бесплатна, но станет коммерческим продуктом, когда она будет официально выпущена в несколько месяцев.

TestCafe внедряется на сайт в виде сценариев JavaScript, вместо того, чтобы управлять самими браузерами, как это делает Selenium. Это позволяет ему запускаться в любом браузере, в том числе на мобильных устройствах, и иметь полный контроль над циклом выполнения JavaScript.

• Быстрая настройка - установите Npm и запустите первый тест в любом браузере.
• Кросс-браузер и устройства - поддерживает множество браузеров и устройств и может использоваться с SauceLabs или BrowserStack, которые предоставляют устройства и браузеры для ваших тестов. Это включает запуск тестов в Headless Chrome и Headless Firefox, о которых будет сказано позже.
• Параллельное тестирование - TestCafe может запускать ваши тесты сразу в нескольких экземплярах браузера. Эта практика может значительно сократить время тестирования.
• Удобный отчет об ошибках
• Собственная экосистема - TestCafe использует собственную тестовую структуру. Это может быть довольно удобно, особенно потому, что тесты пользовательского интерфейса обычно запускаются отдельно от других тестов, но некоторым это не нравится.

Кипарис

Cypress является прямым конкурентом TestCafe. Они делают примерно то же самое, что вводят тесты в веб-сайт, но пытаются сделать это более современным, гибким и удобным способом.

Разница между ними в том, что Cypress.io запускается в браузере и контролирует ваши тесты оттуда, где TestCafe работает в Node.js, и контролирует тесты посредством сериализованной связи с внедренным скриптом в браузере.

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

• Параллельное тестирование было введено в версии 3.10.
• Документация - надежная и понятная.
• Собственный доступ ко всем переменным вашего приложения без сериализации (TestCafe, с другой стороны, превращает объекты в JSON, отправляет их в Node.js в виде текста, а затем анализирует их обратно в объекты).
• Очень удобные инструменты для запуска и отладки - Простая отладка и протоколирование процесса тестирования.
• Нет поддержки кроссбраузерности - прямо сейчас поддерживайте только Chrome, а не без головы. Работает в электронном режиме без головы. Они работают над этим, пока пишется эта статья. (И мы обновим статью, как только они это сделают)
• Некоторые варианты использования отсутствуют, но находятся в постоянном развитии, например, отсутствие перетаскивания HTML5.
• Использование Mocha в качестве поставщика структуры тестирования делает его использование довольно стандартным и позволяет строить функциональные тесты в той же структуре, что и остальные тесты.

Кукловод

Puppeteer - это библиотека Node.js, разработанная Google. Он предоставляет удобный Node.js API для управления Chrome или Headless Chrome ».

Headless Chrome - это обычный Chrome v59 +, запускаемый с флагом
--headless. Когда Chrome запускается в безголовом режиме, он предоставляет API для управления им, и, как было сказано ранее, Puppeteer - это инструмент JavaScript, который Google предоставляет для управления им.

Здесь стоит упомянуть, что Firefox также выпустил свой безголовый режим в конце 2017 года.

Обратите внимание, что различные инструменты тестирования также могут использовать Headless Chrome и Firefox. Например: TestCafe, Karma, Cypress.

• Кукловод является относительно новым, но у него есть большое сообщество, которое использует и разрабатывает инструменты и оболочки для него.
• Поскольку он является родным и использует последнюю версию движка Chrome, он работает очень быстро.
• Одним из основных недостатков Headless Chrome (а значит, и Puppeteer) является то, что он не поддерживает расширения, такие как Flash, и, вероятно, не поддержит их в ближайшем будущем.

PhantomJS

Phantom реализует движок Chrome для создания управляемого браузера без браузера, подобного Chrome. Это был отличный инструмент для работы в безголовом режиме до объявления Google о« Puppeteer ».

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

Ночной кошмар

Nightmare - это библиотека функционального тестирования, предлагающая очень простой синтаксис тестирования.

Он использует Electron, который использует Chromium для управления поведением браузера.

В последнее время вроде бы не обслуживается. Вероятно, из-за появления «Кукловода», который предоставляет вам те же функции прямо из коробки.

CodeceptJS

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

Вот как это выглядит:

А вот список библиотек, которые можно запустить с помощью этого кода. Все обсуждалось выше.

WebDriverIO, Транспортир, Кошмар, Аппиум, Кукловод.

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

Визуальное регрессионное тестирование

Инструменты визуального регрессионного тестирования состоят примерно из следующего:

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

На рынке много инструментов такого типа, но такое ощущение, что в этой области еще предстоит пройти долгий путь.

Также я заметил, что платные инструменты в категории визуального регрессионного тестирования намного лучше бесплатных.

Applitools

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

Перси

• Легко настроить.
• Использует умные методы сравнения.
• Удобный ввод человека в отношении различий.
• Его можно удобно интегрировать со многими инструментами, описанными выше.
• Он имеет отличную интеграцию с отличными инструментами.
• Имеет бесплатные и платные гибкие планы.

Хаппо

Happo - это платный инструмент для визуального регрессионного тестирования. Он подключается к CI для сравнения внешнего вида компонентов пользовательского интерфейса до и после изменения.

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

Оплачивается бесплатным планом для проектов с открытым исходным кодом.

Выглядит так же

Яндекс создал эту библиотеку вместе с устаревшим Gemini, который был отличным простым в использовании инструментом визуального регрессионного тестирования.

Яндекс перешел на гермиону, которая запускает тесты с использованием WebdriverIO v4 и Mocha.js и использует LooksSame для визуальных регрессий. Он более простой и ограниченный, чем упомянутые выше платные инструменты, но для простых сайтов этого может быть достаточно.

LooksSame также может использоваться сам по себе, если вы создаете скриншоты любым удобным для вас способом.

BackstopJS

Утилита визуальной регрессии с открытым исходным кодом, работающая в Chrome Headless с поддержкой Puppeteer и CI.

AyeSpy

Утилита с открытым исходным кодом от команды Times Tooling в News UK.

Использует selenium docker для создания визуальных регрессионных тестов в Chrome / Firefox.

рег-костюм

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

Дифференцировать

Еще один открытый исходный код, Chrome Headless, использующий инструмент тестирования Puppeteer с хорошей интеграцией с снимками состояния Jest. Может работать в докере и создает удобные отчеты.

Нет инструментов для функционального тестирования кодирования

свидетельство

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

Использует машинное обучение, чтобы помочь вам записывать и проверять сценарии тестирования. Кроссбраузер и имеет отличную интеграцию со многими инструментами CI и совместной работы.

Имеет бесплатные и платные гибкие планы.

Скринер

Позволяет записывать тесты с помощью расширения Chrome, имеет подробные отчеты о визуальной регрессии. Имеет несколько удобных интеграций, например, с разными инструментами CI для сборника рассказов и BrowserStack и Sauce Labs.

Не бесплатно.

Другие инструменты этого типа (вы можете предложить больше в комментариях):

• Скринер (не Скринер)
• Хроматический
• Призрачный инспектор

Заключение

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

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

Да, и писать, и переписывать, и переписывать, и переписывать, и тестировать разные решения :)

Удачных испытаний :)

Спасибо :)

Предлагаемые ссылки

• Состояние JavaScript
• Инструменты Javascript для сквозного тестирования веб-приложений (июль 2017 г.)
• Лучшие передовые практики автоматизации тестирования пользовательского интерфейса, которым вы должны следовать (ноябрь 2017 г.)
• Введение в Headless Browser Testing (сентябрь 2017 г.)
• Как настроить тестирование браузера E2E для вашего проекта GitHub (с TestCafe) (февраль 2017 г.)
• Тестирование JavaScript: Модульные, функциональные и интеграционные тесты (апрель 2016 г.)
• 12 лучших инструментов для тестирования совместимости браузеров (июнь 2017 г.)
• 10 лучших инструментов для тестирования кроссбраузерной совместимости в 2019 г. (2019 г.)
• Пока, Синон - Привет, testdouble (март 2016 г.)
• Разборка инструментов тестирования JavaScript: Sinon.js против testdouble.js (апрель 2017 г.)
• testdouble.js против sinon.js (март 2016 г.)
• фермент против неожиданной реакции (апрель 2017 г.)
• React Testing - Jest or Mocha? (май 2017 г.)
• Jasmine vs. Mocha - Сравнение инфраструктуры тестирования JavaScript
  (январь 2017 г.)
• Как снимок протестировать все в вашем приложении Redux с помощью Jest
  (декабрь 2016 г.)
• Скрытая сила Jest Matchers (январь 2017 г.)
• Тестирование компонентов React с помощью Jest и Enzyme (декабрь 2016 г.)
• Снимок, тестирование компонентов React с помощью Jest (январь 2017 г.)
• Тестирование приложения AngularJS с помощью Jest (октябрь 2016 г.)
• Простое модульное тестирование с помощью AVA (апрель 2016 г.)
• Тестирование Javascript с помощью AVA (февраль 2017 г.)
• Почему я использую ленту вместо мокко и вы должны (июль 2015 г.)
• Узнать Ленту
• Тестирование гибридных приложений с помощью Protractor и Appium (март 2017 г.)
• Тест безголового Chrome против PhantomJS (сентябрь 2017 г.)
• Транспортир против WebdriverIO против NightWatch (ноябрь 2016 г.)
• Сквозное (e2e) тестирование приложений на React с помощью Selenium WebDriver и Node.js проще, чем вы думаете (апрель 2016 г.)
• WebdriverIO - Использование JavaScript для проведения тестов Selenium (август 2016 г.)
• Функциональное тестирование JavaScript с помощью Nightwatch.js (август 2016 г.)
• Сквозное тестирование Node.js с Nightwatch.js (март 2017 г.)
• Кошмар сквозного тестирования (сентябрь 2016 г.)
• Транспортир против WebdriverIO против NightWatch (ноябрь 2016 г.)
• Stack Overflow - В чем разница между nightwatch.js и webdriver.io? (март 2016 г.)
• Сравнение библиотек автоматизации браузера JavaScript и тестовых спецификаций (декабрь 2015 г.)
• Что такое PhantomJS и как он используется? (Июнь 2016 г.)
• Настройка сквозного тестирования в проекте Angular с помощью CodeceptJS (декабрь 2017 г.)
• Какой инструмент автоматического тестирования выбрать - Testcafe или Selenium WebDriver? (Январь 2016 г.)
• Представляем TestCafe - платформа для тестирования с открытым исходным кодом (октябрь 2016 г.)
• Почему не использовать селен? (Октябрь 2016 г.)
• Функциональное тестирование с помощью TestCafe (март 2017 г.)
• Разборка платформ автоматизации тестирования пользовательского интерфейса: TestCafé против Nightwatch.js (февраль 2018 г.)
• Cypress: будущее сквозного тестирования веб-приложений (февраль 2018 г.)
• Оценка Cypress и TestCafe для сквозного тестирования (март 2018 г.)
• Робо-тестирование вашего сайта без написания кода (октябрь 2016 г.)