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

(Обновлено: 21.11.2021)

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

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

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

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

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

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

По данным Состояние JavaScript. Jest, ведущий фреймворк для модульного тестирования, о котором мы поговорим позже, имеет уровень удовлетворенности 96%!

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

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

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

Типы тестов

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

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

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

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

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

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

Если я напишу тест, где он будет работать?

• Тесты можно запускать в браузере, создав HTML-страницу с тестовыми библиотеками и тестовыми файлами, включенными в виде сценариев JS.
• Тесты можно запускать в автономном браузере, что позволяет запускать браузеры в специальном режиме, в котором они выполняются без фактического отображения пользовательского интерфейса на экране. Таким образом, вы можете запускать их намного быстрее с точки зрения производительности и даже полностью из командной строки.
• Тесты также можно выполнять в Node.js, просто импортировав тестовые файлы, которые будут импортировать тестируемые файлы, которые обычно запускаются в браузере.
  Чтобы имитировать браузер: как окружение, window.location и тому подобное, обычно используется jsdom. Jsdom имитирует все, что вы получаете, когда запускаете JS в браузере, например окно, документ, тело, местоположение, файлы cookie, селекторы, но ничего не отображает.

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

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

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

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

Мы обсудим каждый из них более подробно ниже, но сначала давайте быстро их представим.

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

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

Тестовые программы запуска

Запустите список тестов на основе предоставленной вами конфигурации (какие браузеры запускать, какие плагины babel использовать, как форматировать вывод и т. Д.).

Структура тестирования

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

Функции утверждения

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

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

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

Шпионы

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

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

Копирование / Копирование / Имитация функций

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

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

Например, здесь мы следим за isValid во время теста и отказываемся от подписки после каждого теста, чтобы убедиться, что мы не загрязняем объект user.

Подделки или Подделки

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

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

Тестирование снимков

Позволяет сравнивать структуру данных с тем, что было в более ранних версиях.

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

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

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

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

Контроллеры браузера

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

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

Your code on Node.js <> (Maybe a framework) <> Browser's API

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

Your code on Node.js <> WebDriver <> FF/Chrome/Safari Driver <> Browser

• Другой способ - это внедрить сценарии кода JS, который имеет доступ ко всей среде приложения: DOM, сеть, файлы cookie и т. Д. Для создания событий, имитирующих поведение пользователя. Cypress.io использует именно такой подход. Например, вот как вы имитируете щелчок:

document.getElementByID('someButton').dispatchEvent(clickEvent)

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

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

Мы обсудим инструменты, которые вы можете выбрать, позже в статье.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

E2E тесты

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

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

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

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

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

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

jsdom

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

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

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

Сборник рассказов

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

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

Библиотека тестирования

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

Библиотека предоставляет специальные инструменты для различных фреймворков, таких как React, Preact, React Native, Marko, Angular, Vue и Svelte. Самая известная из них - Библиотека тестирования React, которая получила очень широкое распространение.

Это также помогает с инструментами тестирования E2E, такими как Cypress, Puppeteer, Testcafe и Nightwatch, которые будут обсуждаться далее.

Он помогает с удобными селекторами, событиями запуска, конфигурацией, работой с асинхронным кодом и многим другим.

Электрон

Платформа 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. У него хорошие рейтинги одобрения, он очень быстрый, понятный и имеет много функций на случай, если вам нужно охватить сложные сценарии. Если вы хотите «просто начать», идите Jest.

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

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

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

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

Шутка

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

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

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

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

жасмин

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

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

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

мокко

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

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

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

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

AVA

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

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

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

Лента

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

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

Инструменты тестирования E2E

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

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

* Короче говоря, если вы хотите просто начать с удобным пользовательским интерфейсом, понятной документацией, классными инструментами и в целом забавным универсальным инструментом E2E Testing, выберите Cypress.io.

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

селен

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

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

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

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

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

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

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

Кукловод

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

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

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

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

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

Драматург

Драматург похож на Кукловода, но его разрабатывает Microsoft. Он был запущен в январе 2020 года командой, изначально разработавшей Puppeteer. Библиотека автоматизирует Chromium, Firefox и WebKit (Safari) с помощью DevTools Protocol для Chromium и аналогичной собственной технологии для расширения протоколов devtools. Он также имеет немного другой API и новые функции, такие как ожидание доступности элементов, прежде чем нажимать на них.

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

• Кросс-платформенный
• Поддерживает несколько вкладок

Транспортир

Обновление: команда Angular планирует ** УСТАРЕВАТЬ ** транспортир в конце 2022 года.

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

• Angular- имеет специальные хуки, хотя его можно успешно использовать и с другими фреймворками JS. Официальная документация Angular предлагает использовать этот инструмент (ОБНОВЛЕНИЕ: больше нет. См. Сообщение выше).

WebdriverIO

WebdriverIO использует удобный синтаксис, который управляет браузером через собственную реализацию WebDriver, отличную от селена, или через DevTools Protocol с помощью Puppeteer for Chromium.

Это проект JS с открытым исходным кодом, который используется в средах JS (в то время как селен можно использовать со многими языками программирования).

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

Ночной дозор

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

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

Аппиум

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 в виде текста, а затем анализирует их обратно в объекты).
• Очень удобные инструменты для запуска и отладки - Простая отладка и протоколирование процесса тестирования.
• Кроссбраузерная поддержка - начиная с версии 4.0.
• Некоторые варианты использования отсутствуют, но находятся в постоянном развитии, например, отсутствие перетаскивания HTML5.
• Использование Mocha в качестве поставщика структуры тестирования делает его использование довольно стандартным и позволяет создавать тесты E2E в той же структуре, что и остальные тесты.

PhantomJS

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

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

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

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

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

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

CodeceptJS

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

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

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

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

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

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

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

• Методы и интеграции для автоматизации браузера или работы в составе инструментов тестирования E2E, описанных выше, в том числе в интерфейсе командной строки для 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 докер для создания визуальных регрессионных тестов в Chrome / Firefox.

рег-костюм

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

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

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

Инструменты тестирования E2E без кодирования

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

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

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

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

Хроматический

Https://www.chromaticqa.com /

Chromatic - это инструмент визуального тестирования Storybook, созданный разработчиками Storybook.

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

Скринер

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

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

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

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

Заключение

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

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

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

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

Спасибо :)

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

• Если вы считаете Кукловода крутым, то Драматург - это круто 😍 (январь 2020 г.)
• Играем с драматургом (февраль 2020 г.)
• Тесты E2E: интеграция Microsoft Playwright с мокко и чай (январь 2020 г.)
• Выпуск драматургов (январь 2020 г.)
• JavaScript: Будущее сквозного тестирования (январь 2019 г.)
• This.JavaScript: Состояние тестирования внешнего интерфейса (апрель 2019 г.)
• Состояние 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 г.)
• Cypress vs WebdriverIO: основные различия (август 2021 г.)
• Перенос тестов Nightwatch на Cypress (январь 2021 г.)

Старые версии этой статьи:

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