I am using cartodb.js to import one of our maps via cartodb.createVis. I am working on adding custom functionality outside the scope of the web console's customizations (for example, custom search fields).

I want to write end-to end tests for cartodb's functionality. I want to select specific markers, trigger click events on them, and then expect DOM changes and map changes. I also want to be able to test for "markers" or map elements to appear or disappear

The problem is that I cannot use selectors to access individual markers or any of the functionality provided by the "visualization" outside of the search bar and layer selector. I have not been able to construct the appropriate CSS selectors, and selenium will not record click actions on map elements (except for double-clicks on map tiles, which cause a zoom, and aren't useful for me).

I can test for the existence of a tile by using a selector for its image. This doesn't work because:

a) any slight change to the visualization changes this link and breaks the test (I'm not sure the link is reliable even if we don't change the visualization)

b) I can't test for the existence of specific map elements (e.g., markers).

How can I write tests for our visualization?

Update: I tried using layer.trigger('featureClick' . . . as described here and here but that is failing silently. I'm not sure if it matters, but unlike that Gist I have multiple layers and my coordinates are not quite as precise.

I am also trying to trigger marker clicks using Selenium's clickAt method. For this I am using the example here I've tried: td>clickAt</td> <td>//div[@id='map']/div</td> <td>601, 230</td> This fails silently.

<td>clickAt</td> <td>//img[contains(@src,'http://3.ashbu.cartocdn.com/documentation/api/v1/map/c60783e45b3de44d88d22b74986b35f6:0/6/31/24.png')]</td> <td>601, 229 </td> Gives: TypeError: _d is undefined cartodb.uncompressed.js:14231

2 Answers 2


Basically you can't test markers selecting them using DOM selector because the markers are rendered in images in the server and then displayed in the browser.

The "right" way to test markers would be:

1 - load the map with the visualization

2 - get a png image from the DOM where src ends in "Z/X/Y.png" being Z,X and Y integers.

3 - check that the image match with a previously loaded one or checking some pixels in the image

4 - goto 2 until al the images are tested

For the interactivity it's easier:

1- load the map

2- click on a map position

3- check that featureClick was called

Take into account interactivity is lazy loaded so you might need to add some delay before the check

  • 2- click on a map position how would you reliably click on a map marker?
    – wovenhead
    Commented Jan 6, 2015 at 3:23
  • you should know lat,lng coordinates where a marker is, right? leaflet allows to know x,y for a lat, lng, see leafletjs.com/reference.html#map-latlngtocontainerpoint Commented Jan 6, 2015 at 9:46
  • How can I make use of the x, y values? See updated question.
    – wovenhead
    Commented Jan 6, 2015 at 16:18

I would like to recommend you this link . There, you can check how we do testing for CartoDB.js. So, you would find a lot of examples about visualizations tests.

If you run SpecRunner.html you could check all the test suite.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.