Каждый скрипт, который мы пишем, может выполнять три вещи:

Навигация

Начальная навигация на любую страницу практически одинакова для обоих фреймворков и может происходить несколькими способами.

• Когда ваш код выполняет page.goto() или page.click() по ссылке, вы явно вызываете навигацию.
• Веб-страница, на которой вы находитесь, также может вызвать навигацию, выполнив location.href= 'https://example.com' или используя API history.pushState().

В приведенном ниже примере мы вызываем две навигации:

Ожидание

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

page.waitForSelector()

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

page.waitForNavigation()

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

Таймауты

Метод page.waitForNavigation() — а также похожие методы page.reload() и page.goBack() — все они принимают некоторые параметры, которые определяют "как" они должны ждать и какие ограничения по времени они имеют.

Эти параметры имеют два варианта:

1. Жесткий таймаут

Время в миллисекундах, передаваемое в качестве свойства timeout, например page.waitForNavigation({ timeout: 2000 }). Мы не рекомендуем использовать это, если вам это не явно необходимо.

2a. Основанный на событиях DOM

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

• load: Это значение по умолчанию и очень строгое: ваша вся страница, включая все зависимые ресурсы, такие как изображения, скрипты, CSS и т. д.
• domcontentloaded: менее строгое: когда ваш HTML загружен.

Примечание: значение load является значением по умолчанию.

2b. Основанный на эвристике

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

• networkidle0: считать, что навигация завершена, когда нет более 0 сетевых соединений в течение не менее 500 мс.
• networkidle2: считать, что навигация завершена, когда нет более 2 сетевых соединений в течение не менее 500 мс.

Оба параметра 2a и 2b передаются с использованием свойства waitUntil, например page.waitForNavigation({ waitUntil: 'networkidle2' })

Какой из этих параметров полезен для вас зависит от вашей ситуации:

• Нужно ли вашему SPA полностью отрисовываться и завершать все XHR-запросы? Используйте load
• Вы выполняете серверный рендеринг и загружаете некоторый неважный элемент в ленивом режиме? Используйте один из вариантов networkidle.