Базовые взаимодействия с элементами

Cypress устанавливается через npm и интегрируется в проект JavaScript. Команда для установки:

npm install cypress --save-dev

После установки Cypress можно открыть через команду:

npx cypress open

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

npx cypress run

Файлы тестов по умолчанию располагаются в папке cypress/e2e. Cypress поддерживает структуру, которая позволяет организовывать тесты по модулям, страницам или функциональности.

Основные команды для работы с элементами

Поиск элементов

Cypress использует команду cy.get() для поиска элементов в DOM:

cy.get('селектор')

Поддерживаются любые CSS-селекторы, включая классы, идентификаторы и атрибуты. Для поиска по тексту используется команда cy.contains():

cy.contains('Текст кнопки')

Можно комбинировать методы для уточнения поиска:

cy.get('.form').contains('Отправить')

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

  • Клик по элементу:
cy.get('button.submit').click()
  • Ввод текста:
cy.get('input[name="username"]').type('admin')
  • Очистка поля:
cy.get('input[name="search"]').clear()
  • Выбор значения из списка:
cy.get('select#country').select('Россия')

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

Проверка состояния элементов

Cypress предоставляет мощные команды для ассертов (assertions):

  • Проверка видимости:
cy.get('#login-form').should('be.visible')
  • Проверка наличия текста:
cy.get('.alert').should('contain.text', 'Ошибка')
  • Проверка атрибутов:
cy.get('input[type="checkbox"]').should('be.checked')
cy.get('input[name="email"]').should('have.attr', 'placeholder', 'Введите email')
  • Проверка значений полей:
cy.get('input[name="username"]').should('have.value', 'admin')

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

Цепочки команд и асинхронность

Cypress построен на принципе цепочек команд (chaining), что обеспечивает последовательное выполнение действий:

cy.get('form')
  .find('input[name="password"]')
  .type('123456')
  .should('have.value', '123456')

Каждая команда возвращает объект Cypress, позволяя продолжать цепочку. Асинхронная природа операций скрыта, поэтому нет необходимости использовать async/await.

Работа с чекбоксами и радиокнопками

  • Установка состояния чекбокса:
cy.get('#agree').check()
cy.get('#agree').uncheck()
  • Выбор радиокнопки:
cy.get('input[name="gender"]').check('male')

Можно комбинировать проверки состояния после действия:

cy.get('#subscribe').check().should('be.checked')

Работа с элементами, которые динамически появляются

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

cy.get('.modal', { timeout: 10000 }).should('be.visible')

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

cy.get('body').then(($body) => {
  if ($body.find('.popup').length) {
    cy.get('.popup .close').click()
  }
})

Перетаскивание элементов и взаимодействие с мышью

Cypress позволяет выполнять сложные действия, имитирующие пользователя:

  • Наведение курсора:
cy.get('.menu-item').trigger('mouseover')
  • Перетаскивание элементов:
cy.get('#drag').trigger('mousedown', { which: 1 })
cy.get('#drop').trigger('mousemove').trigger('mouseup', { force: true })
  • Двойной клик:
cy.get('button.edit').dblclick()

Советы по стабильности тестов

  • Использовать уникальные селекторы (data-testid или data-cy) вместо классов, которые могут меняться.
  • Предпочитать команды Cypress с встроенными ожиданиями (should, contains) вместо ручных таймаутов.
  • Разбивать действия на логические блоки для читаемости: поиск → проверка → действие.

События и слушатели

Cypress позволяет отслеживать события и проверять их триггер:

cy.get('input[type="text"]')
  .type('тест')
  .should('have.value', 'тест')
  .then(($input) => {
    $input.on('input', () => {
      console.log('Событие input сработало')
    })
  })

Работа с iframe

Для элементов внутри iframe используется специальный подход:

cy.get('iframe#frame').then(($iframe) => {
  const body = $iframe.contents().find('body')
  cy.wrap(body).find('button#submit').click()
})

cy.wrap() позволяет обернуть содержимое iframe, чтобы продолжать использовать цепочки команд Cypress.

Идентификация элементов через текст и атрибуты

Использование CSS-селекторов не всегда удобно. Для надёжного поиска часто применяются:

cy.get('[data-cy="login-button"]').click()
cy.contains('h1', 'Добро пожаловать').should('be.visible')

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

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

Оглавление