Навигация и взаимодействие с веб-страницами в Playwright

Каждый написанный нами сценарий, как правило, включает три основные операции:

1. Навигация на целевую веб-страницу
2. Ожидание определенного события
3. Обработка возможного тайм-аута при загрузке страницы

Содержание

• Навигация
• Ожидания
• Таймауты
• Дальнейшее чтение

БЕСПЛАТНО СКАЧАТЬ КНИГИ в телеграм-канале "Библиотека тестировщика"

Навигация

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

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

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

1. Начальная загрузка страницы.
2. Навигация в корзину по ссылке.

import { test } from '@playwright/test'

test('basic navigation', async ({ page }) => {
  await page.goto('https://danube-web.shop/')
  await page.click('#cart')
})

Выполните этот пример следующим образом:

npx playwright test basic-browser-navigation.spec.ts

Ожидания

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

В приведенном ниже примере мы вводим адрес электронной почты в поле ввода на модальном окне входа. Метод fill() в Playwright обладает встроенным механизмом ожидания.

import { test } from '@playwright/test'

test('basic built-in waiting', async ({ page }) => {
  await page.goto('https://danube-web.shop/')
  await page.getByRole('button', { name: 'Log in' }).click()
  await page.getByPlaceholder('Email').click()
  await page.getByPlaceholder('Email').fill('test@test.com')
})

Выполните этот пример следующим образом:

npx playwright test basic-browser-waiting.spec.ts

Однако в некоторых случаях необходимо явно ожидать определенного события. Например, если требуется дождаться появления конкретного элемента на странице, можно использовать метод page.waitForSelector().

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

Это работает точно так же, как и функция page.waitForXpath(), если вы используете селекторы XPath вместо селекторов CSS.

Таймауты

Метод page.waitForNavigation(), а также аналогичные методы, такие как page.reload() и page.goBack(), позволяют задать параметры, определяющие способ ожидания навигации и пределы таймаута.

Эти параметры бывают двух типов:

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

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

Мы не рекомендуем использовать этот параметр, если в этом нет явной необходимости.

2а. Ожидание на основе событий DOM

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

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

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

2б. Ожидание с использованием эвристики

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

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

Playwright отказался от различия между networkidle0 и networkidle2, объединив их в один параметр:

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

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

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

• Если ваш SPA должен быть полностью отрисован и завершить все вызовы XHR, используйте метод загрузки load.
• Если вам нужно выполнить ленивую загрузку (lazy loading) несущественного элемента на сервере, выберите один из вариантов networkidle.

Перевод статьи «How to Use Playwright for Navigation and Interaction».