Cypress.io 可以测试Chrome扩展程序吗?

Question

我正在尝试使用 cypress.io 测试我的chrome扩展程序

我安装了 https://github.com/ejoubaud/cypress-browser-extension-plugin

context('visit extension', () => {
beforeEach(() => {
cy.visit('chrome-extension://fmnignchafknmcleldmndpkfkdohnngn/dashboard.html')
})
it('does nothing', () => {
assert(true);
});
});

它不起作用。页面内容如下：

Sorry, we could not load: chrome-extension://fmnignchafknmcleldmndpkfkdohnngn/dashboard.html

Answer 1

假设您运行的是Cypress>=v4，则不需要任何额外的插件来加载浏览器扩展。

// cypress/plugins/index.js
module. Exports = (on, config) => {
on('before:browser:launch', (browser, launchOptions) => {
// supply the absolute path to an unpacked extension's folder
// NOTE: extensions cannot be loaded in headless Chrome
launchOptions.extensions.push('Users/jane/path/to/extension')
return launchOptions
})
}

在您的测试文件中，您可以访问任何"普通"网页，它应该适合您。例如：

// test.spec.js
describe('Navigation', () => {
it('cy.visit() - visit a remote url', () => {
cy.visit('https://en.wikipedia.org/wiki/Diabetes')
})
})

此外，赛普拉斯不能访问诸如chrome-extension://之类的东西(或任何未http或https的东西(。这是他们的设计使然。

Answer 2

如其他答案所述，赛普拉斯并不完全支持 chrome 扩展程序测试，您将无法访问像chrome-extension://这样的链接。

你可能想尝试一下开箱即用地支持这一点的剧作家。在那里，您可以在已安装扩展的情况下启动 chromium 浏览器，然后导航到任何网页或扩展页面(如弹出窗口.html(并测试扩展程序行为。

关于测试扩展 E2E 的内容并不多，但本文详细介绍了如何从头开始为其设置正确的基础结构，并提供涵盖您的问题的代码示例(如何从测试导航到扩展页面(。

像文章中一样设置剧作家后，您将能够像这样访问您的弹出窗口(或任何其他内部页面(：

await page.goto(`chrome-extension://${extensionId}/popup.html`);