VSCode 擴充功能測試服務

wdio-vscode-service 是一個第三方套件，更多資訊請參閱 GitHub | npm

測試於

用於測試 VSCode 擴充功能的 WebdriverIO 服務。

這個 WebdriverIO 服務可讓您在 VSCode 桌面 IDE 或作為 Web 擴充功能中，無縫地對 VSCode 擴充功能進行端對端測試。您只需要提供擴充功能的路徑，服務會完成其餘的工作，方法是

🏗️ 安裝 VSCode（stable、insiders 或指定的版本）
⬇️ 下載適用於指定 VSCode 版本的 Chromedriver
🚀 讓您從測試中存取 VSCode API
🖥️ 使用自訂使用者設定啟動 VSCode（包括支援 Ubuntu、MacOS 和 Windows 上的 VSCode）
🌐 或者從伺服器提供 VSCode，以供任何瀏覽器存取來測試 Web 擴充功能
📔 使用符合您 VSCode 版本的定位器來啟動頁面物件

這個專案的靈感來自於 vscode-extension-tester 專案，該專案以 Selenium 為基礎。這個套件採用了這個想法，並將其改編為 WebdriverIO。

從 VSCode v1.86 開始，需要使用 webdriverio v8.14 或更新版本來安裝 Chromedriver，而無需任何設定。如果您需要測試舊版的 VSCode，請參閱下方的Chromedriver 設定章節。

安裝

若要啟動新的 WebdriverIO 專案，請執行

npm create wdio ./

安裝精靈將引導您完成此過程。請務必選擇 TypeScript 作為編譯器，並且不要讓它為您產生頁面物件，因為這個專案隨附了所有需要的頁面物件。然後，請務必在服務清單中選擇 vscode

Install Demo

如需更多關於如何安裝 WebdriverIO 的資訊，請查看專案文件。

設定範例

若要使用此服務，您需要將 vscode 新增至您的服務清單中，後面可選擇加上一個設定物件。這會讓 WebdriverIO 下載指定的 VSCode 二進位檔和適當的 Chromedriver 版本

// wdio.conf.ts
export const config = {
    outputDir: 'trace',
    // ...
    capabilities: [{
        browserName: 'vscode',
        browserVersion: '1.86.0', // "insiders" or "stable" for latest VSCode version
        'wdio:vscodeOptions': {
            extensionPath: __dirname,
            userSettings: {
                "editor.fontSize": 14
            }
        }
    }],
    services: ['vscode'],
    /**
     * Optionally define the path WebdriverIO stores all VSCode 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": "es2019",
        "moduleResolution": "node",
        "esModuleInterop": true
    }
}

用法

然後，您可以使用 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!"

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

設定

透過服務設定，您可以管理 VSCode 版本以及 VSCode 的使用者設定

服務選項

服務選項是服務設定測試環境所需的選項。

`cachePath`

定義快取路徑以避免重新下載 VS Code 套件。這對於 CI/CD 很有用，可避免在每次測試執行時都重新下載 VSCode。

類型：string
預設值：process.cwd()

VSCode 功能 (`wdio:vscodeOptions`)

若要透過 VSCode 執行測試，您必須定義 vscode 作為 browserName。您可以透過提供 browserVersion 功能來指定 VSCode 版本。然後在自訂的 wdio:vscodeOptions 功能中定義自訂 VSCode 選項。選項如下

`binary`

本機安裝的 VSCode 安裝路徑。如果未提供此選項，服務將根據給定的 browserVersion（如果未給定則為 stable）下載 VSCode。

類型：string

`extensionPath`

定義要測試之擴充功能的目錄。

類型：string

`storagePath`

定義 VS Code 儲存其所有資料的自訂位置。這是內部 VS Code 目錄的根目錄，例如（部分清單）

user-data-dir：儲存所有使用者設定（全域設定）、擴充功能記錄等的目錄。
extension-install-dir：安裝 VS Code 擴充功能的目錄。

如果未提供，則會使用暫存目錄。

類型：string

`userSettings`

定義要套用至 VSCode 的自訂使用者設定。

類型：Record<string, number | string | object | boolean>
預設值：{}

`workspacePath`

為特定工作區開啟 VSCode。如果未提供，VSCode 將在不開啟任何工作區的情況下啟動。

類型：string

`filePath`

開啟 VSCode 並開啟特定檔案。

類型：string

`vscodeArgs`

以物件形式表示的額外啟動引數，例如：

vscodeArgs: { fooBar: true, 'bar-foo': '/foobar' }

將會以以下形式傳入：

--foo-bar --fooBar --bar-foo=/foobar

類型：Record<string, string | boolean>
預設值：請參閱 constants.ts#L5-L14

`verboseLogging`

如果設為 true，服務會記錄來自擴充功能主機和主控台 API 的 VSCode 輸出。

類型：boolean
預設值：false

`vscodeProxyOptions`

VSCode API 代理設定定義 WebdriverIO 如何連接到 VSCode 工作台，讓您可以存取 VSCode API。

類型：VSCodeProxyOptions
預設值

{
    /**
     * If set to true, the service tries to establish a connection with the
     * VSCode workbench to enable access to the VSCode API
     */
    enable: true,
    /**
     * Port of the WebSocket connection used to connect to the workbench.
     * By default set to an available port in your operating system.
     */
    // port?: number
    /**
     * Timeout for connecting to WebSocket inside of VSCode
     */
    connectionTimeout: 5000,
    /**
     * Timeout for command to be executed within VSCode
     */
    commandTimeout: 5000
}

Chromedriver

從 VSCode v1.86 開始，必須使用 v8.14 或更高版本的 webdriverio 安裝 Chromedriver，而無需任何組態。簡化的瀏覽器自動化設定會為您處理一切。

若要測試較舊版本的 VS Code，請從記錄檔中找到預期的 Chromedriver 版本，下載 Chromedriver，並設定路徑。例如：

[0-0] ERROR webdriver: Failed downloading chromedriver v108: Download failed: ...

    capabilities: [{
        browserName: 'vscode',
        browserVersion: '1.80.0',
        'wdio:chromedriverOptions': {
            binary: path.join(cacheDir, 'chromedriver-108.0.5359.71')

建立您自己的 PageObjects

您可以重複使用此服務中使用的元件，來建立您自己的檢閱頁面物件。首先，建立一個檔案來定義所有選擇器，例如：

// e.g. in /test/pageobjects/locators.ts
export const componentA = {
    elem: 'form', // component container element
    submit: 'button[type="submit"]', // submit button
    username: 'input.username', // username input
    password: 'input.password' // password input
}

現在您可以依照以下方式建立頁面物件：

// e.g. in /test/pageobjects/loginForm.ts
import { PageDecorator, IPageDecorator, BasePage } from 'wdio-vscode-service'
import * as locatorMap, { componentA as componentALocators } from './locators'
export interface LoginForm extends IPageDecorator<typeof componentALocators> {}
@PageDecorator(componentALocators)
export class LoginForm extends BasePage<typeof componentALocators, typeof locatorMap> {
    /**
     * @private locator key to identify locator map (see locators.ts)
     */
    public locatorKey = 'componentA' as const

    public login (username: string, password: string) {
        await this.username$.setValue(username)
        await this.password$.setValue(password)
        await this.submit$.click()
    }
}

現在在您的測試中，您可以依照以下方式使用您的頁面物件：

import { LoginForm } from '../pageobjects/loginForm'
import * as locatorMap from '../locators'

// e.g. in /test/specs/example.e2e.ts
describe('my extension', () => {
    it('should login', async () => {
        const loginForm = new LoginForm(locatorMap)
        await loginForm.login('admin', 'test123')

        // you can also use page object elements directly via `[selector]$`
        // or `[selector]$$`, e.g.:
        await loginForm.submit$.click()

        // or access locators directly
        console.log(loginForm.locators.username)
        // outputs: "input.username"
    })
})

TypeScript 支援

如果您將 WebdriverIO 與 TypeScript 搭配使用，請務必將 wdio-vscode-service 新增至 tsconfig.json 中的 types，例如：

{
    "compilerOptions": {
        "moduleResolution": "node",
        "types": [
            "webdriverio/async",
            "@wdio/mocha-framework",
            "expect-webdriverio",
            // add this service to your types
            "wdio-devtools-service"
        ],
        "target": "es2019"
    }
}

代理支援

在此服務初始化期間，會下載 ChromeDriver 和 VSCode 發行版本。您可以透過設定環境變數 HTTPS_PROXY 或 https_proxy，將這些請求透過代理伺服器進行隧道傳輸。例如：

HTTPS_PROXY=http://127.0.0.1:1080 npm run wdio

參考資料

以下 VS Code 擴充功能使用 wdio-vscode-service：

Marquee (2.7 萬次下載)
Live Server (2780 萬次下載)
Visual Studio Code 的 DVC 擴充功能 (1.12 萬次下載)
Nx Console (120 萬次下載)
inlang – i18n supercharged (3 千次下載)

貢獻

發佈提取請求之前，請執行以下操作：

git clone git@github.com:webdriverio-community/wdio-vscode-service.git
cd wdio-vscode-service
npm install
npm run build
npm run test (或 npm run ci)

深入了解

如果您想深入了解如何測試 VSCode 擴充功能，請查看 Christian Bromann 在 OpenJS World 2022 的演講

如需有關 WebdriverIO 的詳細資訊，請查看專案首頁。

安裝​

設定範例​

TypeScript 設定​

用法​

存取 VSCode API​

設定​

服務選項​

cachePath​

VSCode 功能 (wdio:vscodeOptions)​

binary​

extensionPath​

storagePath​

userSettings​

workspacePath​

filePath​

vscodeArgs​

verboseLogging​

vscodeProxyOptions​

Chromedriver​

建立您自己的 PageObjects​

TypeScript 支援​

代理支援​

參考資料​

貢獻​

深入了解​

安裝

設定範例

TypeScript 設定

用法

存取 VSCode API

設定

服務選項

`cachePath`

VSCode 功能 (`wdio:vscodeOptions`)

`binary`

`extensionPath`

`storagePath`

`userSettings`

`workspacePath`

`filePath`

`vscodeArgs`

`verboseLogging`

`vscodeProxyOptions`

Chromedriver

建立您自己的 PageObjects

TypeScript 支援

代理支援

參考資料

貢獻

深入了解