Использование типов и интерфейсов

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

Типы и интерфейсы в WebDriverIO используются для того, чтобы:

  • Предоставить точные определения для объектов и методов.
  • Улучшить автодополнение в IDE.
  • Повысить надежность кода за счёт раннего обнаружения ошибок.
  • Создать структуру для кастомных команд и плагинов.

Подключение TypeScript в WebDriverIO

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

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

    npm install --save-dev typescript ts-node @types/node
npm install --save-dev webdriverio @wdio/cli @wdio/local-runner @wdio/mocha-framework @wdio/selenium-standalone-service

  2. Настройка tsconfig.json: В корне проекта необходимо создать файл tsconfig.json, в котором будет описана конфигурация TypeScript.

    {
  "compilerOptions": {
    "target": "ES6",
    "moduleResolution": "node",
    "module": "CommonJS",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "allowJs": true,
    "outDir": "./dist"
  },
  "include": ["./test/**/*.ts"],
  "exclude": ["node_modules"]
}

  3. Настройка WebDriverIO для TypeScript: В файле конфигурации WebDriverIO (wdio.conf.ts) необходимо указать, что тесты будут использовать TypeScript.

    exports.config = {
  runner: 'local',
  framework: 'mocha',
  services: ['selenium-standalone'],
  specs: ['./test/**/*.ts'],
  exclude: [],
  capabilities: [{
    browserName: 'chrome'
  }],
  logLevel: 'info',
  waitforTimeout: 10000,
  connectionRetryTimeout: 90000,
  connectionRetryCount: 3,
  mochaOpts: {
    ui: 'bdd',
    timeout: 60000
  }
};

Типы и интерфейсы WebDriverIO

WebDriverIO предоставляет встроенную поддержку типов через библиотеку @wdio/types. Эти типы охватывают основные объекты и методы WebDriverIO, такие как браузеры, элементы на странице, команды и т.д.

1. Типы для браузера и элементов

Типы, связанные с браузером, позволяют точно указать, какой объект или метод нужно использовать, а также помогают избежать ошибок при взаимодействии с элементами DOM.

BrowserObject: Тип BrowserObject описывает все доступные методы для управления браузером, такие как url(), getTitle(), setValue() и другие.

const browser: BrowserObject = await browser;
await browser.url('https://example.com');
const title: string = await browser.getTitle();

ElementObject: Тип ElementObject представляет собой элемент на странице. Это объект, с которым можно взаимодействовать, вызывая методы типа click(), setValue(), getText() и т. д.

const element: ElementObject = await $('#username');
await element.setValue('testuser');

2. Типы для команд и ассершенов

В WebDriverIO поддерживаются типы для кастомных команд и для встроенных методов, таких как expect и assert.

CommandResult: Тип CommandResult используется для результатов выполнения команд, таких как получение текста элемента или его состояния.

const result: CommandResult = await $('#element').getText();

Expect: WebDriverIO поддерживает интеграцию с библиотеками для ассертов, такими как expect-webdriverio. Типы для ассершенов позволяют точно проверять, что элемент находится в нужном состоянии.

const element: ElementObject = await $('#submitButton');
await expect(element).toBeDisplayed();

3. Интерфейсы для кастомных команд

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

Создание кастомной команды: В WebDriverIO можно создать кастомные команды, добавляя их в прототипы объектов browser или element.

declare global {
  interface Browser {
    customCommand(): Promise<void>;
  }
}

browser.addCommand('customCommand', async function() {
  const title = await this.getTitle();
  console.log('Page title is: ' + title);
});

Использование типов для конфигурации

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

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

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

export const config: Config = {
  runner: 'local',
  specs: ['./tests/**/*.ts'],
  capabilities: [{
    browserName: 'chrome'
  }],
  logLevel: 'info',
  services: ['selenium-standalone'],
  framework: 'mocha',
  reporters: ['dot']
};

Использование интерфейсов для работы с плагинами

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

Сетевые запросы и обработка данных: Вебдрайвер может работать с плагинами, такими как @wdio/applitools-service, для проведения визуальных тестов. Для работы с такими сервисами можно использовать специальные интерфейсы и типы.

import { Eyes, Target } from 'applitools';

const eyes: Eyes = new Eyes();
await eyes.open(browser, 'WebDriverIO App', 'Visual Test');
await eyes.check('Main Page', Target.window());
await eyes.close();

Преимущества и трудности использования типов

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

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

Оглавление