VS Code 拡張機能テスト

WebdriverIO を使用すると、VS Code デスクトップ IDE または Web 拡張機能として、エンドツーエンドで VS Code 拡張機能をシームレスにテストできます。拡張機能へのパスを指定するだけで、フレームワークがその他すべてを実行します。wdio-vscode-service を使用すると、すべてが処理され、さらに多くのことができます。

🏗️ VSCode のインストール（安定版、インサイダー版、または指定されたバージョン）
⬇️ 指定された VSCode バージョンに固有の Chromedriver のダウンロード
🚀 テストから VSCode API にアクセスできるようにします
🖥️ カスタムユーザー設定で VSCode を起動します（Ubuntu、MacOS、Windows 上の VSCode のサポートを含む）
🌐 または、Web 拡張機能をテストするために、任意のブラウザからアクセスできるサーバーから VSCode を提供します。
📔 ローケーターが VSCode のバージョンに一致するページオブジェクトのブートストラップ

はじめに

新しい WebdriverIO プロジェクトを開始するには、以下を実行します。

npm create wdio@latest ./

インストールウィザードがプロセスを案内します。「VS Code 拡張機能テスト」を選択して、実行したいテストの種類を選択し、その後はデフォルトのままにするか、必要に応じて変更してください。

設定例

このサービスを使用するには、サービスのリストに `vscode` を追加する必要があります。必要に応じて、構成オブジェクトを続けることができます。これにより、WebdriverIO は指定された VSCode バイナリと適切な Chromedriver バージョンをダウンロードします。

// wdio.conf.ts
export const config = {
    outputDir: 'trace',
    // ...
    capabilities: [{
        browserName: 'vscode',
        browserVersion: '1.71.0', // "insiders" or "stable" for latest VSCode version
        'wdio:vscodeOptions': {
            extensionPath: __dirname,
            userSettings: {
                "editor.fontSize": 14
            }
        }
    }],
    services: ['vscode'],
    /**
     * optionally you can define the path WebdriverIO stores all
     * VSCode and Chromedriver binaries, e.g.:
     * services: [['vscode', { cachePath: __dirname }]]
     */
    // ...
};

`wdio:vscodeOptions` を `vscode` 以外の他の `browserName`（例：`chrome`）で定義すると、サービスは拡張機能を Web 拡張機能として提供します。Chrome でテストする場合は、追加のドライバサービスは必要ありません。例：

// wdio.conf.ts
export const config = {
    outputDir: 'trace',
    // ...
    capabilities: [{
        browserName: 'chrome',
        'wdio:vscodeOptions': {
            extensionPath: __dirname
        }
    }],
    services: ['vscode'],
    // ...
};

注記：Web 拡張機能をテストする場合は、`browserVersion` として `stable` または `insiders` のいずれかを選択できます。

TypeScript 設定

`tsconfig.json` で、`wdio-vscode-service` を型のリストに追加してください。

{
    "compilerOptions": {
        "types": [
            "node",
            "webdriverio/async",
            "@wdio/mocha-framework",
            "expect-webdriverio",
            "wdio-vscode-service"
        ],
        "target": "es2020",
        "moduleResolution": "node16"
    }
}

使用方法

`getWorkbench` メソッドを使用して、目的の VSCode バージョンに一致するローケーターのページオブジェクトにアクセスできます。

describe('WDIO VSCode Service', () => {
    it('should be able to load VSCode', async () => {
        const workbench = await browser.getWorkbench()
        expect(await workbench.getTitleBar().getTitle())
            .toBe('[Extension Development Host] - README.md - wdio-vscode-service - Visual Studio Code')
    })
})

そこから、適切なページオブジェクトメソッドを使用して、すべてのページオブジェクトにアクセスできます。利用可能なすべてのページオブジェクトとそのメソッドの詳細については、ページオブジェクトのドキュメントを参照してください。

VSCode API へのアクセス

VSCode API を通じて特定の自動化を実行する場合は、カスタム `executeWorkbench` コマンドを介してリモートコマンドを実行することで実行できます。このコマンドを使用すると、VSCode 環境内でテストからコードをリモート実行し、VSCode API にアクセスできます。関数に任意のパラメーターを渡すと、関数はそのパラメーターを伝播します。`vscode` オブジェクトは、外部関数の後続のパラメーターの最初の引数として常に渡されます。コールバックはリモートで実行されるため、関数スコープ外の変数にはアクセスできないことに注意してください。例を次に示します。

const workbench = await browser.getWorkbench()
await browser.executeWorkbench((vscode, param1, param2) => {
    vscode.window.showInformationMessage(`I am an ${param1} ${param2}!`)
}, 'API', 'call')

const notifs = await workbench.getNotifications()
console.log(await notifs[0].getMessage()) // outputs: "I am an API call!"

完全なページオブジェクトドキュメントについては、ドキュメントを参照してください。このプロジェクトのテストスイートには、さまざまな使用方法の例があります。

詳細情報

wdio-vscode-service の設定方法とカスタムページオブジェクトの作成方法の詳細については、サービスドキュメントを参照してください。Christian BromannによるTesting Complex VSCode Extensions With the Power of Web Standardsに関する講演ビデオもご覧いただけます。

はじめに​

設定例​

TypeScript 設定​

使用方法​

VSCode API へのアクセス​

詳細情報​

はじめに

設定例

TypeScript 設定

使用方法

VSCode API へのアクセス

詳細情報