- Home »
Написание e2e тестов в Node.js с Puppeteer и Jest
Если ты когда-нибудь сталкивался с задачей автоматизации тестирования веб-приложений, то наверняка слышал про e2e (end-to-end) тесты. Это не просто очередная модная аббревиатура, а реально рабочий инструмент, который позволяет проверить, что твой сервис живёт и работает так, как ты задумал, а не только на уровне отдельных функций. В этой статье я расскажу, как быстро и без боли начать писать e2e тесты на Node.js с помощью связки Puppeteer и Jest. Будет много практики, примеры, схемы, грабли и лайфхаки. Если ты хочешь автоматизировать проверку своих сервисов, убедиться, что после деплоя ничего не отвалилось, или просто поиграться с браузером через код — добро пожаловать.
Как это работает? E2E тесты простыми словами
E2E тесты (end-to-end) — это когда ты не просто проверяешь отдельную функцию или API, а эмулируешь поведение реального пользователя: открываешь браузер, кликаешь по кнопкам, заполняешь формы, смотришь, что происходит. Это как если бы ты нанял робота, который заходит на твой сайт и делает всё то же, что и обычный юзер.
В нашем случае, связка Puppeteer и Jest — это идеальный дуэт для такой задачи:
- Puppeteer — это библиотека от Google, которая позволяет управлять браузером Chrome (или Chromium) через Node.js. Можно открывать страницы, кликать, скриншотить, даже парсить DOM.
- Jest — это популярный тестовый фреймворк, который отлично подходит для написания и запуска тестов, с удобной системой ассертов, моков и репортов.
Вместе они позволяют писать тесты, которые реально запускают браузер, делают действия и проверяют результат. Это не unit-тесты, которые гоняют отдельные функции, а полноценные сценарии, которые проходят через весь стек приложения.
Зачем это нужно? Кому и когда пригодится
- Ты хочешь быть уверен, что твой сайт работает после обновления или деплоя.
- Нужно автоматизировать рутинные проверки (например, доступность страниц, корректность логина, работу форм).
- Хочешь ловить баги до того, как их найдут пользователи (или, не дай бог, заказчик).
- Планируешь CI/CD — e2e тесты легко интегрируются в пайплайн.
- Любишь автоматизацию и хочешь поиграться с браузером через код (например, для парсинга или мониторинга).
Как быстро и просто всё настроить?
Погнали по шагам. Всё, что тебе нужно — это Node.js, npm (или yarn), и, желательно, git для версионирования.
- Создаём проект
mkdir my-e2e-tests
cd my-e2e-tests
npm init -y
- Ставим зависимости
npm install --save-dev jest puppeteer
Jest — тестовый раннер, Puppeteer — управление браузером. - Настраиваем Jest
npx jest --init
Можно просто добавить вpackage.json:
"scripts": {
"test": "jest"
}
- Пишем первый тест
Создай файлexample.e2e.test.js:
const puppeteer = require('puppeteer');describe('Google Search', () => {
let browser;
let page;beforeAll(async () => {
browser = await puppeteer.launch();
page = await browser.newPage();
});afterAll(async () => {
await browser.close();
});test('should display Google search results', async () => {
await page.goto('https://www.google.com');
await page.type('input[name="q"]', 'puppeteer');
await page.keyboard.press('Enter');
await page.waitForSelector('#search');
const results = await page.$$('#search .g');
expect(results.length).toBeGreaterThan(0);
});
});
- Запускаем тесты
npm test
Всё! Ты только что написал и запустил свой первый e2e тест, который реально открывает браузер, ищет что-то в Google и проверяет, что результаты появились.
Практические советы и схемы
- Headless или нет? По умолчанию Puppeteer запускает браузер в headless-режиме (без UI). Для отладки можно запускать с UI:
puppeteer.launch({ headless: false })
- Скриншоты и видео: Для дебага сохраняй скриншоты:
await page.screenshot({ path: 'screenshot.png' });
Для видео — используй сторонние плагины, например puppeteer-screen-recorder. - Тайминги и ожидания: Не используй
setTimeout— всегда жди селекторы:
await page.waitForSelector('.my-element');
- Параллельный запуск: Jest умеет запускать тесты параллельно, но Puppeteer может не выдержать много браузеров. Используй
--maxWorkersили запускай тесты последовательно. - CI/CD: Для запуска в CI (например, GitHub Actions, GitLab CI) — убедись, что есть xvfb или поддержка headless Chrome.
Положительные и отрицательные кейсы: сравнение
| Кейс | Что происходит | Рекомендации |
|---|---|---|
| Проверка логина | Тест логинится, проверяет редирект, ищет элемент профиля | Используй уникальные тестовые аккаунты, чисти куки перед каждым тестом |
| Тест падает из-за тайминга | Сайт не успел прогрузиться, селектор не найден | Используй waitForSelector, увеличь таймауты в Jest |
| Тесты не запускаются в CI | Нет поддержки headless Chrome, ошибки запуска | Проверь зависимости, используй puppeteer-core и свой Chrome, если нужно |
| Случайные падения | Тесты иногда проходят, иногда нет | Проверь, нет ли race conditions, добавь логику ожидания элементов |
Похожие решения, программы и утилиты
- Selenium — классика, работает с разными браузерами, но сложнее в настройке, медленнее, требует отдельного сервера. Официальный сайт
- Playwright — современный конкурент Puppeteer, поддерживает Chrome, Firefox, WebKit, умеет работать с несколькими браузерами одновременно. Официальный сайт
- Cypress — популярный инструмент для e2e тестов, с крутым UI и удобной отладкой, но не всегда подходит для сложных сценариев и интеграции с нестандартными браузерами. Официальный сайт
| Инструмент | Плюсы | Минусы |
|---|---|---|
| Puppeteer + Jest | Просто, быстро, легко интегрируется, headless, нативный JS | Только Chrome/Chromium, нет UI для дебага |
| Playwright | Мультибраузерность, мощные API, поддержка мобильных устройств | Чуть сложнее API, больше зависимостей |
| Selenium | Поддержка всех браузеров, язык не важен (есть клиенты для Java, Python, JS) | Медленно, сложно, требует отдельного сервера |
| Cypress | Крутой UI, простота, мощная отладка | Не поддерживает все браузеры, не всегда подходит для сложных сценариев |
Интересные факты и нестандартные способы использования
- С помощью Puppeteer можно не только тестировать, но и парсить сайты, делать скриншоты, генерировать PDF, мониторить аптайм страниц.
- Можно использовать Puppeteer для автоматизации рутинных задач: например, заполнять формы, собирать статистику, даже управлять веб-интерфейсами серверов.
- Некоторые используют Puppeteer для обхода защиты от ботов (но это уже на грани фола, не злоупотребляй).
- Можно запускать тесты на выделенном сервере или VPS, чтобы не грузить локальную машину. Заказать VPS или выделенный сервер — и гонять тесты хоть 24/7.
- Есть проекты, которые используют Puppeteer для визуального тестирования — сравнивают скриншоты до и после изменений.
Статистика и сравнение с другими решениями
- Puppeteer — более 85k звезд на GitHub, активно развивается, поддерживается Google.
- Playwright — быстро набирает популярность, уже более 60k звезд, поддерживается Microsoft.
- Selenium — старейший инструмент, но всё чаще уступает новым решениям по скорости и удобству.
- Jest — де-факто стандарт для тестирования в JS/TS-проектах, легко интегрируется с CI/CD.
В реальных проектах Puppeteer + Jest часто выбирают за простоту и скорость старта, особенно если нужен только Chrome/Chromium. Для мультибраузерности — Playwright, для сложных корпоративных сценариев — Selenium.
Какие новые возможности открываются?
- Автоматизация smoke-тестов после каждого деплоя — можно быть уверенным, что сайт не отвалился.
- Мониторинг доступности и корректности работы страниц — можно запускать тесты по расписанию и получать алерты.
- Быстрая отладка багов — скриншоты, логи, видео позволяют понять, что пошло не так.
- Интеграция с CI/CD — тесты запускаются автоматически при каждом пуше или мерже.
- Возможность писать свои скрипты для автоматизации любых действий в браузере.
Выводы и рекомендации
Если тебе нужно быстро и просто начать писать e2e тесты для своего веб-приложения — связка Puppeteer + Jest это то, что доктор прописал. Минимум зависимостей, максимум пользы. Ты получаешь возможность эмулировать действия реального пользователя, ловить баги до релиза, автоматизировать рутинные проверки и быть уверенным в стабильности своего сервиса.
Для старта достаточно пары команд и десятка строк кода. Если нужен мультибраузер — обрати внимание на Playwright. Для сложных сценариев и интеграции с разными языками — Selenium. Но для большинства задач, особенно если ты работаешь с Node.js и хочешь быстрое решение — Puppeteer + Jest вне конкуренции.
Не забывай про CI/CD, автоматизацию и мониторинг. Запускай тесты на VPS или выделенном сервере — заказать VPS или выделенный сервер можно прямо сейчас.
Пробуй, экспериментируй, автоматизируй всё, что можно — и пусть твои сервисы всегда будут на высоте!
Официальные ссылки для изучения:
В этой статье собрана информация и материалы из различных интернет-источников. Мы признаем и ценим работу всех оригинальных авторов, издателей и веб-сайтов. Несмотря на то, что были приложены все усилия для надлежащего указания исходного материала, любая непреднамеренная оплошность или упущение не являются нарушением авторских прав. Все упомянутые товарные знаки, логотипы и изображения являются собственностью соответствующих владельцев. Если вы считаете, что какой-либо контент, использованный в этой статье, нарушает ваши авторские права, немедленно свяжитесь с нами для рассмотрения и принятия оперативных мер.
Данная статья предназначена исключительно для ознакомительных и образовательных целей и не ущемляет права правообладателей. Если какой-либо материал, защищенный авторским правом, был использован без должного упоминания или с нарушением законов об авторском праве, это непреднамеренно, и мы исправим это незамедлительно после уведомления. Обратите внимание, что переиздание, распространение или воспроизведение части или всего содержимого в любой форме запрещено без письменного разрешения автора и владельца веб-сайта. Для получения разрешений или дополнительных запросов, пожалуйста, свяжитесь с нами.
More stories
