javascript - Cypress intercept doesn't work when file is cached on a disk - Stack Overflow

admin管理员组

文章数量:1355600

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, wele 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:

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, wele 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./cypress-io/cypress/issues/16766

• javascript
• testing
• caching
• cypress
• end-to-end

Share Improve this question Follow edited Jun 6, 2021 at 7:33 Richard Matsen 23.6k33 gold badges5757 silver badges8585 bronze badges asked Jun 1, 2021 at 11:28 JoyfulJoyful 1,2431414 silver badges1717 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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', {
    mand: 'Network.clearBrowserCache'
  })
})

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.

本文标签： javascriptCypress intercept doesn39t work when file is cached on a diskStack Overflow