Testing Google Map Markers with Capybara and Selenium in Rails

Question

I have a google maps page that searches an address and then shows markers that are within 100 miles. I am trying to test that my markers have a content window that pops up when clicked on using Capybara, Selenium, and Rails.

I am receiving an error saying "Selenium::WebDriver::Error::ElementNotInteractableError: Element could not be scrolled into view" Does anyone know how to fix this or a better way to test the pop up content window for google map markers? Scrolling doesn't work in Google Maps, so I am assuming that's why this is occurring.

  it 'enters in an address for IN Adjusters', js: true do
    visit '/maps'
    fill_in 'address', with: '4511 W 200 S'
    click_button('Search')
    sleep(5)
    element = find('map#gmimap0')
    element.click
    expect(page).to have_content("Burke Eric")
  end

Thomas Walpole · Accepted Answer · 2018-07-05T17:39:28.193

3

The issue here is that technically the map#gmimap0 element has a height of 0px so the drivers have an issue figuring out where to actually click. If you were using Chrome with selenium, and the map#gmimap0 element had a child with size (area element for instance) then you could do

find('map#gmimap0 area').click

and it would probably work, however I believe you're using Firefox with selenium which still won't work like that due to bugs in either geckodriver or firefox. Luckily there's a way that will work in either browser which is to specify to click with an offset. This causes selenium to not worry about element size and just clicks at a location on the page offset from the elements location.

find('map#gmimap0').click(x: 10, y: 10) # offset x an y within the size of the marker

edited Jul 05 '18 at 17:39

answered Jul 05 '18 at 17:25

Thomas Walpole

48,548
5
64
78

I did change the x and y to 11 each in case anyone else reads this. – chase dougherty Jul 05 '18 at 17:58
1

@chasedougherty `x` and `y` just need to be chosen to place the click within whatever size marker you're using. – Thomas Walpole Jul 05 '18 at 18:16

score 0 · Answer 2 · answered Jul 05 '18 at 14:07

0

You might try using Capybara's visible: false property when finding the map marker:

element = find('map#gmimap0', visible: false)

That should allow you to call the click method, as long as the element is available in the DOM.

Thanks!

answered Jul 05 '18 at 14:07

Jeremy

3,833
2
22
13

I thought that would work too! Unfortunately, I still receive the same error. I'm glad you mentioned it though because now I am thinking there might be a different issue. – chase dougherty Jul 05 '18 at 14:45
1

Ah, good point - it looks like there may be an issue interacting with canvas elements. One possible workaround is to render the map markers as images instead: https://stackoverflow.com/a/41132330/2076253 https://www.mojotech.com/blog/selecting-google-maps-v3-markers-with-selenium-or-jquery/ https://developers.google.com/maps/documentation/javascript/reference/3.exp/marker#MarkerOptions.optimized If that works, you might set the `optimized` flag to `false` for your test environment. – Jeremy Jul 05 '18 at 15:11
Specifying `visible: false` when testing an app is generally a terrible idea, and you can't click a non-visible element anyway. Also in this case the error is coming from the `click` call so it has already found the element and `visible: false` would do nothing. – Thomas Walpole Jul 05 '18 at 15:19

Testing Google Map Markers with Capybara and Selenium in Rails

2 Answers2