Пагинация

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

Основы работы с пагинацией

Для того чтобы эффективно тестировать пагинацию, необходимо понимать, как она устроена в интерфейсе приложения. Пагинация обычно представлена как набор ссылок или кнопок (например, “Следующая страница”, “Предыдущая страница”, “1, 2, 3…”), которые позволяют пользователю перемещаться по данным.

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

Логика тестирования пагинации с Puppeteer

  1. Выбор элементов пагинации Первым шагом в тестировании пагинации будет выбор нужных элементов. В большинстве случаев это будет кнопки или ссылки, имеющие классы, идентификаторы или другие уникальные атрибуты. Например, кнопки “Следующая” и “Предыдущая” могут иметь атрибуты, такие как data-testid=“next-page” или data-testid=“prev-page”.

    Пример кода для поиска кнопок: 

    const nextButton = await page.$(&
const prevButton = await page.$('[data-testid="prev-page"]');

  2. Клик по элементам пагинации После того как элементы найдены, нужно симулировать клики по ним. Puppeteer позволяет использовать методы click() для взаимодействия с элементами.

    Пример кода для клика по кнопке “Следующая”: 

    await nextButton.click();

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

    Пример ожидания загрузки данных: 

    await page.waitForSelector('.data-loaded');

  4. Проверка изменения контента Важно не только нажать на кнопки пагинации, но и убедиться, что данные на странице изменились. Это можно проверить с помощью метода evaluate(), который позволяет взаимодействовать с DOM-деревом страницы.

    Пример проверки изменения данных: 

    const pageContent = await page.evaluate(() => {
  return document.querySelector('.data-container').innerText;
});

// Проверка, что данные обновились
if (pageContent.includes("Новое содержимое")) {
  console.log("Пагинация работает корректно.");
} else {
  console.log("Ошибка при обновлении данных.");
}

Тестирование разных типов пагинации

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

  1. Стандартная пагинация с номерами страниц В этом случае пагинация представлена списком числовых ссылок, например: «1», «2», «3» и так далее. Важно проверить, что переход между страницами происходит корректно и данные отображаются в соответствии с номером страницы.

    Пример клика по номеру страницы: 

    const pageNumber = 3;
const pageLink = await page.$(`[data-testid="page-${pageNumber}"]`);
await pageLink.click();

  2. Пагинация с кнопками “Следующая” и “Предыдущая” Это распространённый подход для пагинации. В этом случае важно проверить, что кнопки “Следующая” и “Предыдущая” корректно работают при достижении конца списка и при возврате на предыдущие страницы.

    Пример тестирования кнопок: 

    // Клик по кнопке "Следующая"
await nextButton.click();
await page.waitForSelector('.data-loaded');

// Клик по кнопке "Предыдущая"
await prevButton.click();
await page.waitForSelector('.data-loaded');

  3. Бесконечная прокрутка Некоторые веб-приложения используют бесконечную прокрутку вместо стандартной пагинации. В этом случае данные подгружаются по мере прокрутки страницы вниз. Тестирование бесконечной прокрутки в Puppeteer можно выполнить, прокручивая страницу с помощью метода page.mouse.wheel().

    Пример кода для прокрутки страницы: 

    await page.mouse.wheel({ deltaY: 500 });
await page.waitForSelector('.new-data-loaded');

Проверка функциональности пагинации

После выполнения кликов по элементам пагинации важно проверить несколько моментов:

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

  2. Обновление UI-элементов пагинации Проверка, что кнопки “Следующая” и “Предыдущая” становятся активными или неактивными в зависимости от состояния страницы (например, кнопка “Предыдущая” на первой странице должна быть неактивной).

    Пример проверки активности кнопки: 

    const isNextButtonDisabled = await nextButton.evaluate(button => button.disabled);
const isPrevButtonDisabled = await prevButton.evaluate(button => button.disabled);

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

Обработка ошибок и асинхронные проблемы

В процессе тестирования пагинации важно учитывать возможные ошибки, такие как отсутствие элементов на странице, неправильное поведение кнопок или проблемы с загрузкой данных. Puppeteer предоставляет множество инструментов для обработки ошибок и асинхронных операций, таких как try-catch, Promise.all и page.waitForTimeout() для управления временем ожидания.

Пример использования try-catch для обработки ошибок: 

try {
  await nextButton.click();
  await page.waitForSelector('.data-loaded');
} catch (error) {
  console.log("Ошибка при клике на кнопку пагинации:", error);
}

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

По завершению тестирования пагинации важно корректно завершить работу с браузером, чтобы очистить ресурсы и избежать утечек памяти. Puppeteer предоставляет метод browser.close(), который закрывает браузерное окно.

Пример закрытия браузера: 

await browser.close();

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

Оглавление