如何在Cypress中切换至扩展程序上下文？求推荐扩展E2E测试工具

一、Cypress中访问扩展上下文的方案 #

Cypress默认运行在页面上下文，无法直接切换到Chrome扩展的隔离环境，但可以通过以下两种方式间接实现：

1. 基于DOM事件的自定义命令 #

利用DOM共享的特性，通过自定义事件在Cypress测试和扩展之间建立通信，封装成自定义命令后复用：

扩展侧代码（content script/background脚本）：

// 监听来自Cypress的命令事件
document.addEventListener('cypress-call-extension', (event) => {
  const { action, params } = event.detail;
  // 执行扩展内部逻辑（比如调用扩展API）
  const response = yourExtensionCore[action](...params);
  // 通过事件返回结果
  document.dispatchEvent(new CustomEvent('cypress-extension-result', { detail: response }));
});

Cypress自定义命令（cypress/support/commands.js）：

Cypress.Commands.add('callExtension', (action, ...params) => {
  return new Cypress.Promise((resolve) => {
    const handler = (event) => {
      document.removeEventListener('cypress-extension-result', handler);
      resolve(event.detail);
    };
    document.addEventListener('cypress-extension-result', handler);
    // 触发命令事件
    document.dispatchEvent(new CustomEvent('cypress-call-extension', {
      detail: { action, params }
    }));
  });
});

测试中使用：

cy.callExtension('getUserSettings').then(settings => {
  expect(settings.theme).to.equal('dark');
});

2. 直接访问扩展后台页面 #

如果你的扩展包含后台页面，可以直接导航到后台页面的URL，在其上下文内执行测试：

首先在Cypress配置中加载扩展：

// cypress.config.js
const path = require('path');

module.exports = {
  e2e: {
    setupNodeEvents(on) {
      on('before:browser:launch', (browser, launchOptions) => {
        if (browser.family === 'chromium') {
          launchOptions.args.push(`--load-extension=${path.resolve(__dirname, '../your-extension-folder')}`);
          return launchOptions;
        }
      });
    }
  }
};

然后在测试中访问后台页面（需替换为你的扩展ID）：

// 导航到扩展后台页面
cy.visit('chrome-extension://your-extension-id/background.html')
  .window()
  .then(win => {
    // 直接调用后台脚本中的函数
    win.syncExtensionData();
  });

注：扩展ID可以通过Chrome开发者模式加载扩展后获取，或通过Cypress启动时的日志提取。

二、Chrome扩展E2E测试工具推荐 #

Playwright #

原生支持Chrome扩展测试，能轻松加载扩展、切换到弹出窗口/后台页面/content script上下文，API简洁直观，适合快速搭建测试用例，还支持多浏览器兼容测试。

Puppeteer #

Chrome官方出品的自动化工具，对扩展测试支持深度定制，可以直接操控扩展的后台脚本、弹出窗口，调用Chrome DevTools协议与扩展交互，适合需要精细控制的场景。

WebdriverIO #

支持通过ChromeOptions加载扩展，结合Chrome DevTools协议访问扩展上下文，适合已有WebdriverIO技术栈的项目，生态完善。

Selenium #

虽然配置复杂度较高，但可以通过ChromeDriver的addExtensions方法加载扩展，通过执行脚本与扩展通信，适合传统Selenium项目迁移。

内容的提问来源于stack exchange，提问作者Salmin Skenderovic