Перейти к основному содержимому

Навигации

Введение​

Playwright может переходить по URL-адресам и обрабатывать навигации, вызванные взаимодействиями с страницей.

Основная навигация​

Самая простая форма навигации - это открытие URL:

// Переход на страницу
page.navigate("https://example.com");

Код выше загружает страницу и ожидает, пока веб-страница не вызовет событие load. Событие load вызывается, когда вся страница загружена, включая все зависимые ресурсы, такие как таблицы стилей, скрипты, iframes и изображения.

примечание

Если страница выполняет перенаправление на стороне клиента до load, Page.navigate() будет ждать, пока перенаправленная страница не вызовет событие load.

Когда страница загружена?​

Современные страницы выполняют множество действий после того, как событие load было вызвано. Они лениво загружают данные, заполняют пользовательский интерфейс, загружают дорогие ресурсы, скрипты и стили после того, как событие load было вызвано. Нет способа определить, что страница загружена, это зависит от страницы, фреймворка и т.д. Так когда же можно начинать взаимодействовать с ней?

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

// Переход и клик по элементу
// Клик будет автоматически ждать элемент
page.navigate("https://example.com");
page.getByText("Example Domain").click();

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

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

Гидратация​

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

Когда страница гидратируется, сначала статическая версия страницы отправляется в браузер. Затем отправляется динамическая часть, и страница становится "живой". Как очень быстрый пользователь, Playwright начнет взаимодействовать со страницей в тот момент, когда он ее увидит. И если кнопка на странице включена, но слушатели еще не добавлены, Playwright выполнит свою работу, но клик не будет иметь никакого эффекта.

Простой способ проверить, страдает ли ваша страница от плохой гидратации, - это открыть Chrome DevTools, выбрать эмуляцию сети "Slow 3G" в панели Network и перезагрузить страницу. Как только вы увидите интересующий вас элемент, взаимодействуйте с ним. Вы увидите, что клики по кнопке будут игнорироваться, а введенный текст будет сброшен последующим кодом загрузки страницы. Правильное решение этой проблемы - убедиться, что все интерактивные элементы управления отключены до завершения гидратации, когда страница полностью функциональна.

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

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

page.getByText("Click me").click();
page.waitForURL("**/login");

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

Playwright разделяет процесс отображения нового документа на странице на навигацию и загрузку.

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

Навигация завершается при разборе заголовков ответа и обновлении истории сеанса. Только после успешного завершения навигации (ее завершения) страница начинает загружать документ.

Загрузка охватывает получение оставшегося тела ответа по сети, разбор, выполнение скриптов и вызов событий загрузки:

  • Page.url() устанавливается на новый URL
  • содержимое документа загружается по сети и разбирается
  • событие Page.onDOMContentLoaded(handler) вызывается
  • страница выполняет некоторые скрипты и загружает ресурсы, такие как таблицы стилей и изображения
  • событие Page.onLoad(handler) вызывается
  • страница выполняет динамически загруженные скрипты