Infinite scroll

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

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

Подготовка окружения

Для начала работы с Puppeteer необходимо установить его. Для этого используется npm (Node Package Manager). Убедитесь, что у вас установлен Node.js, после чего выполните команду: 

npm install puppeteer

Эта команда установит библиотеку Puppeteer и все необходимые зависимости для работы с браузером Chromium.

Загрузка страницы с бесконечной прокруткой

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

Пример кода для загрузки страницы с использованием Puppeteer: 

const puppeteer = require(&

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // Переход на страницу с бесконечной прокруткой
  await page.goto('https://example.com/infinite-scroll');

  // Здесь можно добавить дополнительные действия, например, прокрутку страницы

  await browser.close();
})();

Эмуляция прокрутки страницы

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

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

const scrollToBottom = async (page) => {
  await page.evaluate(async () => {
    const distance = 100;  // расстояние для прокрутки
    const delay = 200;  // задержка между прокрутками в миллисекундах

    // Прокручиваем страницу до самого низа
    while (true) {
      const scrollHeight = document.body.scrollHeight;
      window.scrollBy(0, distance);
      
      // Ждем подгрузки новых данных
      await new Promise(resolve => setTimeout(resolve, delay));

      if (document.body.scrollHeight === scrollHeight) {
        break;  // Если высота страницы не изменилась, значит, данные больше не загружаются
      }
    }
  });
};

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

Ожидание загрузки нового контента

Важной частью тестирования бесконечной прокрутки является ожидание, что новые данные были загружены. Это можно сделать с помощью метода waitForSelector(), который будет ожидать появления нового контента на странице. Например, если каждый новый элемент имеет класс .new-item, то можно ждать его появления: 

const waitForNewContent = async (page) => {
  await page.waitForSelector('.new-item', { visible: true });
};

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

Комбинированный пример

Полный пример кода, который включает как прокрутку, так и ожидание загрузки нового контента, выглядит так: 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com/infinite-scroll');

  // Прокручиваем страницу до самого низа
  await scrollToBottom(page);

  // Ожидаем загрузки нового контента
  await waitForNewContent(page);

  console.log('Контент загружен');

  await browser.close();
})();

В этом примере происходит следующее:

  1. Открывается браузер и загружается страница.
  2. Выполняется прокрутка страницы до низа, и данные загружаются.
  3. Затем ждется появление нового элемента, что подтверждает успешную подгрузку контента.

Проверка наличия новых данных

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

Пример проверки: 

const verifyNewContent = async (page) => {
  const items = await page.$$eval('.new-item', elements => elements.map(el => el.textContent));
  
  if (items.length === 0) {
    throw new Error('Новые данные не были загружены');
  }

  console.log('Новые данные:', items);
};

Этот код извлекает текстовое содержимое всех элементов с классом .new-item и проверяет, что такие элементы появились на странице. Если элементы не найдены, будет выброшена ошибка.

Проблемы при тестировании бесконечной прокрутки

Тестирование бесконечной прокрутки может столкнуться с рядом проблем:

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

Завершение теста

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

await browser.close();

Этот шаг завершит выполнение теста и закроет браузер.

Заключение

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

Оглавление