TypeScript в WebdriverIO

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

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

Настройка TypeScript для WebdriverIO

Для начала необходимо настроить TypeScript в проекте с WebdriverIO. Процесс настройки можно разделить на несколько этапов.

1. Установка необходимых пакетов

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

npm install --save-dev typescript ts-node @types/node @types/webdriverio
  • typescript — сам компилятор TypeScript.
  • ts-node — утилита для выполнения TypeScript файлов без предварительной компиляции.
  • @types/node — типы для Node.js.
  • @types/webdriverio — типы для WebdriverIO, которые позволяют редактору понимать API библиотеки.

2. Настройка tsconfig.json

После установки пакетов необходимо создать файл конфигурации TypeScript — tsconfig.json. Этот файл задаёт настройки компиляции и определяет, как TypeScript будет обрабатывать исходный код.

Пример минимального конфигурационного файла:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "baseUrl": "./src",
    "types": ["node", "webdriverio"]
  },
  "include": ["./src/**/*.ts"],
  "exclude": ["node_modules"]
}
  • target — версия JavaScript, в которую компилируются файлы TypeScript.
  • module — модульная система, используемая в проекте.
  • strict — включает строгую типизацию для обнаружения ошибок в коде.
  • esModuleInterop — позволяет использовать старые модули CommonJS с синтаксисом ES6.
  • types — указывает типы, которые должны быть загружены для проекта (например, для WebdriverIO).

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

В конфигурации WebdriverIO нужно указать поддержку TypeScript. Для этого открывается файл wdio.conf.ts (или wdio.conf.js, если используется JavaScript) и добавляется настройка для обработки файлов TypeScript.

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

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

export const config: Config = {
  runner: 'local',
  framework: 'mocha',
  services: ['selenium-standalone'],
  spec: ['./test/**/*.ts'],
  reporters: ['dot'],
  before: function (capabilities, specs) {
    require('ts-node').register();
  }
};

Здесь важно указать, что файлы тестов имеют расширение .ts, и использовать ts-node для выполнения TypeScript кода на лету.

Написание тестов на TypeScript

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

Пример простого теста с TypeScript:

import { expect } from 'chai';

describe('Google Search', () => {
  it('should show search results when searched for "WebdriverIO"', async () => {
    await browser.url('https://www.google.com');
    const searchInput = await $('#q');
    await searchInput.setValue('WebdriverIO');
    const searchButton = await $('#btnK');
    await searchButton.click();
    const firstResult = await $('#rso .g');
    expect(await firstResult.isDisplayed()).to.be.true;
  });
});

В данном примере используется типизация, предоставляемая WebdriverIO, для работы с элементами страницы. Типы для переменных (например, searchInput, searchButton, firstResult) обеспечивают автодополнение и проверку типов во время разработки.

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

Использование TypeScript с WebdriverIO приносит несколько ключевых преимуществ:

1. Типизация

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

2. Автодополнение и проверка типов

Взаимодействие с IDE, которая поддерживает TypeScript, позволяет получать автодополнение и подсказки для методов WebdriverIO и других библиотек. Это значительно ускоряет процесс разработки и улучшает понимание API.

3. Улучшенная поддержка кода

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

4. Более надежная интеграция с CI/CD

Благодаря строгости типизации, TypeScript помогает избегать ошибок на этапе компиляции, что делает тесты более надежными при их интеграции в систему CI/CD.

Работа с WebdriverIO API в TypeScript

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

Пример взаимодействия с элементами на странице:

const searchBox = await $('#search');
await searchBox.setValue('WebdriverIO');

const searchButton = await $('button[type="submit"]');
await searchButton.click();

const results = await $$('h3');
expect(results.length).to.be.above(0);

В примере выше используется метод $$ для получения всех элементов, соответствующих определённому селектору, с поддержкой типов и проверки результатов.

Обработка ошибок и отладка

В TypeScript можно использовать стандартные механизмы для отладки и обработки ошибок, такие как try-catch. Это поможет выявить ошибки в тестах и улучшить стабильность выполнения.

Пример обработки ошибок:

try {
  const searchButton = await $('#searchButton');
  await searchButton.click();
} catch (error) {
  console.error('Ошибка при клике на кнопку:', error);
  throw error;  // Перекидываем ошибку для дальнейшей обработки в тестах
}

Интеграция с другими инструментами

Использование TypeScript не ограничивает возможности интеграции с другими инструментами и библиотеками. WebdriverIO поддерживает работу с такими инструментами, как Mocha, Jasmine, Chai и другие, которые можно использовать в связке с TypeScript для написания тестов.

Поддержка TypeScript в WebdriverIO и её возможности

WebdriverIO предоставляет полноценную поддержку TypeScript, включая:

  • Строгую типизацию для большинства API.
  • Интеграцию с популярными тестовыми фреймворками.
  • Множество утилит для работы с браузером и элементами на странице.

Благодаря этим возможностям использование TypeScript с WebdriverIO становится удобным и эффективным подходом для разработки и поддержки автоматических тестов.

Оглавление