如何在离线模式下自动测试Service Workers？尝试使用Cypress。

Question

我开发了一些服务工作者，但当服务工作者的复杂性增加时，我想创建一个测试集来定期检查它。我决定首先使用Cypress。但我遇到了一些问题，无法处理这种情况。

1. 离线模式。Cypress没有本地使用情况，但有一个Chrome配方（如果它只在一个浏览器中工作，则无所谓）。 2. 当离线模式配方处于活动状态时，测试中的获取操作无法正常工作。 Cypress Open Issues - Simulate offline mode #235 Cypress Offline Mode Recipe for Chrome 同样的网站在浏览器上可以工作，但在Cypress测试中不行。

Cypress测试代码

it('can load if sw registered and try to visit', () => {
   cy.visit(folder)
   cy.contains('#sw-status', 'SW not registered')
   cy.get('#register').click().wait(1000)
      
   Cypress.goOffline()
   Cypress.assertOffline()
      
      
   cy.get('#fetch').click()
   cy.contains('#fetch-response', '200')
})

在cypress中捕获的异常-获取失败

没有网络连接。Firefox可以使用fetch

没有网络连接。Chrome可以使用fetch

有些奇怪。没有网络连接，但Chrome说window.navigator.onLine为true

有什么建议吗？尝试使用另一个测试框架吗？

我认为问题的解释已经很详细了，但如果有人认为代码可能有用，我可以分享它们而不会有问题。

- raultm

Answer 1

过了一段时间后，我在cypress的问题中进行了更深入的搜索。

我发现了一个评论，谈到在某些情况下不使用localhost作为服务器名称时会出现问题（我正在使用Valet for Linux自定义TLD，所以这与我的问题非常相关）。我希望如果你处于我的情况下，你不需要沿着同样的过程深入研究。

所以我检查了新配置，神奇地一切都正常了！

我所做的就是启动一个使用localhost的服务器，然后运行测试（自动或使用cypress UI）。

// package.json
// 'npm test' to run tests automatically
// 'npm run test:ui' to run with cypress UI 
"scripts": {
    "start": "http-server -a localhost -p 3030 -c-1",
    "cy:run": "cypress run",
    "cy:ui": "cypress open",
    "test": "start-server-and-test start http://localhost:3030 cy:run",
    "test:ui": "start-server-and-test start http://localhost:3030 cy:ui",
  },`

我已在存储库中分享了第一次尝试。

沙丘浏览-探索离线模式下服务工作者的可测试性。

- raultm