VS Code 擴充功能測試

WebdriverIO 讓您可以在 VS Code 桌面 IDE 或以 Web 擴充功能的形式，無縫地從端到端測試您的 VS Code 擴充功能。您只需要提供擴充功能的路徑，框架會處理剩下的事情。使用 wdio-vscode-service，一切都將被處理，而且還有更多功能。

🏗️ 安裝 VSCode（穩定版、內部人員版或指定版本）
⬇️ 下載適用於指定 VSCode 版本的 Chromedriver
🚀 讓您可以從您的測試中存取 VSCode API
🖥️ 使用自訂使用者設定啟動 VSCode（包括在 Ubuntu、MacOS 和 Windows 上支援 VSCode）
🌐 或從伺服器提供 VSCode，以供任何瀏覽器存取來測試 Web 擴充功能
📔 使用與您的 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 }]]
     */
    // ...
};

如果您使用任何其他 browserName（而非 vscode）定義 wdio:vscodeOptions，例如 chrome，則此服務將以 Web 擴充功能的形式提供擴充功能。如果您在 Chrome 上進行測試，則不需要額外的驅動程式服務，例如：

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

注意：當測試 Web 擴充功能時，您只能在 stable 或 insiders 作為 browserVersion 之間選擇。

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!"

如需完整的頁面物件文件，請查看文件。您可以在此專案測試套件中找到各種使用範例。

開始使用​

範例設定​

TypeScript 設定​

用法​

存取 VSCode API​

更多資訊​

開始使用

範例設定

TypeScript 設定

用法

存取 VSCode API

更多資訊