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>

Развернуть фрагмент

И я хочу, чтобы второй выглядел точно так же, как первый.

Я считаю, что они выглядят одинаково, но мое единственное доказательство было в том, чтобы использовать старую технику «переключаться между окнами очень быстро и быстро». (Астрономы называют это «компаратором мерцания» - https://en.wikipedia.org/wiki/Blink_comparator ). Я удостоверился, что окна были того же самого размера и в том же самом положении. Но если визуализированный HTML не помещался на экране, это могло бы быть слишком сложно.

Есть ли более точный инструмент или метод для этого сравнения?

Я смотрел на них как в Chrome 77.0.3865.120, так и в Firefox 69.0.3.

Например, я знаю, что с помощью тестов Acid в браузере, которые изначально были частью проекта веб-стандартов - https://www.acidtests.org/ - идеальным показателем был пиксельный рендеринг.

(Дополнительные сведения: HTML-код для второго фрагмента кода, вероятно, соответствует моим потребностям; если вы хотите предложить улучшения, это будет приветствоваться.)

РЕДАКТИРОВАТЬ : Мой вопрос сравнивает два небольших образца HTML, которые могут быть отображены в видимой части браузера. Но в целом я хотел бы знать ответ для HTML, который может быть довольно длинным.

html css acid3 Purplejacket
источник

Подход вы используете лучше для меня , как хорошо

Awais

4

Вы можете сделать снимок обоих снимков, а затем наложить снимки экрана и изменить непрозрачность верхнего

слоя,

2

@ APAD1 - Это все еще радует их. Используйте изображение различий.

Квентин

1

В основном, обманчиво закрытое слишком широкое Сравнение двух источников HTML и отображение визуальных различий . Кроме того, поиск в Интернете «визуального различия двух html-страниц» приводит к появлению длинного списка продуктов и библиотек ...

Еретик Обезьяна

1

Я полагаю, что TestComplete от Smart Bear может сделать эту документацию , однако это может оказаться слишком дорогостоящим.

Грэм

8

Я сделал нечто подобное при разработке веб-сайта, связанного с CSS . Мне пришлось сравнить вывод, созданный HTML / CSS, с изображением, которое ранее было сгенерировано с помощью HTML / CSS.

Я использовал dom-to-image , который преобразует код в изображение в кодировке base64. Я помещаю это изображение внутрь холста, а затем использую pixelmatch для сравнения обоих изображений.

Вот пример для иллюстрации:

Показать фрагмент кода

var node1 = document.querySelector("pre");
var node2 = document.querySelector(".div");
var canvas1 = document.querySelector(".first");
var canvas2 = document.querySelector(".second");
var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");
/* Change both code to Image and put inside Canvas */
domtoimage.toPng(node1)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx1.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

domtoimage.toPng(node2)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx2.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

/* Run the pixel matching*/
setTimeout(function() {
  var im_r = ctx1.getImageData(0, 0, 300, 300).data;
  var im_o = ctx2.getImageData(0, 0, 300, 300).data;
  var pixDiff = pixelmatch(im_r, im_o, false, 280, 280, {
    threshold: 0.1
  });
  console.log(pixDiff);
}, 3000);

canvas {
  border: 1px solid;
}

pre,
.div {
  border: 2px solid red;
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  margin: 0;
}

<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/dom-to-image.js"></script>
<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/pixel.js"></script>
<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 class="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>

<canvas width="300" height="300" class="first"></canvas>
<canvas width="300" height="300" class="second"></canvas>

Развернуть фрагмент

В приведенном выше коде у нас есть 2 блока HTML и 2 полотна, где мы будем рисовать наши блоки. Как видите, JS довольно прост. Код в конце запускает сопоставление пикселей и показывает, сколько разных пикселей имеют оба полотна. Я добавил задержку, чтобы убедиться, что оба изображения загружены (вы можете оптимизировать позже с некоторыми событиями)

Вы также можете рассмотреть третий холст, чтобы подчеркнуть разницу между обоими изображениями и получить визуальную разницу:

Показать фрагмент кода

var node1 = document.querySelector("pre");
var node2 = document.querySelector(".div");
var canvas1 = document.querySelector(".first");
var canvas2 = document.querySelector(".second");
var canvas3 = document.querySelector(".result");
var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");
var ctx3 = canvas3.getContext("2d");
/* Change both code to Image and put inside Canvas */
domtoimage.toPng(node1)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx1.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

domtoimage.toPng(node2)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx2.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

/* Run the pixel matching*/
setTimeout(function() {
  var im_r = ctx1.getImageData(0, 0, 300, 300).data;
  var im_o = ctx2.getImageData(0, 0, 300, 300).data;
  var diff = ctx3.createImageData(300, 300);
  var pixDiff = pixelmatch(im_r, im_o, diff.data, 300, 300, {
    threshold: 0.1
  });
  ctx3.putImageData(diff, 0, 0);
  console.log(pixDiff);
}, 3000);

canvas {
  border: 1px solid;
}

pre,
.div {
  border: 2px solid red;
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  margin: 0;
}

<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/dom-to-image.js"></script>
<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/pixel.js"></script>
<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 class="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>

<canvas width="300" height="300" class="first"></canvas>
<canvas width="300" height="300" class="second"></canvas>
<canvas width="300" height="300" class="result"></canvas>

Развернуть фрагмент

Давайте изменим содержимое, чтобы увидеть разницу:

Показать фрагмент кода

var node1 = document.querySelector("pre");
var node2 = document.querySelector(".div");
var canvas1 = document.querySelector(".first");
var canvas2 = document.querySelector(".second");
var canvas3 = document.querySelector(".result");
var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");
var ctx3 = canvas3.getContext("2d");
/* Change both code to Image and put inside Canvas */
domtoimage.toPng(node1)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx1.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

domtoimage.toPng(node2)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx2.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

/* Run the pixel matching*/
setTimeout(function() {
  var im_r = ctx1.getImageData(0, 0, 300, 300).data;
  var im_o = ctx2.getImageData(0, 0, 300, 300).data;
  var diff = ctx3.createImageData(300, 300);
  var pixDiff = pixelmatch(im_r, im_o, diff.data, 300, 300, {
    threshold: 0.1
  });
  ctx3.putImageData(diff, 0, 0);
  console.log(pixDiff);
}, 3000);

canvas {
  border: 1px solid;
}

pre,
.div {
  border: 2px solid red;
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  margin: 0;
}

<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/dom-to-image.js"></script>
<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/pixel.js"></script>
<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 class="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">april</div> <br/>
  <div style="text-indent: 12ch">jupiter</div> <br/>
  <div style="text-indent: 4ch">saturn</div> <br/>
</div>

<canvas width="300" height="300" class="first"></canvas>
<canvas width="300" height="300" class="second"></canvas>
<canvas width="300" height="300" class="result"></canvas>

Развернуть фрагмент

Вы можете прочитать больше о том, как работают два плагина, которые я использовал, и найти более интересные варианты.

_{Я устанавливаю размеры в 300x300, чтобы сделать демонстрацию внутри фрагмента легкой, но вы можете рассмотреть большую высоту и ширину.}

Обновить

Вот более реалистичный пример для сравнения двух макетов, которые дают одинаковый результат. Ширина / высота холста будет динамичной и зависит от содержимого. Я покажу только последний холст с разницей.

Показать фрагмент кода

var node1 = document.querySelector(".flex");
var node2 = document.querySelector(".grid");
var canvas1 = document.querySelector(".first");
var canvas2 = document.querySelector(".second");
var canvas3 = document.querySelector(".result");
canvas1.height= node1.offsetHeight;
canvas2.height= node2.offsetHeight;
canvas3.height= node1.offsetHeight;
canvas1.width= node1.offsetWidth;
canvas2.width= node2.offsetWidth;
canvas3.width= node1.offsetWidth;
var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");
var ctx3 = canvas3.getContext("2d");

domtoimage.toPng(node1)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx1.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

domtoimage.toPng(node2)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx2.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })


setTimeout(function() {
  var im_r = ctx1.getImageData(0, 0, canvas1.width, canvas1.height).data;
  var im_o = ctx2.getImageData(0, 0, canvas1.width, canvas1.height).data;
  var diff = ctx3.createImageData(canvas1.width, canvas1.height);
  var pixDiff = pixelmatch(im_r, im_o, diff.data, canvas1.width, canvas1.height, {
    threshold: 0.2
  });
  ctx3.putImageData(diff, 0, 0);
  console.log(pixDiff);
}, 3000);

.grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:2px solid red;
}
h1 {
  text-align:center;
  grid-column:1/-1;
  flex-basis:100%;
}

.flex {
  display:flex;
  flex-wrap:wrap;
  border:2px solid red;
}
.flex > div {
  flex-grow:1;
  flex-basis:0;
}

<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/dom-to-image.js"></script>
<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/pixel.js"></script>
<div class="grid">
<h1>A title here</h1>
<div>
<img src="https://picsum.photos/id/10/200/200" >
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam condimentum mollis. Phasellus faucibus diam quis lorem efficitur, id egestas neque malesuada</div>
<div> Maecenas sollicitudin lacinia finibus. Integer vel varius eros. Morbi et ante eget est mollis sollicitudin.</div>
</div>
<div class="flex">
<h1>A title here</h1>
<div>
<img src="https://picsum.photos/id/10/200/200" >
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam condimentum mollis. Phasellus faucibus diam quis lorem efficitur, id egestas neque malesuada</div>
<div> Maecenas sollicitudin lacinia finibus. Integer vel varius eros. Morbi et ante eget est mollis sollicitudin.</div>
</div>

<canvas width="300" height="300" class="first" style="display:none;"></canvas>
<canvas width="300" height="300" class="second" style="display:none;"></canvas>
<canvas width="300" height="300" class="result"></canvas>

Развернуть фрагмент

Давайте использовать другое изображение:

Показать фрагмент кода

var node1 = document.querySelector(".flex");
var node2 = document.querySelector(".grid");
var canvas1 = document.querySelector(".first");
var canvas2 = document.querySelector(".second");
var canvas3 = document.querySelector(".result");
canvas1.height= node1.offsetHeight;
canvas2.height= node2.offsetHeight;
canvas3.height= node1.offsetHeight;
canvas1.width= node1.offsetWidth;
canvas2.width= node2.offsetWidth;
canvas3.width= node1.offsetWidth;
var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");
var ctx3 = canvas3.getContext("2d");

domtoimage.toPng(node1)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx1.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

domtoimage.toPng(node2)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx2.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })


setTimeout(function() {
  var im_r = ctx1.getImageData(0, 0, canvas1.width, canvas1.height).data;
  var im_o = ctx2.getImageData(0, 0, canvas1.width, canvas1.height).data;
  var diff = ctx3.createImageData(canvas1.width, canvas1.height);
  var pixDiff = pixelmatch(im_r, im_o, diff.data, canvas1.width, canvas1.height, {
    threshold: 0.2
  });
  ctx3.putImageData(diff, 0, 0);
  console.log(pixDiff);
}, 3000);

.grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:2px solid red;
}
h1 {
  text-align:center;
  grid-column:1/-1;
  flex-basis:100%;
}

.flex {
  display:flex;
  flex-wrap:wrap;
  border:2px solid red;
}
.flex > div {
  flex-grow:1;
  flex-basis:0;
}

<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/dom-to-image.js"></script>
<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/pixel.js"></script>
<div class="grid">
<h1>A title here</h1>
<div>
<img src="https://picsum.photos/id/10/200/200" >
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam condimentum mollis. Phasellus faucibus diam quis lorem efficitur, id egestas neque malesuada</div>
<div> Maecenas sollicitudin lacinia finibus. Integer vel varius eros. Morbi et ante eget est mollis sollicitudin.</div>
</div>
<div class="flex">
<h1>A title here</h1>
<div>
<img src="https://picsum.photos/id/12/200/200" >
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam condimentum mollis. Phasellus faucibus diam quis lorem efficitur, id egestas neque malesuada</div>
<div> Maecenas sollicitudin lacinia finibus. Integer vel varius eros. Morbi et ante eget est mollis sollicitudin.</div>
</div>

<canvas width="300" height="300" class="first" style="display:none;"></canvas>
<canvas width="300" height="300" class="second" style="display:none;"></canvas>
<canvas width="300" height="300" class="result"></canvas>

Развернуть фрагмент

Темани Афиф
источник

5

Вот идея на самом деле сделать некоторые измерения с DOM - я просто заменил рассматриваемый текст на div, у которых есть класс, к которому можно обращаться. Затем вы можете распечатать смещение всех узлов.

Из того, что я измеряю, отступы символа действительно такие же, как  .

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>

Развернуть фрагмент

MrRobboto
источник

«Я просто заменил все текстовые узлы на div». Нет, вы заменили только те части , которые видели . Все  символы также являются частью TextNodes. Это важно, потому что это означает, что ваше решение не может работать программно.

Кайидо

3

Распечатайте экраны двух страниц и сравните пиксели.
Вы можете использовать веб-драйвер, такой как селен, визуализировать два экрана в файле изображения (png, jpg и т. Д.) - для этого у селена есть метод - и написать программное обеспечение для считывания пикселей обоих для сравнения на сходство.
Веб-драйвер - это браузер, которым вы можете управлять с помощью кода. И вы можете найти программное обеспечение, которое сравнивает изображения в Интернете.

Вы можете найти больше информации по этой ссылке: https://selenium.dev/

Гильерме
источник

Как вы сравниваете пиксели? Есть ли автоматизированный способ сделать это? Кроме того, что если HTML-код был намного длиннее, чем приведенный мной пример, и не помещался на экране?

Purplejacket

2

Сначала мы должны сделать снимки

Метод захвата 1

Используйте кнопку экрана печати на клавиатуре (или другой инструмент для создания снимков экрана).

Для страниц, которые должны быть длинными или широкими, чтобы уместиться на экране, сделайте несколько скриншотов каждой страницы и соедините их вместе в вашем фоторедакторе. Вы можете делать перекрывающиеся снимки экрана большой страницы, размещать их на отдельных слоях, а затем использовать перекрывающиеся части, чтобы точно расположить части перед объединением слоев, чтобы создать составную часть всей страницы.

Метод захвата 2

Вы можете использовать расширение браузера, такое как fireshot, чтобы захватить всю страницу сразу.

Во-вторых, мы сравниваем изображения

Способ 1

Откройте фотошоп или зайдите в фотопеи .
Вставьте скриншот в слой.
Повторите для второй страницы, вставив в другой слой.
Переключите видимость слоя, и любые изменения будут очевидны. Или отрегулируйте непрозрачность верхнего слоя (и / или установите различные режимы наложения) для сравнения.

Способ 2

Используйте расширение для браузера, например pixel-perfect-2 которое позволяет накладывать полупрозрачные изображения в вашем браузере. Это полезное расширение для проверки выравнивания и интервала, поскольку вы можете наложить страницы на сетку в вашем браузере.

Способ 3

Используйте инструмент сравнения изображений. Быстрый поиск в Google покажет слишком много, чтобы перечислить здесь. Для некоторых редакторов кода, инструментов командной строки, скриптов Python и онлайн-сервисов, таких как diffchecker, существуют плагины diff для изображений .

Veneseme Tyras
источник

2

Вы можете поместить один над другим в том же документе с позиции: абсолютный; И, возможно, увеличить для более близкого взгляда.

#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>

Развернуть фрагмент

В. Волков
источник

Это очень мило! Я попробовал эту идею, но из-за странных аспектов <pre>тега в отношении <body>полей я не смог заставить их выровнять. Ваши стили, #a, #b { ... }кажется, заставляют это работать должным образом.

Purplejacket

2

Наложите две страницы друг на друга с помощью фреймов. Это должно позволить вам увидеть любые различия между двумя страницами.

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>

(Я подозреваю, что есть способ сделать это с помощью фрагментов стека. Не стесняйтесь просветить меня)

ecc521
источник

1

Здесь есть несколько действительно сложных и умных методов кода, поэтому вот простой,

Сделайте скриншот одного из них, откройте его в графическом редакторе, поддерживающем прозрачность

Вставьте его, затем возьмите скрин-шоу с вашим CSS-способом и вставьте его, установите для второго вставленного изображения непрозрачность 50% и посмотрите, совпадают ли они.

Barkermn01
источник

Что если страница слишком длинная, чтобы уместиться на экране?

Purplejacket

Если у вас есть фотошоп или любой другой редактор, который его поддерживает, установите режим наложения на верхнем слое на разницу. Если изображения идентичны, вы увидите сплошное черное изображение.

Steveax

Да. HTML это одна строка. Просто используйте cURL или другой метод, чтобы напечатать строку, а затем сравните ее. Вот несколько более сложных примеров, бегущих здесь.

Ususipse

@Purplejacket, erm Скриншот приложения в целом, Ctrl + Shift + Print Screen,

Barkermn01

1

Как я уже видел, мало кто упоминает о реальных инструментах тестирования.

Существует множество инструментов для вашего сценария использования (часто это часть больших фреймворков):

Чтобы назвать несколько взятых из этого списка. Может быть, посмотрите на себя и выберите тот, который подходит вашей среде.

Если вы хотите создать устойчивую автоматизацию, не полагайтесь на хаки. Это может быть «только» QA, но может серьезно сохранить ваш ** в будущих версиях.

Нильс К
источник

Как я могу доказать, что две HTML-страницы выглядят одинаково?

Ответы:

Сначала мы должны сделать снимки

Метод захвата 1

Метод захвата 2

Во-вторых, мы сравниваем изображения

Способ 1

Способ 2

Способ 3