Настройка проекта WebDriverIO с помощью JS и TS

Пошаговое руководство по созданию проекта WDIO с использованием JavaScript и TypeScript

В современном быстро меняющемся мире разработки программного обеспечения автоматизированное тестирование стало неотъемлемой частью процесса обеспечения качества. Когда дело доходит до тестирования веб-приложений, WebDriverIO(WDIO) стал популярным выбором среди разработчиков и тестировщиков благодаря своим надежным функциям и удобному API. Он предоставляет набор простых для понимания и интуитивно понятных методов и команд, которые разработчики и тестировщики могут использовать для взаимодействия с элементами и выполнения действий над приложениями. Благодаря оптимизации процесса автоматизации веб-тестирования WebDriverIO стал предпочтительным выбором в отрасли.

Настройка хорошо настроенного проекта WebDriverIO (WDIO) имеет решающее значение, поскольку он формирует основу для эффективного выполнения тестов без возникновения ненужных препятствий. В этом блоге я проведу вас через пошаговый процесс настройки проекта WebDriverIO как для JavaScript (JS), так и для TypeScript (TS).

Итак, без лишних слов, начнем.

Предпосылки:

Чтобы настроить проект WDIO, вам необходимо:

Node.js и npm установлены в вашей системе
Установлена Java и настроены ее переменные среды.
Редактор кода, например VS Code или IntelliJ.

Настройка проекта TypeScript:

Теперь первый шаг, который нам нужно сделать, — это инициализировать WDIO в каталоге нашего проекта. Для этого запустите редактор кода и в консоли введите:

npm init wdio .

Выполнив эту команду в консоли, WebDriverIO будет инициализирован в текущей папке. Он автоматически загрузит интерфейс командной строки (CLI) WebDriverIO и запустит мастер настройки, который поможет вам настроить конфигурацию вашего проекта. Если вы хотите настроить проект в другом месте, вам нужно указать его путь в команде следующим образом;

npm init wdio ./path/to/new/project

Как только вы запустите эту команду, в вашей консоли запустится такой мастер;

Вы можете выбрать такие параметры, как тип приложения, которое вы хотите протестировать (веб- или мобильное), в каких браузерах вы хотите запускать тесты (Chrome, Safari и т. д.) в соответствии с вашими требованиями, и WebDriverIO установит для него необходимые библиотеки и дополнения. .

Чтобы писать свои скрипты на TypeScript, вам необходимо выбрать его в следующем вопросе;

После того, как вы выбрали все необходимые параметры, мастера будут выглядеть примерно так (в зависимости от выбранных вами параметров);

В ответ на последний вопрос («Хотите, чтобы я запустил npm install») введите «Y», чтобы мастер запустил процесс установки и загрузил все необходимые библиотеки.

На этом настройка завершена, и вы создали свой первый проект WDIO. Если вы выполнили вышеуказанные настройки, у вас будет автоматически сгенерированный тестовый файл, который вы сможете запустить, чтобы убедиться, что ваш проект работает нормально. Для этого выполните следующую команду, и ваш тестовый скрипт начнет выполняться;

npx wdio wdio.conf.ts

Однако иногда вы можете столкнуться с некоторыми проблемами при выполнении тестов или ошибками в коде, что может немного сбить с толку. В основном они связаны с конфигурациями компилятора в файле «tsconfig.json», которые можно решить, добавив или удалив некоторые пары «ключ-значение». Путем некоторых исследований и испытаний я обнаружил, что эти значения работают хорошо.

{
    "compilerOptions": {
        "moduleResolution": "node",
        "module": "CommonJS",
        "target": "ES6",
        "types": [
            "node",
            "@wdio/globals/types",
            "expect-webdriverio",
            "@wdio/cucumber-framework",
            "@wdio/selenium-standalone-service"
        ],
        "noImplicitAny": false,
        "noEmit": true,
        "allowImportingTsExtensions": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "isolatedModules": true,
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true
    },
    
}

Такое сочетание значений гарантирует, что у нас не возникнет проблем при импорте/экспорте модулей, а также необходимых нам объектов JSON и использовании новейших функций TypeScript. Подробнее о них можно узнать здесь. Итак, если у вас возникнут какие-либо проблемы с компилятором, вы можете вставить эти пары ключ-значение в свой файл, и, надеюсь, это вам поможет!

Разобравшись с этим, давайте продолжим и посмотрим, как можно создать тот же проект, но с использованием JavaScript.

Настройка проекта JavaScript:

Теперь, прежде чем мы углубимся в детали, я хотел бы порекомендовать вам одну вещь: если вы хотите настроить проект WDIO с использованием JavaScript в качестве языка программирования, используйте последнюю версию WDIO — версию 8. Причина этого в том, что поступали сообщения о проблемах с конфигурациями компилятора в более ранних версиях, которые могли привести к нежелательным проблемам. Команда, о которой я упоминал ранее, устанавливает последнюю версию, поэтому вам следует использовать ее при создании проекта.

Что касается шагов по настройке проекта, они во многом такие же, как те, которые мы обсуждали для TypeScript, за исключением одного. В вопросе об опциях компилятора в Wizard, как указано на изображении выше, вам нужно выбрать Babel в качестве компилятора. Babel — это компилятор JavaScript с открытым исходным кодом, который интегрирован с WebDriverIO для компиляции и выполнения вашего JS-кода. В остальном все варианты останутся практически такими же. Просто выберите эти параметры, запустите npm install, и ваш проект будет настроен и готов к работе.

Вы также можете запустить ту же команду для запуска тестов для проекта JS.

Установка более старой версии WDIO:

Вышеупомянутые команды, которые мы использовали для настройки проекта, инициализируют последнюю версию WDIO. Однако если по каким-то причинам вам необходимо установить предыдущую версию, вам придется сначала установить CLI вручную, а затем настроить проект. Для этого выполните следующую команду в консоли;

npm install @wdio/cli@version

При этом интерфейс командной строки WDIO будет установлен в корневой каталог. После этого выполните следующую команду;

npx wdio config

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

Заключение:

Выполнив эти шаги, вы готовы отправиться в увлекательное путешествие по веб-автоматизации с помощью WebDriverIO с использованием JavaScript и TypeScript. Есть и другие способы настройки проекта WDIO, которые можно найти в его документации, но это наиболее эффективный и простой метод, который, на мой взгляд, значительно упрощает процесс.

Надеюсь, эта статья окажется для вас полезной при настройке вашего проекта и позволит вам глубже погрузиться в мир WebDriverIO. Приятного тестирования!!

Настройка проекта WebDriverIO с помощью JS и TS