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

Для начала работы с Cypress требуется Node.js версии 14 или выше. Cypress устанавливается через npm или yarn. Наиболее распространённая команда для установки:

npm install cypress --save-dev

После установки Cypress добавляет в проект собственную структуру каталогов. Основные папки:

  • cypress/e2e – здесь хранятся тестовые файлы.
  • cypress/support – содержит вспомогательные файлы и кастомные команды.
  • cypress/fixtures – тестовые данные в формате JSON.

Конфигурация Cypress хранится в файле cypress.config.js, где можно задать базовый URL, таймауты, настройки браузеров и другие глобальные параметры. Пример базовой конфигурации:

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    setupNodeEvents(on, config) {
      // место для подключения плагинов
    },
    defaultCommandTimeout: 8000
  }
})

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

Cypress можно запускать двумя способами: через графический интерфейс Cypress Test Runner или в режиме командной строки headless.

Графический интерфейс запускается командой:

npx cypress open

После этого откроется окно, где отображаются все тесты, а также возможность выбрать браузер (Chrome, Edge, Firefox). При первом запуске автоматически создаются примерные тесты в папке cypress/e2e.

Headless режим подходит для CI/CD и запуска тестов без GUI:

npx cypress run

В этом режиме тесты выполняются в фоне, а результаты выводятся в терминал.

Структура теста в Cypress

Тесты в Cypress организуются с использованием функций describe, it и хуков before, beforeEach, afterEach, after.

Пример простого теста:

describe('Главная страница', () => {
  before(() => {
    cy.visit('/') // переход на базовый URL
  })

  it('Отображается заголовок', () => {
    cy.get('h1').should('contain', 'Добро пожаловать')
  })

  it('Содержит кнопку входа', () => {
    cy.get('button.login').should('be.visible')
  })
})

Ключевые моменты:

  • cy.visit() – открывает страницу по заданному URL.
  • cy.get() – выбор DOM-элемента с последующими проверками (should).
  • Хуки позволяют запускать код до или после тестов, избегая дублирования.

Взаимодействие с элементами

Cypress автоматически ждёт появления элементов, поэтому нет необходимости ставить явные wait. Поддерживаются действия:

  • Клик: cy.get('selector').click()
  • Ввод текста: cy.get('input').type('текст')
  • Выбор из списка: cy.get('select').select('option')

Для проверки состояния элементов применяются цепочки команд:

cy.get('input').should('have.value', 'тест')
cy.get('button').should('be.enabled')

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

Для тестирования часто нужны статические данные. Они хранятся в cypress/fixtures и загружаются командой:

cy.fixture('user.json').then((user) => {
  cy.get('input[name="username"]').type(user.username)
})

Фикстуры удобно использовать для имитации API-запросов, тестовых форм и повторяющихся данных.

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

Cypress предоставляет встроенное логирование. Любую команду можно проследить в Test Runner. Для дополнительных проверок используют cy.log():

cy.get('button').click()
cy.log('Кнопка была нажата')

Для сложных случаев доступна консоль браузера через cy.debug() или debugger.

Интеграция с CI/CD

Для автоматического запуска тестов на сервере используют команду:

npx cypress run --record --key <project-record-key>

Cypress поддерживает параллельное выполнение тестов, скриншоты и видео по завершении. Конфигурация этих функций задаётся в cypress.config.js.

Поддержка различных браузеров

Cypress по умолчанию использует Chromium, но поддерживаются Firefox и Edge. Выбор браузера в CLI:

npx cypress run --browser firefox

Графический интерфейс позволяет выбрать любой установленные браузеры и следить за прогрессом выполнения тестов визуально.

Управление таймаутами и ожиданиями

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

cy.get('button.submit', { timeout: 10000 }).click()

Для асинхронных операций применяются cy.wait() или перехват сетевых запросов с cy.intercept().

Запуск Cypress в первый раз включает установку, настройку проекта, запуск GUI или headless режима, создание первых тестов и проверку работы базовых команд. Эти шаги формируют фундамент для последующего освоения сложных сценариев тестирования.

Оглавление