Selenium test case implementation for adding a location to a project

Manorama Perera

Follow

Jan 18, 2017 · 2 min read

In my previous post I’ve described how to draw a polygon on leaflet map using Leaflet JavaScript API.

But when it comes to actual test case implementation of adding a location to the Cadasta world map, what I described in that post didn’t work as expected. I’m still trying to figure out what is missing in that approach. What happened there was, though I was able to draw things on map with JavaScript API, when I click on the Save location button, the drawn items are not being detected as they are on the map.

So my next attempt was simulating the real user behavior for adding a location on the map. In this post I’m going to describe how I’ve achieved it.

When a user needs to add a location to a project he has to do the following steps:

1. Go to project page
2. Click on Add Location button. Then the map view will be loaded.
3. Click on one of the shapes from the pallete. (ie. marker, circle, polygon, etc.)
4. Click on the map to add the location.
5. When finishing adding locations on map, Select the location type from the drop down menu.
6. Click Save button.

In my new test case implementation I’ve simulated exactly the above steps using selenium. For that I had to use selenium.webdriver.common.action_chains.ActionChains
Here is the complete code I have written to add a marker on the map.

self.wd.find_element_by_xpath('//a[@class="leaflet-draw-draw-marker"]').click()
action = ActionChains(self.wd)
elem = self.wd.find_element_by_xpath('//div[@id="id_geometry_map"]')
action.move_to_element(elem).move_by_offset(5, 5).click().perform()
action.move_to_element(elem).move_by_offset(15, 5).click().perform()

self.wd.find_element_by_xpath('//select[@name="type"]').click()
self.wd.find_element_by_xpath('//option[@value="PA"]').click()
self.wd.find_element_by_xpath('//input[@value="Save"]').click()

The first line of the above code does clicking on the marker type from the pallete.
The third line does, moving to the map element using its div id.
The fourth line does, moving the cursor to the (10, 10) offset from the starting point of the map element and clicking on that location.
The rest of the lines does clicking on the drop downs/buttons.

But in order to implement this test case I had to do one major changes in my test setup. That is, I had to downgrade my firefox version to 46.
From firefox 48 we have to use geckodriver. But geckodriver doesn’t have implementation for ActionChains.move_to_element so gave errors.
So I had to downgrade firefox to a version which doesn’t need geckodriver.

But one advantage also came with this approach. That is I do not need to put the following setting in my Cadasta test setup.
LEAFLET_CONFIG[‘NO_GLOBALS’] = False
That is because the window.maps[0] object is no longer being accessed.

So here we done with adding a location on the map and saving it as a project location.

References :

[1] https://groups.google.com/forum/#!topic/webdriver/eVrfdcKFQ-E

[2] http://stackoverflow.com/questions/16807258/selenium-click-at-certain-position

[3] http://stackoverflow.com/questions/15510882/selenium-get-coordinates-or-dimensions-of-element-with-python

[4]