本文へ移動

TypeScript セットアップ

自動補完と型安全性を確保するために、TypeScriptを使用してテストを作成できます。

devDependenciesにtsxをインストールする必要があります。方法は次のとおりです。

$ npm install tsx --save-dev

WebdriverIO は、これらの依存関係がインストールされているかどうかを自動的に検出し、設定ファイルとテストをコンパイルします。WDIO 設定と同じディレクトリにtsconfig.jsonがあることを確認してください。

カスタム TSConfig​

tsconfig.jsonの異なるパスを設定する必要がある場合は、目的のパスを使用してTSCONFIG_PATH環境変数を設定するか、wdio configの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プロパティに追加し、その型定義をインストールする必要があります。これは、組み込みのassertionライブラリ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のremoteオプションを定義する場合、次のようにできます。

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

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

ヒント​

コンパイルとLint​

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

ようこそ！お手伝いできることはありますか？

WebdriverIO AI Copilot