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

Введение. В статье используется отсылка к моей прошлой статье Автотесты E2E для самых маленьких. Репозиторий с шаблоном таких тестов - simpleE2E

Краткий итог прошлой статьи

К чему пришли:

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

   When Я нажимаю "Кнопку сохранить"/"[data-test-id="btn-save"]"
   Then Вижу в "Предупреждении для Email"/".email._error" текст ~ "Не может быть пустым"
   Then НЕ Вижу "Заявка успешно отправлена"/".request-complete._open"
   

2. Разработали и подготовили набор предусловий для создания сущностей через API (авторизация и очистка данных тоже через API)

3. Заставили Попросили разработчиков добавить атрибут data-test-id каждому элементу интерфейса, с которым можно взаимодействовать (что такое атрибут data-test-id не описано в статье, но легко гуглится. Пример статьи Ссылка)

4. Написали пару тестов для примеров тестировщикам

5. Показали тестировщикам, как работать с git и pull request (можно и без этого, но так удобнее)

6. Показали тестировщикам, как искать и проверять CSS селекторы в DOM дереве (в особо сложных случаях можно просто помочь и показать)

7. Настроили сборки в 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

После выполнения будет запущен тест и остановлен Паузой (пауза в секундах, можно увеличивать как удобно).

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

• Клик (в том числе ПКМ, в том числе с модификатором cntr или другими)

• Горячие клавиши

• Ввод текста

• Эталонный скриншот

• Видимость и НЕ видимость элемента

• Проверка содержимого текста (полное совпадение или частичное, или наоборот НЕ совпадение)

• Снятие эталонного скриншота для дальнейшего сравнения

Клики фиксируются автоматически. Проверочные шаги доступны по нажатию 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 года, но и стал практичнее: тесты по‑прежнему остаются надежными (флакающих тестов у нас практически не бывает), а вход в автоматизацию для тестировщиков проще.
Запись действий прямо в браузере убирает рутину с ручным поиском селекторов, ускоряет создание сценариев и сохраняет совместимость с уже существующей библиотекой предусловий и проверок.