Режим браузера экспериментальный

Эта страница содержит информацию об экспериментальном режиме браузера в Vitest API, который позволяет запускать тесты непосредственно в браузере и получать доступ к глобальным переменным, таким как window и document. Эта функция находится на стадии разработки, и API может быть изменен в будущем.

Совместимость с браузерами

Vitest использует Vite dev server для запуска ваших тестов, поэтому мы поддерживаем только те функции, которые указаны в параметре esbuild.target (по умолчанию esnext).

По умолчанию Vite нацелен на браузеры, которые поддерживают собственные модули ES, собственный динамический импорт ESM и import.meta. Кроме того, мы используем BroadcastChannel для связи между iFrame:

• Chrome >=87
• Firefox >=78
• Safari >=15.4
• Edge >=88

Мотивация

Мы разработали режим браузера Vitest для улучшения процесса тестирования и получения более точных и надежных результатов. Это экспериментальное дополнение к нашему API тестирования позволяет разработчикам запускать тесты в реальном браузере. В этом разделе мы рассмотрим мотивацию этой функции и ее преимущества для тестирования.

Различные подходы к тестированию

Существуют различные подходы к тестированию кода JavaScript. Некоторые фреймворки тестирования имитируют браузерную среду в Node.js, в то время как другие запускают тесты в реальных браузерах. В этом контексте, jsdom — это реализация спецификации, имитирующая браузерную среду. Он используется с такими тест-раннерами, как Jest или Vitest. Другие инструменты тестирования, такие как WebdriverIO или Cypress, позволяют разработчикам тестировать свои приложения в реальном браузере. Playwright предоставляет движок браузера.

Предостережения об имитации

Тестирование JavaScript в имитированных средах, таких как jsdom или happy-dom, упрощает настройку тестов и предоставляет простой в использовании API, что делает их подходящими для многих проектов и повышает уверенность в результатах тестов. Однако важно помнить, что эти инструменты лишь имитируют браузерную среду, а не являются реальным браузером. Это может привести к расхождениям между результатами в имитированной среде и в реальном браузере. Следовательно, могут возникать ложные срабатывания.

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

Недостатки

При использовании Vitest browser важно учитывать следующие недостатки:

Ранняя стадия разработки

Режим браузера Vitest все еще находится на ранней стадии разработки. Поэтому он может быть еще не полностью оптимизирован, и могут быть ошибки или проблемы, которые еще не устранены. Рекомендуется использовать Vitest вместе с отдельными средствами запуска тестов на стороне браузера, такими как WebdriverIO, Cypress или Playwright.

Более длительная инициализация

Vitest browser требует запуска провайдера и браузера в процессе инициализации, что может занять больше времени. Это может привести к увеличению времени инициализации по сравнению с другими подходами к тестированию.

Конфигурация

Чтобы активировать режим браузера в вашей конфигурации Vitest, вы можете использовать флаг --browser или установить для поля browser.enabled значение true в вашей конфигурации Vitest. Вот пример конфигурации с использованием поля browser:

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      name: 'chrome', // browser name is required (имя браузера обязательно)
    },
  },
});

Типы параметров браузера:

Параметры browser в Vitest зависят от провайдера. Vitest завершится с ошибкой, если указан флаг --browser, но не указано имя браузера в файле конфигурации. Доступные параметры:

• webdriverio (по умолчанию) поддерживает следующие браузеры:
  • firefox
  • chrome
  • edge
  • safari
• playwright поддерживает следующие браузеры:
  • firefox
  • webkit
  • chromium

Кроссбраузерное тестирование:

Когда вы указываете имя браузера в параметрах browser, Vitest попытается запустить указанный браузер с помощью WebdriverIO по умолчанию, а затем запустит там тесты. Эта функция упрощает использование и настройку кроссбраузерного тестирования, например, в CI. Если вы не хотите использовать WebdriverIO, вы можете настроить пользовательский провайдер браузера, используя параметр browser.provider.

Чтобы указать браузер с помощью CLI, используйте флаг --browser, за которым следует имя браузера, например:

npx vitest --browser=chrome

Или вы можете предоставить параметры браузера в CLI с помощью точечной нотации:

npx vitest --browser.name=chrome --browser.headless

NOTE

При использовании параметра браузера Safari с WebdriverIO необходимо активировать safaridriver, выполнив sudo safaridriver --enable на вашем устройстве.

Кроме того, при запуске тестов Vitest попытается установить необходимые драйверы для совместимости с safaridriver.

Headless (Безголовый режим)

Безголовый режим — это еще один параметр, доступный в режиме браузера. В безголовом режиме браузер работает в фоновом режиме без графического интерфейса, что удобно для автоматизированных тестов. Параметр headless в Vitest можно установить в логическое значение true или false, чтобы включить или отключить безголовый режим.

Вот пример конфигурации, включающей headless mode:

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      headless: true,
    },
  },
});

Вы также можете установить headless mode с помощью флага --browser.headless в CLI, например:

npx vitest --browser.name=chrome --browser.headless

В этом случае Vitest будет работать в headless mode с использованием браузера Chrome.

Ограничения

Блокирующие диалоговые окна

При использовании Vitest Browser следует учитывать, что блокирующие диалоговые окна, такие как alert или confirm, не могут быть использованы напрямую. Это связано с тем, что они блокируют веб-страницу, что означает, что Vitest не может продолжать взаимодействие со страницей, что приводит к зависанию выполнения.

В таких ситуациях Vitest предоставляет моки по умолчанию со значениями, возвращаемыми по умолчанию для этих API. Это предотвратит зависание выполнения, если пользователь случайно использует синхронные всплывающие веб-API. Однако для лучшей работы рекомендуется создавать заглушки для этих веб-API. Подробнее читайте в разделе Mocking.