Menu
I'm having a problem with zombie.js testing framework and the Google Maps API.
I have a simple zombie.js that loads a home page and tries to click a Sign In link. However, when I look at what comes back for the home page HTML (from the perspective of the zombie.js browser object), I see only this in the body section:
<body>
<script src="https://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/12/main.js" type="text/javascript"></script>
</body>
If I remove the Google Maps javascript from the original page, everything works fine and I get the full section. Requesting a different page that doesn't use maps API also works fine.
I see a related question here, but the workaround isn't fully described: https://github.com/assaf/zombie/issues/250
Can anyone help me with the full workaround to this?
Here is the zombie.js code in question:
suite('Zombie Sign In', function() {
test('Home page should have sign-in link', function(done) {
var browser = new Browser();
browser.debug = true;
browser.authenticate().basic(conf.basicAuth.username, conf.basicAuth.password);
browser.visit(conf.baseURL, function(e, browser) {
console.log(browser.html()); // here is where I get the empty body section
browser.clickLink("Sign In", function() {
browser.text("title").should.eql('my title');
done();
});
});
});
});
468
I ran into this issue today - you just need to load the API asynchronously. This isn't so much a workaround as a documented alternative, which you can read up on here:
https://developers.google.com/maps/documentation/javascript/tutorial#asynch
Essentially you just need to change any code like this:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(/* ... */);
}
window.onload = initialize();
</script>
To this (lifted almost entirely from the link above):
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(/* ... */);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
The key thing to note here is that you have to pass a callback parameter to the script.src tag (in this example we provide initialize, but it can be whatever you want) - this will let google fire your initialisation code when the dynamically injected maps script tag has finished loading.
This second mechanism fixes my Zombie tests.
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
