Тестування веб-розширень
WebdriverIO є ідеальним інструментом для автоматизації роботи з браузером. Веб-розширення є частиною браузера і можуть бути автоматизовані таким же чином. Коли ваше веб-розширення використовує content scripts для запуску JavaScript на веб-сайтах або пропонує спливаюче вікно, ви можете запустити e2e тест для цього за допомогою WebdriverIO.
Завантаження веб-розширення в браузер
Першим кроком ми повинні завантажити розширення, яке тестується, в браузер як частину нашої сесії. Це працює по-різному для Chrome і Firefox.
У цій документації не розглядаються веб-розширення для Safari, оскільки їх підтримка значно відстає, а попит користувачів невисокий. Якщо ви розробляєте веб-розширення для Safari, будь ласка, створіть issue і співпрацюйте над включенням його сюди.
Chrome
Завантаження веб-розширення в Chrome можна здійснити шляхом надання рядка base64
закодованого файлу crx
або шляхом надання шляху до папки веб-розширення. Найпростіше це зробити, визначивши можливості Chrome наступним чином:
import path from 'node:path'
import url from 'node:url'
const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
export const config = {
// ...
capabilities: [{
browserName,
'goog:chromeOptions': {
// враховуючи, що ваш wdio.conf.js знаходиться в кореневому каталозі, а скомпільовані
// файли веб-розширення розташовані в папці `./dist`
args: [`--load-extension=${path.join(__dirname, '..', '..', 'dist')}`]
}
}]
}
Якщо ви автоматизуєт е інший браузер, ніж Chrome, наприклад, Brave, Edge або Opera, ймовірно, що опції браузера співпадають з прикладом вище, лише використовуючи іншу назву можливості, наприклад, ms:edgeOptions
.
Якщо ви компілюєте своє розширення як файл .crx
, використовуючи, наприклад, NPM-пакет crx, ви також можете підключити зібране розширення через:
import path from 'node:path'
import url from 'node:url'
const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
const extPath = path.join(__dirname, `web-extension-chrome.crx`)
const chromeExtension = (await fs.readFile(extPath)).toString('base64')
export const config = {
// ...
capabilities: [{
browserName,
'goog:chromeOptions': {
extensions: [chromeExtension]
}
}]
}
Firefox
Щоб створити профіль Firefox, який включає розширення, ви можете використовувати Firefox Profile Service для відповідного налаштування вашої сесії. Однак ви можете зіткнутися з проблемами, коли ваше локально розроблене розширення не може бути завантажене через проблеми з підписом. У цьому випадку ви також можете завантажити розширення в хуку before
за допомогою команди installAddOn
, наприклад:
import path from 'node:path'
import url from 'node:url'
const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
const extensionPath = path.resolve(__dirname, `web-extension.xpi`)
export const config = {
// ...
before: async (capabilities) => {
const browserName = (capabilities as WebdriverIO.Capabilities).browserName
if (browserName === 'firefox') {
const extension = await fs.readFile(extensionPath)
await browser.installAddOn(extension.toString('base64'), true)
}
}
}
Для створення файлу .xpi
рекомендується використовувати NPM-пакет web-ext
. Ви можете зібрати своє розширення за допомогою наступної команди:
npx web-ext build -s dist/ -a . -n web-extension-firefox.xpi
Поради та хитрощі
Наступний розділ містить набір корисних порад, які можуть допомогти при тестуванні веб-розширення.