Скроллинг страницы

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

Методы прокрутки

Cypress использует метод scrollTo для управления скроллингом. Он позволяет прокрутить страницу до конкретного положения или элемента. Основной синтаксис:

cy.scrollTo(x, y, options)
cy.scrollTo(position, options)
cy.get(selector).scrollTo(position, options)
  • x и y — координаты по горизонтали и вертикали в пикселях.
  • position — строковое значение ('top', 'bottom', 'center', 'left', 'right').
  • options — объект с дополнительными параметрами, например, { duration: 1000, easing: 'linear' }.

Пример прокрутки страницы до конца:

cy.scrollTo('bottom', { duration: 500 });

Прокрутка до конкретного элемента:

cy.get('#footer').scrollIntoView({ duration: 1000, easing: 'swing' });

Метод scrollIntoView отличается от scrollTo тем, что ориентирован на конкретный DOM-элемент и автоматически вычисляет его позицию.

Взаимодействие с элементами вне видимой области

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

cy.get('.lazy-load-button')
  .scrollIntoView()
  .should('be.visible')
  .click();

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

Контроль плавности прокрутки

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

cy.scrollTo('bottom', { duration: 1500, easing: 'linear' });
  • duration задает длительность анимации в миллисекундах.
  • easing определяет функцию плавности ('linear', 'swing' и другие).

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

Проверка позиции скролла

Иногда важно не просто прокрутить, а проверить текущее положение страницы. Cypress позволяет получить доступ к объекту window и свойству scrollY:

cy.window().then((win) => {
  expect(win.scrollY).to.be.greaterThan(500);
});

Это особенно полезно для тестов ленивой загрузки, когда появление нового контента зависит от конкретной позиции скролла.

Скроллинг внутри контейнеров

Многие веб-приложения используют прокручиваемые контейнеры (overflow: scroll). В таких случаях прокрутка страницы не затрагивает элементы внутри контейнера, поэтому используется:

cy.get('.scrollable-container')
  .scrollTo('bottom')
  .find('.load-more')
  .should('be.visible')
  .click();

Метод работает аналогично scrollTo для страницы, но привязан к выбранному контейнеру.

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

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

function scrollAndLoad() {
  cy.scrollTo('bottom');
  cy.get('.new-item', { timeout: 10000 }).should('exist');
}

scrollAndLoad();
scrollAndLoad();

Циклическая прокрутка позволяет тестировать функциональность «ленивой» загрузки, проверяя, что новые элементы появляются корректно.

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

  • Всегда использовать scrollIntoView для работы с элементами вне видимой области.
  • Для длинных анимаций и ленивой загрузки задавать duration и easing.
  • При работе с контейнерами прокрутку применять к контейнеру, а не к странице.
  • Проверять позицию скролла через window.scrollY или свойства контейнера для ассертов.
  • Не забывать о возможных фиксированных шапках или баннерах — они могут перекрывать элементы после прокрутки.

Совместимость с другими командами Cypress

Скроллинг хорошо сочетается с большинством команд Cypress:

  • click(), type(), check(), select() — нужно прокручивать к элементу перед взаимодействием.
  • should('be.visible') — подтверждает, что элемент доступен после прокрутки.
  • Ассерты на количество или состояние элементов — можно комбинировать с последовательной прокруткой для динамического контента.

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

Оглавление