cypress: Creating route alias using post processed fixture data (Blob) is not returning that data

Current behavior:

My Angular 5 app makes an HTTP GET request to a remote server which returns an image as a Blob. My existing Cypress specs using the remote server correctly verify the response data is received.

I’d like to stub out the call to the remote server and wrote this spec that loads a JPEG file from disk using a fixture (which returns a dataURI) and then I convert that to a Blob and supply it to cy.route (using the same route minimatch expression that is matched in my non-stubbed request).

in the cypress command log the XHR Stub is being hit and it is returning a Blob of size 2 of type application/json instead of my actual Blob. The cy.wait for the alias also prints Blob size2 application/json to the console.

Here’s my spec:

// spec
describe('Test using fixture to supply image as a Blob', function () {
  before(() => {
    cy.server();
    cy.fixture('images/map.jpeg').then(dataURI => {
      console.log(dataURI);
       return Cypress.Blob.base64StringToBlob(dataURI, "image/jpeg").then((blob) => {
        console.log(blob);
        return cy.route('https://images.mydomain.com/**', blob).as('imageXHR');
      })
    });
  })
  it('test that causes app to call '@imageXHR'), function() {
    ...
  })
});

The console.log statements print what you’d expect - the first is a long data URI and the second is a Blob {size: 41191, type: "image/jpeg"}.

screen shot 2018-06-14 at 9 03 38 pm

I’m not sure what syntax I have wrong or if there is a bug.

Desired behavior:

The post processed fixture data is supplied to the XHR request.

Steps to reproduce:

I’m happy to work on a reproduction if it would help!

Versions

Cypress 3.0.1, OSX

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 15 (3 by maintainers)

Most upvoted comments

On 5.3.0 I have the same identical issue of @peterpeterparker. But I rewrite to

return cy.route({
            url,
            method: 'GET',
            response: 'fx:image.png,binary', // where image.png my file in fixtures folder
            headers: {
                'content-type': 'application/octet-stream',
            },
        })

and now it’s working

Airatiki on Oct 19, 2020

I have the exact same problem, Cypress@3.1.1, no matter what I try, nothing other than using 'fx:data.json' as the last arg to cy.route() works.

Especially frustrating is this snippet logs my data, but the route always returns no response:

cy.fixture('data.json').as('data');
cy.get('@data').then(d => {
   // Logs data to the console
   console.log({ d });
   cy.route('GET', '/some/url/**', d);
});

Edit:

There seems to be some asynchronous race condition happening, I only have issues if my json data set is rather large. I pared it down to only a few items in an array, and it works normally.

Is there a method or something to make sure it waits until the json data is loaded?

matt328 on Nov 9, 2018

It even seems that this is solved with Cypress v6 and the use of intercept.

Following work as expected without workaround.

cy.intercept('/myroute', { fixture: 'a.pdf' }).then(() => {
        return cy.visit(
            'http://localhost:4200/'
        );
    });

peterpeterparker on Dec 1, 2020