解决方法
在现代网页中,外观由各种“事物”控制:HTML代码,css样式和图像至少(在某些页面中也是javascript).简单的基于文本的差异编程是不够的,因为它们的输出可能与网页外观无关(即清理css可能会显示许多差异,但渲染的网页保持不变).
对于更简单的页面,上面提到的HTML Match可以完成这项工作.如果我必须比较两个“复杂”页面的设计(包括布局,空间,图像和文本更改),我会采取两步法:
>在html源上运行diff工具以突出显示文本内容差异.然后我会修改其中一个页面以显示与另一个页面相同的内容(为了使下一步更准确和’专注’以显示’真实’布局更改).当然它只适用于非常相似的html.
>在同一个Web浏览器中加载页面,从固定位置的渲染输出中获取一些屏幕截图并比较图像(即使用ImageMagick).它应该显示渲染输出中的所有视觉差异.
它不完美但应该有效.
[更新] HTML Match似乎已经死亡,请参阅this answer以获取替代解决方案.