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

Puppeteer — это библиотека для Node.js, предоставляющая API для управления браузером Chrome или Chromium через протокол DevTools. Основным применением Puppeteer является автоматизация браузерных задач, таких как рендеринг страниц, взаимодействие с веб-элементами и снятие скриншотов. В сочетании с Jest, Puppeteer становится мощным инструментом для создания интеграционных тестов, которые имитируют поведение пользователя в браузере и проверяют взаимодействие с фронтенд-приложением.

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

Для начала необходимо установить Puppeteer и Jest. Это можно сделать с помощью npm или yarn.

npm install --save-dev puppeteer jest

После установки пакетов, можно приступить к настройке тестов. Puppeteer использует браузер Chrome, и при его установке автоматически скачивается необходимая версия Chrome или Chromium. Важно учесть, что Puppeteer может требовать дополнительных настроек для работы в CI/CD средах или на сервере, где доступ к графической оболочке может быть ограничен.

Создание тестов с Puppeteer

Тесты, использующие Puppeteer, часто имеют дело с взаимодействием с элементами на странице. Это может включать клик, заполнение форм, проверку содержимого и другие действия. Чтобы интегрировать Puppeteer с Jest, создается специальный скрипт, который запускает браузер, выполняет действия и проверяет результат.

Пример простого теста с Puppeteer:

const puppeteer = require('puppeteer');

describe('Тестирование страницы', () => {
  let browser;
  let page;

  beforeAll(async () => {
    browser = await puppeteer.launch({ headless: true }); // запускаем браузер в фоновом режиме
    page = await browser.newPage(); // открываем новую вкладку
  });

  afterAll(async () => {
    await browser.close(); // закрываем браузер после выполнения тестов
  });

  test('Проверка заголовка страницы', async () => {
    await page.goto('https://example.com'); // переходим на страницу
    const title = await page.title(); // получаем заголовок страницы
    expect(title).toBe('Example Domain'); // проверяем, что заголовок соответствует ожидаемому
  });
});

В приведенном примере:

  • beforeAll запускает браузер и создает новую страницу перед выполнением тестов.
  • afterAll закрывает браузер после завершения всех тестов.
  • В самом тесте происходит переход на страницу и проверка её заголовка с помощью метода title().

Управление действиями с элементами страницы

Puppeteer предоставляет множество методов для взаимодействия с веб-страницей. Например, можно кликать по кнопкам, заполнять формы, проверять текст на странице и т.д.

test('Заполнение формы и отправка', async () => {
  await page.goto('https://example.com/form');
  
  // Заполнение полей формы
  await page.type('#username', 'testuser');
  await page.type('#password', 'password123');
  
  // Отправка формы
  await page.click('button[type="submit"]');
  
  // Проверка, что после отправки формы появилась соответствующая ошибка
  const errorMessage = await page.$eval('.error', el => el.textContent);
  expect(errorMessage).toBe('Invalid username or password');
});

В данном примере происходит:

  • type — ввод текста в поля формы.
  • click — клик по кнопке для отправки формы.
  • $eval — извлечение текста с элемента страницы для последующей проверки.

Ожидания и асинхронные действия

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

Например, метод waitForSelector позволяет подождать, пока на странице не появится определенный элемент:

test('Ожидание появления элемента на странице', async () => {
  await page.goto('https://example.com');
  
  // Ожидаем появления элемента с классом '.content'
  await page.waitForSelector('.content');
  
  const content = await page.$eval('.content', el => el.textContent);
  expect(content).toContain('Expected text');
});

Метод waitForSelector гарантирует, что тест не продолжится до тех пор, пока элемент с заданным селектором не появится на странице.

Снимки экрана и скриншоты

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

test('Проверка визуального состояния страницы', async () => {
  await page.goto('https://example.com');
  
  // Делаем скриншот страницы
  await page.screenshot({ path: 'example.png' });
  
  // Можно также делать скриншоты только определенных элементов
  const element = await page.$('.specific-element');
  await element.screenshot({ path: 'element.png' });
});

Снимки экрана могут быть полезны для визуальной проверки изменений в интерфейсе, особенно в случае UI-тестирования.

Настройка и запуск тестов

При настройке Puppeteer с Jest важно учитывать несколько особенностей:

  1. Запуск браузера в headless-режиме: Это позволяет избежать открытия окна браузера во время тестов. В CI-средах обычно используют именно этот режим.

  2. Настройка времени ожидания: Тесты с Puppeteer часто требуют длительных ожиданий, особенно при работе с медленными сетями или сложными интерфейсами. Можно настроить параметры времени ожидания для различных операций.

Пример настройки запуска браузера:

beforeAll(async () => {
  browser = await puppeteer.launch({
    headless: true, // без графического интерфейса
    timeout: 10000, // максимальное время на запуск
    args: ['--no-sandbox', '--disable-setuid-sandbox'] // для CI-сред
  });
  page = await browser.newPage();
});

Здесь используется параметр args, который необходим для работы в средах, где доступ к графическому интерфейсу ограничен (например, в контейнерах Docker или на серверах).

Использование Puppeteer в CI/CD

Для автоматических тестов в CI/CD процессах интеграция с Puppeteer требует особого подхода. Нужно учесть, что Puppeteer использует Chromium, и на некоторых системах может потребоваться дополнительная настройка для корректной работы. Это особенно важно при использовании Puppeteer в безголовом (headless) режиме.

Для CI/CD важно убедиться, что все зависимости Puppeteer (включая браузер) правильно установлены, и окружение готово для работы без графического интерфейса. В случае использования Docker контейнеров для запуска тестов можно использовать официальный образ Puppeteer, который уже содержит все необходимые компоненты.

Заключение

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

Оглавление