Intercept not working with axios interceptors

Current behavior

When trying to intercept an API call using cy.intercept, combined with axios which is using an interceptor, the test fails due to a network error.

I’ve created a demo project (using Vue) to showcase this issue. It only happens when opening Cypress in interactive mode, when running Cypress using npx cypress run, the error does not occur.

The project is very simple. There is a DemoAPI class (src/common/demo-api.ts), which extends a base API class (APIAbstract at src/common/api-abstract.ts). The DemoAPI class has a function to call an endpoint at http://localhost:3838/demo. The abstract API class also defines interceptors for axios. The DemoAPI endpoint is called in src/views/HomeView.vue.

The test inside tests/e2e/spec/demo.cy.ts is very basic. It visits the site and does a cy.intercept on the URL specified above.

When running the test, by first starting the frontend npm run serve, then starting Cypress in interactive mode npx cypress open and then running demo.cy.ts, this is the result:

The axios interceptors seem to be the problem. When commenting out the axios interceptors, the test works. Also when running the tests headless using npx cypress run, the tests work.

Testing the same thing on a Windows machine seems not to produce the error and work just fine.

Desired behavior

Cypress should not throw an error with the axios interceptors active.

Test code to reproduce

This is the demo project, which showcases the error.

Cypress Version

10.0.3

Other

OS: macOS 12.4 Processor Architecture: Apple Silicone Browser: Electron 18.0.4

[rachelruderman]

Hi @svelver, thank you for your patience! We marked this issue as a bug and have forwarded it to be prioritized by the team 😸

[brabanod]

@flotwig I can confirm, that the request is being sent.

Also disabling the cache in Chrome developer tools does not seem to help. Still it occasionally fails.