Мониторинг сети и тестирование API в Playwright

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

Прослушивание сетевых запросов и ответов

page.on('request') прослушивание запросов

Пример

test('Отслеживание сетевых запросов', async ({ page }) => {
  const requests = [];

  // Прослушивать все запросы
  page.on('request', request => {
    requests.push({
      url: request.url(),
      method: request.method(),
      postData: request.postData(),
    });
  });

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

  // Вывести все запросы
  console.log('Страница выполнила всего', requests.length, 'запросов');
  requests.forEach(r => console.log(r.method, r.url));
});

page.on('response') прослушивание ответов

Пример

test('Мониторинг сетевых ответов', async ({ page }) => {
  page.on('response', async response => {
    // Сосредоточиться только на ответах API
    if (response.url().includes('/api/')) {
      console.log('Код состояния API:', response.status());
      console.log('URL API:', response.url());
    }
  });

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

page.waitForResponse() ожидание конкретного ответа

Пример

test('Ожидание завершения ответа API', async ({ page }) => {
  // Подготовиться к прослушиванию ответа API перед нажатием кнопки
  const responsePromise = page.waitForResponse(
    response => response.url().includes('/api/search') && response.status() === 200
  );

  // Запустить поиск
  await page.getByPlaceholder('Поиск EXAMPLE руководства').fill('Playwright');
  await page.keyboard.press('Enter');

  // Дождаться ответа API
  const response = await responsePromise;
  const data = await response.json();

  // Проверить данные, возвращённые API
  expect(data.results.length).toBeGreaterThan(0);
});

Прослушивание сообщений консоли

Пример

test('Прослушивание ошибок консоли', async ({ page }) => {
  const consoleErrors = [];

  // Слушать сообщения консоли
  page.on('console', msg => {
    if (msg.type() === 'error') {
      consoleErrors.push(msg.text());
    }
  });

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

  // Проверить, что на странице нет ошибок JavaScript
  expect(consoleErrors).toHaveLength(0);
});

Тип ConsoleMessage

TypeСоответствующий метод
'log'console.log()
'error'console.error()
'warning'console.warn()
'info'console.info()
'debug'console.debug()

Тестирование API (фикстура request)

Playwrightrequestфикстура позволяет вам,не проходя через браузер,напрямую отправлять HTTP-запросы.

Это идеально подходит для подготовки или очистки состояния на стороне сервера до и после тестов.

Отправка GET-запросов

Пример

test('API GET request', async ({ request }) => {
  const response = await request.get('https://jsonplaceholder.typicode.com/posts/1');

  // Проверка статуса ответа
  expect(response.status()).toBe(200);

  // Получить данные JSON
  const data = await response.json();
  expect(data.id).toBe(1);
  expect(data).toHaveProperty('title');
});

Отправка POST-запросов

Пример

test('POST-запрос к API', async ({ request }) => {
  const response = await request.post('https://jsonplaceholder.typicode.com/posts', {
    data: {
      title: 'ПРИМЕР руководства',
      body: 'Пример тестирования API в Playwright',
      userId: 1,
    },
  });

  expect(response.status()).toBe(201);

  const data = await response.json();
  expect(data.title).toBe('ПРИМЕР руководства');
});

Настройка baseURL и заголовков аутентификации

Пример

// Путь к файлу: playwright.config.ts
export default defineConfig({
  использовать: {
    // Базовый URL для API-запросов
    baseURL: 'https://api.example.com',

    // Заголовки запроса по умолчанию
    extraHTTPHeaders: {
      'Authorization': 'Bearer YOUR_API_TOKEN',
      'Accept': 'application/json',
    },
  },
});

Комбинированное тестирование API + браузера

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

Пример

test('Подготовка данных через API + проверка в браузере', async ({ request, page }) => {
  // Шаг 1: Создание записи тестовых данных через API
  const response = await request.post('/api/todos', {
    data: { title: 'EXAMPLE test task', completed: false },
  });
  const todo = await response.json();

  // Шаг 2: Проверьте, что данные отображаются в браузере
  await page.goto('/todos');
  await expect(page.getByText('EXAMPLE test task')).toBeVisible();

  // Шаг 3: Очистите данные через API
  await request.delete(`/api/todos/${todo.id}`);
});

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

Другие расширения