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

user_2660839 0
Viewed 1377

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:

cypress log

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

enter image description here

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

end-to-end cypress caching testing javascript
2 Answers

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

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

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.

Admin1
Related