Тестування розширень VS Code за допомогою WebdriverIO (ключові нюанси)

Visual Studio Code (VS Code) є одним з найпопулярніших редакторів коду. Його екосистема розширень дає розробникам можливість додавати нові функції та кастомізувати робоче середовище. Проте автоматизоване тестування цих розширень може бути складним завданням. Саме тут стає у нагоді WebdriverIO. У цій статті розглядається, як за допомогою WebdriverIO автоматизувати тести для розширень VS Code, звертаючи увагу на особливості цього процесу.

Навіщо потрібне автоматизоване тестування розширень VS Code

Підтримка якості Розширення можуть бути досить складними, особливо якщо вони працюють з різними мовами програмування чи інтегруються із зовнішніми інструментами. Автоматизовані тести допомагають переконатися, що нові версії не ламають уже існуючий функціонал.

Виявлення регресій Автоматизовані тести дають змогу швидше виявляти регресії. Якщо зміни в коді призводять до помилок, тести вкажуть на них, даючи час виправити їх до виходу оновлення.

Швидше впровадження Ручне тестування може забирати багато часу. Завдяки автоматизованим тестам можна швидко ітеративно розвивати функціонал, зосереджуючись на створенні нових можливостей замість постійного повторення одних і тих самих перевірок

Роль WebdriverIO

WebdriverIO зазвичай використовують для автоматизації веб-тестів, оскільки це фреймворк на базі JavaScript, що працює з Node.js. Проте з додатковими драйверами чи службами його можна застосовувати і для інших типів додатків.

Чому WebdriverIO

• Середовище JavaScript. WebdriverIO природно вписується у робочий процес з Node.js, знайомий розробникам під розширення VS Code.
• Архітектура з плагінами. WebdriverIO має багато сервісів та плагінів, що дають змогу пристосувати тести до різних сценаріїв.
• Підтримка async/await. Це робить тестовий код чистішим і легшим для розуміння.

Складнощі під час тестування розширень VS Code

Замість браузера – Electron Звичайні веб-тести працюють у браузері з headless-режимом. VS Code є десктоп-додатком на Electron, отже керувати ним так само просто, як веб-сторінкою, не вийде.

Пошук елементів інтерфейсу У Electron-додатку структура і селектори можуть відрізнятися від стандартної DOM-структури. Можливо, доведеться використовувати спеціальні атрибути чи нестандартні засоби пошуку.

Активація розширення Розширення VS Code потрібно активувати. Зазвичай воно чекає на певні події, команди чи інші тригери, перш ніж стане доступним для взаємодії.

Підходи до автоматизації VS Code за допомогою WebdriverIO

Виділимо принаймні два варіанти тестування функціоналу VS Code:

Використання code-server або веб-орієнтованих збірок VS Code Деякі проєкти, наприклад code-server, дають змогу запускати VS Code у веб-середовищі. Це спрощує автоматизацію через WebdriverIO, оскільки веб-інтерфейс нагадує звичайний сайт. Кроки:

1. Встановити code-server (чи іншу веб-збірку).
2. Запустити, отримавши адресу (наприклад http://localhost:8080).
3. WebdriverIO підключається до цієї адреси, після чого працюємо із CSS-селекторами і ін.

Переваги: Звичні інструменти для тестування веб-сторінок. Недоліки: Може відрізнятися від офіційного VS Code.

Використання Spectron чи Playwright-підходів Існувала бібліотека Spectron для тестування Electron, але також можливо поєднати WebdriverIO з кастомними драйверами, щоб керувати Electron-додатком. Кроки:

1. Запустити VS Code як Electron-додаток.
2. Підключитися через спеціальний драйвер.
3. Керувати елементами, відправляти команди і т.д.

Перевага: Тестується реальне середовище VS Code. Недолік: Складна конфігурація і менше готової документації.

Приклад налаштування WebdriverIO (веб-підхід)

Встановлення

npm install webdriverio @wdio/cli --save-dev

Налаштування wdio.conf.js

Після запуску wdio config wizard отримаємо файл конфігурації, де вказуємо:

• local mode
• тестовий фреймворк (Mocha чи Jest)
• baseUrl

Зразок тесту

describe("VS Code Extension Test", () => {
  it("should install and activate the extension", async () => {
    // Припустимо, що code-server чи веб-варіант VS Code працює
    await browser.url("https://localhost:8080");

    // Приклад: знаходимо іконку менеджера розширень
    const extensionIcon = await $("[data-test='extensions-icon']");
    await extensionIcon.click();

    // Далі: пошук розширення
    const searchBox = await $("[data-test='extensions-search']");
    await searchBox.setValue("my-extension");

    // Дочекатися і перевірити результат
    // Можливо встановлення і подальша перевірка
  });
});

Типові проблеми

Затримки (timeouts) VS Code може повільно стартувати. Варто встановлювати достатній timeout або використовувати методи на кшталт waitUntil.

Селектори Electron UI може не мати стандартних HTML-ідентифікаторів. Можливо, потрібно додати атрибути data-test.

Права та політики Якщо розширення вимагає доступу до файлової системи, можуть з’являтися діалогові вікна. Потрібна логіка для обробки.

Рекомендації для стабільного набору тестів

Окреме середовище Найкраще мати чисте оточення (Docker або віртуальний образ), щоб тести щоразу стартували з нуля.

Очищення даних Якщо ваше розширення зберігає будь-які налаштування чи кеш, чистіть їх після тесту.

Послідовність чи паралель Якщо тестові сценарії конфліктують, запускайте їх по черзі. Якщо незалежні, можна паралельно.

Висновок

Автоматизація тестування розширень для VS Code відрізняється від звичайного веб-тестування, адже потрібно взаємодіяти з Electron-додатком або з веб-версією (code-server). WebdriverIO залишається корисним інструментом, якщо правильно налаштувати середовище і локатори. Зрештою, створення надійної системи тестів забезпечить стабільність розширення і покращить досвід користувачів. При належному підході до тайм-аутів, збирання даних та очищення довкілля, WebdriverIO може успішно тримати високу планку якості для VS Code Extensions.