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

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

Селекторы Cypress

Cypress использует селекторы, основанные на CSS, тексте, атрибутах и XPath (через сторонние плагины). Основные методы поиска элементов:

  • cy.get(selector) – выбор элементов по CSS-селектору. Возвращает один или несколько элементов, соответствующих селектору.

    cy.get('.btn-primary').click();

  • cy.contains(content) – поиск элемента по текстовому содержимому.

    cy.contains('Submit').click();

  • cy.find(selector) – поиск элементов внутри уже найденного элемента.

    cy.get('.form').find('input[name="email"]').type('test@example.com');

  • cy.get(selector).within(callback) – ограничение поиска внутри конкретного блока DOM.

    cy.get('.modal').within(() => {
  cy.get('input').type('Hello');
  cy.contains('Save').click();
});

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

Для стабильности тестов рекомендуется использовать data-атрибуты (data-cy, data-test, data-testid). Они позволяют изолировать тесты от изменений внешнего вида страницы.

cy.get('[data-cy=login-button]').click();
cy.get('[data-test="user-email"]').type('user@example.com');
  • Плюсы: тесты менее подвержены поломке при редизайне.
  • Минусы: требуется поддержка атрибутов в разметке.

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

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

cy.get('.nav > ul > li.active > a').should('have.text', 'Home');

Можно комбинировать атрибуты и псевдоклассы:

cy.get('input[type="checkbox"]:checked[data-cy=terms]').should('exist');

Асинхронность и ожидание элементов

Cypress автоматически повторяет поиск элементов до заданного таймаута (по умолчанию 4 секунды), что упрощает работу с динамическим контентом.

cy.get('.loader', { timeout: 10000 }).should('not.exist');
cy.get('.item').should('have.length.greaterThan', 0);

Методы .should() и .then() позволяют контролировать состояние найденных элементов и выполнять действия после их появления.

Поиск элементов по тексту

Метод cy.contains() подходит для кнопок, ссылок и других элементов с текстовым содержимым. Можно уточнить тип элемента:

cy.contains('button', 'Submit').click();
cy.contains('h1', 'Welcome');

Работа с родительскими и дочерними элементами

Cypress предоставляет методы для перемещения по DOM-иерархии:

  • parent() – получение родительского элемента
  • children() – получение прямых дочерних элементов
  • siblings() – получение соседних элементов
  • closest(selector) – поиск ближайшего родителя, соответствующего селектору
cy.get('.child').parent().should('have.class', 'container');
cy.get('.item').siblings().should('have.length', 3);

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

Метод filter() позволяет уточнять выборку:

cy.get('.list li').filter('.active').should('have.length', 1);

Метод first() и last() помогают работать с крайними элементами:

cy.get('.carousel img').first().should('be.visible');
cy.get('.carousel img').last().should('have.attr', 'alt', 'Last Image');

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

  • Для стабильных тестов использовать data-атрибуты вместо классов.
  • Ограничивать поиск внутри контейнеров, чтобы избежать конфликтов.
  • Комбинировать методы поиска и фильтрации для точного выбора элементов.
  • Использовать таймауты для динамических страниц и AJAX-загрузок.
  • Предпочитать методы Cypress (cy.get, cy.contains) перед чистым document.querySelector, чтобы сохранить преимущества автоматического ожидания.

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

Оглавление