[Перевод] Ускоряем e2e-тесты с помощью playwright-network-cache22.10.2024 11:15

21f62a5176dbe6aa9a6caf2dd1cef583.png

Проблема сетевых запросов в e2e-тестах

Сетевые запросы часто являются самой медленной частью при выполнении e2e-тестов. При запуске большого количества тестов, повторяющиеся запросы к внешним API могут стать бутылочным горлышком, значительно увеличивая время прогона. Кроме того, реальные API могут быть нестабильными, с периодическими таймаутами, делая ваши тесты хрупкими и ненадежными.

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

Библиотека playwright-network-cache

Библиотека playwright-network-cache позволяет автоматически кэшировать сетевые ответы в Playwright тестах и устраняет необходимость в ручных моках или HAR-файлах. Сетевые ответы сохраняются на файловой системе при первом запуске теста и повторно используются в последующих запусках. Более того, ответы сохраняются в понятной древовидной структуре папок, что облегчает отладку тестов.

Как это решает проблему

  1. Автоматическое кэширование: Библиотека автоматически кэширует сетевые ответы при первом запуске тестов. Это означает, что в будущих запусках ваши тесты не будут ждать ответа от внешних API — вместо этого будут использоваться кэшированные данные, что приводит к более быстрым и надежным тестам.

  2. Настраиваемая длительность кэша (TTL): Вы можете контролировать, как долго кэшированный файл сохраняется, установив время жизни (TTL). После истечения указанного времени библиотека снова обращается к реальному API и обновляет кэш, сохраняя ваши тестовые данные актуальными.

  3. Подмена ответов: Нужно подменить ответ для конкретного теста? playwright-network-cache позволяет на лету изменять тело ответа без необходимости ручных правок в мок-файлах.

  4. Гибкая структура папок: Система кэширования организует файлы на основе имени хоста, метода запроса и пути URL, обеспечивая легкую навигацию и управление кэшированными данными. Для более сложных случаев вы можете разделить файлы по параметрам запроса, телу запроса или другим данным, обеспечивая гибкость в хранении и применении кеша для конкретных кейсов.

  5. Ускорение тестов: Повторно используя кэшированные ответы, тесты больше не ждут ответа от реальных API и выполняются значительно быстрее. Это особенно полезно при работе с большими наборами тестов или при запуске в CI-средах, где ресурсы ограничены.

  6. Управление моками: Забудьте о ручном написании моков. Библиотека всё берёт на себя — от кэширования до воспроизведения и подмены ответов. Вам больше не нужно вручную создавать мок-ответы для каждого сценария, и вы можете сосредоточиться на логике ваших тестов.

  7. Без HAR: HAR-файлы могут быть полезны для записи и воспроизведения сетевых взаимодействий, но они быстро становятся громоздкими, особенно когда нужно изменить ответы. playwright-network-cache предоставляет более гибкую альтернативу HAR, позволяя управлять отдельными ответами как JSON-файлами.

Пример

Представьте, что вы тестируете приложение, которое получает список котиков из API. Без кэширования каждый запуск теста будет делать запрос к реальному API, что может быть медленным и ненадежным.

Шаг 1: Установка библиотеки

npm install -D playwright-network-cache

Шаг 2: Настройка фикстуры cacheRoute

Создайте файл fixtures.js и добавьте следующий код: 

// fixtures.js
import { test as base } from '@playwright/test';
import { CacheRoute } from 'playwright-network-cache';

export const test = base.extend({
  cacheRoute: async ({ page }, use) => {
    const cacheRoute = new CacheRoute(page, { /* cache options */ });
    await use(cacheRoute);
  },
});

Шаг 3: Использование фикстуры в тесте

// example.spec.js
import { test } from './fixtures';

test('Получение списка котиков', async ({ page, cacheRoute }) => {
  await cacheRoute.GET('https://example.com/api/cats', {
    ttlMinutes: 60, // Обновлять кэш каждые 60 минут
  });

  await page.goto('https://example.com');
  // Дополнительные действия в тесте...
});

При первом запуске ответ кэшируется в директории .network-cache со структурой: 

.network-cache
└── example.com
    └── api-cats
        └── GET
            ├── headers.json
            └── body.json

В последующих запусках будет использоваться кэшированный ответ, что значительно ускорит выполнение теста.

Изменение кэшированного ответа

Если вам нужно изменить ответ для конкретного теста: 

test('Измененный список котиков', async ({ page, cacheRoute }) => {
  await cacheRoute.GET('https://example.com/api/cats', {
    modify: async (route, response) => {
      const json = await response.json();
      json[0].name = 'Барсик';
      await route.fulfill({ json });
    },
  });

  await page.goto('https://example.com');
  // Дополнительные действия в тесте...
});

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

Не только кэширование

playwright-network-cache — это не только про кэширование. Он предлагает продвинутые функции:

  • Обработка HTTP статусов и ошибок

  • Отключение или обновление кэша при необходимости

  • Изоляция кэш-файлов для отдельных тестов

Заключение

Если вы хотите сделать ваши Playwright тесты более быстрыми и надежными, попробуйте playwright-network-cache. Благодаря кэшированию сетевых ответов на файловой системе, вы получаете гибкую и простую альтернативу HAR-файлам.

Спасибо за внимание ❤️

© Habrahabr.ru