Раннер

Раннер в WebdriverIO организует то, как и где запускаются тесты при использовании testrunner. WebdriverIO в настоящее время поддерживает два различных типа раннеров: локальный и браузерный.

Локальный раннер

Локальный раннер инициирует ваш фреймворк (например, Mocha, Jasmine или Cucumber) в рабочем процессе и запускает все ваши тестовые файлы в среде Node.js. Каждый тестовый файл запускается в отдельном рабочем процессе для каждой capability, что обеспечивает максимальную параллельность. Каждый рабочий процесс использует один экземпляр браузера и, таким образом, запускает собственную сессию браузера, обеспечивая максимальную изоляцию.

Поскольку каждый тест запускается в собственном изолированном процессе, невозможно обмениваться данными между тестовыми файлами. Существует два способа обойти это:

использовать @wdio/shared-store-service для обмена данными между всеми рабочими процессами
группировать spec-файлы (подробнее в Organizing Test Suite)

Если в wdio.conf.js не определено иное, Локальный раннер является раннером по умолчанию в WebdriverIO.

Установка

Для использования Локального раннера вы можете установить его через:

npm install --save-dev @wdio/local-runner

Настройка

Локальный раннер является раннером по умолчанию в WebdriverIO, поэтому нет необходимости определять его в вашем wdio.conf.js. Если вы хотите явно его указать, вы можете определить его следующим образом:

// wdio.conf.js
export const {
    // ...
    runner: 'local',
    // ...
}

Браузерный раннер

В отличие от Локального раннера, Браузерный раннер инициирует и выполняет фреймворк внутри браузера. Это позволяет вам запускать модульные тесты или компонентные тесты в реальном браузере, а не в JSDOM, как во многих других тестовых фреймворках.

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

Вот обзор запуска тестов в JSDOM по сравнению с браузерным раннером WebdriverIO:

	JSDOM	WebdriverIO Browser Runner
1.	Запускает ваши тесты в Node.js, используя повторную реализацию веб-стандартов, в частности, стандартов WHATWG DOM и HTML	Выполняет ваш тест в реальном браузере и запускает код в той среде, которую используют ваши пользователи
2.	Взаимодействия с компонентами могут быть только имитированы через JavaScript	Вы можете использовать WebdriverIO API для взаимодействия с элементами через протокол WebDriver
3.	Поддержка Canvas требует дополнительных зависимостей и имеет ограничения	У вас есть доступ к реальному Canvas API
4.	JSDOM имеет некоторые оговорки и неподдерживаемые Web API	Все Web API поддерживаются, так как тест запускается в реальном браузере
5.	Невозможно обнаружить ошибки в разных браузерах	Поддержка всех браузеров, включая мобильные
6.	Не может тестировать псевдосостояния элементов	Поддержка псевдосостояний, таких как `:hover` или `:active`

Этот раннер использует Vite для компиляции вашего тестового кода и загрузки его в браузер. Он поставляется с предустановками для следующих компонентных фреймворков:

React
Preact
Vue.js
Svelte
SolidJS
Stencil

Каждый тестовый файл/группа тестовых файлов запускается в рамках одной страницы, что означает, что между каждым тестом страница перезагружается для обеспечения изоляции между тестами.

Установка

Для использования Браузерного раннера вы можете установить его через:

npm install --save-dev @wdio/browser-runner

Настройка

Чтобы использовать браузерный раннер, необходимо определить свойство runner в файле wdio.conf.js, например:

// wdio.conf.js
export const {
    // ...
    runner: 'browser',
    // ...
}

Опции раннера

Браузерный раннер допускает следующие конфигурации:

`preset`

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

wdio.conf.js
export const {
    // ...
    runner: ['browser', {
        preset: 'svelte'
    }],
    // ...
}

`viteConfig`

Определите вашу собственную конфигурацию Vite. Вы можете передать пользовательский объект или импортировать существующий файл vite.conf.ts, если вы используете Vite.js для разработки. Обратите внимание, что WebdriverIO сохраняет пользовательские конфигурации Vite для настройки тестового окружения.

Тип: string или UserConfig или (env: ConfigEnv) => UserConfig | Promise<UserConfig>
Пример:

wdio.conf.ts
import viteConfig from '../vite.config.ts'

export const {
    // ...
    runner: ['browser', { viteConfig }],
    // или просто:
    runner: ['browser', { viteConfig: '../vites.config.ts' }],
    // или используйте функцию, если ваша конфигурация vite содержит много плагинов,
    // которые вы хотите разрешить только при чтении значения
    runner: ['browser', {
        viteConfig: () => ({
            // ...
        })
    }],
    // ...
}

`headless`

Если установлено значение true, раннер обновит capabilities для запуска тестов в безголовом режиме. По умолчанию это включено в средах CI, где переменная среды CI установлена на '1' или 'true'.

Тип: boolean
По умолчанию: false, устанавливается на true, если переменная среды CI установлена

`rootDir`

Корневой каталог проекта.

Тип: string
По умолчанию: process.cwd()

`coverage`

WebdriverIO поддерживает отчеты о покрытии тестами через istanbul. Подробнее см. в разделе Опции покрытия.

Тип: object
По умолчанию: undefined

Опции покрытия

Следующие опции позволяют настроить отчеты о покрытии.

`enabled`

Включает сбор данных о покрытии.

Тип: boolean
По умолчанию: false

`include`

Список файлов, включенных в покрытие, в виде шаблонов glob.

Тип: string[]
По умолчанию: [**]

`exclude`

Список файлов, исключенных из покрытия, в виде шаблонов glob.

Тип: string[]
По умолчанию:

[
  'coverage/**',
  'dist/**',
  'packages/*/test{,s}/**',
  '**/*.d.ts',
  'cypress/**',
  'test{,s}/**',
  'test{,-*}.{js,cjs,mjs,ts,tsx,jsx}',
  '**/*{.,-}test.{js,cjs,mjs,ts,tsx,jsx}',
  '**/*{.,-}spec.{js,cjs,mjs,ts,tsx,jsx}',
  '**/__tests__/**',
  '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*',
  '**/.{eslint,mocha,prettier}rc.{js,cjs,yml}',
]

`extension`

Список расширений файлов, которые должен включать отчет.

Тип: string | string[]
По умолчанию: ['.js', '.cjs', '.mjs', '.ts', '.mts', '.cts', '.tsx', '.jsx', '.vue', '.svelte']

`reportsDirectory`

Каталог для записи отчета о покрытии.

Тип: string
По умолчанию: ./coverage

`reporter`

Используемые репортеры покрытия. См. документацию istanbul для подробного списка всех репортеров.

Тип: string[]
По умолчанию: ['text', 'html', 'clover', 'json-summary']

`perFile`

Проверка пороговых значений для каждого файла. См. lines, functions, branches и statements для фактических пороговых значений.

Тип: boolean
По умолчанию: false

`clean`

Очистка результатов покрытия перед запуском тестов.

Тип: boolean
По умолчанию: true

`lines`

Пороговое значение для строк.

Тип: number
По умолчанию: undefined

`functions`

Пороговое значение для функций.

Тип: number
По умолчанию: undefined

`branches`

Пороговое значение для ветвей.

Тип: number
По умолчанию: undefined

`statements`

Пороговое значение для операторов.

Тип: number
По умолчанию: undefined

Ограничения

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

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

Примеры

Обязательно ознакомьтесь с документацией по компонентному тестированию и посмотрите пример репозитория для примеров использования этих и различных других фреймворков.

Локальный раннер​

Установка​

Настройка​

Браузерный раннер​

Установка​

Настройка​

Опции раннера​

preset​

viteConfig​

headless​

rootDir​

coverage​

Опции покрытия​

enabled​

include​

exclude​

extension​

reportsDirectory​

reporter​

perFile​

clean​

lines​

functions​

branches​

statements​

Ограничения​

Примеры​

Локальный раннер

Установка

Настройка

Браузерный раннер

Установка

Настройка

Опции раннера

`preset`

`viteConfig`

`headless`

`rootDir`

`coverage`

Опции покрытия

`enabled`

`include`

`exclude`

`extension`

`reportsDirectory`

`reporter`

`perFile`

`clean`

`lines`

`functions`

`branches`

`statements`

Ограничения

Примеры