События навигации

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

Основные события навигации

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

  • ‘load’ — Срабатывает, когда страница полностью загружена, включая все ресурсы, такие как изображения, стили и скрипты.
  • ‘domcontentloaded’ — Срабатывает, когда документ HTML полностью загружен и обработан, но другие ресурсы, такие как изображения и стили, могут еще загружаться.
  • ‘networkidle’ — Срабатывает, когда в течение указанного времени не происходят сетевые запросы. Это полезно для определения, когда страница стала «тихой» и больше не выполняет активных запросов.

Отслеживание событий навигации

Для того чтобы отслеживать события, связанные с навигацией, Playwright предоставляет возможности подписки на события, такие как page.on('load'), page.on('domcontentloaded'), и другие.

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

(async () => {
  const browser = await webkit.launch();
  const page = await browser.newPage();

  page.on('load', () => {
    console.log('Страница загружена');
  });

  page.on('domcontentloaded', () => {
    console.log('DOM полностью загружен');
  });

  page.on('networkidle', () => {
    console.log('Сеть стала бездействующей');
  });

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

В приведенном примере события load, domcontentloaded и networkidle отслеживаются и выводят соответствующие сообщения, как только срабатывает каждое из них.

Управление навигацией

Playwright предоставляет функции для навигации, такие как goto(), reload(), и goBack(). Эти методы позволяют инициировать действия, которые могут вызвать события навигации, такие как загрузка новой страницы или переход по истории.

  • page.goto(url, options) — Этот метод используется для перехода на указанный URL. Он автоматически ожидает, пока страница не будет загружена, а также может отслеживать события навигации в процессе.
await page.goto('https://example.com', {
  waitUntil: 'load' // Ожидание, пока страница полностью загрузится
});
  • page.reload(options) — Перезагружает текущую страницу. Это событие также будет инициировать события загрузки, такие как ‘load’, ‘domcontentloaded’ и другие, в зависимости от конфигурации.
await page.reload({ waitUntil: 'domcontentloaded' });
  • page.goBack(options) — Переход к предыдущей странице в истории браузера.
await page.goBack({ waitUntil: 'load' });

Обработка ошибок при навигации

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

try {
  await page.goto('https://example.com', { timeout: 5000 }); // Тайм-аут 5 секунд
} catch (error) {
  console.log('Ошибка при навигации:', error);
}

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

Навигация с ожиданием условий

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

await page.goto('https://example.com');
await page.waitForSelector('#main-content'); // Ожидание появления элемента

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

await page.goto('https://example.com');
await page.waitForNavigation({ waitUntil: 'load' });
await page.waitForSelector('.some-element');

Прокси и сетевые события при навигации

При работе с сетью и прокси-серверами Playwright позволяет перехватывать сетевые запросы, что полезно для тестирования различных сценариев, связанных с загрузкой страниц, и симуляции различных условий сети. Например, можно использовать функцию route() для перехвата запросов и изменения их перед отправкой.

await page.route('**/*', (route, request) => {
  console.log(`Запрос на ресурс: ${request.url()}`);
  route.continue(); // Пропуск запроса
});

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

Тайм-ауты при навигации

Если процесс навигации занимает слишком много времени, можно установить тайм-ауты. Playwright позволяет настроить максимальное время ожидания для различных операций. Например, в методах goto, reload, и waitForNavigation можно указать максимальное время ожидания.

await page.goto('https://example.com', { timeout: 10000 }); // Тайм-аут 10 секунд

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

Асинхронность и синхронизация

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

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

Такой подход гарантирует, что клик по кнопке submit не произойдет до тех пор, пока навигация не завершится и страница не будет готова.

Заключение

События навигации в Playwright — это мощный инструмент для автоматизации тестирования веб-приложений. Управление состоянием навигации позволяет создать стабильные тесты, которые точно отражают поведение страницы при различных сценариях. Понимание и правильное использование событий, таких как load, domcontentloaded, и networkidle, а также методов для управления навигацией, таких как goto(), reload(), и goBack(), является неотъемлемой частью успешного тестирования веб-приложений с использованием Playwright.