Я работал со многими разработчиками, когда писал код для различных проектов. Если есть что-то, по чему я мог бы разделить своих коллег, так это то, любят ли они писать тесты или нет.

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

Решение о том, какое мышление / подход лучше, я оставляю на ваше усмотрение как читателя :)

В этом посте я хочу кратко объяснить простую настройку Cypress в стандартной кодовой базе.

Что такое Кипарис на самом деле?

Что ж, поскольку сейчас 2023 год, а ChatGPT все еще существует, почему я должен объяснять, зная, что ИИ может сделать это намного лучше для меня, так что начнем — объяснение ChatGPT сильный>:

Cypress — это комплексная среда тестирования веб-приложений. Это позволяет разработчикам писать тесты, которые взаимодействуют с веб-приложением так же, как пользователь, управляя браузером и имитируя действия пользователя.

Отличная работа, ChatGPT, возьми печеньку!

Но теперь давайте погрузимся в установку и настройку Cypress.

Установка Кипариса

Чтобы начать работать с Cypress, нам нужно установить его с помощью npm. Мы можем сделать это, введя следующую команду в нашем терминале:

npm install cypress --save-dev

Первый запуск Cypress

После того, как мы установили Cypress, мы можем запустить его в первый раз в нашем приложении. Есть несколько способов запустить Cypress из корня вашего приложения.

Полный путь

Вы можете начать Cypress, используя «длинный» путь, используя длинный путь:

./node_modules/.bin/cypress open

Использование ярлыка для запуска Cypress

Еще один способ запустить Cypress — использовать ярлык, которым лично я раньше никогда не пользовался.

$(npm bin)/cypress open

Использование npx для запуска Cypress

Когда вы используете версию npm > v5.2 или когда вы установили npx отдельно, вы можете использовать npx для запуска Cypress. Это метод, который я лично использую для запуска Cypress всех проектов, для которых я пишу Cypress тесты.

Проверка установки Cypress

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

Когда проверка пройдет успешно, вы увидите, что структура папок вашего приложения немного изменилась. Добавлена ​​новая папка cypress, содержащая несколько папок, которые можно использовать для написания Cypress тестов.

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

Когда вы нажмете на файл todo.spec.js, откроется новое окно браузера, и Cypress начнет выполнять тесты по умолчанию для примера приложения.

После успешной установки Cypress все тесты должны быть зелеными в конце выполнения.

Организуйте свои тесты Cypress

Чтобы начать писать свой собственный тест Cypress, нам нужно создать новый файл спецификации Cypress, так как в будущем мы будем проводить несколько тестов, рекомендуется добавить новую папку в папку integration Cypress.

Я рассматриваю программное обеспечение как набор разрабатываемых функций, поэтому я воссоздам эту структуру в своей тестовой установке. Мы создадим новый тестовый файл с именем bot-commands.spec.js в папке с именем bot-commands внутри папки features.

Тестовый контекст

Я использую определение Context для группировки набора тестов. Мы добавим определение Contex в наш тестовый файл, куда мы добавим все тесты, связанные с bot-commands.

context('bot-command-tests', () => {})

Определите вариант использования в тесте Cypress

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

it('should open add Command Popup window when clicking on add command button', () => {
        
})

Теперь, когда у нас есть сам тест, нам нужно добавить к нему функциональность. Cypress может выбирать элементы, используя множество различных методов. Однако использование определенного метода может вызвать проблемы, когда ваше приложение станет больше.

На веб-сайте Cypress есть раздел под названием лучшие практики, в котором подробно рассказывается, почему вам не следует использовать определенные методы выбора элементов.

Лично я всегда использовал нотацию data-test для определения селекторов в своем коде. При использовании Cypress может быть хорошей идеей использовать вместо этого селектор data-cy, так как в этом случае вы знаете, что селектор используется в тесте Cypress.

Теперь вернемся к нашему тесту, мы хотим иметь возможность нажимать на кнопку, которая открывает всплывающее окно. Мы добавим селектор к кнопке, чтобы Cypress нацелился на нее в нашем тесте.

<button data-cy="new-command-btn" onClick={() => setModalHidden(!modalHidden)}
                className='bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded dark:bg-gray-800 dark:hover:bg-gray-600'>
          New Command
</button>

В нашем тестовом файле мы сделаем две вещи, чтобы активировать кнопку:

  • Перейдите кипарис на нужную страницу.
  • Нажмите на кнопку.

Начнем с перехода Cypress на нужную страницу. Мы могли бы пройти через все приложение, щелкнув каждую навигационную ссылку, чтобы оказаться на нужной странице, однако это может занять некоторое время на настройку. Чтобы упростить тест, мы вместо этого перейдем прямо на страницу, передав URL-адрес команде cypress.visit.

it('should open add Command Popup window when clicking on add command button', () => {
        cy.visit('<http://localhost:3000/overview/command>')
})

Затем нам нужно нацелить нашу кнопку Add Command и нажать на нее, чтобы открыть всплывающее окно, которое позволит нам заполнить необходимые поля.

it('should open add Command Popup window when clicking on add command button', () => {
     cy.visit('<http://localhost:3000/overview/command>')
     cy.get('[data-cy="new-command-btn"]').click();
})

Когда мы заставим Cypress запустить этот тест, щелкнув файл spec в центре тестирования Cypress, мы увидим, что тест успешно открыл всплывающее окно.

Заключение

Создать тест Cypress несложно, особенно если у вас есть солидный опыт работы с Javascript, просто создается впечатление, что вы пишете код так же, как и для любой другой части вашей системы.

Однако личное понимание: Cypress и тестирование в целом могут стать очень сложными и привести к большим накладным расходам, если они не будут правильно продуманы при запуске автоматизированного процесса тестирования.

Если вы хотите прочитать больше моих постов, не стесняйтесь подписаться на меня или загляните в мой LinkedIn