Подписка на события страницы

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

Важность событий в тестировании

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

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

Подписка на события с помощью page.on()

Основной способ подписки на события страницы — использование метода page.on(). Этот метод позволяет подписаться на различные события, происходящие на странице, такие как:

  • load — событие, которое срабатывает, когда страница полностью загружена.
  • DOMContentLoaded — событие, которое срабатывает, когда HTML документ был полностью загружен и разобран, но ресурсы, такие как изображения и стили, могут еще не быть загружены.
  • dialog — событие, которое срабатывает, когда появляется диалоговое окно (например, alert, prompt, confirm).
  • response — событие, которое срабатывает, когда сервер отвечает на запрос.
  • request — событие, которое срабатывает при отправке запроса.
  • console — событие, которое срабатывает при выводе сообщения в консоль.

Пример подписки на событие загрузки страницы

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

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

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

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

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

В этом примере мы создаем страницу, подписываемся на событие load и выводим сообщение в консоль, когда страница будет загружена.

Пример подписки на сетевые запросы

Иногда в тестировании важно отслеживать сетевые запросы и их ответы, чтобы убедиться в корректности работы API. Для этого используется событие response, которое срабатывает каждый раз, когда приходит ответ от сервера.

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

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

  page.on('response', response => {
    console.log(`Получен ответ от ${response.url()}: ${response.status()}`);
  });

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

Здесь мы подписываемся на событие response и выводим статус ответа от сервера для каждого запроса.

Подписка на события с помощью page.waitForEvent()

Метод page.waitForEvent() позволяет ожидать определенного события на странице. Это полезно, когда необходимо подождать выполнения какого-либо действия, прежде чем продолжить выполнение теста. В отличие от page.on(), который подписывается на события в реальном времени, waitForEvent() блокирует выполнение теста до тех пор, пока не произойдет ожидаемое событие.

Пример ожидания события загрузки страницы

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

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

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

  // Ожидаем загрузки страницы
  await page.waitForEvent('load');
  console.log('Страница загружена, продолжение теста...');
})();

Метод waitForEvent полезен, когда важно, чтобы определенное событие произошло перед продолжением теста, например, перед нажатием на элемент или проверкой состояния UI.

Подписка на событие с фильтрацией

Playwright позволяет добавлять фильтры при подписке на события, что дает возможность отлавливать только те события, которые соответствуют определенным условиям. Например, при подписке на событие response можно фильтровать ответы по URL или статусу.

Пример фильтрации сетевых запросов по статусу

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

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

  page.on('response', response => {
    if (response.status() === 200 && response.url().includes('api')) {
      console.log(`Ответ от API: ${response.status()} от ${response.url()}`);
    }
  });

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

В этом примере мы подписались на событие response и отфильтровали только те ответы, которые имеют статус 200 и содержат в URL строку api.

Прерывание событий

В некоторых случаях необходимо прервать или изменить стандартное поведение событий. Например, можно отменить отправку запроса с помощью события request или модифицировать ответ с помощью события response.

Пример отмены запроса

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

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

  page.on('request', request => {
    if (request.url().includes('ads')) {
      console.log('Запрос на рекламу отменен');
      request.abort();
    }
  });

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

Этот код отменяет запросы на рекламу (содержащие строку ads в URL), прерывая их выполнение.

Заключение

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

Оглавление