Написание первого теста

Для начала необходимо установить Cypress в проект на JavaScript. Наиболее распространённый способ — через npm:

npm install cypress --save-dev

После установки Cypress добавляется в папку node_modules, а также создаются базовые структуры проекта при первом запуске:

npx cypress open

Команда cypress open запускает графический интерфейс Cypress Test Runner, где можно создавать и запускать тесты. При первом запуске автоматически создаётся каталог cypress с подкаталогами fixtures, integration, plugins и support.

  • fixtures — содержит тестовые данные в формате JSON.
  • integration — хранит файлы с тестами.
  • plugins — позволяет подключать и настраивать дополнительные плагины Cypress.
  • support — содержит вспомогательные файлы для повторного использования кода и команд.

Структура первого теста

Файл теста создаётся в папке cypress/integration, например first_test.cy.js. Тест состоит из описаний блоков и шагов:

describe('Простой тест на главной странице', () => {
  it('Проверка заголовка страницы', () => {
    cy.visit('https://example.com'); // Переход на страницу
    cy.title().should('include', 'Example Domain'); // Проверка заголовка
  });
});
  • describe — группировка тестов. Используется для логической структуры.
  • it — отдельный тестовый сценарий, проверяющий конкретный функционал.
  • cy.visit(url) — переход на указанный URL.
  • cy.title() — получение заголовка страницы.
  • should — утверждение (assertion), проверяющее ожидаемое поведение.

Основные команды Cypress

Cypress предоставляет мощный набор команд для взаимодействия с элементами страницы:

  • cy.get(selector) — поиск элемента по CSS-селектору.
  • cy.contains(text) — поиск элемента по текстовому содержимому.
  • cy.click() — клик по элементу.
  • cy.type(text) — ввод текста в поле.
  • cy.check() / cy.uncheck() — работа с чекбоксами.
  • cy.select(value) — выбор значения в выпадающем списке.
  • cy.url() — получение текущего URL для проверки переходов.

Пример проверки формы входа:

describe('Форма входа', () => {
  it('Успешный логин', () => {
    cy.visit('/login');
    cy.get('#username').type('admin');
    cy.get('#password').type('password123');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

Работа с фикстурами

Фикстуры позволяют хранить тестовые данные отдельно от кода теста:

// cypress/fixtures/user.json
{
  "username": "admin",
  "password": "password123"
}

Использование фикстуры в тесте:

describe('Тест с фикстурой', () => {
  it('Логин с данными из JSON', () => {
    cy.fixture('user').then((user) => {
      cy.visit('/login');
      cy.get('#username').type(user.username);
      cy.get('#password').type(user.password);
      cy.get('button[type="submit"]').click();
      cy.url().should('include', '/dashboard');
    });
  });
});

Асинхронность и ожидания

Cypress работает на основе цепочек команд с автоматическим ожиданием элементов. Команды не требуют явного await или then для большинства операций.

Примеры встроенных ожиданий:

cy.get('#submit').should('be.visible').click(); // Проверка видимости перед кликом
cy.get('.notification').should('contain', 'Успешно'); // Проверка текста уведомления

Для сложных сценариев используется cy.wait(), однако предпочтительно применять ожидания на элементы, а не фиксированные таймауты.

cy.get('.loader').should('not.exist'); // Ждём исчезновения загрузки

Настройка повторного использования кода

Cypress позволяет создавать кастомные команды для уменьшения дублирования:

// cypress/support/commands.js
Cypress.Commands.add('login', (username, password) => {
  cy.visit('/login');
  cy.get('#username').type(username);
  cy.get('#password').type(password);
  cy.get('button[type="submit"]').click();
});

Использование кастомной команды в тесте:

describe('Использование кастомной команды', () => {
  it('Логин через команду', () => {
    cy.login('admin', 'password123');
    cy.url().should('include', '/dashboard');
  });
});

Локаторы и стратегии поиска элементов

  • CSS-селекторы — основной способ поиска: #id, .class, tag, attribute=value.
  • Data-атрибуты — рекомендуемый способ для тестов:
cy.get('[data-cy=submit-button]').click();
  • Текстовое содержимое — подходит для кнопок и ссылок: cy.contains('Отправить').click();

Использование data-атрибутов обеспечивает стабильность тестов при изменении стилей или структуры DOM.

Логирование и отладка

Cypress имеет встроенный инструмент логирования и дебага:

  • cy.log('Сообщение') — вывод сообщения в тестовый Runner.
  • cy.pause() — приостанавливает выполнение для интерактивной проверки.
  • cy.debug() — позволяет остановить выполнение и открыть инспектор DevTools.
cy.get('#username').type('admin').debug();

Эти инструменты помогают анализировать выполнение тестов и выявлять нестабильные шаги.

Оглавление