1

I am testing a react-leaflet based application in cypress. To avoid making tons of real maptile requests, I am trying to intercept calls to the mapbox maptile server, and replace with a dummy tile. I do this in my cypress/support.index.js file:

/**
 * Intercept all calls for mapbox tiles and replace with dummy tile
 */
beforeEach(() => {
    console.log("in beforeach");
    cy.intercept("https://api.mapbox.com/**/*", {
        fixture: "images/tile.png",
    });
});

A simple test:

describe("The map", () => {
    it("Tiles should be dummy tiles, not actual tiles", () => {
        cy.visit("http://localhost:3000");
    });
});

I took a look at Mock leaflet resources in Cypress, and this tactic seemed to work for this person. When I run a test, I do see the in beforeach log, so I know its running. However, in my test, I don't even see calls that leaflet is making to get tiles in the list of network requests. As you see on the left, I only see XHR requests. But when I open up the network tab of the cypress runner, clearly we are calling for the tiles (proprietary stuff covered up):

enter image description here

Why is cypress not even showing the calls being made to get map tiles? Why are the calls not being intercepted, and the tiles replaced with the dummy?

I'm usig Cypress 9.5.2, running Chrome 99, with Leaflet 1.7.1, and NexJS 10.2.0.

Seth Lutske
  • 9,154
  • 5
  • 29
  • 78
  • 1
    Note the status code: `200 OK (from memory cache)`. Your browser has cached the data from a previous request and is not making a new request. Use the "disable network cache" checkbox and try again. – IvanSanchez Mar 26 '22 at 00:15
  • Yessss....thank you. I thought that cypress clears the browser cache every time you run a spec file. Evidently not! Thank you sir – Seth Lutske Mar 26 '22 at 00:57

2 Answers2

2

I think you might be getting map tiles from cache, at least that's what I found trying out the intercept on my project.

See Cypress intercept problems - cached response

The server determines the data "cache key" in this case by looking at the if-none-match request header sent by the web application.

Try this to disable caching

cy.intercept('https://api.mapbox.com/**/*', req => {
  delete req.headers['if-none-match'];
  req.reply({
    fixture: 'images/tile.png'
  })
})

The above kind of worked and then it didn't, and I can't get my head around it.

As an alternative, you can flick the switch in devtools as follows

cy.wrap(Cypress.automation('remote:debugger:protocol', {
  command: 'Network.clearBrowserCache',
}))

cy.intercept("https://api.mapbox.com/**/*", {
  fixture: "images/tile.png",
})
Fody
  • 23,754
  • 3
  • 20
  • 37
  • Thank you. I thought that cypress clears the browser cache every time you run a spec file. Evidently not! Thank you sir – Seth Lutske Mar 26 '22 at 00:57
1

Since you are using Next, is the app fetching the tiles on the server before the page loads?

I know there's various switches/modes, but you made no mention of SSR so looks like you should consider that.

Without details of the app it's hard to give you code, but there's a bit of code here

that may be useful.

SuchAnIgnorantThingToDo-UKR
  • 3,170
  • 4
  • 16
  • Fair question. AFAIK, leaflet does not even run server-side. I'm using the tactic described in (Leaflet with next.js?)[https://stackoverflow.com/questions/57704196/leaflet-with-next-js] - the react-lealfet map component doesn't even mount until its on the client side. And leaflet does not make tile requests until the map is loaded in the browser. In the cypress UI, as I pan and zoom the map, more tiles are requested. So I don't think its an issue of SSR. Also, why are the tile requests not present in the cypress UI request list? Does cypress only allow intereption of api requests? – Seth Lutske Mar 25 '22 at 20:54
  • I'm not an expect in SSR, but my rough understanding is Next will try to complete as many api calls on the server before sending the page to the browser. No tiles on the Cypress UI request list also indicates server-side fetching, since Cypress proxies all browser-initiated api request you would see the tile fetches. – SuchAnIgnorantThingToDo-UKR Mar 25 '22 at 21:03
  • I'll take a look at LeCoda's repo and see if I can add some test code. – SuchAnIgnorantThingToDo-UKR Mar 25 '22 at 21:06
  • I really don't think SSR is the issue. To confirm, I tried running the cypress test against a different project that uses plain old browser-side rendering, with a vanilla leaflet map. Same issue - the map tiles are not being mocked with the fixture image, and not showing up in the cypress list of api calls. – Seth Lutske Mar 25 '22 at 21:15