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

Недавно я провел семинар по Cypress и о том, как использовать его для тестирования E2E. Cypress - это мощный инструмент с интуитивно понятным интерфейсом, который позволяет разработчикам отлаживать тесты шаг за шагом и видеть состояние пользовательского интерфейса при проверке элементов, полезной нагрузки API и т. Д. Одним из самых сложных аспектов тестирования E2E является тестирование пограничных случаев. Исторически это означало, что нам либо нужна исходная база данных с нужными данными, либо нашим тестам нужно будет сначала создать данные, прежде чем размещать их в нашем потоке тестирования. Это увеличивало время выполнения тестов и часто приводило к нестабильности наших тестов. Cypress позволяет нам заглушить наши ответы с сервера, дождаться ответов и сравнительно легко достичь каждого крайнего случая.

Посмотреть доклад можно здесь: https://youtu.be/GH9Dvo_BYkk

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

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

Сам по себе Cypress не имеет встроенных инструментов для визуального тестирования, но есть несколько вариантов, которые упрощают его реализацию. Первый вариант - это более ручной процесс, но его можно использовать бесплатно. Этот вариант представляет собой библиотеку npm, называемую cypress-visual-regression, которая использует библиотеку PixelMatch для сравнения изображений. Эта библиотека представляет собой плагин Cypress, который захватывает базовые изображения, а затем сравнивает текущие изображения в последующих тестовых запусках. Если какое-либо из изображений различается, выдается ошибка, и различия можно проверить.

После установки потребуется некоторая настройка. Сначала нам нужно создать файл cypress.json, если он еще не существует в нашем проекте. Нам нужно указать cypress, где находится папка со снимками экрана по умолчанию, и хотим ли мы избавиться от изображений предыдущего тестового прогона (без нашей базовой линии) при запуске нового тестового прогона. Как только мы это настроим, мы должны сообщить Cypress о нашем плагине. Это включает в себя редактирование файла plugins / index.js, чтобы сообщить Cypress о плагине, а затем файла команд для добавления новой команды Cypress.

После настройки плагина наши тесты выглядят как обычные тесты Cypress.

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

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

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

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

Percy.io - это облачный инструмент визуального тестирования, который аккуратно интегрируется в Cypress и предоставляет расширенные функции, такие как рабочий процесс и хуки git. Установка очень проста с простой установкой npm, а затем одной строкой импорта для интеграции в ваши тесты. Добавьте свой токен Перси в свое окружение, а Перси позаботится обо всем остальном.

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

Cypress будет запускать ваши тесты, и везде есть «cy.percySnapshot ();» После вызова Перси сделает снимок, загрузит его в облако и сравнит результаты с базовым уровнем (если он существует, в противном случае новое изображение станет базовым). Вы можете указать ширину экрана для захвата, и Перси выполнит всю работу по включению вашего тестового прогона в рабочий процесс для вашего утверждения.

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

Кроме того, у Percy.io есть хуки GitHub для интеграции в ваш PR-процесс, чтобы гарантировать, что визуальные изменения будут одобрены до того, как код будет объединен в следующую ветвь. Этот процесс утверждения создает надежный процесс качества кода в сочетании с обзорами кода, линтингом, модульными тестами, покрытием кода и E2E-тестированием.

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