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

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

Основные методы скроллинга

  1. Использование page.evaluate() с JavaScript Самый простой способ выполнить скроллинг — это использовать метод evaluate(), который позволяет выполнять JavaScript-код на странице. В этом случае скроллинг можно выполнить через стандартный метод window.scrollTo().

    Пример: 

    await page.evaluate(() => {
    window.scrollTo(0, document.body.scrollHeight);
});

    В этом примере страница прокручивается до самого низа. Первый аргумент функции scrollTo() — это горизонтальная прокрутка, а второй — вертикальная. Использование document.body.scrollHeight позволяет прокрутить страницу на полную высоту.

  2. Плавный скроллинг с использованием page.evaluate() Для более плавного и естественного скроллинга можно использовать метод window.scrollBy(). Он позволяет прокручивать страницу на заданное количество пикселей, что даёт возможность создавать эффект плавного скроллинга. Чтобы эмулировать поведение пользователя, можно добавлять небольшие задержки между шагами.

    Пример: 

    await page.evaluate(() => {
    let distance = 100; // Прокрутка на 100px за раз
    let delay = 100; // Задержка в 100ms
    let scrollHeight = document.body.scrollHeight;
    let scrolled = 0;

    function scroll() {
        if (scrolled < scrollHeight) {
            window.scrollBy(0, distance);
            scrolled += distance;
            setTimeout(scroll, delay);
        }
    }
    scroll();
});

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

  3. Прокрутка с использованием page.mouse.wheel() Puppeteer позволяет эмулировать прокрутку мышью с помощью метода mouse.wheel(). Это может быть полезно для тестирования функционала, который зависит от событий колесика мыши. Этот метод позволяет указать направление и количество прокрученных пикселей.

    Пример: 

    await page.mouse.wheel({ deltaY: 100 });

    В этом примере мы прокручиваем страницу на 100 пикселей вниз. Параметр deltaY отвечает за вертикальное направление прокрутки. Отрицательные значения deltaY прокручивают страницу вверх, а положительные — вниз.

Скроллинг до элемента

В случае, когда необходимо прокрутить страницу до конкретного элемента (например, для его визуального тестирования), можно использовать метод page.$eval()</code>. Этот метод позволяет найти элемент и прокрутить страницу до его позиции.</p> <p>Пример:</p> <pre class="javascript"><code>await page.$eval(& element.scrollIntoView(); });

Метод scrollIntoView() заставляет браузер прокрутить страницу до того места, где находится элемент с идентификатором #elementId. Этот подход полезен, если нужно убедиться, что элемент виден на экране и доступен для взаимодействия.

Проверка контента после скроллинга

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

Для этого можно использовать метод page.waitForSelector(), который будет ожидать появления определенного элемента на странице после скроллинга.

Пример: 

await page.evaluate(() => {
    window.scrollTo(0, document.body.scrollHeight);
});
await page.waitForSelector('.new-content', { visible: true });

Здесь после прокрутки страницы в конец тестируем, что новый элемент с классом .new-content стал видимым.

Прокрутка с фиксированным временем ожидания

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

Пример: 

await page.evaluate(() => {
    window.scrollTo(0, document.body.scrollHeight);
});
await page.waitForTimeout(2000); // Задержка в 2 секунды

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

Прокрутка при помощи клавиш клавиатуры

Некоторые страницы поддерживают прокрутку с помощью клавиш клавиатуры, например, клавиши «Page Down» или стрелки вниз. В Puppeteer можно имитировать нажатия клавиш с помощью метода page.keyboard.press().

Пример: 

await page.keyboard.press('PageDown');

Этот метод позволяет эмулировать поведение пользователя, который использует клавиши для прокрутки страницы.

Скроллинг с ограничениями

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

Пример: 

const elementHandle = await page.$('.scrollable-container');
await elementHandle.evaluate((el) => {
    el.scrollTop = el.scrollHeight;
});

Здесь скроллинг выполняется внутри элемента с классом .scrollable-container, что позволяет управлять прокруткой только в пределах этого контейнера.

Скроллинг в тестах с асинхронной загрузкой данных

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

Пример: 

let isMoreContentAvailable = true;
while (isMoreContentAvailable) {
    await page.evaluate(() => {
        window.scrollBy(0, window.innerHeight);
    });
    await page.waitForTimeout(1000); // Ожидание загрузки контента
    isMoreContentAvailable = await page.$('.load-more-button') !== null;
}

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

Советы по производительности

  1. Минимизация количества прокруток. Каждый прокрутка вызывает перерисовку страницы, что может снизить производительность. Для ускорения тестов рекомендуется минимизировать количество операций прокрутки.
  2. Использование waitForSelector(). Использование метода waitForSelector() после скроллинга помогает убедиться, что все элементы загружены и страница полностью подготовлена к следующему действию.
  3. Управление задержками. Время задержки между прокрутками важно для правильной симуляции работы пользователя, но также следует избегать ненужных задержек, чтобы ускорить выполнение тестов.

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

Оглавление