Вступление
В этой статье объясняется, как вы можете использовать Cypress для тестирования приложения Vuejs. В качестве примера используется простое приложение для задач, созданное с помощью Vuejs.
В этой статье нет подробного описания тестирования с помощью Cypress, документация Cypress - лучший источник для этого. Вместо того, чтобы просто объяснять Cypress и то, как он работает, используется рабочее (простое, но отчасти практичное) приложение, чтобы показать, как Cypress можно использовать с Vuejs.
Cypress имеет множество функций, которыми можно удивительно пользоваться. Но в то же время это палка о двух концах. Эти же многочисленные функции иногда могут сбивать с толку поиск идеального утверждения для создания надлежащего теста, поэтому я объяснил некоторые из своих мыслительных процессов, когда искал подходящее условие для использования в своих тестах.
Приложение не будет подвергаться всестороннему тестированию. Будут протестированы только базовые функции, достаточные, чтобы убедиться, что основные функции работают должным образом.
Настройка приложения
Поскольку основное внимание в этой статье уделяется написанию тестов, мы не будем тратить много времени на создание самого приложения. Это простое приложение с задачами, поэтому я дал ему основные функции - добавление задачи, вычеркивание задачи и удаление задачи. Есть также некоторые дополнительные функции, такие как невозможность добавить пустую задачу и невозможность добавлять повторяющиеся задачи. Если вы хотите, вы можете реорганизовать его, чтобы иметь возможность обрабатывать повторяющиеся задачи.
Это код для приложения todo. Он очень минималистичен и не имеет особого стиля (практически никакого). Но это работает, и это все, что нам нужно, чтобы приступить к написанию тестов. Итак, приступим к написанию тестов. Сначала мы должны установить Cypress.
Установка и настройка Cypress
Чтобы установить Cypress с npm:
Теперь, когда мы установили Cypress как зависимость для разработчиков, мы можем приступить к написанию тестов. Если вы используете Cypress впервые, выполните следующие действия в документации.
При первом запуске Cypress в проекте он создает массу тестов, чтобы мы могли начать работу. На самом деле они нам не нужны, поэтому можно их удалить.
После установки Cypress будет создана новая папка с тем же именем, и в ней также будет несколько папок с тестами, о которых я упоминал. Хотя все эти тесты и папки можно удалить, оставьте папку с именем integration
. Это потому, что Cypress будет искать в этой папке тесты. Я попытался создать тестовый файл вне этой папки, но он не появился в пользовательском интерфейсе Cypress. Я не уверен, упустил ли я что-то или есть способ обойти это. Если кто-то знает об этом, дайте мне знать в комментариях ниже 🙂
Что касается именования тестовых файлов, хотя документация Cypress, похоже, называет все свои файлы примеров как something_spec.js
(что означает, что все они заканчиваются на _spec.js
), в этом нет необходимости. Вы можете называть его как хотите, если это файл JavaScript. Убедитесь, что вы используете осмысленные имена вместо случайных. Если у вас есть система именования, то это отлично!
Написание тестов
Приложение готово, Cypress установлен и настроен. Пришло время приступить к написанию тестов.
Первый тест, который мы напишем, - это проверка того, добавляется ли задача. Глядя на код приложения, мы можем написать нашу задачу в поле ввода, щелкнуть кнопку, и наша задача будет добавлена в неупорядоченный список. Таким образом, мы можем создавать задачи, написав в поле ввода и нажав кнопку.
Раньше я использовал Jest для написания тестов для своих приложений Vue, а также написал об этом статью. При написании этого теста я использовал тот же мысленный процесс, что и при написании теста Jest. В Jest компонент Vue импортируется, затем мы монтируем его и так далее. Однако в Cypress я не нашел ничего подобного. Пока я не увидел пример, в котором используется visit()
. Я сразу же подошел к консоли и запустил приложение, используя npm run serve
. Эта команда предназначена для Vue 3.x, поэтому, если вы используете Vue 2.x, это будет npm run start
. Поскольку я могу посещать приложение в моем браузере с помощью localhost, я использовал этот адрес для cy.visit()
.
Прохладный! Cypress может посещать страницу приложения, как если бы я заходил на нее. Итак, теперь осталось выбрать поле ввода, ввести задачу и нажать кнопку.
it
- это термин, используемый большинством тестовых библиотек для написания тестовых примеров. Вы можете прочитать мою статью, где я немного подробнее расскажу об этом.
Здесь мы заходим в приложение через localhost, находим поле ввода с помощью cy.get()
и начинаем вводить что-то внутри. Чтобы что-то напечатать, мы просто связываем cy.click()
с cy.get()
. Затем мы получаем кнопку таким же образом и щелкаем по ней, связывая cy.click()
. Теперь осталось проверить, действительно ли задача добавлена в список.
Сначала я подумал получить весь список, но потом понял, что мы только проверяем, добавлена ли созданная нами задача. Поскольку мы проверяем только его, я использовал cy.get()
, чтобы найти элемент списка, содержащий нашу задачу.
Кажется, теперь довольно просто, не так ли! Это ваш первый тест с Cypress !!
Давайте не будем останавливаться на достигнутом и продолжим. Наш второй тест будет проверять, перечеркивает ли задача при нажатии на задачу.
Мы уже посетили страницу приложения и создали задачу во время нашего первого теста, поэтому все, что нам нужно сделать на этот раз, - это щелкнуть по ней и проверить, не пересекается ли она. Чтобы щелкнуть по нему, мы получаем его так же, как и в первом тесте с использованием cy.get()
. Затем мы обязательно указываем, какую задачу ищем, связывая cy.contains()
. Затем мы щелкаем по нему так же, как и с кнопкой, с помощью цепочки cy.click()
.
Наконец, чтобы проверить, зачеркнуто ли оно, мы снова получаем конкретную задачу, а затем утверждаем, что она имеет класс completed
.
Если вы еще раз посмотрите на код нашего приложения, мы написали некоторый CSS, который дает элемент с классом completed
, текстовым оформлением зачеркивания. Вы можете более тщательно выполнить этот тест и вместо этого проверить, действительно ли к задаче применен этот CSS. Это гарантирует, что тест будет работать даже в ситуациях, когда по какой-то причине добавлен класс completed
, но не применяется CSS. Вы можете найти соответствующее утверждение в документации Cypress. Это послужит хорошим упражнением в навигации по документам.
Теперь для заключительного теста мы проверим, можно ли удалить задачу, нажав кнопку.
Тест на этот раз совсем небольшой. Получаем кнопку с помощью cy.get()
и цепляем к ней click()
. Наконец, мы получаем конкретную задачу и утверждаем, что она не содержит содержимого задачи. И теперь мы написали все наши тесты и гарантируем, что основные функции приложения работают.
Вот все тесты, которые мы написали в одном месте:
Подведение итогов
Вы могли заметить, что мы взаимодействовали только с элементами HTML и даже не затронули Vuej в наших тестах, хотя все наше приложение написано на Vue. Это потому, что Cypress так устроен. Возьмем, к примеру, Jest: вы бы написали тесты для приложений React иначе, чем для приложений Vue. На мой взгляд, Cypress создан независимым от какой-либо конкретной структуры. Неважно, используете ли вы в своем приложении компонентный подход, используете сервер или делаете его бессерверным, Cypress предназначен для тестирования вашего приложения во время его работы в браузере. Он имитирует поведение обычного пользователя, если бы он действительно использовал ваше приложение. Вам не нужно импортировать или монтировать какой-либо компонент.
Сказав это, мы закончили писать все наши тесты. Мы создали минимальное приложение для задач и фактически написали для него тесты с помощью Cypress. Cypress предоставляет несколько действительно интересных инструментов и функций для тестирования. Вы упускаете возможность, если еще не пробовали это сделать.
Первоначально опубликовано на dev.to.