为什么 Zombie.js 不能与 Google 图表一起使用？答案

【问题标题】：Why doesn't Zombie.js work with Google Charts?为什么 Zombie.js 不能与 Google 图表一起使用？
【发布时间】：2017-10-22 11:36:35
【问题描述】：

我有一个加载 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>

当我用浏览器点击它时它工作正常。在 Chrome 中，load() 调用请求一堆外部资源：

在Zombie 中，只请求了一个外部资源：

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

这是我的简单僵尸代码，供参考：

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

没有错误报告。我也尝试等待几秒钟，browser.wait()，以及实际加载图表的full web page。 Zombie 永远不会加载其他资源，自然也不会调用任何 Google Charts 回调。

为什么 Zombie 似乎无法使用 Google Charts API？

【问题讨论】：

您是否正在寻找一种能够使用 Zombie 测试 Google Charts 相关内容的解决方法？（我的建议：只要包含<script src="..."> 标记，只要它是非常可预测的浏览器加载的任何内容。或者看看旧的库加载器代码是否可以代替。）或者你真的在寻找“为什么它不起作用？”它是否可以帮助您使用带有 Zombie 的 Google Charts 工作？
我尝试了一些不同的方法，但没有任何效果。问题似乎在于 Google 使用 document.write 向页面添加脚本和 css 并且僵尸不适用于 document.write。目前我能想到的唯一解决方案是使用僵尸的替代品。

标签： node.js zombie.js

【解决方案1】：

您遇到此问题的一个可能原因是您可能没有正确创建等待图表呈现的回调/超时，但这只是猜测。

为了完成您想要做的事情，我强烈建议您改用PhantomJS。有几个 ZombieJS 和 Google Charts API 不能很好地配合使用的记录案例。

使用 PhantomJS，您可以使用图表创建一个 html 文件，以及使用您的代码创建一个 javascript 文件。最后，您将使用 PhantomJS 执行您的 javascript 文件：

phantomjs chart.js

有关如何使用 PhantomJS 执行此操作的更深入描述，请参见 here。

【讨论】：