scrollTo

Прокрутка до определённой позиции.

Синтаксис

cy.scrollTo(position)
cy.scrollTo(x, y)
cy.scrollTo(position, options)
cy.scrollTo(x, y, options)

  // ---or---

  .scrollTo(position)
  .scrollTo(x, y)
  .scrollTo(position, options)
  .scrollTo(x, y, options)

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

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

cy.scrollTo(0, 500) // Scroll the window 500px down
cy.get('.sidebar').scrollTo('bottom') // Scroll 'sidebar' to its bottom

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

cy.title().scrollTo('My App') // Errors, 'title' does not yield DOM element

Аргументы

position (Строка)

Указанная позиция для прокрутки окна или элемента. Допустимые позиции — topLeft, top, topRight, left, center, right, bottomLeft, bottom, и bottomRight.

x (Число, Строка)

Расстояние в пикселях от левой стороны окна/элемента или процент от ширины окна/элемента для прокрутки.

y (Число, Строка)

Расстояние в пикселях от верхней стороны окна/элемента или процент от высоты окна/элемента для прокрутки.

options (Объект)

Передайте объект options, чтобы изменить поведение по умолчанию cy.scrollTo().

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

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

Примеры

Позиция

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

cy.scrollTo('bottom')

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

cy.get('#movies-list').scrollTo('center')

Координаты

Прокрутка на 500 пикселей вниз по списку

cy.get('#infinite-scroll-list').scrollTo(0, 500)

Прокрутка окна на 500 пикселей вправо

cy.scrollTo('500px')

Прокрутка на 25% вниз по высоте элемента

cy.get('.user-photo').scrollTo('0%', '25%')

Опции

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

cy.get('.documentation').scrollTo('top', { easing: 'linear' })

Прокрутка вправо за 2000 мс

cy.get('#slider').scrollTo('right', { duration: 2000 })

Не выводить ошибку, если элемент не прокручивается

Допустим, мы не знаем, прокручивается ли наш table элемент. Иногда table может быть прокручиваемым (с 2000 строками), а иногда table может не быть прокручиваемым (с 5 строками). Вы можете игнорировать проверку на прокручиваемость элемента, передав ensureScrollable: false.

// will move on to next command even if table is not scrollable
cy.get('table').scrollTo('bottom', { ensureScrollable: false })
cy.get('table').find('tr:last-child').should('be.visible')

Примечания

Действия

cy.scrollTo() — это «команда действия», которая следует всем правилам действия.

Области

cy.scrollTo() ведет себя по-разному, в зависимости от того, начинает ли она серию команд или присоединяется к существующей.

При запуске серии команд:

Это прокручивает window.

cy.scrollTo('bottom')

При присоединении к существующей серии команд:

Это прокрутит <#checkout-items> элемент.

cy.get('#checkout-items').scrollTo('right')

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

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

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

Правила

Требования

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

Таймауты

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

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

Прокрутите до нижней части окна, затем прокрутите элемент вправо

cy.scrollTo('bottom')
cy.get('#scrollable-horizontal').scrollTo('right')

Вышеперечисленные команды будут отображаться в журнале команд следующим образом:

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

История

См. также

• .scrollIntoView()