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

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

Mocha — это популярный JavaScript-фреймворк для написания тестов. Он позволяет организовывать тесты в виде «describe» блоков, а также поддерживает асинхронные операции, что делает его отличным выбором для работы с Puppeteer. В этой главе рассмотрим, как настроить Mocha для работы с Puppeteer, писать и запускать тесты.

Установка зависимостей

Для начала потребуется установить все необходимые зависимости. Обычно для работы с Puppeteer и Mocha устанавливают следующие пакеты: 

npm install mocha puppeteer --save-dev
  • Mocha — тестовый фреймворк.
  • Puppeteer — библиотека для автоматизации браузера на базе Chrome.

После установки этих пакетов можно настроить тестовую среду.

Настройка Mocha для работы с Puppeteer

Mocha использует асинхронные функции для выполнения тестов. Поэтому важно правильно настроить время выполнения каждого теста и учитывать, что операции с Puppeteer могут занимать некоторое время.

Структура тестов

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

  • describe — для описания группы тестов.
  • it — для описания самого теста.

Пример структуры файла с тестами: 

const puppeteer = require(&

describe('Тестирование Puppeteer', function() {
  let browser;
  let page;

  // Настройка браузера и страницы перед запуском тестов
  before(async function() {
    browser = await puppeteer.launch();
    page = await browser.newPage();
  });

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

  it('Страница должна загрузиться корректно', async function() {
    await page.goto('https://example.com');
    const title = await page.title();
    title.should.equal('Example Domain');
  });

  it('Проверка элементов на странице', async function() {
    await page.goto('https://example.com');
    const element = await page.$('h1');
    const text = await element.evaluate(el => el.textContent);
    text.should.equal('Example Domain');
  });
});

Асинхронные операции

Mocha поддерживает асинхронные операции, и при работе с Puppeteer это крайне важно, поскольку взаимодействие с браузером занимает время. В тестах Mocha можно использовать async/await для управления асинхронными действиями. Это позволяет избежать сложных вложенных коллбеков и делает код более читаемым.

Каждый тест в Mocha может быть асинхронным. Для этого необходимо просто добавить async к функции теста и использовать await для выполнения асинхронных операций, таких как открытие страницы или получение данных с неё.

Ожидание загрузки страницы и элементов

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

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

it('Страница должна загрузиться полностью', async function() {
  await page.goto('https://example.com');
  await page.waitForSelector('h1'); // Ожидаем появления элемента
  const title = await page.title();
  title.should.equal('Example Domain');
});

Для более сложных случаев можно использовать другие методы ожидания, например:

  • page.waitForTimeout(ms) — ожидание заданного времени.
  • page.waitForSelector(selector) — ожидание появления элемента на странице.
  • page.waitForFunction(fn) — ожидание выполнения функции.

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

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

Пример: Заполнение формы и отправка 

it('Заполнение и отправка формы', async function() {
  await page.goto('https://example.com/contact');
  await page.type('#name', 'Иван Иванов'); // Заполнение поля
  await page.type('#email', 'ivan@example.com'); // Заполнение поля email
  await page.click('button[type="submit"]'); // Нажатие на кнопку отправки формы
  await page.waitForNavigation(); // Ожидание перехода на другую страницу после отправки формы
  const url = page.url();
  url.should.include('thank-you');
});

В этом примере используется page.type для ввода данных в поля формы, page.click для клика на кнопку и page.waitForNavigation для ожидания перехода на новую страницу.

Обработка ошибок

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

Пример с обработкой ошибок: 

it('Проверка наличия элементов на странице', async function() {
  try {
    await page.goto('https://example.com');
    const element = await page.$('non-existing-element');
    if (!element) throw new Error('Элемент не найден');
  } catch (error) {
    console.error(error);
    throw error; // Повторно выбрасываем ошибку для завершения теста
  }
});

Использование assertion-библиотек

Mocha не предоставляет своей встроенной системы утверждений, однако его можно интегрировать с различными библиотеками утверждений, такими как Chai. Библиотека Chai предоставляет простые методы для сравнения значений, проверки состояний объектов и т. д.

Пример интеграции с Chai: 

npm install chai --save-dev

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

const chai = require('chai');
const should = chai.should();

it('Страница должна содержать нужный текст', async function() {
  await page.goto('https://example.com');
  const text = await page.$eval('h1', el => el.textContent);
  text.should.equal('Example Domain');
});

Chai предоставляет различные стили утверждений: should, expect и assert. Все они имеют одинаковую функциональность, но синтаксис различается.

Запуск тестов

После того как тесты написаны, их можно запустить через Mocha с использованием команды: 

npx mocha

Mocha автоматически найдет все тестовые файлы в проекте, если они находятся в директории с тестами и соответствуют паттерну .test.js или .spec.js.

Кроме того, можно настроить запуск тестов с дополнительными параметрами, например, для запуска в режиме “watch” или для генерации отчетов.

Советы по улучшению тестов

  1. Использование перехватов и моков: Puppeteer позволяет перехватывать запросы и изменять их. Это полезно для тестирования с ограниченным доступом к внешним ресурсам.
  2. Отчеты и логирование: Mocha поддерживает различные репортеры для вывода результатов тестов. Для вывода подробных отчетов можно использовать репортеры, такие как mochawesome.
  3. Интеграция с CI/CD: Для автоматизации тестирования с Puppeteer и Mocha можно настроить интеграцию с системами непрерывной интеграции (например, GitHub Actions или Jenkins).

Заключение

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

Оглавление