Вступление

В этой статье объясняется, как вы можете использовать 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.