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

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

Основные подходы к выбору элементов

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

  • CSS-селекторы:
cy.get('.button-primary')
cy.get('#main-header')
cy.get('input[name="email"]')
  • По тексту элемента:
cy.contains('Отправить')
  • Комбинированные селекторы:
cy.get('form#login input[name="password"]')

Использование точных и стабильных селекторов повышает надёжность тестов. Рекомендуется избегать выборки по динамическим классам или позициям элементов.

Работа с кликами и взаимодействием

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

  • Одиночный клик:
cy.get('.submit-button').click()
  • Двойной клик:
cy.get('.edit-icon').dblclick()
  • Клик с удержанием клавиши или модификаторами:
cy.get('.link').click({ ctrlKey: true })

Для ввода текста используются методы .type() и .clear():

cy.get('input[name="username"]').clear().type('admin')

Метод .type() поддерживает специальные символы, такие как {enter}, {backspace}, {selectall}, что позволяет эмулировать сложное поведение пользователя.

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

После взаимодействия важно убедиться в корректности результата. Cypress предоставляет методы для проверки видимости, состояния и содержимого:

  • Видимость элемента:
cy.get('.modal').should('be.visible')
  • Состояние чекбоксов и радиокнопок:
cy.get('#accept-terms').should('be.checked')
cy.get('input[name="gender"]').should('not.be.checked')
  • Текстовое содержимое:
cy.get('.notification').should('contain.text', 'Успешно сохранено')

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

Формы — частый объект тестирования. Cypress поддерживает работу с различными типами полей:

  • Текстовые поля и textarea:
cy.get('textarea[name="comment"]').type('Тестовый комментарий')
  • Селекты и dropdown:
cy.get('select#country').select('Россия')
  • Флажки и радиокнопки:
cy.get('input[type="checkbox"]').check()
cy.get('input[type="radio"][value="male"]').check()

Методы .check() и .uncheck() обеспечивают корректное изменение состояния элементов, а Cypress автоматически проверяет события change.

Динамические элементы и ожидания

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

  • Ожидание появления элемента:
cy.get('.loader', { timeout: 10000 }).should('not.exist')
cy.get('.dynamic-item').should('be.visible')
  • Ожидание изменений текста:
cy.get('.status').should('contain.text', 'Загружено')

Методы Cypress автоматически повторяют поиск элементов до истечения таймаута, что исключает необходимость ручных задержек (cy.wait()) в большинстве случаев.

Работа с элементами SVG и canvas

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

  • SVG: клики по конкретным элементам через селекторы cy.get('svg > g > path')
  • Canvas: использование координат клика и сторонних библиотек для симуляции событий мыши:
cy.get('canvas').click(50, 100)

Скроллинг и видимость элементов

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

cy.get('.bottom-button').scrollIntoView().click()

Метод .scrollIntoView() гарантирует, что элемент видим и доступен для взаимодействия.

Снимки и визуальные проверки

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

cy.get('.profile-card').screenshot('profile-card')

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

Резюме основных методов взаимодействия

Действие Метод Cypress
Клик .click()
Двойной клик .dblclick()
Ввод текста .type()
Очистка поля .clear()
Выбор опции в селекте .select()
Отметка чекбокса / радиокнопки .check() / .uncheck()
Проверка видимости .should('be.visible')
Проверка текста .should('contain.text', '...')
Скроллинг к элементу .scrollIntoView()
Снимок элемента .screenshot()

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

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

Оглавление