Навигации

Введение

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

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

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

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

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

note

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

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

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

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

// Переход и клик по элементу
// Клик автоматически подождет, пока элемент станет доступным
await page.goto('https://example.com');
await page.getByText('Example Domain').click();

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

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

Гидратация

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

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

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

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

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

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

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

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

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

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

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

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