Конфигурация TypeScript

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

Установка зависимостей

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

  1. Node.js Убедитесь, что на вашем компьютере установлен Node.js (не ниже версии 12.x). Это необходимо для работы с WebdriverIO и TypeScript.

  2. WebdriverIO и его зависимости В проекте должна быть установлена библиотека WebdriverIO и необходимые пакеты для работы с тестами. Установить их можно через npm или yarn:

    npm install --save-dev @wdio/cli @wdio/local-runner @wdio/mocha-framework webdriverio

  3. TypeScript Для использования TypeScript в проекте необходимо установить сам TypeScript:

    npm install --save-dev typescript

  4. Тестовая среда Установите фреймворк для тестирования. В случае с WebdriverIO популярными являются Mocha или Jasmine. Например, для Mocha:

    npm install --save-dev @wdio/mocha-framework

  5. TypeScript типы для WebdriverIO Для того чтобы WebdriverIO и TypeScript работали корректно и типизировано, нужно установить соответствующие типы для WebdriverIO:

    npm install --save-dev @types/webdriverio

Настройка TypeScript

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

  1. Инициализация TypeScript В корне проекта создайте файл tsconfig.json, в котором будет описана конфигурация TypeScript. Этот файл является основой для компиляции TypeScript в JavaScript.

    Пример базового tsconfig.json:

    {
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

    Ключевые параметры:

    • target: указывает, на какую версию JavaScript нужно компилировать код (в данном случае — ES6).
    • module: определяет модульную систему. WebdriverIO использует CommonJS.
    • outDir: путь для скомпилированных файлов.
    • rootDir: директория с исходными TypeScript файлами.
    • strict: включает строгую проверку типов, что повышает надежность кода.
    • esModuleInterop: для корректной работы с модулями, которые экспортируются как CommonJS.

  2. Конфигурация WebdriverIO для TypeScript

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

    Пример конфигурации wdio.conf.ts:

    import { Config } from '@wdio/types';

export const config: Config = {
  runner: 'local',
  framework: 'mocha',
  specs: [
    './src/**/*.spec.ts'
  ],
  capabilities: [
    {
      browserName: 'chrome',
      'goog:chromeOptions': {
        args: ['--headless', '--disable-gpu', '--no-sandbox']
      }
    }
  ],
  services: ['selenium-standalone'],
  logLevel: 'info',
  reporters: ['spec'],
  mochaOpts: {
    ui: 'bdd',
    timeout: 60000
  }
};

    В этом примере:

    • runner: указывает на локальный запуск тестов.
    • framework: выбран фреймворк Mocha для написания тестов.
    • specs: путь к тестовым файлам, написанным на TypeScript.
    • capabilities: конфигурация для запуска тестов в браузере (например, Chrome).
    • services: сервис для запуска Selenium в рамках WebdriverIO.
    • logLevel: уровень логирования.
    • mochaOpts: параметры для Mocha, такие как тайм-аут и интерфейс.

Поддержка модулей в TypeScript

WebdriverIO использует CommonJS, но в TypeScript можно использовать и ES-модули. Для работы с модулями следует правильно настроить импорты и экспорты.

Пример теста на TypeScript с использованием WebdriverIO:

import { expect } from 'chai';

describe('Google Search', () => {
  it('should load the Google homepage', async () => {
    await browser.url('https://www.google.com');
    const title = await browser.getTitle();
    expect(title).to.equal('Google');
  });
});

В этом примере:

  • Используется модуль chai для утверждений.
  • Импортируется библиотека browser из WebdriverIO, с помощью которой взаимодействуют с браузером.
  • Все тесты выполняются асинхронно с использованием async/await.

Запуск тестов

Для запуска тестов с TypeScript через WebdriverIO, достаточно выполнить команду:

npx wdio run wdio.conf.ts

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

Полезные советы по работе с TypeScript и WebdriverIO

  1. Автодополнение и типизация Использование TypeScript в WebdriverIO предоставляет автоматическое автодополнение и типизацию, что снижает вероятность ошибок при написании тестов. Рекомендуется всегда включать строгую типизацию (strict: true) в tsconfig.json для повышения надежности кода.

  2. Интеграция с редакторами Многие редакторы, такие как Visual Studio Code, имеют встроенную поддержку TypeScript, что позволяет пользоваться подсказками и автодополнением для WebdriverIO и других библиотек. Убедитесь, что ваш редактор настроен для работы с TypeScript.

  3. Использование различных конфигураций В WebdriverIO можно использовать несколько конфигурационных файлов для разных сред (например, тесты для разработки и для продакшн-среды). Можно настроить отдельные конфигурации для разных видов тестирования (например, для мобильных устройств или десктопных браузеров).

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

Заключение

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

Оглавление