Команда cy.get()

Команда cy.get() является одной из базовых и наиболее часто используемых команд в Cypress. Она предназначена для поиска элементов на странице с использованием CSS-селекторов, XPath (с дополнительными плагинами) или других способов идентификации элементов. Основной принцип работы cy.get() заключается в том, что она возвращает объект Cypress, содержащий найденный элемент или набор элементов, с которым можно далее взаимодействовать.

cy.get('button.submit')

В данном примере команда ищет все элементы <button> с классом submit. Результатом будет коллекция элементов, даже если найден только один.


Селекторы в cy.get()

Используются стандартные CSS-селекторы:

  • По тегу:

    cy.get('input')

    Найдет все элементы <input> на странице.

  • По классу:

    cy.get('.active')

    Найдет все элементы с классом active.

  • По идентификатору:

    cy.get('#login')

    Найдет элемент с ID login.

  • Комбинированные селекторы:

    cy.get('form#login input.username')

    Найдет <input> с классом username, находящийся внутри формы с ID login.

  • Атрибутные селекторы:

    cy.get('input[name="password"]')

    Позволяют выбирать элементы по атрибутам, например name, type, data-*.


Паузы и таймауты

cy.get() по умолчанию ожидает появления элемента в течение определенного времени, прежде чем вызвать ошибку. Таймаут по умолчанию — 4 секунды, но его можно изменить:

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

Команда будет ждать до 10 секунд, пока элемент не появится в DOM. Это особенно важно для динамически загружаемых страниц или элементов, появляющихся после AJAX-запроса.


Фильтрация и уточнение

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

  • .first() и .last() — выбрать первый или последний элемент из найденной коллекции:

    cy.get('li.item').first()
    cy.get('li.item').last()
  • .eq(index) — выбрать элемент по индексу (нумерация с нуля):

    cy.get('ul li').eq(2)
  • .filter(selector) — фильтрация найденных элементов по дополнительному селектору:

    cy.get('div.card').filter('.active')
  • .contains(text) — поиск элемента внутри найденной коллекции по тексту:

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

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

cy.get() чаще всего используется как отправная точка для взаимодействия:

  • Клик:

    cy.get('button.submit').click()
  • Ввод текста:

    cy.get('input[name="username"]').type('admin')
  • Проверка видимости или состояния:

    cy.get('div.alert').should('be.visible')
    cy.get('input[type="checkbox"]').should('be.checked')

Каждое взаимодействие возвращает объект Cypress, что позволяет строить цепочки команд без явного ожидания.


Особенности работы с динамическим DOM

Если элемент появляется на странице после некоторого действия или задержки, cy.get() автоматически повторяет поиск до тех пор, пока элемент не станет доступен или не истечет таймаут. Это называется retry-ability и является одной из ключевых особенностей Cypress, отличающей его от других фреймворков для тестирования.

Пример работы с динамическим элементом:

cy.get('div.notification', { timeout: 8000 }).should('contain', 'Успешно')

Cypress будет проверять наличие элемента div.notification в течение 8 секунд и одновременно проверять, что он содержит текст Успешно.


Ограничения cy.get()

  • Всегда ищет элементы в пределах текущего DOM. Если элемент находится в iframe, требуется сначала использовать cy.frameLoaded() или специальные плагины.
  • Не подходит для поиска элементов по тексту напрямую вне коллекции — для этого есть cy.contains().
  • Возвращает коллекцию элементов, даже если найден один элемент. Для единичного взаимодействия удобно использовать .first() или .eq(0).

Практические рекомендации

  1. Использовать уникальные селекторы (например, data-cy) для надежных тестов:

    cy.get('[data-cy=login-button]').click()
  2. Избегать слишком общих селекторов (например, div или span) — это снижает стабильность тестов.

  3. Комбинировать с командами фильтрации для точного выбора элемента из множества похожих элементов.

  4. Задавать таймауты для динамических страниц, чтобы предотвратить ложные ошибки при медленной загрузке.

  5. Использовать цепочку команд вместо многократного вызова cy.get(), чтобы тест был компактным и читаемым.


Команда cy.get() является фундаментом для взаимодействия с элементами в Cypress. Она сочетает в себе простоту использования, автоматическое ожидание элементов и гибкость фильтрации, что делает её незаменимым инструментом для построения надежных тестов пользовательского интерфейса.