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 모두에서 이것들을 보았습니다.

예를 들어 원래 웹 표준 프로젝트의 일부인 브라우저 산성 테스트 ( https://www.acidtests.org/)에서 픽셀 퍼펙트 렌더링이 벤치 마크 라는 것을 알고 있습니다.

(추가 크레딧 : 두 번째 코드 스 니펫의 HTML이 아마도 내 요구에 적합 할 것입니다. 개선을 제안하려는 경우 환영받을 것입니다.)

편집 : 내 질문은 브라우저의 보이는 부분에 맞게 렌더링 할 수있는 두 개의 작은 HTML 샘플을 비교합니다. 그러나 일반적으로 꽤 긴 HTML에 대한 답변을 알고 싶습니다.

html css acid3

— 퍼플 재킷
소스

당신이 사용했던 접근 방식도 나에게 가장 좋습니다

— Awais

4

두 스크린 샷을

— 찍은

2

@ APAD1 — 여전히 눈길을 끈다. 이미지 차이를 사용하십시오.

— Quentin

1

기본적으로 폐쇄 형의 속임수 두 개의 HTML 소스를 비교하고 시각적 차이를 표시 합니다. 또한, "두 개의 html 페이지의 시각적 차이"의 인터넷 검색을 수행하면 많은 제품 및 라이브러리 목록이 나타납니다.

— Heretic Monkey

1

Smart Bear의 TestComplete가이 문서를 작성할 수 있다고 생각 하지만 비용이 많이들 수 있습니다.

— Graham

8

CSS 관련 웹리스트를 개발할 때 비슷한 작업을 수행했습니다 . HTML / CSS에서 생성 된 출력을 이전에 HTML / CSS로 생성 된 이미지와 비교해야했습니다.

코드를 base64로 인코딩 된 이미지로 변환 하는 dom-to-image를 사용했습니다 . 이 이미지를 캔버스 안에 넣은 다음 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>

스 니펫 확장

— 테마 니 Afif
소스

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의 모든 텍스트 노드를 교체"아니, 당신은 교체 된 부품 은 한 보고를 . 모든  문자는 TextNode의 일부입니다. 이는 솔루션이 프로그래밍 방식으로 작동 할 수 없기 때문에 중요합니다.

— Kaiido

3

두 페이지의 화면을 인쇄하고 픽셀을 비교하십시오.
셀레늄과 같은 웹 드라이버를 사용하고 이미지 파일 (png, jpg 등)로 두 화면을 렌더링 할 수 있습니다-셀레늄에는이 작업을 수행하는 방법이 있으며 유사성을 비교하기 위해 두 픽셀을 읽는 소프트웨어를 작성하십시오.
웹 드라이버는 코드로 제어 할 수있는 브라우저입니다. 웹에서 이미지를 비교하는 소프트웨어를 찾을 수 있습니다.

이 링크에서 자세한 정보를 찾을 수 있습니다 : https://selenium.dev/

— 길 레르 메
소스

픽셀을 어떻게 비교합니까? 이를 수행하는 자동화 된 방법이 있습니까? 또한 HTML이 내가 보여준 예보다 훨씬 길고 화면에 맞지 않으면 어떻게 될까요?

— Purplejacket

2

먼저 이미지를 캡처해야합니다

캡처 방법 1

키보드 (또는 다른 스크린 샷 도구)의 인쇄 화면 버튼을 사용하십시오.

화면에 맞도록 길거나 넓은 페이지의 경우 각 페이지의 여러 스크린 샷을 찍어 사진 편집기에서 하나로 묶습니다. 큰 페이지의 겹치는 스크린 샷을 만들어 별도의 레이어에 놓은 다음 겹치는 부분을 사용하여 레이어를 병합하기 전에 조각을 정확하게 배치하여 전체 페이지의 합성물을 만들 수 있습니다.

캡처 방법 2

fireshot 과 같은 브라우저 확장 프로그램을 사용 하여 전체 페이지를 한 번에 캡처 할 수 있습니다 .

두 번째로 이미지를 비교합니다

방법 1

Photoshop을 열거 나 photopea 로 이동 하십시오 .
스크린 샷을 레이어에 붙여 넣습니다.
다른 레이어에 붙여 넣어 두 번째 페이지를 반복하십시오.
레이어 가시성을 토글하면 모든 변경 사항이 분명합니다. 또는 최상위 레이어의 불투명도를 조정하거나 다른 블렌드 모드를 설정하여 비교하십시오.

방법 2

pixel-perfect-2 와 같은 브라우저 확장 프로그램을 사용하십시오. 내에서 반투명 이미지를 오버레이 할 수있는 . 브라우저 내에서 그리드 이미지로 페이지를 오버레이 할 수 있기 때문에 정렬 및 간격을 확인하는 데 유용한 확장입니다.

방법 3

이미지 diff 도구를 사용하십시오. 빠른 Google 검색은 여기에 나열하기에는 너무 많이 나타납니다. 일부 코드 편집기, 명령 줄 도구, Python 스크립트 및 diffchecker 와 같은 온라인 서비스를위한 이미지 diff 플러그인이 있습니다 .

— Veneseme Tyras
소스

2

같은 문서에서 position : 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>

스 니펫 확장

— 볼코프
소스

아주 좋습니다! 이 아이디어를 시도했지만 여백 <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>

(스택 스 니펫을 사용 하여이 작업을 수행 할 수있는 방법이 있다고 생각합니다. 자유롭게 가르쳐주십시오)

— ecc521
소스

1

여기에는 정말 복잡하고 영리한 코드 메서드가 있으므로 여기 간단한 방법이 있습니다.

하나의 스크린 샷을 만들어 투명도를 지원하는 이미지 편집기에서 엽니 다.

붙여 넣은 다음 CSS 방식으로 화면을 표시하고 붙여 넣은 두 번째 이미지를 50 %의 불투명도로 설정하여 붙여 넣습니다.

— 바 케른
소스

페이지가 너무 길어서 화면에 맞지 않으면 어떻게됩니까?

— Purplejacket

Photoshop 또는이를 지원하는 다른 편집기가있는 경우 최상위 레이어의 블렌드 모드를 차이로 설정하십시오. 이미지가 동일하면 검은 색 이미지가 나타납니다.

— steveax

예. HTML은 하나의 문자열입니다. cURL 또는 다른 방법을 사용하여 문자열을 인쇄 한 다음 비교하십시오. 이것들은 여기에서 실행 된 과장된 예제입니다.

— Ususipse

@Purplejacket, erm 전체 앱으로 스크린 샷, Ctrl + Shift + 인쇄 화면

— Barkermn01

1

지금까지 본 것처럼 실제 테스트 도구를 언급하는 사람은 거의 없습니다.

사용 사례를위한 많은 도구가 있습니다 (종종 더 큰 프레임 워크의 일부).

이 목록 에서 가져온 몇 가지 이름을 지정 합니다. 자신을 찾아서 환경에 맞는 것을 선택하십시오.

지속 가능한 자동화를 구축하려면 해킹에 의존하지 마십시오. 품질 보증은 '단지'일 수 있지만 향후 릴리스에서 a **를 크게 절약 할 수 있습니다.

— 닐스 케이
소스

두 개의 HTML 페이지가 동일하게 보이는 것을 어떻게 증명할 수 있습니까?

먼저 이미지를 캡처해야합니다

캡처 방법 1

캡처 방법 2

두 번째로 이미지를 비교합니다

방법 1

방법 2

방법 3