Тестування компонентів

За допомогою 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 і автоматично налаштовує composables вашого проєкту та допомагає мокувати бекенд Nuxt, детальніше у документації Nuxt
• TailwindCSS: Тестраннер WebdriverIO виявляє, чи використовуєте ви TailwindCSS, і належним чином завантажує середовище на тестову сторінку

Налаштування

Щоб налаштувати WebdriverIO для юніт-тестування або тестування компонентів у браузері, ініціюйте новий проєкт WebdriverIO через:

npm init wdio@latest ./
# або
yarn create wdio ./

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

інфо

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

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

wdio.comp.conf.js

loading...

View on GitHub

Визначаючи різні можливості, ви можете запускати свої тести в різних браузерах, паралельно, якщо потрібно.

Якщо ви все ще не впевнені, як все працює, подивіться наступний навчальний посібник про те, як почати роботу з тестуванням компонентів у 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 браузера або підключаючись до стороннього сервісу. Хуки hooks 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, щоб дозволити браузеру доступ до правильного хоста, де обслуговуються тестові файли, наприклад:

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

Це забезпечить, що браузер правильно відкриє правильний екземпляр сервера, розміщений на екземплярі, який запускає тести WebdriverIO.

Приклади

Ви можете знайти різні приклади тестування компонентів за допомогою популярних фреймворків компонентів у нашому прикладі репозиторію.