Vitest 5: отладка браузерных тестов по шагам с Trace View

Каждый, кто хоть раз настраивал сквозные или компонентные тесты в реальном браузере, знает это специфическое чувство бессилия. Пайплайн в CI окрашивается в тревожный красный цвет. Ты открываешь артефакты сборки, находишь скриншот, снятый в момент падения теста, а там... просто чистая страница или закрытое модальное окно.

К тому моменту, когда assertion выбросил ошибку тайм-аута, интерфейс уже успел измениться: анимация завершилась, всплывающее уведомление растаяло, а форма сбросилась. Разработчику приходится запускать тест локально, вставлять искусственные паузы await sleep(5000), судорожно расставлять точки останова в дебаггере и пытаться поймать ускользающее состояние.

В мажорном релизе фреймворка Vitest 5 команда проекта нанесла сокрушительный удар по этой боли. В режиме выполнения тестов в реальном браузере (Browser Mode) появился интерактивный инструмент пошаговой отладки Trace View.

Ранее мы следили за тем, как развиваются инструменты экосистемы Vite и VoidZero, объединяющие сборку и тестирование в единый быстрый конвейер. Новый механизм трассировки в Vitest 5 делает работу с браузерными тестами настолько же наглядной и предсказуемой.

Сериализация DOM вместо тяжелого видео

Главная инженерная идея Trace View — отказ от громоздкой записи непрерывного видеопотока или разрозненных скриншотов. Вместо этого Vitest непрерывно фиксирует цифровые слепки дерева элементов:

• На каждое пользовательское действие (клик по кнопке, ввод текста в инпут, наведение курсора);
• На каждый вызов проверки состояния (expect(...));
• На каждую контрольную отметку, установленную разработчиком вручную через page.mark().

Эти слепки представляют собой легковесные сериализованные структуры DOM. Они сжимаются и сохраняются в хронологическом порядке. В результате мы получаем полноценную «машину времени» для теста: можно щелкнуть на любой шаг в таймлайне и увидеть в точности то состояние страницы, которое видел браузер в ту самую миллисекунду.

Где и как работает интерактивный просмотр

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

1. Прямо в браузере: при локальном запуске тестов с открытым окном браузера панель Trace View отображается рядом с тестируемым компонентом.
2. В графическом интерфейсе Vitest UI: удобный таймлайн позволяет перемещаться по шагам стрелками клавиатуры.
3. В официальном расширении для VS Code: клик по упавшему шагу в панели тестирования сразу подсвечивает проблемную строчку в твоем редакторе кода.
4. В автономных статических HTML-отчетах: сервер CI может сгенерировать единый HTML-архив сборки. Любой тестировщик или разработчик может открыть его локально в браузере без необходимости поднимать окружение и пересобирать проект.

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

// vitest.config.ts — включение Trace View в режиме Browser Mode
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      name: 'chromium',
      provider: 'playwright', // или 'webdriverio'
      traceView: true,
      headless: true,
    },
  },
});

Важнейшее преимущество реализации Vitest — полная независимость от конкретного браузерного драйвера. Функция одинаково надежно работает поверх Playwright, WebDriverIO или preview-провайдеров, не требуя специфических вендорных утилит командной строки.

// tests/checkout.test.ts — пример сценария с фиксацией шагов
import { test, expect } from 'vitest';
import { page } from '@vitest/browser/context';

test('оформление заказа с валидацией промокода', async () => {
  const promoInput = page.getByRole('textbox', { name: 'Промокод' });
  await promoInput.fill('SALE2026');

  const applyBtn = page.getByRole('button', { name: 'Применить' });
  await applyBtn.click();

  // При сбое этой проверки Trace View покажет состояние DOM в момент клика
  const discountLabel = page.getByTestId('discount-amount');
  await expect.element(discountLabel).toHaveText('-20%');
});

Практический итог

Режим Trace View в Vitest 5 переводит отладку браузерных тестов из категории шаманства с консольными логами в разряд точной инженерной диагностики. Возможность в два клика восстановить контекст сбоя прямо из CI-отчета экономит часы времени, позволяя фронтенд-командам сосредоточиться на создании надежных интерфейсов.