Why doesn't Zombie.js work with Google Charts?

Question

I have a simple web page that loads the Google Chart API:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    console.log("load() called");
</script>

It works fine when I hit it with my browser. In Chrome, the load() call requests a bunch of external resources:

In Zombie, only one external resource is requested:

zombie Opened window http://localhost/graph  +7s
zombie GET http://localhost/graph => 200 +17ms
zombie Loaded document http://localhost/graph +15ms
zombie GET https://www.gstatic.com/charts/loader.js => 200 +71ms
load() called
zombie Event loop is empty +135ms

Here is my simple Zombie code, for reference:

Browser.visit('http://localhost/graph', function (err, browser) {
    if (browser.errors.length > 0)
        return console.log(browser.statusCode, browser.errors);
});

No errors are reported. I have also tried waiting for several seconds, browser.wait(), as well as a full web page that actually loads a chart. Zombie never loads the other resources and, naturally, never calls any of the Google Charts callbacks.

Why does Zombie seem to be unable to use the Google Charts API?

Ichor

Are you looking for just a workaround to be able to test Google Charts related things with Zombie? (My suggestion: Just include <script src="..."> tags for whatever the browser loads if it's very predictable. Or see if the old library loader code works instead.) Or are you literally looking for "why doesn't it work?" whether it can help you work Google Charts w/ Zombie or not? – Simpkins

I tried a few different things and nothing worked for me. The problem seems to be with the fact that Google uses document.write to add scripts and css to the page and zombie doesn't work with document.write. At the moment the only solution I can think of is to use some alternative to zombie. – Etoile

Answer 1

One possible reason you are encountering this issue is that you may not have properly created callbacks/timeouts that are waiting for the charts to be rendered, though that is just a guess.

To accomplish what you are trying to do, I highly recommend using PhantomJS instead. There are several documented cases of issues with ZombieJS and the Google Charts API simply not playing well together.

With PhantomJS, you would make an html file with the chart as well as a javascript file with your code. Finally, you'd execute your javascript file with PhantomJS:

phantomjs chart.js

A more in-depth description of how to do this with PhantomJS can be found here.

Bedbug