E2E тестирование JavaScript-приложений: от хаоса к уверенности

Онлайн-тренажер Python для начинающих

Изучайте Python легко и без перегрузки теорией. Решайте практические задачи с автоматической проверкой, получайте подсказки на русском языке и пишите код прямо в браузере — без необходимости что-либо устанавливать.

Начать курс

Почему «ручное тыканье» больше не работает?

Представьте: вы допилили фичу, нажали «Run» в редакторе, в браузере всё выглядит идеально. Выпускаете в прод. А через час — паника: форма регистрации сломалась, потому что кто-то случайно изменил CSS-класс, а ваш коллега не заметил. Знакомо? Если вы пишете на JavaScript и используете Python на бэкенде, вы наверняка сталкивались с ситуацией, когда E2E тестирование JavaScript приложений могло бы спасти вам вечер.

End-to-end (E2E) тесты — это не роскошь, а базовая гигиена для любого серьёзного проекта. Они имитируют действия реального пользователя: клики, ввод данных, прокрутку, проверку ответов сервера. И да, они работают с вашим стеком — будь то React, Vue, Angular или просто ванильный JS.

В этой статье мы разберем, как внедрить сквозное тестирование веб-приложений без боли, используя современные инструменты. Вы увидите реальные примеры кода на JavaScript, узнаете, как дружить E2E с Python-бэкендом, и получите чек-лист для внедрения. Поехали!

Что такое E2E тестирование и зачем оно вам?

E2E тестирование (End-to-End) — это процесс проверки всего пользовательского пути от начала до конца. Например: открыть сайт → найти товар → добавить в корзину → оформить заказ → проверить, что на почту пришло письмо.

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

Когда E2E тесты особенно нужны

Вы переписываете старый код на новый фреймворк.
У вас микросервисная архитектура + Python на бэкенде.
Вы часто выпускаете релизы и боитесь регрессии.
Клиенты жалуются на «глюки», которые не воспроизводятся локально.

Без E2E вы рискуете узнать о баге от пользователя. С E2E вы узнаете о нём за минуту до деплоя.

Выбираем инструмент: Playwright vs Cypress

На рынке два главных игрока для автоматизации тестирования JavaScript: Playwright (от Microsoft) и Cypress (от компании с таким же названием). Оба мощные, но есть нюансы.

Playwright

Поддерживает все браузеры: Chromium, Firefox, WebKit (Safari).
Работает с iframe, вкладками, несколькими страницами.
Пишется на JS/TS, Python, C#, Java.
Отлично подходит для сложных сценариев: загрузка файлов, перехват сетевых запросов, эмуляция мобильных устройств.

Cypress

Более простой синтаксис, встроенный дашборд.
Работает только в Chromium (и Firefox экспериментально).
Не умеет открывать несколько вкладок.
Идеален для небольших проектов и быстрого старта.

Наш выбор для статьи — Playwright, так как он ближе к Python-разработчикам (есть официальный Python API) и покрывает 99% сценариев. Но и Cypress мы покажем на примере.

Пишем первый E2E тест на Playwright (JavaScript)

Установка простая:

npm init -y
npm install @playwright/test
npx playwright install

Теперь создадим файл tests/example.spec.js. Допустим, мы тестируем страницу логина на сайте pythonlib.ru (да, это вымышленный пример, но логика реальная).

const { test, expect } = require('@playwright/test');

test('Пользователь может войти в систему', async ({ page }) => {
  // 1. Открываем страницу логина
  await page.goto('https://pythonlib.ru/login');

  // 2. Заполняем поля
  await page.fill('#email', 'test@example.com');
  await page.fill('#password', 'securePassword123');

  // 3. Нажимаем кнопку "Войти"
  await page.click('button[type="submit"]');

  // 4. Ждем редиректа на дашборд
  await page.waitForURL('**/dashboard');

  // 5. Проверяем, что приветствие содержит имя пользователя
  const greeting = await page.textContent('.user-greeting');
  expect(greeting).toContain('test@example.com');
});

Этот тест делает то же самое, что сделал бы живой тестировщик: открыл браузер, ввел данные, нажал кнопку, проверил результат. Разница — скорость (5 секунд вместо 2 минут) и отсутствие человеческой ошибки.

Как протестировать взаимодействие с Python-бэкендом

Часто ваш фронтенд общается с API на Python (Django, FastAPI, Flask). E2E тесты могут перехватывать и проверять эти запросы. Например, мы хотим убедиться, что после логина отправляется правильный POST-запрос.

test('Проверка API-запроса при логине', async ({ page }) => {
  // Слушаем все запросы на /api/login
  const requestPromise = page.waitForRequest('**/api/login');

  await page.goto('https://pythonlib.ru/login');
  await page.fill('#email', 'test@example.com');
  await page.fill('#password', 'securePassword123');
  await page.click('button[type="submit"]');

  const request = await requestPromise;

  // Проверяем тело запроса
  const body = JSON.parse(request.postData());
  expect(body.email).toBe('test@example.com');
  expect(body.password).toBe('securePassword123');
});

Это мощный приём: вы тестируете не только UI, но и корректность данных, которые уходят на сервер. Если Python-разработчик изменит формат JSON — тест упадет, и вы узнаете об этом до деплоя.

Cypress: альтернатива для быстрого старта

Если вам нужно быстро написать пару тестов и вы не хотите разбираться с конфигами — попробуйте Cypress. Вот как выглядит тот же тест логина:

describe('Login flow', () => {
  it('should login successfully', () => {
    cy.visit('https://pythonlib.ru/login');
    cy.get('#email').type('test@example.com');
    cy.get('#password').type('securePassword123');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
    cy.get('.user-greeting').should('contain', 'test@example.com');
  });
});

Короче и читаемее, правда? Но помните: Cypress работает в одном окне, и если ваш сценарий включает открытие новой вкладки — придется использовать cy.window() и хаки. Playwright в этом плане гибче.