scrollIntoView

Прокрутить элемент в область видимости.

Синтаксис

.scrollIntoView()
.scrollIntoView(options)

Использование

Правильное использование

cy.get('footer').scrollIntoView() // Scrolls 'footer' into view

Неправильное использование

cy.scrollIntoView('footer') // Errors, cannot be chained off 'cy'
cy.window().scrollIntoView() // Errors, 'window' does not yield DOM element

Аргументы

options (Объект)

Передайте объект options, чтобы изменить стандартное поведение .scrollIntoView().

Опция	Значение по умолчанию	Описание
`duration`	`0`	Прокручивает за указанное время (в мс)
`easing`	`swing`	Будет прокручивать с анимацией плавного перехода
`log`	`true`	Отображает команду в журнале команд
`offset`	`{top: 0, left: 0}`	Сдвиг после того, как элемент был прокручен в область видимости
`timeout`	`defaultCommandTimeout`	Время ожидания `.scrollIntoView()` для разрешения перед выходом из строя таймера

Возвращаемое значение

.scrollIntoView() возвращает тот же объект, который был передан предыдущей командой.

Примеры

Прокрутка

cy.get('button#checkout').scrollIntoView().should('be.visible')

Опции

Использование линейной анимации плавного перехода при прокрутке

cy.get('.next-page').scrollIntoView({ easing: 'linear' })

Прокрутка к элементу за 2000 мс

cy.get('footer').scrollIntoView({ duration: 2000 })

Прокрутка на 150 пикселей ниже элемента

cy.get('#nav').scrollIntoView({ offset: { top: 150, left: 0 } })

Примечания

Снимки экрана

Снимки экрана не отражают поведение прокрутки

Cypress не отражает точные позиции прокрутки элементов в снимках экрана. Если вы хотите увидеть реальное поведение прокрутки, рекомендуется использовать .pause() для пошагового выполнения каждой команды или просмотр видео записи выполнения теста.

Правила

Требования

.scrollIntoView() требует, чтобы она была связана с командой, которая возвращает DOM-элемент(ы).

Утверждения

.scrollIntoView() автоматически будет ждать, пока пройдут утверждения, к которым она привязана

Таймауты

.scrollIntoView() может выйти из строя, ожидая завершения утверждений, которые вы добавили.

Журнал команд

Утверждение, что элемент видим после прокрутки в область видимости

cy.get('#scroll-horizontal button').scrollIntoView().should('be.visible')

Вышеуказанные команды отобразятся в журнале команд как:

При нажатии на команду scrollintoview в журнале команд, консоль выведет следующее:

См. также

cy.scrollTo()