route2 stub for img elements using Fixtures returns text/plain as content type

[TonyHernandezAtMS]

Current behavior:

route2 when configured with image fixtures returns content text/plain.

Desired behavior:

route2 configured with fixtures should return images with correct content type.

Test code to reproduce

Here is a repo with a set of tests.
https://github.com/TonyHernandezAtMS/cypress-test-tiny/
I have found that when I first run this test in Chrome, the first test ends up in a loop requesting the image over and over. If I perform a Empty Cache and Hard Reload in the browser then the tests will progress through all of them.

Versions

5.2.0, Windows, all browsers

[TonyHernandezAtMS]

@flotwig Hoping you can take a look at this.

[flotwig]

@TonyHernandezAtMS as a workaround, you can specify the content-type manually for responses. Using your example:

    cy.fixture("fixture1/pictures/category.jpg").then((pic) => {
      cy.route2("images/category.jpg", { body: pic, headers: { 'content-type': 'image/jpeg' } });
    });

---

I'm pretty sure this problem also exists for the fixture API:

// this probably also sends the wrong content-type, but can be fixed
cy.route2('images/category.jpg', { fixture: 'fixture1/pictures/category.jpg' })

I'm not sure if there is going to be a way to fix the pattern you've provided in the OP, but we can definitely fix this usage.

[TonyHernandezAtMS]

@flotwig
I tried your snippet:

    cy.fixture("fixture1/pictures/category.jpg").then((pic) => {
      cy.route2("images/category.jpg", { body: pic, headers: { 'content-type': 'image/jpeg' } });
    });

It didn't work. The browser still shows a blank placeholder. I've attached the HAR file and have updated the repo with this snippet.

[flotwig]

@TonyHernandezAtMS try this maybe:

cy.route2('images/category.jpg', { fixture: 'fixture1/pictures/category.jpg', headers: { 'content-type': 'image/jpeg' } })

[bahmutov]

You know we have https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/stubbing-spying__route2 where you could try and show how it is working or not working without guessing

[bahmutov]

Tried the image spying and stubbing, so far no luck, see cypress-io/cypress-example-recipes#570 (comment)

[TonyHernandezAtMS]

@flotwig @bahmutov
Hi Zach and Gleb - Any update?

[bahmutov]

No update on this, if there was any work in progress there would be a pull request linked to this issue

…

Sent from my iPhone

On Oct 6, 2020, at 09:37, Tony Hernandez ***@***.***> wrote:  @flotwig @bahmutov Hi Zach and Gleb - Any update? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[TonyHernandezAtMS]

Thanks for the info. On Tue, Oct 6, 2020 at 8:52 AM Gleb Bahmutov <notifications@github.com> wrote:

…

No update on this, if there was any work in progress there would be a pull request linked to this issue Sent from my iPhone > On Oct 6, 2020, at 09:37, Tony Hernandez ***@***.***> wrote: > >  > @flotwig @bahmutov > Hi Zach and Gleb - Any update? > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub, or unsubscribe. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#8623 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACLAMCEL2YSG4VOTW4DVT23SJMOLLANCNFSM4RSOC2ZA> .

[flotwig]

This was actually a 2-part bug - the wrong Content-Type was getting assigned, /and/ the fixture body was getting incorrectly encoded to base64, which is why #8623 (comment) didn't work. Opened a PR to fix #8916

[cypress-bot]

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

[cypress-bot]

Released in 5.5.0.

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