CSS-селекторы в Cypress

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

Основы использования селекторов

В Cypress поиск элементов выполняется через команду .get(). В качестве аргумента передается строка CSS-селектора:

cy.get('button')          // выбирает все элементы <button>
cy.get('.btn-primary')    // выбирает все элементы с классом btn-primary
cy.get('#login')          // выбирает элемент с id="login"

Важно помнить, что .get() возвращает коллекцию элементов. Если на странице несколько совпадений, можно уточнить выбор с помощью .first(), .last() или .eq(index):

cy.get('.list-item').eq(2)   // выбирает третий элемент с классом list-item

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

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

cy.get('form#login input[type="text"]') // текстовое поле внутри формы с id="login"
cy.get('.menu li.active a')              // ссылка внутри активного элемента списка

Использование комбинированных селекторов сокращает вероятность ложных совпадений и делает тесты более устойчивыми к изменениям DOM.

Атрибутные селекторы

Атрибутные селекторы особенно полезны, когда элементы не имеют уникальных id или классов. Cypress поддерживает все стандартные варианты CSS:

cy.get('[placeholder="Email"]')     // элемент с атрибутом placeholder="Email"
cy.get('[type="checkbox"][name="agree"]')  // элемент с type="checkbox" и name="agree"
cy.get('[data-test-id="submit-btn"]')      // часто используют data-* атрибуты для тестирования

Особое внимание стоит уделять data-* атрибутам. Они позволяют изолировать тесты от изменений внешнего вида и классов, которые могут меняться без влияния на функциональность.

Псевдоклассы и псевдоэлементы

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

cy.get('ul li:first-child')    // первый элемент списка
cy.get('ul li:last-child')     // последний элемент списка
cy.get('ul li:nth-child(2)')   // второй элемент списка
cy.get('input:checked')        // выбранные чекбоксы или радио-кнопки

Использование псевдоклассов делает тесты более выразительными и уменьшает количество лишних селекторов в коде.

Иерархические и контекстные селекторы

Для работы с элементами внутри контейнеров удобно использовать цепочку .find(). Она позволяет ограничить область поиска конкретным родительским элементом:

cy.get('.modal').find('button.close') // кнопка закрытия внутри модального окна
cy.get('form#signup').find('input[name="email"]') // поле email внутри формы регистрации

Отличие .find() от .get() заключается в том, что поиск выполняется только внутри найденного ранее элемента, а не по всему документу.

Фильтрация и уточнение выбора

Cypress предоставляет методы .filter(), .not() и .contains() для дополнительной фильтрации найденных элементов:

cy.get('ul li').filter('.active')       // активные элементы списка
cy.get('ul li').not('.disabled')        // исключаем элементы с классом disabled
cy.contains('button', 'Отправить')     // кнопка с конкретным текстом

.contains() особенно полезен для работы с динамическим контентом, где классы и id могут изменяться, а текст остается стабильным.

Практика устойчивых селекторов

В тестировании крайне важно создавать селекторы, которые будут стабильны при изменении интерфейса. Лучшие практики включают:

  • Использование data-* атрибутов специально для тестов.
  • Избегание селекторов, зависящих от внешнего вида (nth-child, сложные цепочки классов) без необходимости.
  • Минимизация зависимости от структуры DOM, если она часто меняется.

Пример устойчивого селектора:

cy.get('[data-test-id="login-button"]').click()

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

Взаимодействие с элементами через селекторы

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

cy.get('input[name="username"]').type('admin')
cy.get('input[name="password"]').type('12345')
cy.get('button[type="submit"]').click()
cy.get('.notification').should('contain', 'Успешный вход')

Сочетание точных селекторов и проверок состояния обеспечивает надежность автоматизированных тестов.

Резюме по CSS-селекторам в Cypress

  • .get() — основной метод для поиска элементов по селекторам.
  • Атрибутные и data-* селекторы повышают стабильность тестов.
  • Псевдоклассы, цепочки селекторов и контекстные .find() позволяют уточнять выбор.
  • Методы .filter(), .not(), .contains() помогают точно определить нужный элемент.
  • Устойчивые селекторы минимизируют ломку тестов при изменении интерфейса.

Эффективное использование CSS-селекторов в Cypress обеспечивает точное взаимодействие с элементами страницы и повышает надежность автоматизированного тестирования.

Оглавление