Создание первого интеграционного теста — запуск приложения

Создание первого теста

Перед тем, как приступить к написанию тестов, нужно понять, что мы тестируем. Представим наше приложение: это простое React-приложение, состоящее из стартовой страницы с заголовком "Добро пожаловать!" и кнопкой перехода на ещё одну страницу.

Мы должны будем:

• Убедиться, что приложение загружается и отображает стартовую страницу.
• Проверить, что на странице есть заголовок "Добро пожаловать!".
• Убедиться, что кнопка для перехода на новую страницу тоже присутствует.

Создание теста шаг за шагом

Шаг 1. Файловая структура тестов

Сначала создадим структуру для хранения наших тестов. Cypress предлагает поместить все тесты в директорию cypress/e2e. Это стандартная структура, которая помогает организовать наши тесты.

Ваш проект должен выглядеть примерно так:

my-app/
├── cypress/
│   └── e2e/
│       └── app.test.cy.js
├── src/
├── package.json

Мы будем работать внутри файла app.test.cy.js (расширение .cy — это традиция, связанная с использованием Cypress).

Шаг 2. Создание первого теста

Теперь давайте напишем тест. Откройте файл app.test.cy.js и добавьте следующий код:

// app.test.cy.js

describe('Стартовая страница', () => {
  it('Должна загрузиться и показывать заголовок', () => {
    // Перейти на главную страницу нашего приложения
    cy.visit('/');

    // Проверить, что заголовок с текстом "Добро пожаловать!" существует
    cy.get('h1').contains('Добро пожаловать!').should('be.visible');

    // Убедиться, что кнопка перехода существует
    cy.get('button').contains('Перейти дальше').should('be.visible');
  });
});

Что здесь происходит?

• describe(): группирует тесты по блокам. В данном случае мы группируем их под темой "Стартовая страница".
• it(): определяет отдельный тест. Это как "шаг", который проверяет одну маленькую вещь в приложении.
• cy.visit('/'): загружает стартовую страницу нашего приложения.
• cy.get(): ищет элемент на странице. Например, мы ищем заголовок <h1> и кнопку.
• contains(): проверяет, содержит ли элемент указанный текст.
• should(): утверждает условие — в данном примере, "должно быть видно пользователю".

Шаг 3. Запуск теста

Теперь пришло время запустить тест с помощью интерфейса Cypress. В терминале выполните:

npx cypress open

Откроется интерфейс Cypress, где вы увидите файл app.test.cy.js. Кликните на него, и Cypress автоматически откроет браузер и начнёт выполнение тестов.

Анализ выполнения тестов

После выполнения теста в интерфейсе Cypress вы увидите, как пошагово выполняются ваши проверки. Если всё работает как надо, вам покажут зелёные галочки около каждого шага теста. Это ли не праздник для перфекциониста?

Типичные ошибки

Если ваш тест провалился, не паникуйте! Вот несколько типичных проблем:

• Приложение не запускается: убедитесь, что локальный сервер запущен (например, npm start).
• Элемент не найден: убедитесь, что селекторы h1, button соответствуют вашей разметке.
• Роутинг не работает: убедитесь, что в приложении настроена маршрутизация (если вы используете React Router).

Помним: красные крестики — это не фиаско, это приглашение к продуктивному дебагу.

Расширение теста: переход между страницами

Продолжим работу и добавим функционал проверки перехода на другую страницу. Представим, что при нажатии на кнопку "Перейти дальше" мы попадаем на страницу с текстом "Вы на новой странице!".

Добавьте новый тест:

it('Должна переходить на новую страницу при нажатии кнопки', () => {
  // Перейти на стартовую страницу
  cy.visit('/');

  // Нажать на кнопку "Перейти дальше"
  cy.get('button').contains('Перейти дальше').click();

  // Проверить, что новый текст отображается
  cy.get('h1').contains('Вы на новой странице!').should('be.visible');
});

Теперь, запустив тест снова, вы увидите, как Cypress переходит между страницами и проверяет каждый шаг.

Возможные улучшения

Вы только что написали свои первые интеграционные тесты. Это уже повод для радости! Но всегда можно сделать лучше:

• Добавьте больше проверок: например, проверьте наличие футера или заголовков.
• Убедитесь в кроссбраузерности: Cypress можно запускать в разных браузерах, чтобы убедиться в корректной работе.
• Делайте тесты читаемыми: используйте описательные названия для describe() и it().

Ваши знания по интеграционному тестированию растут, и впереди вас ждёт ещё много интересного. Помните, что тесты — это ваше главное оружие в борьбе за качественное программное обеспечение. А Cypress — ваш верный напарник в этом бою.