Cypress: Bug: experimentalFetchPolyfill doesn't handle new Request API

[JessicaSachs]

Current behavior:

When constructing a request using fetch's new experimental polyfill and the new Request API, we send [object Request] in the URL's path. When the experimental polyfill is off, we correctly stringify the URL's path.

Desired behavior:

Should behave like XHR would when dealing with the new Request API

Test code to reproduce

In https://github.com/cypress-io/cypress-test-tiny/tree/query-string if you change the ajax.html fixture to use an example from MDN's site then you'll see the above screenshot.

const myHeaders = new Headers();

const myRequest = new Request('flowers.jpg?size=300', {
  method: 'GET',
  headers: myHeaders,
  mode: 'cors',
  cache: 'default',
});

fetch(myRequest)
  .then(()) => console.log(...arguments))

Versions

[stefanoimperiale]

I had the same problem. I rewrote the polyfill file in this discussion: https://gist.github.com/yagudaev/2ad1ef4a21a2d1cfe0e7d96afc7170bc#gistcomment-3358272
and that works for me

[samtsai]

I believe this is because Cypress's experimentalFetchPolyfill is using unfetch under the hood, which does not support sending a Request as the first argument, even though native Fetch does.

Cypress
https://github.com/cypress-io/cypress/blob/7d468d4e2cd706d7ccad68d3d156323ca89af7fe/packages/driver/src/cypress/cy.js#L280
https://github.com/cypress-io/cypress/blob/aed2709637b3490600d45d0cf6c9e1647b53a1e1/packages/driver/patches/unfetch%2B4.1.0.dev.patch#L40

Unfetch
https://github.com/developit/unfetch/blob/master/src/index.mjs#L1

You could either adjust your fetch calls to:

const myHeaders = new Headers();

fetch('flowers.jpg?size=300', {
  method: 'GET',
  headers: myHeaders,
  mode: 'cors',
  cache: 'default',
})
  .then(()) => console.log(...arguments))

OR provide your own fetch polyfill that does support sending a Request.

[ingro]

I have the same problem that @JessicaSachs reported but I'm using ky.
Since the native fetch support this feature I think that cypress should use a polyfill that supports that too.

[bahmutov]

Can you work around this using cy.route2? Since this experimental fetch polyfill is a temporary measure, we don't plan to investigate it or enhance it.

[JoaoPachecoBold]

Can you work around this using cy.route2? Since this experimental fetch polyfill is a temporary measure, we don't plan to investigate it or enhance it.

no, I got the same error using cy.route2 with experimentalFetchPolyfill, experimentalNetworkStubbing flags set as true, and the last version of cypress (5.2.0)

[JoaoPachecoBold]

https://gist.github.com/yagudaev/2ad1ef4a21a2d1cfe0e7d96afc7170bc#gistcomment-3358272

that code just don't work!

[bahmutov]

@JoaoPachecoBold can you try disable the experimental fetch polyfill?

experimentalFetchPolyfill: false
experimentalNetworkStubbing: true

[JoaoPachecoBold]

experimentalFetchPolyfill: false
experimentalNetworkStubbing: true

with that the request works but I can't use cy.route2() or cy.route()

[bahmutov]

@JoaoPachecoBold because it is a request to 3rd party domain that we don't currently intercept using cy.route2 https://github.com/cypress-io/cypress/issues/8487 ?

[JoaoPachecoBold]

@JoaoPachecoBold because it is a request to 3rd party domain that we don't currently intercept using cy.route2 #8487 ?

hum... No, I'm using cy.route2() for a GET request and it works, also all the request are in the same domain

the request that I'm trying to route is a POST with a json request payload

[bahmutov]

Gotcha - in that case I would suggest opening an issue for cy.route2 POST separately from this one, since long-term we plan to retire experimental fetch polyfill in favor of cy.route2

[JoaoPachecoBold]

@JoaoPachecoBold because it is a request to 3rd party domain that we don't currently intercept using cy.route2 #8487 ?

hum... No, I'm using cy.route2() for a GET request and it works, also all the request are in the same domain

@bahmutov big mistake from my part, I think that is actually the problem, do you have any dates for that fix ?

[bahmutov]

Not sure what you mean here - fix what the experimental fetch poly fill or cy route2 external domain?

Sent from my iPhone

On Sep 22, 2020, at 15:05, JoaoPachecoBold [e-mail] wrote:


@JoaoPachecoBold because it is a request to 3rd party domain that we don't currently intercept using cy.route2 #8487 ?

hum... No, I'm using cy.route2() for a GET request and it works, also all the request are in the same domain

@bahmutov big mistake from my part, I think that is actually the problem, do you have any dates for that fix ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[JoaoPachecoBold]

Not sure what you mean here - fix what the experimental fetch poly fill or cy route2 external domain?

the cy route2 external domain, that is the problem

[cainskelton]

Not sure what you mean here - fix what the experimental fetch poly fill or cy route2 external domain?

the cy route2 external domain, that is the problem

I hope it's ok for me to chime in here, I am also having this problem, I've stripped my code down to something as simple as the following line to detect if Bootstrap is being loaded from the CDN and it does not seem to intercept it

cy.route2('GET', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js').as('bootstrap')

[bahmutov]

Gotcha, please follow that issue 8487 to get notified when it gets resolved.

@cainskelton if you are just interested in knowing if a resource has been loaded you can use performance API, see https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__wait-for-resource

[JoaoPachecoBold]

Not sure what you mean here - fix what the experimental fetch poly fill or cy route2 external domain?

the cy route2 external domain, that is the problem

I hope it's ok for me to chime in here, I am also having this problem, I've stripped my code down to something as simple as the following line to detect if Bootstrap is being loaded from the CDN and it does not seem to intercept it

cy.route2('GET', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js').as('bootstrap')

@cainskelton if bootstrapcdn.com is not your main domain it's the same problem as me and the issue is this one #8487

[cainskelton]

Not sure what you mean here - fix what the experimental fetch poly fill or cy route2 external domain?

the cy route2 external domain, that is the problem

I hope it's ok for me to chime in here, I am also having this problem, I've stripped my code down to something as simple as the following line to detect if Bootstrap is being loaded from the CDN and it does not seem to intercept it
cy.route2('GET', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js').as('bootstrap')

@cainskelton if bootstrapcdn.com is not your main domain it's the same problem as me and the issue is this one #8487

Correct, it is not my main domain, I'm trying to intercept several third party scripts to verify if they are or are not being called on page load, as well as the parameters that are being appended to the end of them. I have followed the issue you linked, hopefully a resolution will be found.