Перейти до основного вмісту

Сервіс Тестування Розширень VSCode

wdio-vscode-service є пакетом сторонніх розробників, для отримання додаткової інформації відвідайте GitHub | npm

Протестовано на:

VSCode Version CI Status

Сервіс WebdriverIO для тестування розширень VSCode.

Цей сервіс WebdriverIO дозволяє безперешкодно тестувати ваші розширення VSCode від початку до кінця в настільному середовищі VSCode IDE або як веб-розширення. Вам потрібно лише вказати шлях до вашого розширення, і сервіс зробить решту, а саме:

  • 🏗️ Встановлення VSCode (або stable, insiders, або вказаної версії)
  • ⬇️ Завантаження Chromedriver, що відповідає конкретній версії VSCode
  • 🚀 Надає вам доступ до API VSCode з ваших тестів
  • 🖥️ Запускає VSCode з користувацькими налаштуваннями (включаючи підтримку VSCode на Ubuntu, MacOS та Windows)
  • 🌐 Або надає VSCode з сервера для доступу через будь-який браузер для тестування веб-розширень
  • 📔 Створює об'єкти сторінок з локаторами, що відповідають вашій версії 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" або "stable" для останньої версії VSCode
'wdio:vscodeOptions': {
extensionPath: __dirname,
userSettings: {
"editor.fontSize": 14
}
}
}],
services: ['vscode'],
/**
* Опціонально визначте шлях, де WebdriverIO зберігає всі бінарні файли VSCode, наприклад:
* services: [['vscode', { cachePath: __dirname }]]
*/
// ...
};

Якщо ви визначите wdio:vscodeOptions з будь-яким іншим browserName, окрім vscode, наприклад, chrome, сервіс надаватиме розширення як веб-розширення. Якщо ви тестуєте на Chrome, жодного додаткового сервісу драйвера не потрібно, наприклад:

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

Примітка: при тестуванні веб-розширень ви можете вибирати лише між 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')
})
})

Доступ до API VSCode

Якщо ви хочете виконати певну автоматизацію через API VSCode, ви можете це зробити, виконуючи віддалені команди через власну команду executeWorkbench. Ця команда дозволяє віддалено виконувати код з вашого тесту в середовищі VSCode і надає вам доступ до API VSCode. Ви можете передавати довільні параметри у функцію, які потім будуть передані у функцію. Об'єкт 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!"

Для повної документації об'єктів сторінок перегляньте документацію. Ви можете знайти різні приклади використання в наборі тестів цього проекту.

Конфігурація

За допомогою конфігурації сервісу ви можете керувати версією VSCode, а також користувацькими налаштуваннями для VSCode:

Опції сервісу

Опції сервісу - це опції, необхідні для налаштування тестового середовища.

cachePath

Визначте шлях до кешу, щоб уникнути повторного завантаження пакетів VS Code. Це корисно для CI/CD, щоб уникнути повторного завантаження VSCode для кожного тестового запуску.

Тип: string
За замовчуванням: process.cwd()

Можливості VSCode (wdio:vscodeOptions)

Щоб запускати тести через VSCode, ви повинні визначити vscode як browserName. Ви можете вказати версію VSCode, надавши можливість browserVersion. Користувацькі опції VSCode потім визначаються в межах спеціальної можливості wdio:vscodeOptions. Опції такі:

binary

Шлях до локально встановленого VSCode. Якщо опція не надана, сервіс завантажить VSCode на основі заданого browserVersion (або stable, якщо не вказано).

Тип: 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, сервіс реєструє вихід VSCode з хоста розширення та API консолі.

Тип: boolean
За замовчуванням: false

vscodeProxyOptions

Конфігурації проксі API VSCode визначають, як WebdriverIO підключається до робочого середовища VSCode, щоб надати вам доступ до API VSCode.

Тип: VSCodeProxyOptions
За замовчуванням:

{
/**
* Якщо встановлено значення true, сервіс намагається встановити з'єднання з
* робочим середовищем VSCode, щоб надати доступ до API VSCode
*/
enable: true,
/**
* Порт WebSocket-з'єднання, яке використовується для підключення до робочого середовища.
* За замовчуванням встановлюється на доступний порт у вашій операційній системі.
*/
// port?: number
/**
* Таймаут для підключення до WebSocket всередині VSCode
*/
connectionTimeout: 5000,
/**
* Таймаут для виконання команди всередині VSCode
*/
commandTimeout: 5000
}

Chromedriver

Починаючи з VSCode v1.86 необхідно використовувати webdriverio v8.14 або новішої версії для встановлення 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 до ваших types у вашому tsconfig.json, наприклад:

{
"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:

Внесок

Перед публікацією запиту на злиття, будь ласка, виконайте наступне:

  1. git clone git@github.com:webdriverio-community/wdio-vscode-service.git
  2. cd wdio-vscode-service
  3. npm install
  4. npm run build
  5. npm run test (або npm run ci)

Дізнайтеся більше

Якщо ви хочете дізнатися більше про тестування розширень VSCode, перегляньте доповідь Christian Bromann'а на OpenJS World 2022:

Testing VSCode Extensions at OpenJS World 2022


Для отримання додаткової інформації про WebdriverIO перегляньте домашню сторінку проекту.

Welcome! How can I help?

WebdriverIO AI Copilot