Установка и настройка Cypress для проекта

Установка Cypress

Прежде чем мы начнем работать с Cypress, нам нужно удостовериться, что наше рабочее окружение готово. Cypress требует установленной среды Node.js и пакетного менеджера npm (или yarn). Если у вас их нет, скачайте и установите Node.js — npm идет в комплекте. Как программисты, мы знаем, что установка новых инструментов — это не сложно, но всё равно требует вашего внимания.

Установка через npm

Перейдем к установке. Создайте новый React-проект (если он ещё не создан) или откройте ваш текущий проект. Если вы пользуетесь create-react-app, структура проекта уже готова к тестированию. В терминале выполните следующую команду для установки Cypress:

npm install cypress --save-dev

Если вы предпочитаете yarn (потому что npm почему-то всегда хочет обновляться в самый неподходящий момент), используйте следующую команду:

yarn add cypress --dev

После завершения установки в папке node_modules появится Cypress, а в package.json будет указан новый dev-зависимость.

Базовая настройка Cypress

Инициализация Cypress в проекте

После установки следующая команда автоматически создаст базовую структуру конфигурации Cypress:

npx cypress open

(Примечание: npx позволяет вам запускать локально установленные пакеты, не добавляя их в PATH.)

После выполнения команды Cypress откроет интерфейс, а в вашем проекте появится структура cypress с такими папками:

/cypress
  /fixtures     # Тестовые данные (фикстуры)
  /integration  # Папка для хранения тестов
  /plugins      # Конфигурационные файлы
  /support      # Общие функции для тестов
cypress.json     # Основной конфигурационный файл

Теперь у вас буквально "тестовый дом". Папка integration, к примеру, — это место, куда мы будем добавлять все тесты. Всё гениальное просто, как console.log() в старом добром JavaScript.

Конфигурация Cypress

Давайте пробежимся по созданному файлу cypress.json. Здесь мы можем настраивать базовый URL для тестов, таймауты и другие параметры. Например:

{
  "baseUrl": "http://localhost:3000",
  "viewportWidth": 1280,
  "viewportHeight": 720
}

• baseUrl: указывает базовый URL для посещения страниц. В нашем случае это локальный сервер разработки React.
• viewportWidth и viewportHeight: размер экрана браузера для тестов. Это позволит имитировать стандартное рабочее окно пользователя.

Проект настроен! Как говорится, нет ничего лучше, чем готовый json, чтобы почувствовать себя продуктивным.

Запуск Cypress и его интерфейс

Теперь запустим Cypress. Если он уже не открыт, выполните:

npx cypress open

Должно открыться окно с великолепным интерфейсом пользователя. Это, по сути, ваша "панель управления" для запуска тестов. Здесь вы увидите список всех тестов, созданных в папке /integration. Если папка пока пуста, Cypress автоматически предложит примеры тестов. Нажмите любую из предложенных записей, и вы сможете увидеть, как Cypress выполняет тесты в реальном браузере.

Основными разделами интерфейса считаются:

• Specs: список всех тестов. Можно запускать тесты по одному или все сразу.
• Test Runner: здесь показываются скриншоты, ошибки, а также выполняются действия в реальном времени.
• Command Log: лог всех команд, выполненных в тесте (например, click, visit или type). Идеально для отладки.

Написание базового теста

Время для первого теста. В папке /cypress/integration создайте файл firstTest.spec.js. Cypress рекомендует использовать суффикс .spec для всех тестов, чтобы было понятно, что этот файл предназначен для тестирования.

// Первый тест: проверяем, что главная страница загружается
describe('My First Test', () => {
  it('Visits the app root URL', () => {
    cy.visit('/') // Открывает root URL (http://localhost:3000)
    cy.contains('h1', 'Welcome') // Проверяет наличие заголовка на странице
  })
})

• describe: вы описываете тестовую группу.
• it: это ваш отдельный тест внутри группы.
• cy.visit(): команда для навигации к указанному URL.
• cy.contains(): ищет текст на странице, например, внутри заголовка <h1>.

Запустите тест через интерфейс Cypress, и вы увидите, как Cypress откроет браузер, протестирует страницу и покажет результаты.

Решение возможных проблем

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

1. Если ваш сервер не запускается, команда cy.visit() покажет ошибку. Убедитесь, что ваше React-приложение работает на localhost:3000.
2. Если вы получаете ошибку CORS (Cross-Origin Resource Sharing), это связано с настройками вашего сервера. Cypress обходит CORS, напрямую взаимодействуя с клиентским приложением, так что проблема может быть временной.