E2E тестирование с Puppeteer

Puppeteer — это инструмент для автоматизации браузера, который предоставляет высокоуровневое API для взаимодействия с Google Chrome или Chromium. Он активно используется для тестирования веб-приложений, включая E2E (End-to-End) тестирование, которое заключается в проверке функциональности приложения в условиях, приближённых к реальной эксплуатации.

Основные концепты Puppeteer

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

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

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

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

npm install puppeteer

После установки можно подключить Puppeteer в своём тестовом скрипте и начать работать с ним:

const puppeteer = require(&

Для E2E тестирования важно правильно настроить браузер. Puppeteer по
умолчанию запускает Chromium, но можно настроить его для работы с уже
установленным Chrome:

const browser = await puppeteer.launch({
  executablePath: '/path/to/chrome'
});

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


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

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');

// Проверка наличия элемента
const element = await page.$('h1');
const text = await element.evaluate(el => el.textContent);
console.log(text);

await browser.close();

В этом примере выполняется следующее:



Запуск браузера и создание новой страницы.


Переход на сайт https://example.com.


Поиск первого элемента <h1> и извлечение его текста.


Закрытие браузера.



Этот подход легко масштабируется для написания тестов для более сложных
взаимодействий с веб-страницами.


Навигация и взаимодействие с элементами


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


Клик по элементу

const button = await page.$('button#submit');
await button.click();

Ввод текста в форму

const input = await page.$('input[name="username"]');
await input.type('my_username');

Ожидание загрузки элемента


В некоторых случаях нужно подождать, пока на странице не появится или не
изменится элемент:

await page.waitForSelector('#submit', { visible: true });

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


Сценарии с несколькими страницами и вкладками


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

const browser = await puppeteer.launch();
const page1 = await browser.newPage();
await page1.goto('https://example.com');

const page2 = await browser.newPage();
await page2.goto('https://example.org');

// Переход между страницами
await page1.bringToFront();
await page2.bringToFront();

await browser.close();

Работа с динамическим контентом


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


Для этого можно использовать метод waitForFunction, который
позволяет ожидать выполнения определённого условия:

await page.waitForFunction(
  'document.querySelector("h1").textContent.includes("Hello")'
);

Этот метод будет ждать, пока текст элемента <h1> не
станет содержать слово “Hello”.


Использование Puppeteer с фреймворками тестирования


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

npm install mocha chai puppeteer

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

const puppeteer = require('puppeteer');
const chai = require('chai');
const expect = chai.expect;

describe('Puppeteer E2E тесты', 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();
    expect(title).to.equal('Example Domain');
  });
});

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


Скриншоты и записи видео


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


Скриншоты

await page.screenshot({ path: 'screenshot.png' });

Запись видео


Puppeteer поддерживает запись видео с помощью флагов Chrome. Для записи
видео необходимо использовать метод ffmpeg в сочетании с
Puppeteer.


Подключение к удалённому браузеру


В некоторых случаях необходимо подключаться к удалённому браузеру,
например, при тестировании на CI/CD серверах или в облачных сервисах.
Puppeteer поддерживает подключение к удалённому экземпляру браузера
через WebSocket.

const browser = await puppeteer.connect({
  browserWSEndpoint: 'ws://localhost:9222/devtools/browser/abc123'
});

Такой подход позволяет запускать тесты на удалённых машинах, например, в
облаке или на сервере.


Оптимизация производительности тестов


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



Запуск в фоновом режиме: можно запускать браузер без
отображения графического интерфейса с флагом { headless: true
}.


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


const browser = await puppeteer.launch({
  headless: true,
  args: ['--no-sandbox', '--disable-setuid-sandbox']
});

Заключение


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