Добрый день! Меня зовут Александр, я - QA в компании Roowix.

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

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

Так как мы решили использовать screenshot-based тестирование, перед нами встал ряд задач:

• Для screenshot-based тестирования необходимо одинаковое состояние экрана, особенно в случае с графиком
  
• Должно быть три снимка экрана - actual, expected, compared
  
• Должен быть инструмент для описания и хранения тест-кейсов с возможностью быстро просмотреть отчет

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

Почему именно этот инструмент? Наряду с незаурядными возможностями, такими как:

• Поддержка Typescript
  
• Хорошее логирование
  
• Работа с асинхронным кодом

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

Что со сравнением изображений, ведь это тоже трудозатратная задача? Сравнение полученных изображений уже реализовано в библиотеке cypress-visual-regression. Для ее использования нам достаточно ее установить и подключить в своих тестах.

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

• Создание и хранение тест-кейсов
  
• Создание спринтов
  
• Создание и запуск тест ранов
  
• Получение отчетов
  
• Возможность интеграции с API
  
  

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

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

Приступим к установке и написанию тестов.

Чтобы установить Cypress выполняем следующие команды:

После установки нам необходимо настроить плагин для сравнения снимков экрана. Для этого нам нужно обновить три файла:

• cypress.json
  
• cypress/plugins/index.js
  
• cypress/support/commands.j

Так как мы используем TypeScript, то нам нужно добавить этот метод в cypress/support/index.d.ts:

Здесь мы видим, что метод compareSnapshot() принимает два параметра name и errorThreshold

Параметр name является обязательным и является строковым представлением имени снимка экрана.

Параметр errorThreshold является необязательным и принимает значения от 0 до 1 (по умолчанию 0). Он определяет допустимую погрешность при сравнении скриншотов. При значении 0.01 тест не будет пройден, если более 1% пикселей будут различаться.

Метод compareSnapshot() можем применяться в разных контекстах. Например, его можно вызывать как для всей страницы, так и для отдельного элемента.

Осталась еще одна настройка. Нам не нужен дополнительный скриншот при падении теста, также мы не хотим видеть на скриншотах интерфейс Cypress раннера.

Добавим следующий код в файл cypress/support/index.js:

На этом базовая настройка Cypress закончена.

Следующая задача, которую нам предстояло решить - это доставка отчетов в Everyqa.io.

Нам нужно получить результаты всех тестов, наложить их на тесты в Everyqa и отобразить нужные результаты в нужных тестах. По умолчанию Cypress не поддерживает такой функционал. Но нам известно, что Cypress запускается с помощью Mocha, и это уже дает нам наводку на решение. После быстрого поиска был найден пакет cypress-multi-reporters, который позволяет использовать несколько репортеров параллельно. Мы будем использовать встроенный Cypress репортер и наш репортер для Everyqa.io

Устанавливаем cypress-multi-reporters и подключаем его:

Для конфигурации плагина создаем файл config.json:

Далее, следуя документации Mocha, в корень проекта нужно положить папку reporters и создать в ней файл everyqa.reporter.ts

Это будет своя реализация репортера со своей обработкой событий Mocha. Нас интересуют события:

• EVENT_RUN_BEGIN,
  
• EVENT_TEST_END,
  
• EVENT_RUN_END

они находятся в Runner.constants.

Далее мы реализуем наш репортер. Класс EveryqaInstance это синглтон, содержащий инстанс Everyqa API.

Логика здесь простая. В обработчике события EVENT_TEST_END мы преобразуем объекты тестов в формат, который необходим для отправки в Everyqa, а в обработчике EVENT_RUN_END - публикуем их.

Для удобства использования мы сделали npm пакет. Установив его, мы получаем доступ к описанному функционалу.

Основными параметрами мы сделали:

Теперь нам нужно синхронизировать наши тесты с тест-кейсами из Everyqa, для этого в названии каждого теста нужно добавить id нужного тест-кейса с префиксом EQ-. Это нужно также сделать и с названиями скриншотов. Id, как и для projectId и sprintId в config.json, мы берем в Everyqa.

Разработка Cypress тестов по умолчанию ведется в папке cypress/integration. Не будем ничего менять и напишем свой тест. Алгоритм разработки screenshot-based теста следующий:

• создать эталонный снимок экрана
  
• проработать тест
  
• отправить результаты в систему отчетов

Важно! Ширина и высота нового скриншота должны быть такими же, как и у эталонного, иначе Cypress покажет ошибку.

Начнем с эталонного снимка экрана, он нужен нам для проверок

Для этого добавим в package.json еще один скрипт и запустим его с помощью команды npm run cy:get:base:screenshots

Теперь в папке cypress/snapshots появилась папка base. Обратите внимание на структуру папок внутри нее – она такая же как и в папке integrations.

Теперь проверим работает ли все как ожидалось. Напишем свой первый, простой тест:

Запускаем команду npm run cy:run и получаем результат

Все работает так как и ожидалось.

Теперь в папке cypress/snapshots появились еще две папки actual и diff.
Папка diff содержит в себе результат наложения актуального и эталонного снимка экранов. Структура папок base, actual и diff идентична.

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

Эталонный снимок соответствует ожидаемому, и мы получаем следующий diff:

Cypress ничего не выделил, и мы можем сделать вывод, что изображения идентичны.

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

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

Вот так выглядит Dashboard проекта:

Выполнив переход в Test Runs мы можем посмотреть детальную статистику по Test Run и Test

Экран теста:

После пройденного пути мы получили инструмент, который совмещает в себе screenshot-based тестирование и наглядные "ручные" отчеты в Everyqa. Таким образом мы обнаружили несколько багов, которые невозможно найти при ручном тестировании. Например, после обновления в репорте мы обнаружили несколько красных тестов, а Unit tests прошли без проблем. Оказалось, что на фронт части сломалось применение настроек нескольких индикаторов (индикатор - это дополнительный график для анализа рынка), то есть при выборе одной настройки применялась другая. Заметить это "вручную" просто невозможно. Но благодаря сравнению изображений мы обнаружили этот баг.

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

В итоге по подсчетам на 20 индикаторов, у каждого в среднем по 5 настроек, не считая косметических, – получается 120 минут. А это далеко не весь функционал графика. После внедрения автотестов и отчетов в Everyqa нам удалось сократить время на тестирование более чем 10 раз.

Попробовать EveryQA можно по ссылке
Все вопросы и пожелания будем рады принять на почту info@roowix.com