cy.intercept by request cause

[notpushkin]

What would you like?

Allow matching routes by its cause (e. g. image or xmlhttprequest):

cy.intercept({
  url: "/orders",
  cause: "xmlhttprequest",
});

Why is this needed?

My current application uses same URLs on API and UI side (e. g. https://127.0.0.1:3000/orders on the frontend queries https://127.0.0.1:4000/orders on the backend). I need to stub the API call, then open the page on the frontend as usual.

cy.route was handling only API requests, so simple cy.route("/orders") would work alright independent of the environment – if the backend was on a different hostname (e. g. CI could use a staging instance instead of localhost), cy.route would still match it. With cy.intercept, the only way to match API calls right now is to add a hostname, e. g.:

const apiRoot = Cypress.env("api_root");
cy.intercept("${apiRoot}/orders");

This looks acceptable but it's another configuration variable to keep up to date, and can be avoided. :-)

Implementation suggestion

If I get this correctly, this can't be implemented using just the current setup with running a proxy server. However, we could use the extension running in the browser to match the routes we need using the webRequest.onBeforeRequest (Mozdev, Chrome docs) API. If we can't move all intercepting business to the extension (why?), we could use it to add an HTTP header to all requests (X-Cypress-Cause: xmlhttprequest) and match that on the proxy side as usual.

P. S. Thank you all for your great work!

[flotwig]

Related work: #14843 We will need to collect this kind of data for 14843.

We will probably use CDP/foxdriver to do this, not WebExtensions, since WebExtensions do not work in headless Chrome. They also do not work completely in Electron.

[flotwig]

Btw -

cy.route was handling only API requests, so simple cy.route("/orders") would work alright independent of the environment – if the backend was on a different hostname (e. g. CI could use a staging instance instead of localhost), cy.route would still match it. With cy.intercept, the only way to match API calls right now is to add a hostname, e. g.:

Give Cypress 7.0 a try, we've fixed a lot of confusion around URL matching in 7: https://docs.cypress.io/guides/references/migration-guide#cy-intercept-changes

[notpushkin]

@flotwig Will give 7.0 a go (perhaps next week?), thank you! Things do look a lot clearer (really love how you now can override a particular request by redefining a handler for it!) but I can't really see how this could help in this particular case. Could you elaborate, please? :-)

[flotwig]

Oh, never mind, I misunderstood why you needed to use apiRoot. :P

[flotwig]

This will be added in #25075, see PR for API details.

[cypress-bot]

The code for this is done in cypress-io/cypress#25075, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 12.2.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v12.2.0, please open a new issue.