How can we test the display of marker/ markers on Google map using Cypress.io?

Question

How can we test the display of marker/ markers on Google map using Cypress.io? I have no idea what method to use to find a marker displayed on Google map.

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

Answer 1

If markers are created with optimized: false option, then you can check if they are in DOM by just using cy.get(). That way you could check how many markers are displayed but it could be problematic if you would like to check if a particular marker is drawn as you have no controll over marker class.

There is dirty workaround for this problem - check for DOM element by icon url which is totally fine for one marker but dirty when having multiple markers with the same icon. Then you would need to add different get param for every marker icon url (like myicon.png?num=1). Have in mind that then, most probably your browser won't be able to download icon just once but multiple times. Another drawback is that optimized: false flag will make your map slow for big amount of markers.

If optimized: true was used, then markers are drawn on canvas (no markers in DOM) and you will need to do visual testing, which I recommend, using one of the cypress plugin https://docs.cypress.io/guides/tooling/visual-testing