Интеграция с Playwright

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

Установка и настройка

Для начала требуется установить все необходимые пакеты. Playwright и Jest можно установить через npm:

npm install --save-dev jest playwright

После этого потребуется настроить Jest. В корневой директории проекта необходимо создать файл конфигурации jest.config.js, если его ещё нет. В конфигурации указывается обработчик для асинхронных операций с браузером, который Playwright будет использовать.

Пример базовой настройки Jest:

module.exports = {
  preset: 'jest-playwright-preset',
  testTimeout: 30000,  // Увеличение времени ожидания для асинхронных тестов
};

Настройка Playwright для Jest

Jest не поддерживает Playwright напрямую, поэтому необходимо использовать промежуточное решение, например, jest-playwright. Этот пакет облегчает интеграцию и позволяет запускать тесты в реальных браузерах.

Установите дополнительно пакет:

npm install --save-dev jest-playwright-preset

В конфигурации Jest, добавленной выше, указывается использование jest-playwright-preset как предустановки. Этот шаг автоматизирует настройку Playwright для работы с Jest, включая установку браузеров и базовую конфигурацию.

Написание тестов с использованием Playwright

Для создания тестов, использующих Playwright, важно понимать, как взаимодействовать с элементами страницы в браузере и управлять браузером в процессе тестирования. Playwright предоставляет возможности для работы с различными браузерами, такими как Chromium, Firefox и WebKit.

Пример простого теста с использованием Playwright в Jest:

describe('Интерактивный тест с Playwright', () => {
  it('проверка текста на главной странице', async () => {
    await page.goto('https://example.com');
    const text = await page.textContent('h1');
    expect(text).toBe('Пример заголовка');
  });

  it('клик по кнопке и проверка изменения текста', async () => {
    await page.goto('https://example.com');
    await page.click('button#myButton');
    const buttonText = await page.textContent('button#myButton');
    expect(buttonText).toBe('Кнопка нажата');
  });
});

В этом примере page.goto() открывает указанную страницу, а методы типа textContent() и click() позволяют взаимодействовать с элементами на странице. Каждый тест асинхронно выполняет действия в браузере и проверяет ожидаемый результат.

Асинхронность и ожидания

Один из важных аспектов при тестировании с Playwright — управление асинхронными операциями. В большинстве случаев операции взаимодействия с элементами страницы (загрузка контента, клик, наведение и т. д.) происходят с задержками. Playwright предоставляет механизмы для явных и неявных ожиданий, чтобы убедиться, что элемент стал доступен или действие завершено.

Пример явного ожидания появления элемента:

it('ожидание загрузки элемента', async () => {
  await page.goto('https://example.com');
  await page.waitForSelector('h1');
  const title = await page.textContent('h1');
  expect(title).toBe('Пример заголовка');
});

Здесь используется waitForSelector(), который блокирует выполнение теста до тех пор, пока не появится нужный элемент. Это предотвращает ошибки, связанные с попытками взаимодействовать с элементами до их полной загрузки.

Эмуляция пользовательских действий

Playwright поддерживает эмуляцию множества действий пользователя, таких как ввод текста, перемещение мыши и даже взаимодействие с элементами, не видимыми на экране (например, скрытые поля или элементы за пределами видимой области).

Пример эмуляции ввода текста в форму:

it('ввод данных в форму', async () => {
  await page.goto('https://example.com/login');
  await page.fill('input[name="username"]', 'testuser');
  await page.fill('input[name="password"]', 'password123');
  await page.click('button[type="submit"]');
  const message = await page.textContent('.message');
  expect(message).toBe('Добро пожаловать, testuser!');
});

Метод fill() позволяет заполнить поля формы, а click() выполняет клик по кнопке. Это позволяет эмулировать реальные действия пользователя, что важно для тестирования интерфейсов.

Использование Mocking с Playwright

Иногда необходимо замокать определённые сетевые запросы или API вызовы, чтобы тестировать интерфейсы без зависимости от внешних сервисов. Playwright поддерживает возможность перехвата запросов с помощью page.route().

Пример замоканного API-запроса:

it('замокать запрос API', async () => {
  await page.goto('https://example.com');
  
  await page.route('**/api/user', route => {
    route.fulfill({
      status: 200,
      body: JSON.stringify({ user: 'testuser' }),
    });
  });

  await page.click('button#fetchUser');
  const userName = await page.textContent('.userName');
  expect(userName).toBe('testuser');
});

Здесь route.fulfill() позволяет возвращать замоканные данные при вызове конкретного API. Это полезно для тестирования UI без зависимости от реальных серверов.

Управление несколькими браузерами и контекстами

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

Пример запуска нескольких контекстов:

it('многоконтекстные тесты', async () => {
  const context1 = await browser.newContext();
  const context2 = await browser.newContext();

  const page1 = await context1.newPage();
  const page2 = await context2.newPage();

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

  const title1 = await page1.title();
  const title2 = await page2.title();

  expect(title1).toBe('Пример');
  expect(title2).toBe('Пример');
});

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

Запуск тестов в различных браузерах

Playwright поддерживает несколько браузеров, включая Chromium, Firefox и WebKit. Для тестирования в разных браузерах можно использовать настройку в Jest.

Пример конфигурации для запуска тестов в Chromium, Firefox и WebKit:

module.exports = {
  preset: 'jest-playwright-preset',
  browsers: ['chromium', 'firefox', 'webkit'],
};

Такая настройка позволяет проверить работоспособность приложения в разных браузерах, что важно для кросс-браузерного тестирования.

Советы по производительности

Тесты с использованием браузеров могут быть медленными, особенно при выполнении большого числа взаимодействий. Чтобы улучшить производительность, можно:

  1. Использовать headless режим — запускайте браузеры без графического интерфейса, что ускоряет их работу.

    browser = await playwright.chromium.launch({ headless: true });

  2. Использовать многозадачность — запускайте тесты параллельно в разных браузерах или контекстах.

  3. Использовать персистентные сессии — сохраняйте состояние браузера между тестами с помощью сессий.

Заключение

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

Оглавление