Rails3 google maps with selenium

Question

I am trying to test a Google Maps application with Rails3. I use capybara and selenium cucumber to test JavaScript. I have a map where I wait for Google maps to load, and then send an ajax request to my server, where I get the locations that I insert into the map. I am wondering if it is possible, when selenium will wait for Google maps to load, the ajax call to my server will be completed and the marker will be placed inside the map. Another problem is how to select this marker on google maps. Are there any selectors?

Or I need to go the other way and use JS testing like Jasmine to test the loading of my classes, etc. I have no experience with Jasmine, so can I check Google maps?

Perhaps someone knows a solution or a hint if this is not possible, or a workaround or ...;)

[UPDATE 1]

I learned how to select markers on Google maps. If you look at the tests for searching googles selenium , you can check what they do. For example, selecting a marker:

waitForElementPresent xpath=//img[contains(@src,'marker')] 

But here is the next problem. How to choose a specific marker? Is there a way in the google javascript API to assign it an ID so that I can use #marker_1 , #marker_2 ...?

And one more strange thing is that functions like wait_for_element or wait_for_condition are not available inside my definitions of cucumber steps. Are selenium google tests native functions like waitForElementPresent ? Or are these standard selenium features? I found many posts where they always use something like

 selenium.wait_for_condition selenium.wait_for_element or @selenium.wait_for_condition ... 

Inside my step definitions are selenium and @selenium var a nil. How can I access these methods? I also found this post , but it has been since October 2008, so I think there should be a better solution (by the way. This solution works at a glance).

As on this page , they give an overview of several selenium methods, how to wait for a condition or element. Is it still present? How can I use these features?

[UPDATE 2]

Heck, I found out that the selenium tests mentioned above are for Google’s V2 maps, not V3. I tried it with

 wait_until { page.has_xpath?("//img[contains(@src,'marker')]") } 

But that will not work. The marker is displayed on the map, but I get a timeout error because it was not found with this XPath selector. I am wondering if it is even possible to select a marker from the DOM.

I also tried to assign an additional attribute to the marker when creating it:

 // marker is the marker returned by google maps after adding it to the map $(marker).attr('id', "marker_1"); 

But when I try to access it using the jQuery $("#marker_1") selector $("#marker_1") , it does not find it. So, there is no solution yet.

Answer 1

What I do with mine is to make calls in your step definitions like this:

page.execute_script ("launchmap ()")

then check their existence on the page. Then do the usual ajax check in capybara. will the marker be in the div to the right? then if you invoke a raster map and create markers, capybara MUST be able to find your markers

UPDATE

found out about this plugin: http://vigetlabs.github.com/jmapping/examples/

it gives you semantic markup for your google maps (for proper degradation), allowing you to check if a marker exists with capybara. hope this helps (you don't have time to check it out, but it looks promising)

Answer 2

To your first question - use waitForCondition with a script that checks for tokens.

 waitForCondition ( script,timeout ) Runs the specified JavaScript snippet repeatedly until it evaluates to "true". The snippet may have multiple lines, but only the result of the last line will be considered. Note that, by default, the snippet will be run in the runner test window, not in the window of your application. To get the window of your application, you can use the JavaScript snippet selenium.browserbot.getCurrentWindow(), and then run your JavaScript in there Arguments: script - the JavaScript snippet to run timeout - a timeout in milliseconds, after which this command will return with an error 

Answer 3

I found a way to integrate my Google map test with RSpec and Capybara. I wanted to write a test to claim that the content that I received from the internal JSON feed turned out to be markers and info windows on my map (Google Maps API V3) in the Rails 4 application.

Problem: Even when I ran the tests with Selenium Webdriver, which supports JS, I did not find a way to select tokens with Capybara to check their contents.

My solution: 1. I added a div tag with an identification number for my HTML markup 2. I wrote three helper methods in my JS that had access to my map markers and added the results to the test box. 3. In Capybara, I performed helper methods and expected to find the expected content or values ​​in the field.

The code:

HTML:

 <div id="map-canvas"></div> <div id="info-box"></div> 

JS helpers: in app / assets / javascripts / events.js

 // Test helper methods testInfo = function(){ document.getElementById("info-box").innerHTML = markers[0].title; }; testInfoCount = function(){ document.getElementById("info-box").innerHTML = markers.length; }; testInfoWindow = function(){ document.getElementById("info-box").innerHTML = markers[0].title + ", " + markers[0].time; }; 

"markers" in my code is an array that I click on each marker after adding it to the map. I can be sure that the content is actually on the map if it is in the marker array.

Test:

 spec/features/map_feature_spec.rb: require "rails_helper" describe "Map", js: true do let!(:john){create(:user)} let!(:event1){create(:event, user: john)} let!(:event2){create(:event)} it "shows a marker for a geocoded event on front page" do visit '/' find('#main-map-canvas') page.execute_script('testInfo()') expect(page.find("div#info-box").text).to eq(event1.title) end it "shows a marker for each geocoded event on front page" do visit '/' find('#main-map-canvas') page.execute_script('testInfoCount()') expect(page.find("div#info-box").text).to eq("2") end it "shows a marker for an event on event page" do visit "/events/#{event1.id}" expect(page).to have_css("#single-map-canvas") page.execute_script('testInfo()') expect(page.find("div#info-box").text).to eq(event1.title) end context "Tooltips" do let!(:event1){create(:event)} let!(:event2){create(:event)} it "shows title and date on frontpage" do visit "/" find('#main-map-canvas') page.execute_script('testInfoWindow()') expect(page.find("div#info-box")).to have_content("Pauls Birthday Party, #{event1.nice_date}") end end end 

• To run javascripts you need to install Selenium webdriver and Firefox ('gem "selenium-webdriver"' 'in your Gemfile)

• I am creating test content (albeit! ...) using Factory Girl.

• Running tests will allow you to see markers on the map, and their contents will appear in the test window.

Answer 4

Be sure to enable the capybara url to run the test server in the Google console for your application.

You can check this URL (and the error message when loading Google maps) by setting config.debug= true in the Capybara driver configuration download block.