比较两页的内容

Question

关于现有工具的问题。

背景： 我有一个系统，我们经常使用版本控制。为了比较版本，我们现在将信息转储为文本格式，然后使用彩色标记打印文本的两个版本。我看起来不太好，用户很难理解。

我想对此进行改进并实际显示两个版本的网页重新标记，然后使用某种css标记来显示两个页面之间存在差异的位置。我想象的是这种类型的问题是dom中有很多物体不会直接影响渲染，因此需要过滤掉差异才能生成。

问题： 是否有任何现有的工具可以让我比较页面的doms然后渲染应用某些视觉线索添加，更改或删除？它只需要在浏览器中运行。 它是一个可行的approch吗？

Answer 1

实现这一目标的一种方法是截取（自动）2 dom结构的屏幕截图并比较这些图像。这样你就不会保存/渲染dom。您甚至可以使用像节点这样的无头浏览器为您完成这项工作，使其快速，轻松地集成到您的自动化测试中。

有几种工具可以帮助您完成此操作，而不是从头开始编写自己的工具，例如resemble.js。 （但是如果您愿意，可以使用phantomjs和casperjs使用他们的api自己编写。

这些工具可让您突出显示两个图像

的差异

还有一篇好文章here on automated-screenshot-diff，它是另一个节点包，可以比较dom渲染的两个屏幕截图。