Тестирование компонентов

С помощью Browser Runner от WebdriverIO вы можете запускать тесты в реальном настольном или мобильном браузере, используя WebdriverIO и протокол WebDriver для автоматизации и взаимодействия с тем, что отображается на странице. Этот подход имеет множество преимуществ по сравнению с другими тестовыми фреймворками, которые позволяют тестировать только с использованием JSDOM.

Как это работает?

Browser Runner использует Vite для отображения тестовой страницы и инициализации тестового фреймворка для запуска ваших тестов в браузере. В настоящее время он поддерживает только Mocha, но Jasmine и Cucumber входят в дорожную карту. Это позволяет тестировать любые компоненты даже для проектов, которые не используют Vite.

Сервер Vite запускается тестовым раннером WebdriverIO и настраивается так, чтобы вы могли использовать все репортеры и сервисы, как вы привыкли для обычных e2e-тестов. Кроме того, он инициализирует экземпляр browser, который позволяет вам получить доступ к подмножеству WebdriverIO API для взаимодействия с любыми элементами на странице. Аналогично e2e-тестам, вы можете получить доступ к этому экземпляру через переменную browser, прикрепленную к глобальной области видимости, или импортируя её из @wdio/globals, в зависимости от настройки injectGlobals.

WebdriverIO имеет встроенную поддержку следующих фреймворков:

• Nuxt: тестовый раннер WebdriverIO обнаруживает приложение Nuxt и автоматически настраивает композаблы вашего проекта и помогает имитировать бэкенд Nuxt, подробнее в документации Nuxt
• TailwindCSS: тестовый раннер WebdriverIO обнаруживает, используете ли вы TailwindCSS, и правильно загружает окружение в тестовую страницу

Настройка

Чтобы настроить WebdriverIO для модульного или компонентного тестирования в браузере, инициализируйте новый проект WebdriverIO с помощью:

npm init wdio@latest ./
# или
yarn create wdio ./

Когда запустится мастер конфигурации, выберите browser для запуска модульного и компонентного тестирования и выберите один из предустановленных вариантов, или выберите "Other", если вы хотите запускать только базовые модульные тесты. Вы также можете настроить пользовательскую конфигурацию Vite, если уже используете Vite в своем проекте. Для получения дополнительной информации ознакомьтесь со всеми опциями раннера.

информация

Примечание: По умолчанию WebdriverIO будет запускать тесты браузера в CI в безголовом режиме, например, если переменная окружения CI установлена в '1' или 'true'. Вы можете вручную настроить это поведение с помощью опции headless для раннера.

В конце этого процесса вы должны обнаружить wdio.conf.js, который содержит различные конфигурации WebdriverIO, включая свойство runner, например:

wdio.comp.conf.js

loading...

View on GitHub

Определяя различные capabilities, вы можете запускать свои тесты в разных браузерах, при желании параллельно.

Если вы всё ещё не уверены, как всё работает, посмотрите следующий учебник о том, как начать работу с компонентным тестированием в WebdriverIO:

Тестовая среда

Вы полностью решаете, что вы хотите запускать в своих тестах и как вы хотите отображать компоненты. Однако мы рекомендуем использовать Testing Library в качестве утилитарного фреймворка, так как он предоставляет плагины для различных компонентных фреймворков, таких как React, Preact, Svelte и Vue. Он очень полезен для отображения компонентов на тестовой странице и автоматически очищает эти компоненты после каждого теста.

Вы можете по своему усмотрению комбинировать примитивы Testing Library с командами WebdriverIO, например:

component-testing/svelte-example.js

loading...

View on GitHub

Примечание: использование методов рендеринга из Testing Library помогает удалять созданные компоненты между тестами. Если вы не используете Testing Library, убедитесь, что вы прикрепляете свои тестовые компоненты к контейнеру, который очищается между тестами.

Скрипты настройки

Вы можете настроить свои тесты, запуская произвольные скрипты в Node.js или в браузере, например, внедряя стили, имитируя API браузера или подключаясь к стороннему сервису. Хуки WebdriverIO можно использовать для запуска кода в Node.js, в то время как mochaOpts.require позволяет импортировать скрипты в браузер до загрузки тестов, например:

export const config = {
    // ...
    mochaOpts: {
        ui: 'tdd',
        // предоставить скрипт настройки для запуска в браузере
        require: './__fixtures__/setup.js'
    },
    before: () => {
        // настроить тестовое окружение в Node.js
    }
    // ...
}

Например, если вы хотите имитировать все вызовы fetch() в своем тесте со следующим скриптом настройки:

import { fn } from '@wdio/browser-runner'

// запустить код перед загрузкой всех тестов
window.fetch = fn()

export const mochaGlobalSetup = () => {
    // запустить код после загрузки тестового файла
}

export const mochaGlobalTeardown = () => {
    // запустить код после выполнения файла спецификации
}

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

Наблюдение за тестовыми и прикладными файлами

Существует несколько способов отладки браузерных тестов. Самый простой — запустить тестовый раннер WebdriverIO с флагом --watch, например:

$ npx wdio run ./wdio.conf.js --watch

Это изначально выполнит все тесты и остановится после выполнения всех. Затем вы можете вносить изменения в отдельные файлы, которые затем будут перезапущены индивидуально. Если вы установите filesToWatch, указывающий на файлы вашего приложения, все тесты будут перезапущены при внесении изменений в ваше приложение.

Отладка

Хотя (пока) невозможно установить точки останова в вашей IDE и иметь их распознаваемыми удаленным браузером, вы можете использовать команду debug для остановки теста в любой точке. Это позволяет вам открыть DevTools, чтобы затем отладить тест, установив точки останова на вкладке источников.

Когда вызывается команда debug, вы также получите интерфейс repl Node.js в своем терминале, который говорит:

The execution has stopped!
You can now go into the browser or use the command line as REPL
(To exit, press ^C again or type .exit)

Нажмите Ctrl или Command + c или введите .exit, чтобы продолжить тест.

Запуск с использованием Selenium Grid

Если у вас настроен Selenium Grid и вы запускаете свой браузер через этот грид, вам нужно установить опцию host для browser runner, чтобы браузер мог получить доступ к правильному хосту, где обслуживаются тестовые файлы, например:

export const config: WebdriverIO.Config = {
    runner: ['browser', {
        // сетевой IP-адрес машины, которая запускает процесс WebdriverIO
        host: 'http://172.168.0.2'
    }]
}

Это обеспечит, что браузер правильно откроет правильный экземпляр сервера, размещенный на экземпляре, который запускает тесты WebdriverIO.

Примеры

Вы можете найти различные примеры тестирования компонентов с использованием популярных компонентных фреймворков в нашем репозитории примеров.