从崩溃到可靠：Cypress Service Worker测试实战指南-优快云博客

从崩溃到可靠：Cypress Service Worker测试实战指南

【免费下载链接】cypress Fast, easy and reliable testing for anything that runs in a browser. 项目地址: https://gitcode.com/GitHub_Trending/cy/cypress

Web应用离线功能已成为现代前端开发的必备能力，但Service Worker（服务工作线程）的测试一直是开发者头疼的难题。本文将通过Cypress的实战案例，展示如何构建稳定的离线功能测试体系，解决Service Worker缓存机制验证、跨浏览器兼容性等核心问题。

测试场景与项目结构

Cypress提供了完整的Service Worker测试解决方案，相关实现主要分布在系统测试模块中：

核心测试文件：system-tests/test/service_worker_spec.js
协议验证测试：system-tests/test/service_worker_protocol_spec.js
测试工具库：system-tests/lib/protocol-stubs/protocolStubResponse

这些测试覆盖了从基础缓存机制到高级协议捕获的全链路验证，支持Chrome和Electron浏览器环境，通过system-tests/lib/serverStub模块实现请求拦截与模拟。

基础测试框架搭建

测试服务器配置

Cypress测试体系使用Express构建测试服务器，通过自定义路由模拟Service Worker的各种场景：

// [system-tests/test/service_worker_spec.js](https://link.gitcode.com/i/82f2ed5820dee409e059b16d96055b0f#L9-L32)
const onServer = function (app) {
  app.use(express.static(e2ePath, {
    // 强制缓存以模拟生产环境
    maxAge: 3600000,
  }))

  app.get('/service-worker-assets/scope/cached-service-worker', (req, res) => {
    res.set({
      'Access-Control-Allow-Origin': '*',
    })

    // 跨域重定向测试
    return res.redirect('https://localhost:1516/cached-sw-redirect')
  })

  app.get('/cached-sw-redirect', (req, res) => {
    requestsForServiceWorkerCache += 1
    res.set({
      'Access-Control-Allow-Origin': '*',
    })

    return res.send('this response will be used by service worker')
  })
}

测试用例设计

基础测试用例通过systemTests API配置多服务器环境，验证Service Worker的缓存行为：

// [system-tests/test/service_worker_spec.js](https://link.gitcode.com/i/82f2ed5820dee409e059b16d96055b0f#L34-L56)
describe('e2e service worker', () => {
  systemTests.setup({
    servers: [{
      https: true,
      port: 1515,
      onServer,
    }, {
      https: true,
      port: 1516,
      onServer,
    }],
  })

  systemTests.it('executes one spec with a cached call', {
    project: 'e2e',
    spec: 'service_worker.cy.js',
    onRun: async (exec, browser) => {
      await exec()
      // 验证缓存生效，确保请求只发送一次
      expect(requestsForServiceWorkerCache).to.eq(1)
    },
  })
})

高级协议捕获与验证

协议事件捕获

Cypress通过自定义协议捕获机制，记录Service Worker相关的网络事件，实现精确的请求类型验证：

// [system-tests/test/service_worker_protocol_spec.js](https://link.gitcode.com/i/5068619dce3e2aa43f52d9faa7988c09#L25)
enableCaptureProtocol(PROTOCOL_STUB_SERVICE_WORKER)

多浏览器兼容性测试

测试框架原生支持Chrome和Electron浏览器，通过参数化测试确保跨环境一致性：

// [system-tests/test/service_worker_protocol_spec.js](https://link.gitcode.com/i/5068619dce3e2aa43f52d9faa7988c09#L21-L22)
const BROWSERS = ['chrome', 'electron']

BROWSERS.forEach((browser) => {
  it(`verifies the types of requests match - ${browser}`, function () {
    // 测试实现...
  })
})

缓存行为验证

通过解析协议事件数据库，验证Service Worker的缓存策略是否符合预期：

// [system-tests/test/service_worker_protocol_spec.js](https://link.gitcode.com/i/5068619dce3e2aa43f52d9faa7988c09#L46-L55)
expect(parsedProtocolEvents.correlatedUrls).to.eql({
  'http://localhost:3131/index.html': ['frame id'],
  // Service Worker缓存的请求没有frame id
  'http://localhost:2121/cypress/fixtures/service-worker-assets/example.json': ['no frame id'],
  'http://localhost:2121/cypress/fixtures/service-worker-assets/scope/cached-service-worker.json': ['no frame id'],
  'http://localhost:2121/cypress/fixtures/service-worker-assets/scope/load.js': ['frame id'],
  'http://localhost:2121/cypress/fixtures/service-worker-assets/scope/service_worker.html': ['frame id', 'no frame id', 'no frame id'],
})

预加载Service Worker测试

对于通过navigator.serviceWorker.preload()加载的Service Worker，Cypress提供了专门的测试场景：

// [system-tests/test/service_worker_protocol_spec.js](https://link.gitcode.com/i/5068619dce3e2aa43f52d9faa7988c09#L61-L92)
it(`verifies the types of requests match for a preloaded service worker - ${browser}`, function () {
  // 不稳定测试增加重试机制
  this.retries(10)

  return systemTests.exec(this, {
    key: 'f858a2bc-b469-4e48-be67-0876339ee7e1',
    project: 'protocol',
    configFile: 'cypress-with-service-worker-preloaded.config.ts',
    spec: 'service-worker-preloaded.cy.js',
    record: true,
    expectedExitCode: 0,
    port: 2121,
    browser,
  }).then(() => {
    // 验证预加载场景下的请求类型
    const protocolEvents = fs.readFileSync(getFilePath('e9e81b5e-cc58-4026-b2ff-8ae3161435a6.db'), 'utf8')
    const parsedProtocolEvents = JSON.parse(protocolEvents)
    
    expect(parsedProtocolEvents.multipleNetworkRequestEventsForSameRequestId).to.be.false
    // 预加载场景下的URL关联验证
  })
})

测试最佳实践

测试稳定性保障

重试机制：对不稳定的Service Worker测试场景启用重试

// [system-tests/test/service_worker_protocol_spec.js](https://link.gitcode.com/i/5068619dce3e2aa43f52d9faa7988c09#L65)
this.retries(10)

独立测试环境：每个测试使用独立的协议数据库文件

// [system-tests/test/service_worker_protocol_spec.js](https://link.gitcode.com/i/5068619dce3e2aa43f52d9faa7988c09#L12-L19)
const getFilePath = (filename) => {
  return path.join(
    Fixtures.projectPath('protocol'),
    'cypress',
    'system-tests-protocol-dbs',
    `${filename}.json`,
  )
}

明确的预期结果：通过精确的断言确保缓存行为符合设计预期

常见问题解决方案

跨域Service Worker限制：通过测试服务器配置CORS头解决
缓存污染：使用独立的测试数据库文件隔离测试环境
浏览器兼容性：通过参数化测试覆盖主流浏览器

总结与扩展

Cypress提供的Service Worker测试框架不仅覆盖了基础的离线功能验证，还通过协议级别的事件捕获实现了深度的缓存行为分析。开发者可以基于这些测试用例，扩展出更复杂的离线场景测试，如：

缓存策略切换测试（CacheFirst/NetworkFirst）
Service Worker更新机制验证
离线状态下的用户交互测试

完整的测试用例和工具代码可参考system-tests/test/目录，官方也提供了详细的测试策略文档指导进一步的测试优化。

通过Cypress的Service Worker测试方案，开发者可以自信地交付可靠的离线功能，将曾经的"崩溃场景"转变为"可靠体验"。

【免费下载链接】cypress Fast, easy and reliable testing for anything that runs in a browser. 项目地址: https://gitcode.com/GitHub_Trending/cy/cypress

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考