Aaron Snyder recently figured out a way to do some integration testing with Google Maps Markers. He shares it here. Thanks Aaron!
So you've got your badass custom Google Maps V3 markers rendered, and now you're trying to be a good dev and write up some Selenium tests when you realize that selecting and simulating a click is ridiculously hard.
Many of the solutions online recommend using a custom image asset for the pin you want to click and selecting based on that:
But what if we have a dynamic amount of pins and they all use the same asset? We don't want to solve a selector problem by introducing some head spinning asset creation.
So how do we do it?
First we'll go to our code that defines the new marker instance, it looks something like this:
createMarker: (business) -> new google.maps.Marker position: business.centerPoint() map: map
Next we're going to tell the marker to be non-optimized. This is going to cause the Google Map pins to be rendered as img tags inside of div tags as opposed to canvas elements. This is the first step in allowing us to programmatically select the Google Maps marker.
createMarker: (business) -> new google.maps.Marker position: business.centerPoint() map: map optimized: false
The next step is to uniquely identify which pin we want to click. The way we do this is through a title attribute:
createMarker: (business) -> new google.maps.Marker position: business.centerPoint() map: map title: business.get('name') optimized: false
Now selecting and programmatically clicking a specific marker is as easy as:
Selenium driver.findElement(By.cssSelector("div[title='Sam\'s Bistro']")).click()
jQuery \$("div[title='Sam\'s Bistro']").click()
If you want to use optimized maps, render the coffee/js serverside and check for an environment variable and only add optimized: false if it's development.
If you think that would make a good follow up post let us know in the comments below.
Also if solving problems like this interests you, we're hiring! Check out our jobs page.