Работа с пагинацией

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

Идентификация элементов пагинации

Первым шагом является определение элементов пагинации: номера страниц, кнопки «Следующая»/«Предыдущая», и активного элемента. Обычно пагинация имеет вид списка элементов <ul> или <div> с кнопками.

Пример локаторов:

const pageNumbers = element.all(by.css('.pagination li')); // Все номера страниц
const nextButton = element(by.css('.pagination .next')); // Кнопка "Следующая"
const prevButton = element(by.css('.pagination .prev')); // Кнопка "Предыдущая"
const activePage = element(by.css('.pagination li.active')); // Активная страница

Ключевой момент: использование element.all возвращает коллекцию элементов, с которой можно работать методом each, get(index) или filter.

Навигация по страницам

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

Пример перехода на следующую страницу:

await nextButton.click();
await browser.wait(ExpectedConditions.stalenessOf(activePage), 5000); // Ожидание обновления страницы
const newActivePage = element(by.css('.pagination li.active'));
expect(await newActivePage.getText()).toEqual('2');

Важно: при работе с Angular-приложениями Protractor автоматически ждёт завершения асинхронных операций, но для элементов, которые обновляются через AJAX, часто требуется явное ожидание через ExpectedConditions.

Проверка контента каждой страницы

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

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

const items = element.all(by.css('.item-list .item'));
expect(await items.count()).toBeLessThanOrEqual(10); // Проверка лимита на странице
const firstItemText = await items.first().getText();
expect(firstItemText).toContain('Элемент'); // Проверка текста первого элемента

Совет: лучше использовать await для каждой асинхронной операции, чтобы избежать ошибок синхронизации.

Динамическая пагинация

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

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

const pages = await pageNumbers.count();

for (let i = 0; i < pages; i++) {
    await pageNumbers.get(i).click();
    await browser.wait(ExpectedConditions.stalenessOf(activePage), 5000);
    const itemsOnPage = await element.all(by.css('.item-list .item')).count();
    expect(itemsOnPage).toBeGreaterThan(0);
}

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

Работа с кнопками «Следующая» и «Предыдущая»

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

Пример проверки всех страниц через «Следующая»:

while (await nextButton.isPresent() && await nextButton.isEnabled()) {
    await nextButton.click();
    await browser.wait(ExpectedConditions.stalenessOf(activePage), 5000);
}

Аналогично можно использовать prevButton для проверки обратной навигации.

Особенность: в некоторых интерфейсах кнопка «Следующая» может быть отключена (disabled) на последней странице. Использование isEnabled() позволяет безопасно завершить цикл.

Обработка асинхронных данных

Пагинация часто связана с динамическим подгрузом данных через AJAX. Protractor требует корректного ожидания завершения запросов, чтобы тесты не ломались. Основные методы:

browser.wait(ExpectedConditions.stalenessOf(element), timeout) — ожидание исчезновения старого элемента;
browser.wait(ExpectedConditions.presenceOf(element), timeout) — ожидание появления нового элемента;
browser.sleep(milliseconds) — резервный вариант, использовать минимально.

Использование правильных ожиданий повышает стабильность тестов и предотвращает ложные ошибки.

Примеры комбинаций проверки

Проверка перехода на конкретную страницу и контента:

await pageNumbers.get(2).click(); // Переход на 3-ю страницу
await browser.wait(ExpectedConditions.presenceOf(activePage), 5000);
const active = await activePage.getText();
expect(active).toEqual('3');

Проверка всех страниц через номера:

for (let i = 0; i < await pageNumbers.count(); i++) {
    await pageNumbers.get(i).click();
    const items = await element.all(by.css('.item-list .item')).count();
    expect(items).toBeGreaterThan(0);
}

Проверка кнопок «Следующая» и «Предыдущая»:

while (await nextButton.isEnabled()) {
    await nextButton.click();
    await browser.wait(ExpectedConditions.stalenessOf(activePage), 5000);
}
while (await prevButton.isEnabled()) {
    await prevButton.click();
    await browser.wait(ExpectedConditions.stalenessOf(activePage), 5000);
}