赛普拉斯没有正确拦截传单地图图块调用

Question

我正在 cypress 中测试基于 react-leaflet 的应用程序。为了避免发出大量真实的 maptile 请求，我试图拦截对 mapbox maptile 服务器的调用，并用虚拟图块替换。我在我的 cypress/support.index.js 文件中这样做：

/**
 * 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",
    });
});

一个简单的测试：

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

我看了一下Mock leaflet resources in Cypress，这个战术似乎对这个人有效。当我运行测试时，我确实看到了 in beforeach 日志，所以我知道它是运行ning。但是，在我的测试中，我什至没有看到传单正在为获取网络请求列表中的图块而进行的调用。如您在左侧所见，我只看到 XHR 请求。但是当我打开 cypress 运行ner 的网络选项卡时，显然我们正在调用 tiles（专有的东西被掩盖）：

为什么 cypress 甚至不显示获取地图图块的调用？为什么电话没有被拦截，磁贴被替换为假人？

我正在使用 Cypress 9.5.2、运行ning Chrome 99、Leaflet 1.7.1 和 NexJS 10.2.0。

Answer 1

由于您使用的是 Next，应用程序是否会在页面加载之前获取服务器上的图块？

我知道有很多种switches/modes，但是你没有提到SSR所以看起来你应该考虑一下。

没有应用程序的详细信息，很难给你代码，但这里有一些代码

Cypress component testing intercept getServerSideProps requests
Mock Network When Using Next.js getServerSideProps Call

可能会有用。

Answer 2

我认为您可能正在从缓存中获取地图图块，至少这是我在我的项目中尝试拦截时发现的。

见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.

试试这个来禁用缓存

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

上面的那种方法奏效了，然后就不行了，我无法理解它。

作为替代方案，您可以按如下所示在 devtools 中轻按开关

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

cy.intercept("https://api.mapbox.com/**/*", {
  fixture: "images/tile.png",
})

赛普拉斯没有正确拦截传单地图图块调用

Cypress not properly intercepting leaflet map tile calls

javascript

end-to-end

leaflet

server-side-rendering

cypress