当文件缓存在磁盘上时，赛普拉斯拦截不起作用

Question

我想在打开页面时处理对某些文件的一些请求。在屏幕截图上，您可以看到来自 cypress 面板的日志：

为了处理这些请求，我添加了如下代码：

    it('Check intercept', () => {
        cy.intercept('/settings.json').as('settings');
        cy.intercept('/static/model/*').as('plates');

        cy.visit('/editor/ckpdx02f7098c08632il2aetr');

        cy.wait('@settings')
        cy.wait('@plates')
    });

它适用于 settings.json，但不适用于 .stl 文件

这样写也不行:

    it('Check intercept', () => {
        cy.intercept('/settings.json').as('settings');
        cy.intercept('/static/model/ckpdwtgpg096g08636kd57n39/plate_4.stl').as('plate4');
        cy.intercept('/static/model/ckpdwtgpg096g08636kd57n39/plate_3.stl').as('plate3');
        cy.intercept('/static/model/ckpdwtgpg096g08636kd57n39/plate_2.stl').as('plate2');
        cy.intercept('/static/model/ckpdwtgpg096g08636kd57n39/plate_1.stl').as('plate1');
        cy.intercept('/static/model/ckpdwtgpg096g08636kd57n39/plate_0.stl').as('plate0');

        cy.visit('/editor/ckpdx02f7098c08632il2aetr');

        cy.wait('@settings')
        cy.wait('@plate4')
        cy.wait('@plate3')
        cy.wait('@plate2')
        cy.wait('@plate1')
    });

我没有在文档中找到任何关于它的限制，欢迎您的想法:)

赛普拉斯：v7.4.0

UPDATE 1:

我发现了更多细节：如果打开 chrome 开发人员工具并在“网络”选项卡中禁用缓存 - 它总是可以正常工作

UPDATE 2:

我在演示回购中创建了一个问题：https://github.com/cypress-io/cypress/issues/16766

Answer 1

如有疑问，请添加额外的 *。

cy.intercept('**/static/model/**/*').as('plates')

前导 ** 任意数量的前面部分，例如 https://my-domain/static...

子目录的尾随 /** 和文件名的尾随 /*。

Answer 2

使用fetch()协议，磁盘缓存读取不会被cy.intercept()捕获。

您可以在应用程序中更改 fetch() 以关闭缓存，

fetch("http://127.0.0.1:2000/plate.stl", {cache: "no-store"});

但如果您希望在测试中这样做，请将其添加到规范顶部

beforeEach(() => {
  const disableCache = (win) => {
    const original = win.fetch;
    win.fetch = (...args) => original(...args, {cache: "no-store"});
  }
  cy.on('window:before:load', win => disableCache(win))
})

注意，通常你可以这样修改headers在拦截

cy.intercept("/plate.stl", req => {
  req.headers['cache'] = 'no-store'
})

但似乎拦截与缓存读取不匹配，所以它永远不会达到那个点。

附带说明一下，您使用 Cypress v4.12.0 的工作分支使用 xhr 而不是 fetch。如果将 xhr 方法替换为 Cypress v7.4.0 构建（仍然使用拦截），问题就会消失。

这意味着您也可以通过使用旧的 fetch polyfill 将 fetch 动态转换为 xhr 来解决这个问题（但我还没有尝试过）。

还有第三种方法基于

这个讨论Using Chrome Debugger Protocol from Cypress
示例食谱offline-spec.js
参考Network.clearBrowserCache

beforeEach(() => {
  Cypress.automation('remote:debugger:protocol', {
    command: 'Network.clearBrowserCache'
  })
})

当文件缓存在磁盘上时，赛普拉斯拦截不起作用

Cypress intercept doesn't work when file is cached on a disk

javascript

testing

caching

cypress

end-to-end