Привет! Меня зовут Виталий, я работаю автотестером в компании Утконос. Наш онлайн-магазин — один из крупнейших на московском рынке товаров повседневного спроса. В этой статье я бы хотел в общих чертах обрисовать проблему выбора фреймворка для 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, опираться на чужой опыт или же комбинацию всего этого. Чаще всего так и происходит. Так что не теряйте фокус и оставайтесь оптимистичны!