Проверка текста и содержимого

Cypress предоставляет мощные возможности для проверки текста и содержимого веб-страниц. Основной инструмент для этого — команда .should() и цепочка команд для поиска элементов, таких как .get(), .contains() и .find(). Проверка текста позволяет убедиться, что интерфейс отображает корректную информацию, соответствующую ожиданиям теста.

Использование .contains() для проверки текста

Метод .contains() ищет элемент, содержащий определённый текст. Его можно применять как к корню страницы, так и к конкретному элементу.

cy.contains('Войти').click();
cy.get('button').contains('Отправить').should('be.visible');

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

  • .contains() выполняет поиск по текстовому содержимому, игнорируя HTML-разметку.
  • Можно комбинировать с селекторами CSS для уточнения области поиска:
cy.get('.form-actions').contains('Сохранить').click();

Проверка точного текста с .should('have.text')

Для строгого контроля текста элемента используется команда .should('have.text'). Она проверяет точное соответствие, включая пробелы и скрытые символы.

cy.get('.user-name').should('have.text', 'Иван Иванов');

Особенности применения:

  • Не следует использовать для частичных совпадений, для этого лучше подходит .should('include.text', 'Иван').
  • Чувствительно к пробелам и форматированию, поэтому иногда целесообразно предварительно использовать .trim() при сравнении на стороне приложения.

Частичная проверка текста: .should('include.text')

Если необходимо убедиться, что элемент содержит определённую подстроку, используется .should('include.text'):

cy.get('.notification').should('include.text', 'успешно сохранено');

Применение в динамических интерфейсах:

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

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

Проверка текста часто сопровождается проверкой видимости или состояния элемента. Для этого используют комбинацию команд .should('be.visible') и .and():

cy.get('.alert-success')
  .should('be.visible')
  .and('include.text', 'Данные обновлены');

Преимущества такой цепочки:

  • Сочетание проверок повышает надёжность теста.
  • Позволяет убедиться, что текст не только существует, но и доступен для пользователя.

Использование регулярных выражений для гибкой проверки

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

cy.get('.order-id').should('match', /Заказ №\d{4}/);
cy.get('.welcome-message').should('contain.text', /Добро пожаловать, \w+/);

Советы по применению:

  • Регулярные выражения позволяют проверять формат текста, не завися от точного содержания.
  • Можно комбинировать с другими условиями .and() для комплексной проверки.

Проверка атрибутов и HTML-содержимого

Иногда важно проверять не только текст, но и атрибуты элемента, например title или value:

cy.get('input[name="username"]').should('have.attr', 'placeholder', 'Введите имя');
cy.get('button.submit').should('have.text', 'Отправить');

Для проверки HTML-контента используется .invoke('html'):

cy.get('.rich-text').invoke('html').should('contain', '<strong>важно</strong>');

Применение:

  • Проверка HTML особенно полезна для компонентов с форматированием текста, тегами или вставленными ссылками.
  • .invoke('text') позволяет получить чистый текст без HTML-разметки.

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

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

cy.get('.dynamic-message', { timeout: 10000 })
  .should('be.visible')
  .and('include.text', 'Загрузка завершена');

Рекомендации:

  • Использовать увеличенные таймауты для элементов, появление которых зависит от сетевых запросов.
  • Сочетать проверку текста с проверкой состояния элемента (be.visible, exist) для надёжности.

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

Для проверки коллекций элементов применяются команды .each() и .eq():

cy.get('.user-list li').each(($el, index) => {
  cy.wrap($el).should('include.text', `Пользователь ${index + 1}`);
});

cy.get('.user-list li').eq(0).should('have.text', 'Пользователь 1');

Особенности:

  • .each() позволяет проверять текст всех элементов списка.
  • .eq() подходит для точечной проверки определённого элемента в коллекции.

Практические советы

  • Всегда учитывать пробелы и переносы строк в текстовых проверках.
  • Использовать .trim() или регулярные выражения при необходимости гибкой проверки.
  • Комбинировать проверки текста с видимостью и состоянием элементов для надёжных тестов.
  • Для динамического контента корректно применять таймауты и ожидания.

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

Оглавление