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

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

Установка необходимых зависимостей

Для начала необходимо установить несколько пакетов, включая Puppeteer и Jest.

  1. Установить Puppeteer: 

    npm install puppeteer

  2. Установить Jest: 

    npm install --save-dev jest

  3. Для удобства можно установить jest-environment-puppeteer, который предоставит специальную среду для выполнения тестов с Puppeteer: 

    npm install --save-dev jest-environment-puppeteer

Конфигурация Jest

Jest должен быть настроен для работы с Puppeteer. Для этого в конфигурации Jest необходимо указать использование jest-environment-puppeteer. Это обеспечит запуск тестов в среде Puppeteer с возможностью управления браузером.

Создаем файл конфигурации jest.config.js (если его нет) и добавляем следующие строки: 

module.exports = {
  preset: &
  testMatch: ['**/tests/**/*.test.js'], // Указываем путь к тестам
  setupFilesAfterEnv: ['<rootDir>/setupTests.js'], // Подключаем файл с настройками перед каждым тестом
};

Файл setupTests.js может содержать дополнительные настройки, например, подключение и настройку Puppeteer, если это необходимо.

Структура теста с Puppeteer

Пример структуры теста для взаимодействия с веб-страницей с использованием Puppeteer и Jest: 

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

  beforeAll(async () => {
    page = await global.browser.newPage(); // Открываем новую вкладку
  });

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

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

  test('Проверка наличия элемента на странице', async () => {
    await page.goto('https://example.com');
    const element = await page.$('h1'); // Находим элемент
    expect(element).not.toBeNull(); // Проверяем, что элемент существует
  });
});

В этом примере создаются два теста: один проверяет заголовок страницы, второй — наличие элемента h1. Важно, что каждый тест выполняется в изолированной среде с новым экземпляром страницы, что исключает влияние одного теста на другой.

Использование селекторов и взаимодействие с элементами

Puppeteer предоставляет широкий набор методов для работы с элементами страницы, таких как:

  • page.(selector) < /code >  < /strong > —возвращаетпервыйэлемент, соответствующийселектору. < /li >  < li >  < strong >  < code > page.$</code></strong> — возвращает все элементы, соответствующие селектору.</li> <li><strong><code>element.click()</code></strong> — клик по элементу.</li> <li><strong><code>element.type(value)</code></strong> — ввод текста в поле.</li> <li><strong><code>page.waitForSelector(selector)</code></strong> — ожидание появления элемента на странице.</li> </ul> <p>Пример взаимодействия с элементом:</p> <pre class="javascript"><code>test(&#39;Отправка формы&#39;, async () =&gt; { await page.goto(&#39;https://example.com/form&#39;); await page.type(&#39;input[name=&quot;username&quot;]&#39;, &#39;testuser&#39;); // Ввод имени await page.type(&#39;input[name=&quot;password&quot;]&#39;, &#39;password123&#39;); // Ввод пароля await page.click(&#39;button[type=&quot;submit&quot;]&#39;); // Клик по кнопке await page.waitForSelector(&#39;.success-message&#39;); // Ожидание появления сообщения об успехе const message = await page.$eval('.success-message', el => el.textContent); expect(message).toBe('Форма успешно отправлена!'); });

    Этот тест имитирует ввод данных в форму и их отправку, после чего проверяется наличие сообщения об успешной отправке.

    Ожидание элементов и асинхронные операции

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

    test('Загрузка контента', async () => {
  await page.goto('https://example.com/content');
  await page.waitForSelector('.content-loaded'); // Ждем, пока контент загрузится
  const content = await page.$eval('.content-loaded', el => el.textContent);
  expect(content).toBe('Контент загружен');
});

    Кроме того, можно ожидать события, такие как загрузка изображений или изменение состояния на странице: 

    await page.waitForFunction('document.querySelector("img").complete'); // Ожидание загрузки изображения

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

    Для тестирования можно настроить браузер Puppeteer на определенные параметры, такие как работа в headless-режиме, установка пользовательского агента или изменение размера окна. Эти настройки можно выполнить в блоке beforeAll: 

    beforeAll(async () => {
  global.browser = await puppeteer.launch({
    headless: true, // Отключение визуализации браузера
    slowMo: 50, // Замедление для отслеживания действий
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });
});

    Кроме того, можно настроить страницу, например, установить пользовательский агент: 

    await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36');

    Советы по организации тестов

    • Разделяйте тесты на несколько файлов: Разбивайте тесты на отдельные модули для каждой функции или компонента. Это позволяет повысить читаемость и удобство обслуживания.

    • Используйте моки: Для тестирования без зависимости от внешних сервисов используйте моки или подменяйте API-запросы.

    • Автоматизируйте скриншоты и видеозаписи: Для удобства отладки можно делать скриншоты или записывать видео во время выполнения тестов: 

      await page.screenshot({ path: 'screenshot.png' });
await page.video({ path: 'test-video.mp4' });

    Отладка тестов

    При разработке тестов часто возникает необходимость в их отладке. Для этого можно использовать встроенные инструменты, такие как page.pause() для остановки теста на определенной точке и page.screenshot() для получения снимков экрана. Важно также использовать консольные логи для отслеживания состояния выполнения. 

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

    Выводы

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

Оглавление