Поиск по тексту и частичному совпадению

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

Использование contains для поиска по тексту

Метод cy.contains() позволяет находить элементы на странице по их видимому тексту. В отличие от cy.get(), который работает только с селекторами, cy.contains() ищет совпадение текста в DOM.

Синтаксис:

cy.contains(content)
cy.contains(selector, content)
  • content — текст или регулярное выражение для поиска.
  • selector — CSS-селектор, ограничивающий область поиска.

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

cy.contains('Войти').click();

В этом примере Cypress ищет элемент с текстом точно «Войти» и выполняет клик.

Пример с селектором:

cy.contains('button', 'Отправить').click();

Здесь поиск ограничен кнопками, и клик будет произведен только по кнопке с текстом «Отправить».

Частичное совпадение текста с регулярными выражениями

Для гибкого поиска по частичному совпадению используется передача регулярного выражения вместо строки. Это позволяет учитывать различия в регистре, пробелах и динамическом содержимом текста.

Пример поиска по части текста:

cy.contains(/Вход/i).click();
  • Флаг i делает поиск нечувствительным к регистру.
  • Регулярное выражение /Вход/ найдет любой элемент, содержащий слово «Вход», независимо от дополнительных символов.

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

cy.contains(/Пользователь: \d+/).should('exist');

Такой поиск полезен для элементов, в которых идентификатор или число генерируется динамически.

Комбинирование cy.get() и cy.contains()

Для повышения точности часто используется комбинация cy.get() и cy.contains(). Сначала определяется область поиска, затем выполняется поиск по тексту внутри этой области.

Пример:

cy.get('.menu').contains('Настройки').click();

В этом случае Cypress сначала ищет контейнер .menu, а затем ищет внутри него элемент с текстом «Настройки». Такой подход снижает вероятность ложных срабатываний на странице с множеством совпадающих элементов.

Использование invoke('text') для проверки частичного текста

Иногда требуется не кликать на элемент, а проверять наличие определенного текста. Для этого можно использовать метод invoke('text') и цепочку утверждений should().

Пример:

cy.get('.notification')
  .invoke('text')
  .should('contain', 'успешно добавлен');

Метод contain проверяет, что текст элемента включает указанную подстроку, что является типичным способом проверки частичного совпадения.

Поиск элементов с динамическим текстом и шаблонами

В сложных интерфейсах текст элементов может меняться. Использование регулярных выражений и цепочек команд позволяет создавать устойчивые тесты.

Пример:

cy.get('.user-list')
  .contains(new RegExp(`^${username}`, 'i'))
  .should('be.visible');

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

Ограничения и рекомендации

  • Чувствительность к регистру: строковые аргументы в cy.contains() по умолчанию чувствительны к регистру. Регулярные выражения позволяют контролировать этот аспект.
  • Производительность: поиск по тексту может быть медленнее, чем по уникальным селекторам. В больших DOM лучше комбинировать селекторы с текстом.
  • Динамический контент: при асинхронной подгрузке текста рекомендуется использовать should('exist') или should('contain') для ожидания появления элемента.

Вывод

Поиск по тексту и частичному совпадению в Cypress обеспечивает высокую гибкость при тестировании интерфейсов с динамическим содержимым. Методы cy.contains(), использование регулярных выражений и комбинирование с cy.get() позволяют создавать надежные тесты, которые остаются устойчивыми к изменениям разметки и текста.

Оглавление