Что пишут в блогах

Подписаться

Онлайн-тренинги

Конференции

Что пишут в блогах (EN)

Разделы портала

Про инструменты

.
Советы по Cypress, часть 1: как соблюдать принцип DRY при помощи кастомных команд
16.01.2020 00:00

Автор: Филип Рик (Pilip Hric)
Оригинал статьи
Перевод: Ольга Алифанова

Принцип DRY = Don’t repeat yourself (не повторяйтесь).

End-to-end тесты иногда начинают повторять сами себя. Вы можете делать все, что в ваших силах, чтобы удерживать количество тестов на оптимальном уровне, но в некоторых случаях избежать повторяемости просто невозможно.

Приведу пример. Мы будем тестировать админ-интерфейс Slido. Slido дает пользователям возможность модерировать вопросы участников в ходе события. Одобренные вопросы отображаются для аудитории. В приложении есть различные фильтры вопросов, и у всех из них своя сортировка.

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

Если мы хотим протестировать сортировку каждой категории, то каждый тест будет состоять из:

  • Открытия выпадающего меню.
  • Выбора типа сортировки
  • Проверки изменения в порядке следования вопросов.

Шаг 3 будет различаться, однако первые два шага будут до болезненности схожими. Если мы намерены покрыть все типы сортировки, нам придется повторить эти шаги в 11 тестах. Это уже чересчур.

Лично я предпочитаю читабельность минимализму, поэтому зачастую не имею ничего против повторений. Однако иногда повторяемость мешает читабельности.

Cypress дает нам возможность создать кастомную команду, которая группирует все повторяющиеся части в одну простую строку. Получится что-то вроде этого:

 

В норме все будет немного длиннее. Нет смысла чересчур надрываться для трех строчек кода.

Так как эти команды обычно используются только в некоторых моих тестах, я храню их в отдельной папке и добавляю их в тесты через метод импорта. Хорошее говорящее имя команды повысит читабельность вашего теста.

Вернемся к нашему примеру.

Сортировка появляется в каждой категории вопросов (Входящие, Живые, Со звездой, Архивированные). Она осуществляется через два разных меню, одно на левой панели (Входящие), а другое на правой (Живые, Со звездой, Архивированные).

В тестах нужно настроить тест, а затем кликнуть по фильтру, чтобы увидеть изменение сортировки. Клик по фильтру в выпадающем меню – повторяющаяся часть, которую можно спрятать вот в такой кастомной команде:

 

Чтобы сделать ее более гибкой, добавим два аргумента. Один – это желаемый тип сортировки (Топ, Самые старые, Самые новые), а второй – это тип вопросов (Входящие, Живые, Со звездой, Архивированные).

Желаемый тип сортировки выполняется командой cy.contains(), которая выбирает элемент в соответствии с текстом, а затем кликает по нему. Это позволяет нам выбрать точный тип сортировки для каждого теста.

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

 

Это позволяет использовать их одновременно в одном и том же тесте, сохраняя много места в 11 тестах.

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

Вы также можете добавить ваши кастомные команды в объект "cy" для Intellisense. В этом случае вы не только поддержите чистоту кода, но и будете писать его быстрее.

Обсудить в форуме