19

Ví dụ, tôi có cái này:

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

và điều này:

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

Mở rộng đoạn trích

Và tôi muốn cái thứ hai trông giống hệt cái thứ nhất.

Tôi tin rằng chúng trông giống hệt nhau, nhưng bằng chứng duy nhất của tôi là sử dụng kỹ thuật "chuyển đổi qua lại giữa các cửa sổ thật nhanh và nhãn cầu". (Các nhà thiên văn học gọi đây là "bộ so sánh chớp mắt" - https://en.wikipedia.org/wiki/Blink_comparator ). Tôi chắc chắn rằng các cửa sổ có cùng kích thước và ở cùng một vị trí. Nhưng nếu HTML được hiển thị không vừa với màn hình thì điều này có thể đã quá khó khăn.

Có một công cụ hoặc phương pháp dứt khoát hơn để làm so sánh này?

Tôi đã xem xét những điều này trong cả Chrome 77.0.3865.120 và Firefox 69.0.3.

Ví dụ, tôi biết rằng với các thử nghiệm Acid của trình duyệt ban đầu là một phần của Dự án Tiêu chuẩn Web - https://www.acidtests.org/ - kết xuất hoàn hảo pixel là điểm chuẩn.

(Tín dụng bổ sung: HTML cho đoạn mã thứ hai có thể phù hợp với nhu cầu của tôi; nếu bạn quan tâm đề xuất cải tiến thì những điều đó sẽ được hoan nghênh.)

EDIT : Câu hỏi của tôi so sánh hai mẫu HTML nhỏ, có thể được hiển thị để phù hợp với phần hiển thị của trình duyệt. Nhưng nói chung tôi muốn biết câu trả lời cho HTML có thể khá dài.

html css acid3

— Áo tím
nguồn

Cách tiếp cận bạn đang sử dụng cũng tốt nhất đối với tôi

— Awais

4

Bạn có thể chụp ảnh màn hình của cả hai và sau đó phủ lên các ảnh chụp màn hình và thay đổi độ mờ đục của ảnh trên cùng để đảm bảo chúng xếp hàng

— APAD1

2

@ APAD1 - Đó vẫn là nhãn cầu của họ. Sử dụng một hình ảnh khác.

— Quentin

1

Về cơ bản là một bản sao của đóng quá rộng So sánh hai nguồn HTML và hiển thị sự khác biệt trực quan . Ngoài ra, thực hiện tìm kiếm trên internet về "hình ảnh khác biệt của hai trang html" sẽ đưa ra một danh sách dài các sản phẩm và thư viện ...

— Khỉ Heretic

1

Tôi tin rằng TestComplete của Smart Bear có thể thực hiện tài liệu này , tuy nhiên nó có thể bị cấm chi phí.

— Graham

8

Tôi đã làm một cái gì đó tương tự khi phát triển một webiste liên quan đến CSS . Tôi đã phải so sánh một đầu ra được tạo bởi HTML / CSS với một hình ảnh được tạo trước đó bằng HTML / CSS.

Tôi đã sử dụng dom-to-image , để chuyển đổi mã thành hình ảnh được mã hóa base64. Tôi đặt hình ảnh này bên trong một khung vẽ và sau đó sử dụng pixelmatch để so sánh giữa cả hai hình ảnh.

Dưới đây là một ví dụ để minh họa:

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

Trong đoạn mã trên, chúng tôi có 2 khối HTML và 2 khung vẽ, nơi chúng tôi sẽ vẽ các khối của chúng tôi. Như bạn có thể thấy, JS khá đơn giản. Mã ở cuối chạy khớp pixel và hiển thị có bao nhiêu pixel khác nhau mà cả hai canvas có. Tôi đã thêm một độ trễ để đảm bảo cả hai hình ảnh được tải (bạn có thể tối ưu hóa sau với một số sự kiện)

Bạn cũng có thể xem xét một khung vẽ thứ ba để làm nổi bật sự khác biệt giữa cả hai hình ảnh và có được sự khác biệt về hình ảnh của bạn:

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

Hãy thay đổi nội dung để thấy một số khác biệt:

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

Bạn có thể đọc thêm về cách hai plugin tôi sử dụng hoạt động và tìm thấy nhiều tùy chọn thú vị hơn.

_{Tôi đang sửa các kích thước thành 300x300 để dễ dàng trình diễn bên trong đoạn trích, nhưng bạn có thể xem xét chiều cao và chiều rộng lớn hơn.}

Cập nhật

Dưới đây là một ví dụ thực tế hơn để so sánh giữa hai bố cục tạo ra cùng một kết quả. Chiều rộng / chiều cao của khung vẽ sẽ động và dựa trên nội dung. Tôi sẽ chỉ hiển thị các bức tranh cuối cùng với sự khác biệt.

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

Hãy sử dụng một hình ảnh khác:

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

— Temani Afif
nguồn

5

Đây là một ý tưởng để thực hiện một số phép đo với DOM - Tôi chỉ thay thế văn bản được đề cập bằng các div có một lớp có thể được truy vấn. Sau đó, bạn có thể in offset của tất cả các nút.

Từ những gì tôi đo được thụt lề nhân vật thực sự giống như  .

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>

Mở rộng đoạn trích

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>

Mở rộng đoạn trích

— MrRobboto
nguồn

"Tôi chỉ thay thế tất cả các nút văn bản bằng div" Không, bạn chỉ thay thế các phần bạn đang thấy . Tất cả các  ký tự cũng là một phần của TextNodes. Điều này rất quan trọng, vì nó có nghĩa là giải pháp của bạn không thể hoạt động theo chương trình.

— Kaiido

3

In màn hình của hai trang và so sánh các pixel.
Bạn có thể sử dụng một webdo như selenium, kết xuất hai màn hình trong một tệp hình ảnh (png, jpg, v.v.) - selenium có một phương pháp để làm điều này - và viết một phần mềm để đọc các pixel của hai màn hình để so sánh sự tương đồng.
Trình duyệt web là một trình duyệt bạn có thể kiểm soát bằng mã. Và bạn có thể tìm thấy phần mềm so sánh hình ảnh trên web.

Bạn có thể tìm thêm thông tin trong liên kết này: https://selenium.dev/

— Guilherme
nguồn

Làm thế nào để bạn so sánh các pixel? Có một cách tự động để làm điều này? Ngoài ra, điều gì sẽ xảy ra nếu HTML dài hơn nhiều so với ví dụ tôi đưa ra và không phù hợp với màn hình?

— Purplejquet

2

Đầu tiên chúng ta phải chụp ảnh

Phương pháp chụp 1

Sử dụng nút màn hình in trên bàn phím của bạn (hoặc công cụ chụp màn hình khác).

Đối với các trang dài hoặc rộng để vừa trên màn hình, hãy chụp nhiều ảnh chụp màn hình của mỗi trang và ghép chúng lại với nhau trong trình chỉnh sửa ảnh của bạn. Bạn có thể chụp ảnh màn hình chồng chéo của một trang lớn, đặt chúng vào các lớp riêng biệt, sau đó sử dụng các phần chồng chéo để định vị chính xác các mảnh trước khi hợp nhất các lớp để tạo ra một hỗn hợp của toàn bộ trang.

Phương pháp chụp 2

Bạn có thể sử dụng tiện ích mở rộng trình duyệt như Fireshot để chụp toàn bộ trang cùng một lúc.

Thứ hai chúng tôi so sánh các hình ảnh

Phương pháp 1

Mở photoshop hoặc đi đến photopea .
Dán ảnh chụp màn hình vào một lớp.
Lặp lại cho trang thứ hai, dán vào một lớp khác.
Chuyển đổi khả năng hiển thị của lớp và mọi thay đổi sẽ rõ ràng. Hoặc điều chỉnh độ mờ của lớp trên cùng (và / hoặc đặt các chế độ hòa trộn khác nhau) để so sánh.

Cách 2

Sử dụng tiện ích mở rộng trình duyệt như pixel-perfect-2 , cho phép phủ các hình ảnh bán trong suốt trong trình duyệt của bạn. Đây cũng là một tiện ích mở rộng hữu ích để kiểm tra căn chỉnh và khoảng cách, bởi vì bạn có thể chồng các trang với hình ảnh lưới trong trình duyệt của mình.

Phương pháp 3

Sử dụng một công cụ khác biệt hình ảnh. Một tìm kiếm nhanh trên google sẽ xuất hiện quá nhiều để liệt kê ở đây. Có các plugin hình ảnh khác nhau cho một số trình soạn thảo mã, công cụ dòng lệnh, tập lệnh Python và các dịch vụ trực tuyến như bộ kiểm tra khuếch tán .

— Veneseme Tyras
nguồn

2

Bạn có thể đặt chồng lên nhau trong cùng một tài liệu với vị trí: tuyệt đối; Và có thể phóng to để xem xét kỹ hơn.

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

Mở rộng đoạn trích

— V.Volov
nguồn

Điều đó thật tuyệt! Tôi đã thử ý tưởng này nhưng vì các khía cạnh kỳ lạ của <pre>thẻ liên quan đến <body>lề nên tôi không thể làm cho chúng phù hợp. Phong cách của bạn #a, #b { ... }dường như làm cho nó hoạt động đúng.

— Purplejquet

2

Xếp chồng hai trang lên nhau bằng iframe. Điều này sẽ cho phép bạn thấy bất kỳ sự khác biệt giữa hai trang.

chính.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>

(Tôi nghi ngờ có một cách để làm điều này bằng cách sử dụng Stack Snippets. Hãy thoải mái khai sáng cho tôi)

— ecc521
nguồn

1

Có một số phương thức mã thực sự phức tạp và thông minh ở đây, vì vậy đây là một phương pháp đơn giản,

Chụp ảnh màn hình của một cái, mở nó trong một trình chỉnh sửa hình ảnh hỗ trợ độ trong suốt Giống như photoshop,

Vượt qua nó, sau đó chụp màn hình hiển thị cách CSS của bạn và dán nó vào để đặt hình ảnh được dán lần thứ hai thành độ mờ 50% và xem chúng có xếp hàng không.

— Barkermn01
nguồn

Nếu trang quá dài để vừa trên màn hình thì sao?

— Purplejquet

Nếu bạn có photoshop hoặc bất kỳ trình chỉnh sửa nào hỗ trợ nó, hãy đặt chế độ hòa trộn trên lớp trên cùng thành khác biệt. Nếu các hình ảnh là giống hệt nhau, bạn sẽ thấy một hình ảnh màu đen rắn.

— steveax

Đúng. HTML là một chuỗi. Đơn giản chỉ cần sử dụng cURL hoặc phương thức khác để in chuỗi và sau đó so sánh nó. Đây là một số ví dụ kỹ thuật chạy vòng quanh đây.

— Ususipse

@Purplejquet, erm Ảnh chụp màn hình toàn bộ Ứng dụng, Ctrl + Shift + Màn hình in,

— Barkermn01

1

Như tôi đã thấy cho đến nay, rất ít người đề cập đến các công cụ kiểm tra thực tế.

Có rất nhiều công cụ cho usecase của bạn (thường là một phần của các khung lớn hơn):

Để đặt tên cho một số lấy từ này danh sách . Có thể tìm kiếm chính mình và chọn một phù hợp với môi trường của bạn.

Nếu bạn muốn xây dựng một tự động hóa bền vững, đừng dựa vào hack. Nó có thể 'chỉ' là QA nhưng có thể nghiêm túc lưu ** của bạn trong các bản phát hành trong tương lai.

— Nils K
nguồn

Làm cách nào để chứng minh rằng hai trang HTML trông giống hệt nhau?

Đầu tiên chúng ta phải chụp ảnh

Phương pháp chụp 1

Phương pháp chụp 2

Thứ hai chúng tôi so sánh các hình ảnh

Phương pháp 1

Cách 2

Phương pháp 3