如何使用Cypress.io测试Google地图上标记/标记的显示？

Question

我们如何使用Cypress.io测试Google地图上标记的显示？ 我不知道要使用哪种方法来查找在Google地图上显示的标记。

describe('Display of marker on Google map', function(){
  it.only('Check the display of marker on Google map', function(){
  cy.visit('https://www.google.co.nz/maps/@-36.9139788,174.8740846,15z?hl=en')
    cy.get('#searchboxinput').type('gold coast')
     //don't know how to select Gold Coast from the populated search items
    //How to find a marker displayed on Google Map ?
  })
})

- soccerway

Answer 1

如果使用optimized: false选项创建标记，则可以通过使用cy.get()来检查它们是否在DOM中。这样，您可以检查显示了多少标记，但如果您想要检查特定标记是否已绘制，则可能会出现问题，因为您无法控制标记类。

对于这个问题，有一个不靠谱的解决办法-通过图标URL检查DOM元素，这对于一个标记来说完全没问题，但是当有多个具有相同图标的标记时就会变得不靠谱。然后，您需要为每个标记图标URL添加不同的get参数（例如myicon.png?num=1）。 请注意，此时，您的浏览器很可能无法仅下载一次图标，而会多次下载。另一个缺点是标记数量较多时，optimized: false标记将使您的地图变慢。

如果使用了optimized: true，则标记将绘制在画布上（DOM中没有标记），并且您将需要进行视觉测试。我建议使用 Cypress 插件之一进行视觉测试 https://docs.cypress.io/guides/tooling/visual-testing。

- Tukkan