Скролл страницы и элементов

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

Скролл всей страницы

Для прокрутки страницы используются команды browser.execute с JavaScript. Простейший способ — скролл до верхней или нижней части страницы:

// Скролл до низа страницы
browser.execute(() => {
    window.scrollTo(0, document.body.scrollHeight);
});

// Скролл до верха страницы
browser.execute(() => {
    window.scrollTo(0, 0);
});

Особенности:

  • Метод window.scrollTo(x, y) позволяет задавать абсолютные координаты.
  • Для плавной прокрутки можно использовать опцию { beh * avior: 'smooth' }:
browser.execute(() => {
    window.scrollTo({ top: document.body.scrollHeight, beh * avior: 'smooth' });
});

Скролл к элементу

WebdriverIO предоставляет метод scrollIntoView для прокрутки конкретного элемента до видимой области экрана:

const element = $('#targetElement');
element.scrollIntoView();

Дополнительные возможности:

  • Можно задать направление, с помощью параметра block:
element.scrollIntoView({ block: 'center', inline: 'nearest' });
  • block: 'start' — элемент будет сверху экрана
  • block: 'center' — элемент окажется по центру
  • block: 'end' — элемент окажется внизу экрана

Параметр inline управляет горизонтальной прокруткой: 'start', 'center', 'end', 'nearest'.

Скролл по координатам

Иногда требуется прокрутка на определённое количество пикселей относительно текущего положения:

// Скролл вниз на 200px
browser.execute(() => {
    window.scrollBy(0, 200);
});

// Скролл вверх на 150px
browser.execute(() => {
    window.scrollBy(0, -150);
});

Метод window.scrollBy(x, y) удобен для постепенной прокрутки длинных страниц или при реализации скролла “до появления элемента”.

Скролл внутри элементов с overflow

Если элемент имеет overflow: scroll или overflow: auto, прокрутка всего окна не влияет на его содержимое. Для таких случаев применяется scrollTop или scrollLeft:

const container = $('#scrollableContainer');
browser.execute((el) => {
    el.scrollTop = el.scrollHeight;
}, container);
  • scrollTop — вертикальная прокрутка
  • scrollLeft — горизонтальная прокрутка

Можно комбинировать с scrollIntoView, если элемент находится внутри прокручиваемого блока:

const innerElement = $('#innerElement');
innerElement.scrollIntoView({ block: 'center' });

Автоматический скролл при динамической подгрузке контента

На страницах с ленивой загрузкой (lazy loading) часто требуется скроллить до конца, чтобы загрузился весь контент. Пример цикла скролла до конца страницы:

let lastHeight = 0;
let currentHeight = browser.execute(() => document.body.scrollHeight);

while (currentHeight > lastHeight) {
    browser.execute(() => window.scrollTo(0, document.body.scrollHeight));
    browser.pause(1000); // ожидание подгрузки
    lastHeight = currentHeight;
    currentHeight = browser.execute(() => document.body.scrollHeight);
}

Замечания:

  • browser.pause необходим для ожидания асинхронной подгрузки контента.
  • Цикл завершится, когда высота страницы перестанет увеличиваться.

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

Для надёжного клика или ввода данных в элементы, которые не видны на экране, необходимо прокрутить их в область видимости:

const button = $('#loadMoreButton');
button.scrollIntoView({ block: 'center' });
button.click();

Без скролла многие драйверы возвращают ошибку element not interactable.

Скролл с использованием Actions API

WebdriverIO поддерживает низкоуровневый скролл через actions, что полезно для сложных сценариев:

browser.performActions([{
    type: 'pointer',
    id: 'finger1',
    parameters: { pointerType: 'touch' },
    actions: [
        { type: 'pointerMove', x: 100, y: 500 },
        { type: 'pointerDown', button: 0 },
        { type: 'pointerMove', x: 100, y: 100, duration: 500 },
        { type: 'pointerUp', button: 0 }
    ]
}]);

browser.releaseActions();

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

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

  • Для тестов стабильнее использовать scrollIntoView, чем жёсткие координаты.
  • При работе с динамическим контентом полезно проверять изменение scrollHeight и добавлять небольшие паузы.
  • Прокрутка внутри контейнеров требует передачи элемента в execute и работы с его scrollTop/scrollLeft.
  • Использование Actions API оправдано для мобильных сценариев или сложной анимации.

Скроллинг — фундаментальная часть взаимодействия с интерфейсом, особенно на современных длинных страницах и SPA-приложениях. Правильная стратегия скролла повышает стабильность и точность автоматизированных тестов.

Оглавление