开发者问题收集

Cypress 中的模拟传单资源

2021-06-24
576
mocking leaflet cypress

我需要测试一张传单地图（可以下载图块、CSS 等），但我无法用 Cypress 模拟图块下载。

当我的 Cypress 测试打开地图时，它会尝试下载类似 https://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 从属设备无法访问互联网，因此我无法等待“真实”图块下载，因此我需要模拟机制，但不知道如何做它....

提前致谢

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)
    })

因此，现在当 leaflet 加载时，它会请求通常需要填充地图边界的 16 或 20 个图块，每个图块请求都将被捕获并与该图像一起返回。地图看起来像垃圾，但这对您的 Cypress 测试可能无关紧要。这里可能还有其他问题，但这是我看到的第一个问题。

Seth Lutske
2021-06-24

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

好的方法是为我执行以下行 

cy.intercept("https://*.openstreetmap.se/**/*.png", {fixture: "images/tile.png"})
Bluepioupiou
2021-06-25