如何在任何网站上正确使用 PhantomJS？

Question

我正在尝试使用 PhantomJS 捕获网站，尤其是我使用的是 Pageres。

这个网站有：

• AngularJS
• 本地存储使用
• 对 API 的 AJAX 请求

所以，我在本地进行测试，但没有得到预期的结果，有时屏幕截图会出现错误 - 渲染 part 的内容，有时它不会渲染完整的内容。

网站完全加载后，Pagerer 似乎没有足够的时间来截取屏幕截图。我已经添加了延迟选项，但无论如何它都会失败，实际上我可以说它在没有延迟选项的情况下效果更好。

这就是应该被渲染的：

当它运行得最好时，我得到的就是这样：

这是我的渲染代码：

  var pageres = new Pageres({})
      .src('fantastica.a2015.mediotiempo.com', ['1440x900'], {delay: 3, crop: false});

  pageres.on('warn', function (err,obj) {console.log(err,obj)});
  pageres.run(function (err, screenshot) {
      screenshot[0].pipe(response);
  });

And, (I know there would be MUCH code to explain now) this is JS code being rendered.

有什么特别的建议吗？

Answer 1

• 请注意 Phantom 版本之间的差异。

Phantom 1.9.x（Pageres 正在使用）是几年前的浏览器引擎（Chrome 13 是最接近的等效版本），不会呈现许多 HTML5 功能。

Phantom 2.x 是一个更现代的 webkit 引擎。但是因为：a）因为他们还没有制作出现成的linux二进制文件； b) 一些小的 API 更改，CasperJS 和 Pageres 等项目正在阻止支持它。根据https://github.com/sindresorhus/pageres/issues/77 中的评论，如果您制作自己的二进制文件并对其进行符号链接，它就可以工作。

还要注意 SlimerJS 是 PhantomJS 的替代品，它基于 Firefox 而不是 WebKit。没有基于 Blink 的类似项目（获取现代 Chrome 如何呈现它们的屏幕截图），但有适用于 IE 的 TrifleJS。 （但是 Pageres 页面说支持其他引擎不是该项目的目标。）

• 等待 DOM 元素出现，而不是使用延迟。

Ajax 调用、延迟加载等使事情变得难以预测。因此，进入一个轮询循环，在您想要在屏幕截图中显示的 DOM 元素现在可见之前，不要截取您的屏幕截图。对于这种情况，CasperJS 有 waitForSelector()。 PhantomJS 有稍低级别的waitFor()。

我认为 pageres 需要进行一些修改才能添加此功能。