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

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

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

Cypress использует команду cy.get() для поиска элементов по селекторам. Результат команды — коллекция элементов, с которой можно работать далее:

cy.get('ul > li'); // получает все элементы списка

После получения коллекции можно проверить её размер с помощью команды should('have.length', N):

cy.get('ul > li').should('have.length', 5);

Здесь 5 — ожидаемое количество элементов. Если фактическое количество не совпадает, тест будет провален.

Использование динамического подсчёта элементов

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

cy.get('ul > li').should($items => {
  expect($items.length).to.be.at.least(3);
});

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

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

Если необходимо убедиться, что элементы отсутствуют, Cypress позволяет использовать should('have.length', 0) или should('not.exist'):

cy.get('.error-message').should('not.exist');
cy.get('ul > li').should('have.length', 0);

not.exist проверяет наличие элементов в DOM, тогда как have.length — конкретно количество элементов.

Комбинация с другими командами

Часто проверка количества элементов совмещается с другими действиями, например кликами или фильтрацией:

cy.get('.filter-button').click();
cy.get('ul > li').should('have.length', 2);

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

Важные аспекты при проверке

  1. Асинхронность: Cypress автоматически ждёт элементы до таймаута (по умолчанию 4 секунды). Это важно при работе с динамическим контентом, загружаемым через API.
  2. Селекторы: Использование точных и устойчивых селекторов (data-* атрибуты) повышает надёжность тестов.
  3. Сложные коллекции: При проверке элементов с вложенной структурой можно комбинировать команды .find(), .children(), .eq() для уточнения.
cy.get('ul').children('li').should('have.length', 4);
cy.get('ul').find('li.active').should('have.length', 2);
  1. Проверка с диапазонами: Вместо точного числа иногда проверяют диапазон:
cy.get('ul > li').its('length').should('be.gte', 3).and('be.lte', 10);

gte — больше или равно, lte — меньше или равно. Такой подход полезен для тестирования списков с изменяемым содержимым.

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

Для отладки можно использовать команду .then(), которая позволяет работать с коллекцией элементов напрямую:

cy.get('ul > li').then($items => {
  cy.log(`Количество элементов: ${$items.length}`);
});

cy.log выводит информацию в консоль Cypress Test Runner, облегчая анализ теста.

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

  • Использовать should('have.length') для фиксированных ожиданий.
  • Применять колбэки внутри should или .then() для динамических или условных проверок.
  • Всегда выбирать устойчивые селекторы, чтобы тесты не ломались при изменении внешнего вида страницы.
  • Сочетать проверку количества элементов с другими проверками состояния, например видимостью или активностью.

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

Оглавление