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

Question

I want to handle some requests for some files when I open the page. On the screenshot, you can see the log from the cypress panel:

To handle these requests I added code like this:

    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')
    });

It works well with settings.json, but with .stl files doesn't

It also doesn't work if I will write it like this:

    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')
    });

I didn't find any restrictions about it in docs, welcome to your ideas :)

Cypress: v7.4.0

UPDATE 1:

I found one more detail: if open the chrome developer tools and disable cache in the "Network" tab - it works correctly always

UPDATE 2:

I created an issue with the demo repo: https://github.com/cypress-io/cypress/issues/16766

Marcus

Answer 1

With the fetch() protocol, the disk cache read is not caught by cy.intercept().

You can alter the fetch() in the app to turn off caching,

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

but if you prefer to do it in the test, add this to top of the spec

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

Note, normally you can modify headers in the intercept like this

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

but it seems that intercept does not match to cache reads, so it never gets to that point.

---

As a side note, your working branch using Cypress v4.12.0 uses xhr instead of fetch. If you substitute the xhr method into the Cypress v7.4.0 build (still using intercept), the problem goes away.

Which means you could also fix this by using the old fetch polyfill that converts fetch to xhr on the fly (but I've not tried it).

---

There is a third way based on

• this discussion Using Chrome Debugger Protocol from Cypress

• example recipe offline-spec.js

• reference Network.clearBrowserCache

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

Hermie

Answer 2

When in doubt, add extra *.

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

Leading ** for any number of preceding parts like https://my-domain/static...

Trailing /** for subdirectory(s) and /* for file name.

Wilden

It's very strange, but after restart cypress, it works correctly, but if I click on the relaunch button is doesn't - "No request ever occurred.". Summary: it works immediately after start cypress – Marcus

More details: if after test complete launch same test again (hotkey "R"), intercept doesn't work for my ".stl" files, but if I will return to the dashboard with the test list and click on the "Stop" button, then launch this test again - it again works correctly like in first time – Marcus

One more thing: if I have two tests with this intercept in the same file - it works only for the first test but in the second I again get the error "No request ever occurred." – Marcus

I found one more detail: if open the chrome developer tools and disable cache in the "Network" tab - it works correctly always – Marcus