Фильтрация элементов

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

Методы для фильтрации элементов

Cypress включает несколько встроенных методов для точной фильтрации элементов:

  1. .filter() Используется для сужения набора найденных элементов на основе CSS-селектора или функции.

    cy.get('ul li')
  .filter('.active') // Оставляет только элементы с классом 'active'
  .should('have.length', 2);

    Можно использовать функцию для более сложных условий:

    cy.get('ul li')
  .filter((index, element) => element.textContent.includes('JavaScript'))
  .should('exist');

  2. .not() Применяется для исключения элементов из набора по селектору или условию.

    cy.get('ul li')
  .not('.disabled') // Исключает элементы с классом 'disabled'
  .should('have.length.greaterThan', 0);

  3. .first() и .last() Позволяют выбрать первый или последний элемент из набора.

    cy.get('ul li')
  .first()
  .should('contain.text', 'Главная');
cy.get('ul li')
  .last()
  .should('contain.text', 'Контакты');

  4. .eq(index) Выбор конкретного элемента по индексу в наборе. Индексация начинается с 0.

    cy.get('ul li')
  .eq(2) // Третий элемент списка
  .should('have.class', 'highlight');

Фильтрация по содержимому

Для фильтрации элементов по тексту используется метод .contains() в комбинации с .get().

cy.get('ul li')
  .contains('Продукты')
  .should('have.class', 'menu-item');

Метод .contains() также можно использовать без .get() для поиска текста на всей странице:

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

Методы .filter() и .contains() могут комбинироваться для создания более точных условий:

cy.get('ul li')
  .filter(':visible')
  .contains('Новости')
  .should('be.visible');

Фильтрация по состоянию элементов

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

  1. :visible и :hidden

    cy.get('div.modal')
  .filter(':visible')
  .should('exist');

  2. :checked и :disabled

    cy.get('input[type="checkbox"]')
  .filter(':checked')
  .should('have.length', 3);
cy.get('button')
  .not(':disabled')
  .click();

  3. Использование .should() для проверки состояния Можно комбинировать фильтры с проверками:

    cy.get('input')
  .filter(':enabled')
  .should('have.attr', 'placeholder', 'Введите имя');

Комбинирование фильтров

Cypress позволяет создавать цепочки фильтров для точного выбора элементов:

cy.get('ul li')
  .filter(':visible')      // Видимые элементы
  .not('.disabled')        // Исключение заблокированных
  .eq(1)                   // Второй элемент в наборе
  .should('contain.text', 'Сервисы');

Цепочка методов делает тест более читаемым и снижает вероятность ошибок при работе с динамическими DOM-структурами.

Практические советы по фильтрации

  • Использовать селекторы, специфичные для тестов (например, data-cy, data-test) для стабильной фильтрации, так как классы и id могут изменяться.

    cy.get('[data-cy=menu-item]')
  .filter(':visible')
  .should('exist');

  • Избегать выбора элементов по тексту в случае локализации интерфейса, чтобы тесты не ломались при изменении языка.

  • Комбинировать фильтры и проверки состояния для тестирования динамических элементов, таких как модальные окна, выпадающие списки и табы.

Фильтрация коллекций и массивов данных

Cypress позволяет фильтровать массивы объектов, возвращаемые с сервера или получаемые из DOM, с помощью .then().

cy.get('ul li')
  .then(($items) => {
    const filtered = $items.toArray().filter(item => item.textContent.includes('API'));
    expect(filtered.length).to.be.greaterThan(0);
  });

Такой подход необходим, когда стандартные CSS-фильтры не подходят для сложной логики.

Фильтрация элементов в Cypress — это мощный инструмент, который делает тесты точными, стабильными и устойчивыми к изменениям интерфейса. Использование цепочек методов .filter(), .not(), .eq(), .first() и .last(), а также фильтрация по содержимому и состоянию, обеспечивает гибкость при работе с динамическими веб-приложениями.

Оглавление