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 }]]
     */
    // ...
};

如果您使用除vscode以外的任何其他browserName定义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

更多信息