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

Вы можете использовать WebdriverIO для автоматизации следующего:

  • 🌐 современные веб-приложения, написанные на React, Vue, Angular, Svelte или других фреймворках.
  • 📱 гибридные или нативные мобильные приложения, работающие в эмуляторе/симуляторе или на реальном устройстве.
  • 💻 собственные настольные приложения (например, написанные с помощью Electron.js)
  • 📦 модульное или компонентное тестирование веб-компонентов в браузере.

В этой статье мы рассмотрим, как запускать наши автоматические тесты на основе браузера WebDriverIO в Browserstack с помощью доступной службы npm wdio browserstack-service. Давайте начнем!!

Шаг 1. Настройте Node js и Visual Studio Code

Чтобы настроить WebdriverIO, нам необходимо убедиться, что в нашей системе установлено следующее программное обеспечение.

Node js: вы можете посетить их страницу скачать и установить соответствующую версию Node в зависимости от вашей ОС и архитектуры компьютера.

Visual Studio Code: перейдите на страницу скачать, чтобы установить редактор кода Visual Studio на свой компьютер.

Шаг 2: Установите WebdriverIO с помощью npm

· Во-первых, мы можем создать новую пустую папку в любом из доступных мест на диске, которая будет использоваться для установки кода нашего проекта и необходимых зависимостей.

· Затем откройте VS Code и перейдите в меню «Файл», а затем выберите параметр: «Открыть папку», просмотрите и выберите только что созданную папку, чтобы открыть ее в VS Code.

· После того, как папка открыта, нам нужно перейти в пункт меню «Терминал», а затем выбрать параметр: «Новый терминал», который откроет терминал.

Выполните приведенную ниже команду, чтобы установить WebdriverIO.

npm init wdio@latest ./

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

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

Наконец, когда вы укажете «Да» для запуска установки npm, будут установлены все соответствующие выбранные пакеты.

Вы можете проверить установленные пакеты/dev-зависимости в файле package.json, доступном в корневом каталоге проекта.

Как мы указали, «Да» для параметра конфигурации: «Вы хотите, чтобы WebdriverIO автоматически генерировал некоторые тестовые файлы». Итак, WebdriverIO пошла дальше и настроила базовый пример фрагмента тестового сценария входа в систему на основе сценария входа пользователя, который будет доступен в нашей папке test/specs.

Шаг 3. Запустите пробные тесты в нашей локальной среде.

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

npm run wdio

В моем случае пример теста выполнялся в браузере Chrome версии 110.0 в среде Windows 10.

Шаг 4: Выполните тесты в разных браузерах, ОС в BrowserStack

WebdriverIO имеет встроенную поддержку BrowserStack, с помощью которой мы можем легко настроить наши тесты WebdriverIO для запуска в BrowserStack.

Для этого нам нужно будет выполнить следующие шаги, как указано ниже.

Установите службу npm wdio/browserstack-service с помощью приведенной ниже команды

npm install @wdio/browserstack-service --save-dev

Далее нам нужно настроить сведения о службе BrowserStack в нашем файле wdio.conf.js в разделе служб.

Я указал для testObservability значение true, подробнее об этом читайте здесь, а также добавил образцы данных projectName и buildName.

Затем я войду в свою учетную запись браузера, перейду к разделу «Автоматизация», доступному на домашней странице, и выберу WebdriverIO в Node JS.

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

В разделе «Настройка тестового сценария» мы можем выбрать соответствующий компьютер, браузер и сведения о версии, которые сгенерируют соответствующий фрагмент кода с данными конфигурации, которые нам нужно будет указать в разделе наших возможностей, доступном в wdio.conf. .js-файл.

Я выберу приведенные ниже сведения для охвата браузеров Chrome, Firefox и Safari в операционных системах Windows и MacOS, а также добавлю сведения о конкретном браузере и версии в разделе возможностей файла wdio.conf.js.

Кроме того, не забудьте добавить пользователя BrowserStack и ключевые данные

Наконец, как и раньше, просто запустите команду «npm run wdio», теперь наши тесты браузера будут выполняться в BrowserStack на основе указанных возможностей.

Вы можете просмотреть полную информацию о выполнении вместе с журналами команд, сетевыми журналами и видеозаписями для каждого запуска теста, что помогает во время отладки анализировать сбои теста или другие проблемы.

Видеозаписи нескольких тестовых прогонов, выполненных в среде BrowserStack.

Наконец, загляните на Test Observeability page от BrowserStack, чтобы получить более подробный анализ всех ваших тестовых запусков, сбоев и метрик на основе сборок, наборов тестов и т. д.

Надеюсь, эта статья оказалась для вас полезной, и спасибо за прочтение!!