赛普拉斯的模拟传单资源

Question

我需要测试一个传单地图(下载tile、css等(，但我无法用Cypress模拟tile下载。

当我的Cypress测试打开地图时，它会尝试下载如下URLhttps://tile.openstreetmap.se/hydda/base/6/31/22.png，https://basemaps.cartocdn.com/light_nolabels/6/31/22.png或https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/6/31/22.png如果我什么都不做，我的测试就会锁定在cy.visit上，因为还有一些资源等待下载我试图拦截这些网址，但最终却出现了传单错误。

Uncaught Error: Uncaught (in promise): TypeError: Cannot read property 'replace' of undefined
TypeError: Cannot read property 'replace' of undefined
at LeafletTilesFallbackDirective.getSampleImgURLFromTileTemplate (leaflet-tiles-fallback.directive.ts:95)

当我使用时

cy.fixture('images/tile.png').then( image => {
cy.intercept("https://tile.openstreetmap.se/hydda/base/6/31/22.png", image)
cy.intercept("https://basemaps.cartocdn.com/light_nolabels/6/31/22.png", image)
cy.intercept("https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/6/31/22.png", image)
})

我的CI奴隶无法访问互联网，所以我等不起"；真实的"；瓷砖需要下载，所以我需要嘲笑麦加主义，但不知道如何做到…

提前感谢

Answer 1

好吧，这只是我的错。我使用了新的拦截，但没有正确使用。

好的方法是为我做以下行

cy.intercept("https://*.openstreetmap.se/**/*.png", {fixture: "images/tile.png"})

Answer 2

我看到的一个问题是您的声明：

cy.fixture('images/tile.png').then( image => {
cy.intercept("https://tile.openstreetmap.se/hydda/base/6/31/22.png", image)
cy.intercept("https://basemaps.cartocdn.com/light_nolabels/6/31/22.png", image)
cy.intercept("https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/6/31/22.png", image)
})

每个截取仅截取一个特定瓦片的瓦片。你会想要使用一个更通用的路线匹配器来拦截所有的瓦片：

cy.fixture('images/tile.png').then( image => {
cy.intercept("https://tile.openstreetmap.se/hydda/base/*", image)
cy.intercept("https://basemaps.cartocdn.com/light_nolabels/*", image)
cy.intercept("https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/*", image)
})

因此，现在，当加载传单时，它会请求填充地图边界通常需要的16或20个瓦片，每个瓦片请求都会被捕获并返回该图像。这张地图看起来像garbarge，但这对你的柏树测试来说可能无关紧要。这里可能还有其他问题，但这是我看到的第一个问题。