如何证明两个HTML页面看起来相同？

19

例如，我有这个：

<pre>
sun<br/>
&nbsp;&nbsp;&nbsp;&nbsp;mercury <br/>
&nbsp;&nbsp;&nbsp;&nbsp;venus <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;earth <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mars <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jupiter <br/>
&nbsp;&nbsp;&nbsp;&nbsp;saturn <br/>
</pre>
展开摘要

和这个：

<div style="font-family:monospace">
  <div style="text-indent: 0">sun</div> <br/>
  <div style="text-indent: 4ch">mercury</div> <br/>
  <div style="text-indent: 4ch">venus</div> <br/>
  <div style="text-indent: 8ch">earth</div> <br/>
  <div style="text-indent: 8ch">mars</div> <br/>
  <div style="text-indent: 12ch">jupiter</div> <br/>
  <div style="text-indent: 4ch">saturn</div> <br/>
</div>
展开摘要

我希望第二个看起来像第一个。

我相信这些外观相同，但我唯一的证明是使用了旧的“在Windows真正快速和眼球之间来回切换”技术。（天文学家称其为“眨眼比较器”-https: //en.wikipedia.org/wiki/Blink_comparator）。我确保窗户的大小相同，位置相同。但是，如果渲染的HTML无法在屏幕上显示，则可能太困难了。

有没有更确定的工具或方法可以进行此比较？

我在Chrome 77.0.3865.120和Firefox 69.0.3中都看到了这些。

例如，我知道使用最初是Web Standards Project的一部分的浏览器Acid测试-https: //www.acidtests.org/-像素完美渲染是基准。

（额外的功劳：第二个代码段的HTML可能足以满足我的需要；如果您愿意提出改进的建议，将是受欢迎的。）

编辑：我的问题比较了两个小的HTML示例，可以将它们呈现为适合浏览器的可见部分。但总的来说，我想知道HTML的答案可能很长。

html  css  acid3 
— 紫色外套
source
您使用的方法也是我最好的方法
— -Awais
4
您可以同时截取两者的屏幕截图，然后覆盖屏幕截图并更改顶部屏幕的透明度，以确保它们
— 对齐-APAD1
2
@ APAD1 —仍然在盯着他们。使用图像差异。
— 昆汀
1
基本上是封闭的复制品比较两个HTML源并显示视觉差异。另外，在互联网上搜索“两个html页面的视觉差异”会显示一长串产品和库...
— Heretic Monkey，
1
我相信Smart Bear的TestComplete可以完成此文档，但是这样做可能会超出成本。
— 格雷厄姆，

Answers:

8

在开发与CSS相关的webiste时，我做过类似的事情。我必须将HTML / CSS生成的输出与先前使用HTML / CSS生成的图像进行比较。

我使用了dom-to-image，它将代码转换为base64编码的图像。我将此图像放置在画布中，然后使用pixelmatch在两个图像之间进行比较。

这是一个示例说明：

显示代码段

在上面的代码中，我们有2个HTML块和2个画布，在其中绘制我们的块。如您所见，JS非常简单。最后的代码运行像素匹配，并显示两个画布有多少个不同的像素。我添加了一个延迟以确保两个图像都已加载（您可以稍后通过一些事件进行优化）

您还可以考虑使用第三个画布来突出显示两个图像之间的差异并获得视觉差异：

显示代码段

让我们更改内容以看到一些区别：

显示代码段

您可以阅读有关我使用的两个插件如何工作的更多信息，并找到更多有趣的选项。

我将尺寸固定为300x300，以便在代码段内轻松演示，但是您可以考虑使用更大的高度和宽度。

更新资料

这是一个比较实际的示例，可以在产生相同结果的两种布局之间进行比较。画布的宽度/高度将是动态的，并基于内容。我将仅显示具有差异的最后一个画布。

显示代码段

让我们使用不同的图像：

显示代码段

— Temani Afif
source
5

这实际上是对DOM进行一些测量的一种想法-我只是将有问题的文本替换为具有可查询类的div。然后，您可以打印所有节点的偏移量。

从我的角度来看，字符缩进的确与缩进相同&nbsp;。

var nodes = document.getElementsByClassName('measure');

for (var n of nodes) {
  console.log(n.offsetLeft);
}
.measure {
  display: inline-block;
  background: red;
  width: 50px;
  height: 5px;
}
<pre>
<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
</pre>
展开摘要

var nodes = document.getElementsByClassName('measure');

for (var n of nodes) {
  console.log(n.offsetLeft);
}
.measure {
  display: inline-block;
  background: red;
  width: 50px;
  height: 5px;
}
<div style="font-family:monospace">
  <div style="text-indent: 0"><div class="measure"></div></div> <br/>
  <div style="text-indent: 4ch"><div class="measure"></div></div> <br/>
  <div style="text-indent: 4ch"><div class="measure"></div></div> <br/>
  <div style="text-indent: 8ch"><div class="measure"></div></div> <br/>
  <div style="text-indent: 8ch"><div class="measure"></div></div> <br/>
  <div style="text-indent: 12ch"><div class="measure"></div></div> <br/>
  <div style="text-indent: 4ch"><div class="measure"></div></div> <br/>
</div>
展开摘要

— 罗伯托先生
source
“我只是用div替换了所有文本节点”不，您只替换了所看到的部分。所有字符也是TextNode的一部分。这很重要，因为这意味着您的解决方案无法以编程方式工作。&nbsp;
— 海伊多
3

打印两页的屏幕并比较像素。
您可以使用像selenium这样的网络驱动程序，在图像文件（png，jpg等）中渲染两个屏幕-selenium有这样做的方法-并编写了一个软件来读取两个像素以进行相似性比较。
网络驱动程序是可以使用代码控制的浏览器。您可以找到在网络上比较图像的软件。

您可以在此链接中找到更多信息：https : //selenium.dev/

— 吉尔赫姆
source
您如何比较像素？有自动化的方法吗？另外，如果HTML比我提供的示例长得多并且不适合屏幕显示该怎么办？
— Purplejacket
2

首先，我们必须捕获图像

捕获方法1

使用键盘上的“打印屏幕”按钮（或其他屏幕截图工具）。

对于较长或较宽以适合屏幕显示的页面，请为每个页面拍摄多个屏幕截图，然后在照片编辑器中将它们拼凑在一起。您可以拍摄大页面的重叠屏幕截图，将它们放置在单独的图层上，然后在合并图层以创建整个页面的合成之前，使用重叠的部分精确定位片段。

捕获方法2

您可以使用浏览器扩展程序（例如fireshot）一次捕获整个页面。

其次，我们比较图像

方法1

  1. 打开photoshop或去photopea。

  2. 将屏幕截图粘贴到图层中。

  3. 重复第二页，粘贴到另一个图层中。

  4. 切换图层可见性和任何更改都将显而易见。或调整顶层的不透明度（和/或设置不同的混合模式）进行比较。

方法2

使用浏览器扩展程序，例如pixel-perfect-2，该扩展程序允许在浏览器中覆盖半透明图像。这也是检查对齐和间距的有用扩展，因为您可以在浏览器中用网格图像覆盖页面。

方法3

使用图像差异工具。快速的Google搜索将发现太多内容无法在此处列出。有一些图像差异插件，用于一些代码编辑器，命令行工具，Python脚本和诸如diffchecker的在线服务。

— 韦内塞姆·泰拉斯（Veneseme Tyras）
source
2

您可以将以下文件放在同一文档中的另一个文件之上，位置为：absolute;。并可能放大以进行仔细查看。

#a, #b {
  position:absolute;
  left:0;
  top:0;
  margin:0;
  padding:0;
  color:green;
  opacity:0.5;
}
#a {
  color:red;
}
#b {
  color:green;
}
<pre id="a">
sun<br/>
&nbsp;&nbsp;&nbsp;&nbsp;mercury <br/>
&nbsp;&nbsp;&nbsp;&nbsp;venus <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;earth <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mars <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jupiter <br/>
&nbsp;&nbsp;&nbsp;&nbsp;saturn <br/>
</pre>
    <div style="font-family:monospace" id="b">
      <div style="text-indent: 0">sun</div> <br/>
      <div style="text-indent: 4ch">mercury</div> <br/>
      <div style="text-indent: 4ch">venus</div> <br/>
      <div style="text-indent: 8ch">earth</div> <br/>
      <div style="text-indent: 8ch">mars</div> <br/>
      <div style="text-indent: 12ch">jupiter</div> <br/>
      <div style="text-indent: 4ch">saturn</div> <br/>
    </div>
展开摘要

— 沃尔科夫
source
这是非常好的！我尝试了这个想法，但是由于<pre>标签的<body>边距方面有些怪异，我无法使它们对齐。您的样式#a, #b { ... }似乎使其正常工作。
— Purplejacket
2

使用iframe将两个页面彼此叠加。这应该使您可以看到两个页面之间的任何差异。

main.html：

<iframe src="doc1.html"></iframe>
<iframe src="doc2.html" style="opacity:0.5"></iframe>
<style>

html, body {
    margin:0;
    height:100%;
}
iframe {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
}

</style>

doc1.html：

<pre>
sun<br/>
&nbsp;&nbsp;&nbsp;&nbsp;mercury <br/>
&nbsp;&nbsp;&nbsp;&nbsp;venus <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;earth <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mars <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jupiter <br/>
&nbsp;&nbsp;&nbsp;&nbsp;saturn <br/>
</pre>

doc2.html

<div style="font-family:monospace">
  <div style="text-indent: 0">sun</div> <br/>
  <div style="text-indent: 4ch">mercury</div> <br/>
  <div style="text-indent: 4ch">venus</div> <br/>
  <div style="text-indent: 8ch">earth</div> <br/>
  <div style="text-indent: 8ch">mars</div> <br/>
  <div style="text-indent: 12ch">jupiter</div> <br/>
  <div style="text-indent: 4ch">saturn</div> <br/>
</div>

（我怀疑可以使用Stack Snippets来做到这一点。请随时告诉我）

— ecc521
source
1

这里有一些非常复杂和聪明的代码方法，所以这里是一个简单的方法，

拍摄一张截图，然后在支持透明性的图像编辑器（如photoshop，

粘贴它，然后以屏幕​​展示的CSS方式进行展示，并将其粘贴到第二个粘贴的图像中，使其不透明度为50％，然后看它们是否对齐。

— 巴克01
source
如果页面太长而无法显示在屏幕上怎么办？
— Purplejacket
如果您有photoshop或任何其他支持它的编辑器，请将最顶层的混合模式设置为“ different”。如果图像相同，您将看到纯黑色图像。
— steveax
是。HTML是一个字符串。只需使用cURL或其他方法来打印字符串，然后进行比较。这些都是一些经过精心设计的示例，在这里运行。
— Ususipse
@Purplejacket，erm将整个应用程序截图，Ctrl + Shift +打印屏幕，
— Barkermn01
1

到目前为止，几乎没有人提到实际的测试工具。

有很多针对您的用例的工具（通常是较大框架的一部分）：

仅举几例选自此列表。也许找自己，然后选择一种适合您的环境。

如果您想构建可持续的自动化系统，请不要依赖黑客。它可能只是“质量检查”，但可以在以后的版本中认真保存您的**。

— 尼尔斯K
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.