Ожидание навигации и загрузки страницы

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

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

Ожидание навигации

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

Метод page.goto() используется для перехода на новый URL, но часто необходимо подождать, пока страница полностью загрузится после перехода. В Playwright для этого можно использовать page.waitForNavigation().

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

const { webkit } = require('playwright');

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

  // Нажатие на ссылку, которая ведет на новую страницу
  await Promise.all([
    page.waitForNavigation({ waitUntil: 'load' }), // Ждем загрузки новой страницы
    page.click('a[href="https://example.com/next"]')
  ]);

  console.log('Навигация завершена');
  await browser.close();
})();

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

Типы ожидания

Метод waitForNavigation() принимает несколько параметров, позволяющих точнее настроить ожидание:

  • waitUntil: указывает на событие, по которому нужно завершить ожидание. Возможные значения:

    • 'load': ждёт, пока загружается весь HTML и ресурсы страницы.
    • 'domcontentloaded': ждёт, пока DOM будет полностью построен (событие DOMContentLoaded).
    • 'networkidle': ждёт, пока сеть не будет активно использоваться. Это значит, что не будет происходить запросов в течение определённого времени.

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

await page.goto('https://example.com', { waitUntil: 'networkidle' });

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

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

Кроме навигации, важно учитывать время, необходимое для загрузки всех ресурсов страницы — изображений, скриптов и стилей. В Playwright есть метод page.waitForLoadState(), который позволяет контролировать, когда страница полностью готова.

Метод waitForLoadState() также имеет параметр state, который может принимать одно из следующих значений:

  • ‘load’: страница загружена, все ресурсы загружены, включая изображения.
  • ‘domcontentloaded’: DOM-дерево готово, но ресурсы могут ещё загружаться.
  • ‘networkidle’: нет активных сетевых запросов.
await page.goto('https://example.com');
await page.waitForLoadState('networkidle'); // Ожидаем завершения всех сетевых запросов

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

Ожидание завершения асинхронных действий

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

Пример использования ожидания асинхронных событий:

await page.click('button#load-more');
await page.waitForResponse(response => response.url().includes('/api/load-more') && response.status() === 200);

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

Важность правильного таймаута

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

Пример задания таймаута:

await page.waitForNavigation({ waitUntil: 'load', timeout: 5000 }); // Максимум 5 секунд на ожидание

Если событие не произойдёт в течение указанного времени, будет выброшена ошибка. Правильный выбор таймаута зависит от скорости работы сайта и специфики теста.

Ожидание изменения состояния URL

Во многих случаях важно не просто дождаться полной загрузки страницы, но и проверить, что URL изменился как ожидается. Playwright позволяет ожидать изменений в URL через метод page.waitForURL().

Пример:

await page.click('button#submit');
await page.waitForURL('https://example.com/success');

Этот метод полезен, если тестируемое приложение изменяет URL после выполнения действия (например, перенаправление или изменение состояния страницы).

Ожидание с использованием дополнительных условий

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

Пример ожидания появления элемента:

await page.click('button#submit');
await page.waitForSelector('.result', { state: 'attached' });

Здесь state: 'attached' указывает, что тест должен дождаться появления элемента на странице. Также доступны следующие состояния:

  • ‘attached’: элемент добавлен в DOM.
  • ‘visible’: элемент стал видимым.
  • ‘hidden’: элемент скрыт.
  • ‘detached’: элемент удалён из DOM.

Заключение

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

Оглавление