TypeScript 设置

您可以使用TypeScript编写测试以获得自动完成和类型安全。

您需要通过以下方式在devDependencies中安装tsx：

npm

$ npm install tsx --save-dev

Yarn

$ yarn add tsx --dev

pnpm

$ pnpm add tsx --save-dev

WebdriverIO 将自动检测这些依赖项是否已安装，并为您编译您的配置和测试。确保在您的 WDIO 配置所在的同一目录中有一个tsconfig.json。

自定义 TSConfig

如果您需要为tsconfig.json设置不同的路径，请使用您所需的路径设置 TSCONFIG_PATH 环境变量，或使用 wdio 配置的tsConfigPath 设置。

或者，您可以使用环境变量来配置tsx。

类型检查

请注意，tsx不支持类型检查 - 如果您希望检查您的类型，则需要使用tsc在单独的步骤中执行此操作。

框架设置

您的tsconfig.json需要以下内容

tsconfig.json

{
    "compilerOptions": {
        "types": ["node", "@wdio/globals/types"]
    }
}

请避免显式导入webdriverio或@wdio/sync。一旦添加到tsconfig.json中的types中，WebdriverIO和WebDriver类型就可以在任何地方访问。如果您使用其他 WebdriverIO 服务、插件或devtools自动化包，请也将其添加到types列表中，因为许多包提供了额外的类型定义。

框架类型

根据您使用的框架，您需要将该框架的类型添加到您的tsconfig.json types 属性中，并安装其类型定义。如果您希望对内置断言库expect-webdriverio提供类型支持，这一点尤其重要。

例如，如果您决定使用 Mocha 框架，则需要安装@types/mocha并像这样添加它以使所有类型全局可用

Mocha

tsconfig.json

{
    "compilerOptions": {
        "types": ["node", "@wdio/globals/types", "@wdio/mocha-framework"]
    }
}

Jasmine

tsconfig.json

{
    "compilerOptions": {
        "types": ["node", "@wdio/globals/types", "@wdio/jasmine-framework"]
    }
}

Cucumber

tsconfig.json

{
    "compilerOptions": {
        "types": ["node", "@wdio/globals/types", "@wdio/cucumber-framework"]
    }
}

服务

如果您使用向浏览器范围添加命令的服务，您也需要将这些服务包含到您的tsconfig.json中。例如，如果您使用@wdio/lighthouse-service，请确保将其添加到types中，例如：

tsconfig.json

{
    "compilerOptions": {
        "types": [
            "node",
            "@wdio/globals/types",
            "@wdio/mocha-framework",
            "@wdio/lighthouse-service"
        ]
    }
}

将服务和报告器添加到您的 TypeScript 配置中还可以增强 WebdriverIO 配置文件的类型安全性。

类型定义

在运行 WebdriverIO 命令时，所有属性通常都具有类型，因此您无需处理导入其他类型。但是，在某些情况下，您希望预先定义变量。为了确保这些变量是类型安全的，您可以使用@wdio/types包中定义的所有类型。例如，如果您想定义webdriverio的远程选项，您可以执行以下操作：

import type { Options } from '@wdio/types'

const config: Options.WebdriverIO = {
    hostname: 'https://127.0.0.1',
    port: '4444' // Error: Type 'string' is not assignable to type 'number'.ts(2322)
    capabilities: {
        browserName: 'chrome'
    }
}

提示和技巧

编译和整理

为了完全安全，您可以考虑遵循最佳实践：使用 TypeScript 编译器编译您的代码（运行tsc或npx tsc），并在提交前钩子上运行eslint。