Этап 10 из 19 · ≈ 6 ч

Сквозные тесты — Playwright

Основа с Middle

Сценарии в настоящем браузере — вход, оформление заказа, оплата.

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

test("оформление заказа", async ({ page }) => {
  await page.goto("/catalog");
  await page.getByRole("button", { name: "В корзину" }).first().click();
  await page.getByRole("link", { name: "Корзина" }).click();
  await expect(page.getByText("Итого")).toBeVisible();
});

Что важно знать

  • E2E медленные и хрупкие — только ключевые сценарии.
  • Ждать состояний, а не секунд: автоматические ожидания Playwright вместо sleep.
  • Стабильные тестовые данные и изоляция тестов друг от друга.
  • Запуск в нескольких браузерах, трассировка и видео упавших тестов в CI.
  • Нестабильные тесты чинят сразу — иначе им перестают доверять.

Критерии освоения

Middle ≈ 6 ч

  • Пишет сквозные тесты ключевых сценариев на Playwright без фиксированных задержек
  • Запускает их в CI с трассировкой упавших тестов

Практика. Покрыть Playwright 3 ключевых сценария (вход, поиск, оформление заказа) и запустить в CI в двух браузерах.

Senior ≈ 4 ч

  • Определяет, какие сценарии покрывать сквозными тестами, и борется с нестабильными тестами

Практика. Провести аудит набора e2e-тестов — убрать дублирующие, починить нестабильные, сократить время прогона.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Как писать сквозные (e2e) тесты на Playwright?Middle

E2E-тест проходит пользовательский сценарий в настоящем браузере против развёрнутого приложения: вход, поиск, оформление заказа. Их мало (вершина пирамиды) — только ключевые сценарии. В Playwright элементы ищут как пользователь: getByRole, getByLabel…

Полный разбор
Что делать с нестабильными (flaky) тестами?Middle

Нестабильный тест подрывает доверие ко всем тестам: команда привыкает перезапускать и пропускает настоящие ошибки. Частые причины: ожидание по времени (sleep) вместо условия, общие данные между тестами, порядок выполнения, зависимость от внешних сервисов и…

Полный разбор
Что тестировать во фронтенд-приложении на React?Junior

Тестировать поведение, важное пользователю: что показывается при разных данных (пусто, ошибка, загрузка, список), что происходит после действий (отправка формы, фильтр, удаление), валидацию и граничные случаи. Чистую логику (форматирование, расчёты) …

Полный разбор
Как писать юнит-тесты на фронтенде (Vitest, Jest)?Junior

Юнит-тесты проверяют логику без браузера: функции форматирования, расчёты, валидацию, редьюсеры, хуки. Vitest (быстрый, совместим с Vite) и Jest — похожий API: describe, it/test, expect(...).toBe/toEqual/toThrow. Зависимости подменяют моками (vi.fn, vi.mock)…

Полный разбор

Документация

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования