waitForNavigation

Метод waitForNavigation является одним из ключевых инструментов в арсенале тестировщика, работающего с Puppeteer. Его основная задача — обеспечить синхронизацию с процессом навигации на веб-странице. Навигация может быть связана с переходом на новый URL, загрузкой новой страницы или изменения контента через JavaScript. Этот метод помогает обеспечить, что нужная страница или ресурс полностью загрузился и доступен для дальнейших действий.

Описание метода

await page.waitForNavigation([options]);

Метод waitForNavigation ожидает завершения навигации, прежде чем выполнение теста продолжится. Это критично, поскольку многие действия на страницах зависят от успешной загрузки всех ресурсов и элементов DOM. Параметр options позволяет настроить поведение ожидания.

Параметры метода

Метод принимает один необязательный аргумент — объект options, который позволяет уточнить, какие конкретно виды навигации должны быть отслежены. Рассмотрим основные опции:

• waitUntil: Этот параметр указывает момент, когда следует завершить ожидание. По умолчанию Puppeteer ожидает, что событие load будет зафиксировано. Однако можно настроить его на другие события, такие как:

  • ‘load’: ожидает полной загрузки страницы, включая все изображения, стили и другие ресурсы.
  • ‘domcontentloaded’: ожидает завершения загрузки DOM, но не ждет загрузки изображений или стилей.
  • ‘networkidle0’: ожидает, пока не будет активных сетевых запросов (в течение 500 мс).
  • ‘networkidle2’: аналогично, но ожидает до тех пор, пока не завершится два активных сетевых запроса.

Пример использования:

await page.waitForNavigation({ waitUntil: &


timeout: Устанавливает максимальное время ожидания в
миллисекундах. Если навигация не завершится в пределах этого времени,
будет выброшена ошибка. По умолчанию этот параметр равен 30,000 мс (30
секунд). Можно изменить его на более низкое значение, если ожидается
быстрый переход или если хочется ускорить тесты.



Пример:

await page.waitForNavigation({ timeout: 10000 });

Пример использования


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


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

// Клик по ссылке
await page.click('#loginButton');

// Ожидание завершения навигации
await page.waitForNavigation({ waitUntil: 'networkidle0' });

// Теперь можно выполнять дальнейшие действия, например, проверку URL
const url = page.url();
expect(url).toBe('https://example.com/dashboard');

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


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


Если в SPA навигация происходит через изменение хеш-сегмента URL или
асинхронное обновление контента, waitForNavigation может не
сработать в стандартной форме. В таких случаях предпочтительнее
использовать методы вроде waitForSelector или
waitForFunction, чтобы дождаться появления нового контента.


Пример для SPA:

// Клик по кнопке, которая изменяет URL или контент
await page.click('#updatePageButton');

// Ожидание появления нового элемента на странице после навигации
await page.waitForSelector('.new-page-content');

Исключения и обработка ошибок


waitForNavigation может выбрасывать ошибку в случае
тайм-аута или если навигация не произошла по другой причине (например,
сеть не ответила). Чтобы обработать такие исключения, можно использовать
блоки try-catch.


Пример обработки ошибки:

try {
  await page.waitForNavigation({ timeout: 5000 });
} catch (error) {
  console.error('Ошибка навигации:', error);
}

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


Использование в связке с другими методами


Метод waitForNavigation часто используется в паре с другими
методами, такими как click или goto. Например,
при клике на кнопку или ссылку, которая инициирует переход на другую
страницу, использование waitForNavigation позволяет
синхронизировать действия с состоянием страницы.


Пример с goto:

await page.goto('https://example.com');

// Ожидание завершения навигации
await page.waitForNavigation({ waitUntil: 'load' });

// Далее проверка контента страницы
const title = await page.title();
expect(title).toBe('Example Domain');

Практические советы




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




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




Сложные навигации: в случае сложных SPA-процессов
используйте waitForSelector или
waitForFunction, чтобы контролировать появление нужных
элементов или данных на странице.




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




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