Привет! Меня зовут Виталий, я работаю автотестером в компании Утконос. Наш онлайн-магазин — один из крупнейших на московском рынке товаров повседневного спроса. В этой статье я бы хотел в общих чертах обрисовать проблему выбора фреймворка для e2e тестов, их сравнение и применение на рабочей среде вместе с репортом Allure. Сначала опишу предпосылки, которые побудили использовать фреймворк для автотестов, варианты решения и победителя в связке с репортом. Во второй статье поговорим про техническую сторону по установке, прикручивание хуков в slack для автоматизации и про использование «на поток». Эти материалы не несут сакральных знаний на подобии 136 ответа на «stack overflow» с сотней звезд, лайков и сердечек, но расскажут о частном случае и его решении в отдельно взятой компании.
Предпосылки
Различия фреймворков
Плюсы и минусы
Предпосылки
При разработке нового функционала всегда встает вопрос проведения регрессионного тестирования. Это позволяет выявить проблемы с уже внедренным функционалом, если такие возникнут. При большом количестве фич возрастает потребность в увеличении частоты прохождения регрессионного тестирования. Как правило, это одни и те же тесты, которые рутинно нужно проходить каждый раз.
Поэтому есть смысл автоматизировать регрессионное тестирование. Благодаря этому мы решим сразу несколько задач:
Точно проконтролируем ВСЕ проверки (присутствует текст, какой-то элемент равен заданному значению и т.п.).
Сэкономим время тестировщиков.
Получим скриншоты ошибок в случае неудач и видео условий возникновения ошибки.
Будет возможность выгрузки репорта по результатам тестирования.
Сможем проверять рендер элементов.
У нас будет запись о времени выполнения теста.
Существует много инструментов, чтобы автоматизировать выполнение тестов. Самое главное — выбрать подходящий фреймворк для вашей команды. Определите требования, которые у вас есть к инструменту, и затем выбирайте. Ниже я приведу наиболее популярные фреймворки, их плюсы и недостатки.
Различия фреймворков
Protractor
Есть разные варианты фреймворков на основе Selenium и без него, но Selenium наиболее распространен. На нем работает один из часто используемых фреймворков Protractor.
Плюсы:
гибкая настройка
использует TypeScript
сочетается с jasmine (BDD фреймворк (Behavior-Driven Development — Разработка на Основе Поведений) для тестирования JavaScript кода, позаимствовавшего многие черты из RSpec)
простота написания тестов
Минусы:
долгий поиск XPath'ов (адрес элемента на странице)
постоянная морока с обновлением
необходим опыт работы с npm
Cypress:
E2e JS Фреймворк основанный на Mocha. Запускается в отдельном браузере, не требует глубоких познаний в npm для установки. В настройку входит автоматическое ожидание элементов, т.е. ждет загрузку DOM, видимость элемента, завершения вызова XHR и AJAX. В отличие от Protractor, где все ожидания нужно проставлять самому. Также есть автоматическая перезагрузка страницы браузера при отладке теста.
Плюсы:
локаторы через xpath и css (при подборе через css-подбирается автоматически через ui)
автоматический запуск при отладке
показывает ход запросов
есть визуал
автоматическое сохранение скринов и видео
простота обновления
низкий порог вхождения
Минусы:
нет headless режима на режиме отладки
не работает в Safari
платная параллелизация тестов
нет поддержки мобильного тестирования
Puppeteer
Фреймворк, использующий в основном Headless Chrome (без UI), также часто применяется для парсинга страниц. Основывается на DevTools Protocol.
Пример:
Плюсы:
быстро работает за счет Headless
Минусы:
голый js
много настроек
сложное API (высокий порог вхождения)
Как можно наблюдать, сильно отличается от UI Cypress. Отдельно идет вызов функции, в то время как в Cypress мы кликом выбираем файл, где у нас однотипно написаны функции тестов. Также можно заметить, что под каждую сущность необходимо объявлять.Под свои задачи мы выбрали Cypress. У него заметно больше достоинств по сравнению с другими двумя фреймворками, и он полностью отвечал нашим требованиям.
Отчет Allure
Чтобы понять эффективность наших автотестов мы использовали фреймворк Allure. Он создает простые и понятные отчеты тестов— таким образом, все необходимые данные будут доступны в любой момент.
Репорт Allure может быть подключен различными фреймворками и языками программирования.Основное его преимущество в том, что он несет в себе наглядную информацию о каждом прогоне тест-сьюта.
После прохождения тестов мы можем наблюдать детальный отчет Allure:
со скриншотами
видео воспроизведения ошибки
сроками прохождения теста и всего сьюта (набора тестов)
текстом ошибки
выделением ошибок в общем списке
анализом запроса при прохождении теста
Резюме: После того, как мы начали использовать связки Cypress и Allure, количество задач, реализуемых за месяц, увеличилось в 5 раз. Это положительно сказалось на бизнесе и выручке в целом. Успешный опыт был подтвержден отзывами пользователей нашего сайта.
Отдельно хочу добавить: если вы делаете что-то подобное впервые и нет должного опыта, как и коллеги, который поможет советом, то желаю не отчаиваться и просто пробовать различные варианты, документацию, вышеуказанный stack overflow, опираться на чужой опыт или же комбинацию всего этого. Чаще всего так и происходит. Так что не теряйте фокус и оставайтесь оптимистичны!
