Автотесты E2E еще проще, но все равно надежные…

kuzin_ivan14 часов назад

Автотесты E2E еще проще, но все равно надежные…

Уровень сложностиПростойВремя на прочтение3 минОхват и читатели4.5KТестирование IT-систем*Тестирование веб-сервисов*ТуториалВведение. В статье используется отсылка к моей прошлой статье Автотесты E2E для самых маленьких. Репозиторий с шаблоном таких тестов - simpleE2EКраткий итог прошлой статьиК чему пришли:

• Разработали "универсальный" набор шагов и проверок для фронтовых действий пользователя. Универсальный набор шагов предполагает, что селекторы будут указаны прямо в тексте шага (да, я в курсе, что это плохо). В каждом шаге, где используется селекторы, присутствует обязательная переменная name. Она не используется непосредственно в действиях и нужна только для отчета и общего понимания теста без запуска, в ней можно писать любой текст, который сделает шаг теста более понятным. Например:

When Я нажимаю "Кнопку сохранить"/"[data-test-id="btn-save"]"
Then Вижу в "Предупреждении для Email"/".email._error" текст ~ "Не может быть пустым"
Then НЕ Вижу "Заявка успешно отправлена"/".request-complete._open"
• Разработали и подготовили набор предусловий для создания сущностей через API (авторизация и очистка данных тоже через API)
• Заставили Попросили разработчиков добавить атрибут data-test-id каждому элементу интерфейса, с которым можно взаимодействовать (что такое атрибут data-test-id не описано в статье, но легко гуглится. Пример статьи Ссылка)
• Написали пару тестов для примеров тестировщикам
• Показали тестировщикам, как работать с git и pull request (можно и без этого, но так удобнее)
• Показали тестировщикам, как искать и проверять CSS селекторы в DOM дереве (в особо сложных случаях можно просто помочь и показать)
• Настроили сборки в Jenkins для удобного запуска

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

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

Почему не использовать selenium ide или playwright codegen? Классные инструменты, но нам хочется именно получить шаги в нашей структуре. Дополнительно нам хочется уметь использовать предусловия из нашей готовой библиотеки предусловий (их больше 60 на одном из проектов) вставать на паузу и продолжить тест именно с этого места

В видео демонстрация работы. Немного расскажу как это выглядит со стороны тестировщика

Тестировщик подготавливает файлик

Feature: Заглушка

Scenario: Заглушка
Given Я открываю приложение
When Я включаю запись действий в браузере
When Пауза "60"В сценарии могут быть другие Given или When. Прелесть в том, что мы можем вставить наш шаг «Я включаю запись действий в браузере» в любое место в тексте (главное не забыть паузу сразу после него). Шаг может быть When, может быть Given, как удобно

Репозиторий с шаблоном таких тестов и инструментом - simpleE2E

Далее необходимо выполнить команду в терминале

behave features/test/test.feature -D RECORD=1После выполнения будет запущен тест и остановлен Паузой (пауза в секундах, можно увеличивать как удобно).

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

• Клик
• Ввод текста
• Эталонный скриншот
• Видимость и НЕ видимость элемента
• Проверка содержимого текста (полное совпадение или частичное, или наоборот НЕ совпадение)
• Снятие эталонного скриншота для дальнейшего сравненияКлики фиксируются автоматически. Проверочные шаги доступны по нажатию shift + ПКМ

Пример записанных шаговКонтекстное меню. Доступно по shift+ПКМДобавление проверки текста в элементеПосле того как мы «накликали» тест, мы можем его с сохранить ручками. В панели есть кнопка Copy или по окончанию паузы тест будет автоматически сохранен в директорию recorded_features

# savetest_status: new
# savetest_author: auto
# savetest_created_at: 2026-03-18
@suite:3cc7caff297a4cd89e209ecd7f95143a

Feature: Заглушка

@tms:3db81b892ddd4f0f94eff33b3563e7f3
@severity:high
@tag:ui
Scenario: Заглушка

Then Вижу в "Дашборд"/"[data-test-id=\"dashboard-title\"]" текст ~ "Дашборд"
When Я нажимаю "Нет данных"/"[data-test-id=\"widget-my-assignments-empty\"]"
Then Сравнить со скрином "2222.png"В итоге подход с универсальными шагами E2E не только «выжил» за 3 года, но и стал практичнее: тесты по‑прежнему остаются надежными (флакающих тестов у нас практически не бывает), а вход в автоматизацию для тестировщиков проще.Запись действий прямо в браузере убирает рутину с ручным поиском селекторов, ускоряет создание сценариев и сохраняет совместимость с уже существующей библиотекой предусловий и проверок.Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.А как автоматизируете тесты вы?22.22%Только код (Python/Java/JS/C# без BDD)211.11%BDD (Gherkin/Cucumber/Behave и аналоги)133.33%Смешанный подход (часть — код, часть — BDD)30%Пока не автоматизируем (ручное тестирование)022.22%Я новичок в IT, изучаю тему211.11%Другое (напишу в комментарии)1Проголосовали 9 пользователей. Воздержавшихся нет.Теги:• тестирование
• e2e
• e2e-тесты
• автотесты
• автотесты для ui
• автотестирование
• qa
• qa automationХабы:• Тестирование IT-систем
• Тестирование веб-сервисов