VS Code 拡張機能のテスト

WebdriverIOを使用すると、VS Code拡張機能をVS Codeデスクトップ IDEまたはWeb拡張機能としてシームレスにエンドツーエンドでテストできます。拡張機能へのパスを提供するだけで、フレームワークが残りの処理を行います。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', // 最新のVSCodeバージョンには "insiders" または "stable"
        'wdio:vscodeOptions': {
            extensionPath: __dirname,
            userSettings: {
                "editor.fontSize": 14
            }
        }
    }],
    services: ['vscode'],
    /**
     * オプションでWebdriverIOがすべてのVSCodeとChromedriverバイナリを
     * 保存するパスを定義できます。例：
     * services: [['vscode', { cachePath: __dirname }]]
     */
    // ...
};

browserNameがvscode以外（例えばchrome）でwdio:vscodeOptionsを定義すると、サービスは拡張機能を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()) // 出力: "I am an API call!"

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

詳細情報

wdio-vscode-serviceの設定方法やカスタムページオブジェクトの作成方法については、サービスドキュメントで詳細を確認できます。また、Christian Bromannによるウェブ標準の力を使った複雑なVSCode拡張機能のテストに関する以下の講演も視聴できます：

始めるには​

設定例​

TypeScriptの設定​

使用方法​

VSCode APIへのアクセス​

詳細情報​

始めるには

設定例

TypeScriptの設定

使用方法

VSCode APIへのアクセス

詳細情報