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

— Purplejacket
แหล่งที่มา

วิธีที่คุณใช้ดีที่สุดสำหรับฉันเช่นกัน

— Awais

4

คุณสามารถจับภาพหน้าจอของทั้งคู่แล้วซ้อนทับภาพหน้าจอและเปลี่ยนความทึบของหน้าจอด้านบนเพื่อให้แน่ใจว่าพวกเขาเข้าแถว

— 28419

2

@ APAD1 - ยังคงดูน่ากลัวอยู่ดี ใช้ภาพที่แตกต่าง

— เควนติน

1

โดยทั่วไปล่อของปิดเป็นมากเกินไปกว้างเปรียบเทียบสองแหล่ง HTML และแสดงความแตกต่างของภาพ นอกจากนี้การค้นหาทางอินเทอร์เน็ตด้วย "visual diff ของหน้า html สองหน้า" จะนำเสนอรายการผลิตภัณฑ์และห้องสมุดจำนวนมาก ...

— Heretic Monkey

1

ฉันเชื่อว่า TestComplete ของ Smart Bear สามารถทำเอกสารนี้ได้อย่างไรก็ตามอาจเป็นค่าใช้จ่ายที่ต้องห้าม

— เกรแฮม

8

ฉันได้ทำสิ่งที่คล้ายกันเมื่อมีการพัฒนาCSS webiste ฉันต้องเปรียบเทียบผลลัพธ์ที่ผลิตโดย 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>

ขยายตัวอย่างข้อมูล

ในโค้ดข้างต้นเรามีบล็อก HTML 2 บล็อกและ 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>

ขยายตัวอย่างข้อมูล

— Temani Afif
แหล่งที่มา

5

นี่เป็นแนวคิดที่จะทำการวัดด้วย DOM จริง ๆ - ฉันเพิ่งแทนที่ข้อความที่เป็นปัญหาด้วย divs ที่มีคลาสที่สามารถสอบถามได้ จากนั้นคุณสามารถพิมพ์ออฟเซตของโหนดทั้งหมด

 จากสิ่งที่ผมวัดเยื้องตัวอักษรที่เป็นจริงเช่นเดียวกับ

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
แหล่งที่มา

"ฉันก็แค่แทนที่โหนดข้อความที่มี divs" ไม่มีคุณแทนที่เฉพาะส่วนที่คุณเห็น ทุก ตัวละครยังเป็นส่วนหนึ่งของ TextNodes สิ่งนี้มีความสำคัญเนื่องจากหมายความว่าโซลูชันของคุณไม่สามารถทำงานได้โดยทางโปรแกรม

— Kaiido

3

พิมพ์หน้าจอของทั้งสองหน้าและเปรียบเทียบพิกเซล
คุณสามารถใช้ webdriver เช่น selenium, เรนเดอร์สองหน้าจอในไฟล์รูปภาพ (png, jpg, ฯลฯ ) - ซีลีเนียมมีวิธีการทำเช่นนี้ - และเขียนซอฟต์แวร์เพื่ออ่านพิกเซลของทั้งสองเพื่อเปรียบเทียบความคล้ายคลึงกัน
webdriver เป็นเบราว์เซอร์ที่คุณสามารถควบคุมด้วยรหัส และคุณสามารถค้นหาซอฟต์แวร์ที่เปรียบเทียบรูปภาพในเว็บ

คุณสามารถค้นหาข้อมูลเพิ่มเติมได้ที่ลิงค์นี้: https://selenium.dev/

— Guilherme
แหล่งที่มา

คุณเปรียบเทียบพิกเซลอย่างไร มีวิธีอัตโนมัติในการทำเช่นนี้หรือไม่? นอกจากนี้จะเกิดอะไรขึ้นถ้า HTML ยาวกว่าตัวอย่างที่ฉันให้มามากและไม่พอดีกับหน้าจอ

— Purplejacket

2

ก่อนอื่นเราต้องจับภาพ

วิธีการจับ 1

ใช้ปุ่มพิมพ์หน้าจอบนแป้นพิมพ์ของคุณ (หรือเครื่องมือจับภาพหน้าจออื่น ๆ )

สำหรับหน้าเว็บที่ยาวหรือกว้างเพื่อให้พอดีกับหน้าจอให้จับภาพหน้าจอหลายหน้าของแต่ละหน้าแล้วประกอบเข้าด้วยกันในโปรแกรมแก้ไขรูปภาพของคุณ คุณสามารถจับภาพหน้าจอที่ซ้อนทับกันของหน้าขนาดใหญ่วางไว้บนเลเยอร์แยกต่างหากจากนั้นใช้ส่วนที่ทับซ้อนกันเพื่อจัดวางส่วนต่างๆอย่างแม่นยำก่อนรวมเลเยอร์เพื่อสร้างคอมโพสิตของทั้งหน้า

วิธีการจับภาพ 2

คุณสามารถใช้ส่วนขยายเบราว์เซอร์เช่นfireshotเพื่อจับภาพหน้าทั้งหมดในครั้งเดียว

ประการที่สองเราเปรียบเทียบภาพ

วิธีที่ 1

เปิด Photoshop หรือไปphotopea
วางภาพหน้าจอเป็นเลเยอร์
ทำซ้ำสำหรับเพจที่สองวางลงในเลเยอร์อื่น
สลับการแสดงเลเยอร์และการเปลี่ยนแปลงใด ๆ จะชัดเจน หรือปรับความทึบของชั้นบนสุด (และ / หรือตั้งค่าโหมดผสมผสานต่าง ๆ ) เพื่อเปรียบเทียบ

วิธีที่ 2

ใช้ส่วนขยายเบราว์เซอร์เช่นpixel-perfect-2ซึ่งทำให้สามารถซ้อนทับภาพกึ่งโปร่งใสภายในเบราว์เซอร์ของคุณ นี่เป็นส่วนขยายที่มีประโยชน์สำหรับการตรวจสอบการจัดตำแหน่งและระยะห่างเช่นกันเนื่องจากคุณสามารถวางซ้อนหน้าด้วยภาพตารางในเบราว์เซอร์ของคุณ

วิธีที่ 3

ใช้เครื่องมือกระจายภาพ การค้นหา google อย่างรวดเร็วจะปรากฏขึ้นมากเกินไปที่จะแสดงรายการที่นี่ มีภาพปลั๊กอิน diff สำหรับบรรณาธิการรหัสบางเครื่องมือบรรทัดคำสั่งสคริปต์หลามและบริการออนไลน์เช่นdiffchecker

— Veneseme Tyras
แหล่งที่มา

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>

ขยายตัวอย่างข้อมูล

— V.Volkov
แหล่งที่มา

เยี่ยมมาก! ฉันลองใช้ความคิดนี้ แต่เนื่องจากลักษณะแปลก ๆ ของ<pre>แท็กเกี่ยวกับ<body>ระยะขอบฉันจึงไม่สามารถจัดแนว สไตล์ของคุณ#a, #b { ... }ดูเหมือนจะทำให้มันทำงานได้อย่างถูกต้อง

— Purplejacket

2

ซ้อนทับสองหน้าที่ด้านบนของกันและกันโดยใช้ iframes สิ่งนี้จะช่วยให้คุณเห็นความแตกต่างระหว่างสองหน้านี้

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>

(ฉันสงสัยว่ามีวิธีการทำเช่นนี้โดยใช้ Snippets กองซ้อนรู้สึกฟรีที่จะสอนฉัน)

— ecc521
แหล่งที่มา

1

มีวิธีการที่ซับซ้อนและชาญฉลาดในที่นี่ดังนั้นนี่เป็นวิธีที่ง่าย

ถ่ายภาพหน้าจอเดียวเปิดในเครื่องมือแก้ไขรูปภาพที่รองรับความโปร่งใสเช่นเดียวกับ photoshop

วางในแล้วใช้หน้าจออวดวิธี CSS ของคุณและวางในชุดภาพที่สองวางเป็นความทึบของ 50% และดูว่าพวกเขาเข้าแถว

— Barkermn01
แหล่งที่มา

เกิดอะไรขึ้นถ้าหน้ายาวเกินไปที่จะพอดีกับหน้าจอ?

— Purplejacket

หากคุณมี photoshop หรือโปรแกรมแก้ไขอื่น ๆ ที่รองรับให้ตั้งค่าโหมดผสมผสานบนเลเยอร์บนสุดเพื่อสร้างความแตกต่าง หากภาพเหมือนกันคุณจะเห็นภาพสีดำทึบ

— steveax

ใช่. HTML คือหนึ่งสตริง เพียงใช้ cURL หรือวิธีอื่นเพื่อพิมพ์สตริงและเปรียบเทียบ นี่คือตัวอย่างที่ผ่านการออกแบบทางวิศวกรรมแล้ว

— Ususipse

@Purplejacket, erm สกรีนแอปโดยรวม, Ctrl + Shift + Print Screen,

— Barkermn01

1

อย่างที่ฉันเห็นมาแล้วมีน้อยคนที่พูดถึงเครื่องมือทดสอบจริง

มีเครื่องมือมากมายสำหรับ usecase ของคุณ (มักเป็นส่วนหนึ่งของเฟรมเวิร์กที่ใหญ่กว่า):

เพื่อชื่อไม่กี่ที่นำมาจากนี้รายการ อาจมองหาตัวเองและเลือกสภาพแวดล้อมที่เหมาะสม

หากคุณต้องการสร้างระบบอัตโนมัติที่ยั่งยืนอย่าพึ่งแฮ็ก อาจเป็นเพียงแค่ QA แต่สามารถบันทึก ** ของคุณอย่างจริงจังในรุ่นอนาคต

— นิลส์
แหล่งที่มา

ฉันจะพิสูจน์ได้อย่างไรว่าหน้า HTML สองหน้ามีหน้าตาเหมือนกัน

ก่อนอื่นเราต้องจับภาพ

วิธีการจับ 1

วิธีการจับภาพ 2

ประการที่สองเราเปรียบเทียบภาพ

วิธีที่ 1

วิธีที่ 2

วิธีที่ 3