Советы по 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. В этом случае вы не только поддержите чистоту кода, но и будете писать его быстрее. |