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

huangapple go评论74阅读模式
英文:

Can Cypress.io test a chrome extension?

问题

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

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

context('访问扩展程序', () => {
    beforeEach(() => {
      cy.visit('chrome-extension://fmnignchafknmcleldmndpkfkdohnngn/dashboard.html')
    })

    it('什么都不做', () => {
        assert(true);
    });
});

不起作用。页面显示:

抱歉,我们无法加载:chrome-extension://fmnignchafknmcleldmndpkfkdohnngn/dashboard.html

英文:

I'm trying to test my chrome-extension using cypress.io

I installed https://github.com/ejoubaud/cypress-browser-extension-plugin

context('visit extension', () => {
    beforeEach(() => {
      cy.visit('chrome-extension://fmnignchafknmcleldmndpkfkdohnngn/dashboard.html')
    })

    it('does nothing', () => {
        assert(true);
    });
});

it doesn't work. page reads:

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

答案1

得分: 8

你不需要任何额外的插件来加载浏览器扩展,假设你正在运行Cypress>=v4,下面的代码应该足够加载它。

// cypress/plugins/index.js
module.exports = (on, config) => {
  on('before:browser:launch', (browser, launchOptions) => {
    // 提供未打包的扩展文件夹的绝对路径
    // 注意:扩展无法在无头Chrome中加载
    launchOptions.extensions.push('Users/jane/path/to/extension');
    return launchOptions;
  });
}

在你的测试文件中,你只需访问任何'normal'网页,它应该对你有用。例如:

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

此外,Cypress不能访问诸如chrome-extension://之类的东西(或者不是httphttps的东西)。这是他们的设计选择。

英文:

You do not need any extra plugins to load a browser extension, assuming you are running Cypress>=v4 the below should be enough to get it loaded.

// 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
  })
}

In your test file you can just visit any 'normal' webpage and it should work for you. For example:

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

Also, Cypress cannot visit things like chrome-extension:// (or anything which is not http or https). This is by design on their part.

答案2

得分: 3

如其他回答中所提到的,Cypress 不完全支持 Chrome 扩展测试,因此您将无法访问类似 chrome-extension:// 的链接。

您可以尝试使用 Playwright,它可以直接支持这一功能。在 Playwright 中,您可以启动一个 Chromium 浏览器,已安装了您的扩展,然后导航到任何网页或扩展页面(如您的 popup.html)并测试您的扩展行为。

关于测试扩展的端对端(E2E)的内容不多,但这篇文章详细介绍了如何从零开始设置正确的基础设施,并提供了覆盖您的问题(如何从测试导航到扩展页面)的代码示例。

在像文章中设置 Playwright 之后,您就可以像这样简单地访问您的弹出窗口(或任何其他内部页面):

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

As mentioned in other answers, Cypress is not fully supporting chrome extensions testing and you won't be able to visit links like chrome-extension://.

You may want to give a try to Playwright that is supporting this out of the box. There, you can launch a chromium browser with your extension already installed and then navigate to any web page or extension page (like your popup.html) and test your extension behavior.

There is not a lot of content about testing extensions E2E, but this article is detailing how to set up the correct infra for it from scratch with code examples covering your question (how to navigate to an extension page from test).

After setting up playwright like in the article, you will be able to access your popup (or any other internal page) simply like this :

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

huangapple
  • 本文由 发表于 2020年1月6日 16:38:56
  • 转载请务必保留本文链接:https://go.coder-hub.com/59608956.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定