Настройка TypeScript

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

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

Для работы с TypeScript потребуется установить следующие зависимости:

npm install --save-dev typescript @types/node @types/cypress
  • typescript — компилятор TypeScript, обеспечивающий проверку типов и трансляцию в JavaScript.
  • @types/node — типы Node.js, необходимые для взаимодействия с файловой системой и другими Node API.
  • @types/cypress — типы Cypress, обеспечивающие автодополнение и проверку типов команд Cypress.

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

После установки создается файл конфигурации TypeScript tsconfig.json в корне проекта. Минимальная конфигурация для Cypress может выглядеть так:

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["es6", "dom"],
    "types": ["cypress", "node"],
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": false,
    "noEmit": true,
    "strict": true
  },
  "include": ["cypress/**/*.ts"]
}
  • target: "es6" — указывает версию JavaScript, в которую будет транслироваться TypeScript.
  • lib: ["es6", "dom"] — подключает стандартные библиотеки ES6 и DOM для работы с браузером.
  • types: ["cypress", "node"] — подключает типы Cypress и Node.js.
  • noEmit: true — отключает генерацию файлов JavaScript, так как Cypress умеет обрабатывать TypeScript напрямую.
  • strict: true — включает строгую проверку типов, что предотвращает многие ошибки на этапе компиляции.
  • include — указывает путь к TypeScript-файлам Cypress. Обычно это cypress/**/*.ts.

Организация файлов тестов

Файлы тестов с TypeScript должны иметь расширение .ts и находиться в стандартной структуре Cypress:

cypress/
  ├─ e2e/
  │   ├─ example.spec.ts
  ├─ support/
  │   ├─ commands.ts
  │   ├─ index.ts
  • e2e/ — директория для тестов.
  • support/ — директория для расширения команд Cypress и глобальных настроек.

Подключение кастомных команд

Для TypeScript важно объявлять типы кастомных команд, чтобы автодополнение работало корректно. В файле cypress/support/commands.ts добавляются команды:

Cypress.Commands.add('login', (username: string, password: string) => {
  cy.get('#username').type(username)
  cy.get('#password').type(password)
  cy.get('button[type="submit"]').click()
})

Для корректного типизирования создается файл cypress/support/index.d.ts с декларацией:

declare namespace Cypress {
  interface Chainable {
    login(username: string, password: string): Chainable<void>
  }
}

Это позволяет использовать команду cy.login() с автодополнением и проверкой типов.

Интеграция с Cypress

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

npx cypress open

или

npx cypress run

Cypress автоматически обнаружит файлы .ts и выполнит их без дополнительной сборки.

Работа с конфигурацией и окружением

TypeScript позволяет использовать типизированные объекты конфигурации. Например, в cypress.config.ts:

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    baseUrl: 'https://example.com',
    supportFile: 'cypress/support/index.ts',
    specPattern: 'cypress/e2e/**/*.ts'
  }
})

Использование TypeScript в конфигурации дает следующие преимущества:

  • Автодополнение параметров defineConfig.
  • Проверка типов при изменении структуры конфигурации.
  • Возможность импортировать и использовать внешние типизированные модули.

Советы по поддержанию проекта

  • Соблюдать строгую типизацию (strict: true) для всех новых тестов.
  • Использовать интерфейсы и типы для данных тестов, чтобы избежать ошибок с моками и сетевыми ответами.
  • Разделять логические части тестов на кастомные команды, фикстуры и типизированные утилиты.
  • Следить за обновлением типов через @types/cypress и @types/node, чтобы автодополнение оставалось актуальным.

Эти шаги создают надежную основу для использования TypeScript в Cypress, улучшая читаемость тестов и предотвращая многие ошибки на этапе разработки.

Оглавление