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'
    }
}

提示與訣竅

編譯 & Lint

為了完全安全，您可以考慮遵循最佳實務：使用 TypeScript 編譯器編譯您的程式碼 (執行 tsc 或 npx tsc)，並在 pre-commit hook 上執行 eslint。