Сеть

Введение​

Playwright предоставляет API для отслеживания и изменения сетевого трафика браузера — как HTTP, так и HTTPS. Можно отслеживать, изменять и обрабатывать любые запросы, которые выполняет страница, включая запросы XHR и fetch.

Имитация API​

Ознакомьтесь с нашим руководством по имитации API, чтобы узнать, как

• имитировать запросы к API, не обращаясь к самому API
• выполнять запросы к API и изменять ответы
• использовать файлы HAR для имитации сетевых запросов.

Имитация сетевых запросов​

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

import { test, expect } from '@playwright/test';

test.beforeEach(async ({ context }) => {
  // Block any css requests for each test in this file.
  await context.route(/.css$/, route => route.abort());
});

test('loads page without css', async ({ page }) => {
  await page.goto('https://playwright.dev');
  // ... test goes here
});

Также можно использовать page.route(), чтобы имитировать сетевые запросы на отдельной странице.

import { test, expect } from '@playwright/test';

test('loads page without images', async ({ page }) => {
  // Block png and jpeg images.
  await page.route(/(png|jpeg)$/, route => route.abort());

  await page.goto('https://playwright.dev');
  // ... test goes here
});

Аутентификация HTTP​

Выполнение аутентификации HTTP.

import { defineConfig } from '@playwright/test';
export default defineConfig({
  use: {
    httpCredentials: {
      username: 'bill',
      password: 'pa55w0rd',
    }
  }
});

const context = await browser.newContext({
  httpCredentials: {
    username: 'bill',
    password: 'pa55w0rd',
  },
});
const page = await context.newPage();
await page.goto('https://example.com');

HTTP-прокси​

Можно настроить загрузку страниц через HTTP(S)-прокси или SOCKSv5. Прокси можно задать глобально для всего браузера или отдельно для каждого контекста браузера.

При необходимости можно указать имя пользователя и пароль для HTTP(S)-прокси, а также хосты, для которых нужно обходить прокси.

Пример глобальной настройки прокси:

import { defineConfig } from '@playwright/test';
export default defineConfig({
  use: {
    proxy: {
      server: 'http://myproxy.com:3128',
      username: 'usr',
      password: 'pwd'
    }
  }
});

const browser = await chromium.launch({
  proxy: {
    server: 'http://myproxy.com:3128',
    username: 'usr',
    password: 'pwd'
  }
});

Также можно задать прокси для отдельного контекста:

import { test, expect } from '@playwright/test';

test('should use custom proxy on a new context', async ({ browser }) => {
  const context = await browser.newContext({
    proxy: {
      server: 'http://myproxy.com:3128',
    }
  });
  const page = await context.newPage();

  await context.close();
});

const browser = await chromium.launch();
const context = await browser.newContext({
  proxy: { server: 'http://myproxy.com:3128' }
});

Сетевые события​

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

// Subscribe to 'request' and 'response' events.
page.on('request', request => console.log('>>', request.method(), request.url()));
page.on('response', response => console.log('<<', response.status(), response.url()));

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

Или дождаться сетевого ответа после нажатия кнопки с помощью page.waitForResponse():

// Use a glob URL pattern. Note no await.
const responsePromise = page.waitForResponse('**/api/fetch_data');
await page.getByText('Update').click();
const response = await responsePromise;

Варианты​

Ожидание ответов с помощью page.waitForResponse()

// Use a RegExp. Note no await.
const responsePromise = page.waitForResponse(/\.jpeg$/);
await page.getByText('Update').click();
const response = await responsePromise;

// Use a predicate taking a Response object. Note no await.
const responsePromise = page.waitForResponse(response => response.url().includes(token));
await page.getByText('Update').click();
const response = await responsePromise;

Обработка запросов​

await page.route('**/api/fetch_data', route => route.fulfill({
  status: 200,
  body: testData,
}));
await page.goto('https://example.com');

Можно имитировать конечные точки API, обрабатывая сетевые запросы в сценарии Playwright.

Варианты​

Настройте маршрут для всего контекста браузера с помощью browserContext.route() или для страницы с помощью page.route(). Маршрут будет применяться к всплывающим окнам и открытым ссылкам.

await browserContext.route('**/api/login', route => route.fulfill({
  status: 200,
  body: 'accept',
}));
await page.goto('https://example.com');

Изменение запросов​

// Delete header
await page.route('**/*', async route => {
  const headers = route.request().headers();
  delete headers['X-Secret'];
  await route.continue({ headers });
});

// Continue requests as POST.
await page.route('**/*', route => route.continue({ method: 'POST' }));

Можно продолжить запросы, внеся в них изменения. В примере выше из исходящих запросов удаляется HTTP-заголовок.

Прерывание запросов​

Запросы можно прервать с помощью page.route() и route.abort().

await page.route('**/*.{png,jpg,jpeg}', route => route.abort());

// Abort based on the request type
await page.route('**/*', route => {
  return route.request().resourceType() === 'image' ? route.abort() : route.continue();
});

Изменение ответов​

Чтобы изменить ответ, используйте APIRequestContext, чтобы получить исходный ответ, а затем передайте его в route.fulfill(). Можно переопределить отдельные поля ответа с помощью параметров:

await page.route('**/title.html', async route => {
  // Fetch original response.
  const response = await route.fetch();
  // Add a prefix to the title.
  let body = await response.text();
  body = body.replace('<title>', '<title>My prefix:');
  await route.fulfill({
    // Pass all fields from the response.
    response,
    // Override response body.
    body,
    // Force content type to be html.
    headers: {
      ...response.headers(),
      'content-type': 'text/html'
    }
  });
});

Шаблоны URL с glob-паттернами​

Playwright использует упрощённые glob-паттерны для сопоставления URL в методах перехвата сетевых запросов, таких как page.route() или page.waitForResponse(). Эти паттерны поддерживают базовые подстановочные символы:

1. Звёздочки:
   • Одна * соответствует любым символам, кроме /
   • Две ** соответствуют любым символам, включая /
2. Вопросительный знак ? соответствует только вопросительному знаку ?. Чтобы сопоставить любой символ, используйте вместо него *.
3. Фигурные скобки {} можно использовать для сопоставления со списком вариантов, разделённых запятыми ,
4. Обратную косую черту \ можно использовать для экранирования специальных символов (обратите внимание: саму обратную косую черту нужно экранировать как \\)

Примеры:

• https://example.com/*.js соответствует https://example.com/file.js, но не https://example.com/path/file.js
• https://example.com/?page=1 соответствует https://example.com/?page=1, но не https://example.com
• **/*.js соответствует и https://example.com/file.js, и https://example.com/path/file.js
• **/*.{png,jpg,jpeg} соответствует всем запросам изображений

Важные примечания:

• Glob-паттерн должен соответствовать всему URL, а не только его части.
• При использовании glob-паттернов для сопоставления URL учитывайте всю структуру URL, включая протокол и разделители пути.
• Для более сложных условий сопоставления вместо glob-паттернов используйте RegExp.

WebSocket​

Playwright из коробки поддерживает просмотр, имитацию и изменение WebSocket. Ознакомьтесь с нашим руководством по имитации API, чтобы узнать, как имитировать WebSocket.

Каждый раз при создании WebSocket генерируется событие page.on('websocket'). Это событие содержит экземпляр WebSocket, с помощью которого можно просматривать кадры WebSocket:

page.on('websocket', ws => {
  console.log(`WebSocket opened: ${ws.url()}>`);
  ws.on('framesent', event => console.log(event.payload));
  ws.on('framereceived', event => console.log(event.payload));
  ws.on('close', () => console.log('WebSocket closed'));
});

Отсутствующие сетевые события и Service Worker​

Встроенные в Playwright методы browserContext.route() и page.route() позволяют нативно перенаправлять запросы в тестах, а также имитировать и перехватывать их.

Если вы используете встроенные методы Playwright browserContext.route() и page.route(), но сетевые события отсутствуют, отключите Service Worker, задав для serviceWorkers значение 'block'.

Возможно, вы используете инструмент для имитации, например Mock Service Worker (MSW). Этот инструмент позволяет имитировать ответы из коробки, но устанавливает собственный Service Worker, который перехватывает сетевые запросы, делая их невидимыми для browserContext.route() и page.route(). Если вам нужны и тестирование сети, и имитация, используйте встроенные методы browserContext.route() и page.route() для имитации ответов.

Если вас интересует не только использование Service Worker для тестирования и имитации сетевых запросов, но и перенаправление и прослушивание запросов, выполняемых самими Service Worker, ознакомьтесь с этим руководством.