メインコンテンツにスキップ

TypeScriptのセットアップ

TypeScriptを使用してテストを書くことで、自動補完と型安全性を得ることができます。

tsxをdevDependenciesにインストールする必要があります：

$ npm install 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を明示的にインポートすることは避けてください。 WebdriverIOとWebDriverの型は、tsconfig.jsonのtypesに追加すれば、どこからでもアクセスできます。追加のWebdriverIOサービス、プラグイン、またはdevtools自動化パッケージを使用する場合は、それらもtypesリストに追加してください。多くの場合、追加の型定義が提供されます。

フレームワークの型​

使用するフレームワークに応じて、そのフレームワークの型をtsconfig.jsonのtypesプロパティに追加し、その型定義をインストールする必要があります。これは、組み込みのアサーションライブラリexpect-webdriverioの型サポートを持ちたい場合に特に重要です。

例えば、Mochaフレームワークを使用する場合、@types/mochaをインストールし、以下のように追加して、すべての型をグローバルに利用できるようにする必要があります：

tsconfig.json
{
    "compilerOptions": {
        "types": ["node", "@wdio/globals/types", "@wdio/mocha-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 remoteConfig: Options.WebdriverIO = {
    hostname: 'http://localhost',
    port: '4444' // エラー: Type 'string' is not assignable to type 'number'.ts(2322)
    capabilities: {
        browserName: 'chrome'
    }
}

// その他の場合、`WebdriverIO`名前空間を使用できます
export const config: WebdriverIO.Config = {
  ...remoteConfig
  // その他の設定オプション
}

ヒントとコツ​

コンパイルとリント​

完全に安全を期すためには、ベストプラクティスに従うことを検討してください：TypeScriptコンパイラ（tscまたはnpx tscを実行）でコードをコンパイルし、eslintをプリコミットフックで実行します。

Welcome! How can I help?

WebdriverIO AI Copilot