Page API

Page API — центральный инструмент для работы с веб-страницами в Playwright. Объект Page представляет собой вкладку или окно браузера и предоставляет полный набор методов для взаимодействия с DOM, навигации, выполнения скриптов, работы с сетью и управления состоянием страницы.

Создание и управление страницей

Для начала работы с Page необходимо открыть контекст браузера и создать новую страницу:

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

(async () => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  const page = await context.newPage();
  
  await page.goto('https://example.com');
})();

Ключевые моменты:

  • newContext() позволяет изолировать сессии браузера.
  • newPage() создаёт отдельную вкладку внутри контекста.
  • Методы goto(url) и waitForLoadState() управляют навигацией и синхронизацией с загрузкой страницы.

Навигация и управление состоянием

Page API поддерживает полный набор методов навигации:

  • page.goto(url[, options]) — переход на указанный URL.
  • page.reload([options]) — перезагрузка страницы.
  • page.waitForLoadState([state]) — ожидание загрузки страницы; состояния: 'load', 'domcontentloaded', 'networkidle'.

Пример:

await page.goto('https://example.com', { waitUntil: 'networkidle' });
await page.reload({ waitUntil: 'domcontentloaded' });

Взаимодействие с элементами

Page API позволяет работать с элементами через методы поиска и действия:

  • page.click(selector[, options]) — клик по элементу.
  • page.fill(selector, value) — ввод текста в поле.
  • page.type(selector, text[, options]) — имитация печати символ за символом.
  • page.check(selector) / page.uncheck(selector) — работа с чекбоксами.
  • page.selectOption(selector, value) — выбор опции в <select>.

Пример:

await page.fill('#username', 'testuser');
await page.click('#submit');

Особенности:

  • Методы автоматически ожидают элемент, если он появится позднее (auto-waiting).
  • Можно комбинировать с page.waitForSelector(selector[, options]) для явного контроля.

Работа с текстом и атрибутами

Чтение данных со страницы:

  • page.textContent(selector) — получение текста элемента.
  • page.innerText(selector) — текст с учётом видимости.
  • page.getAttribute(selector, name) — значение атрибута.
  • page.inputValue(selector) — значение полей ввода.

Пример:

const title = await page.textContent('h1');
const value = await page.inputValue('#email');

Выполнение JavaScript на странице

Page API позволяет выполнять скрипты в контексте страницы:

  • page.evaluate(pageFunction, ...args) — выполняет функцию в браузере и возвращает результат.
  • page.evaluateHandle(pageFunction, ...args) — возвращает ссылку на объект DOM или JS.

Пример:

const dimensions = await page.evaluate(() => {
  return {
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
  };
});

Скриншоты и PDF

Page API предоставляет методы для визуальной проверки:

  • page.screenshot([options]) — делает скриншот всей страницы или её части.
  • page.pdf([options]) — генерирует PDF документа (только для Chromium).

Пример:

await page.screenshot({ path: 'example.png', fullPage: true });
await page.pdf({ path: 'example.pdf', format: 'A4' });

Работа с сетевыми запросами

Можно перехватывать и анализировать сетевую активность:

  • page.on('request', callback) — событие запроса.
  • page.on('response', callback) — событие ответа.
  • page.route(url, handler) — изменение или блокировка запросов.

Пример:

page.on('request', request => console.log(request.url()));
await page.route('**/ads/**', route => route.abort());

Управление вкладками и окнами

Page API позволяет работать с несколькими страницами:

  • browserContext.pages() — массив всех страниц в контексте.
  • page.bringToFront() — делает страницу активной.
  • page.close() — закрывает вкладку.

Пример:

const pages = context.pages();
await pages[0].bringToFront();
await pages[1].close();

Работа с диалогами

Page API поддерживает модальные окна: alert, confirm, prompt.

  • page.on('dialog', async dialog => { ... }) — обработка диалога.
  • dialog.accept([promptText]) — принять диалог.
  • dialog.dismiss() — отклонить.

Пример:

page.on('dialog', async dialog => {
  console.log(dialog.message());
  await dialog.accept('Текст для prompt');
});

Загрузка и скачивание файлов

Page API позволяет управлять файлами:

  • page.setInputFiles(selector, files) — загрузка файлов через <input type="file">.
  • page.waitForEvent('download') — ожидание начала загрузки.

Пример:

const [download] = await Promise.all([
  page.waitForEvent('download'),
  page.click('#downloadButton')
]);
await download.saveAs('file.zip');

Дополнительные возможности

  • page.frames() — работа с фреймами.
  • page.cookies() / page.addCookies() — управление cookie.
  • page.setViewportSize({ width, height }) — изменение размеров окна.
  • page.setExtraHTTPHeaders(headers) — установка заголовков.

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

Оглавление