मैं कैसे साबित कर सकता हूं कि दो HTML पृष्ठ समान दिखते हैं?

Question

जैसे, मेरे पास यह है:

<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_comparent )। मैंने सुनिश्चित किया कि खिड़कियां समान आकार और समान स्थिति में थीं। लेकिन अगर प्रदान किया गया HTML स्क्रीन पर फिट नहीं होता है तो यह बहुत मुश्किल हो सकता है।

क्या इसकी तुलना करने के लिए एक अधिक निश्चित उपकरण या विधि है?

मैंने क्रोम 77.0.3865.120 और फ़ायरफ़ॉक्स 69.0.3 दोनों में इन्हें देखा।

मैं उदाहरण के लिए जानता हूं कि ब्राउज़र एसिड परीक्षणों के साथ जो मूल रूप से वेब मानक परियोजना का हिस्सा थे - https://www.acidtests.org/ - पिक्सेल सही प्रतिपादन बेंचमार्क था।

(अतिरिक्त क्रेडिट: दूसरे कोड स्निपेट के लिए HTML शायद मेरी जरूरतों के लिए पर्याप्त है; यदि आप सुधार का सुझाव देना चाहते हैं तो आपका स्वागत है।)

संपादित करें : मेरा प्रश्न दो छोटे HTML नमूनों की तुलना करता है, जिन्हें ब्राउज़र के दृश्य भाग पर फिट करने के लिए प्रदान किया जा सकता है। लेकिन सामान्य तौर पर मैं HTML के लिए उत्तर जानना चाहूंगा जो काफी लंबा हो सकता है।

Comments

जिस दृष्टिकोण का आप उपयोग कर रहे थे, वह मेरे लिए भी सबसे अच्छा है

— Awais

आप दोनों का स्क्रीनशॉट ले सकते हैं और फिर स्क्रीनशॉट ओवरले कर सकते हैं और यह सुनिश्चित करने के लिए कि वे लाइन अप करते हैं, शीर्ष की अपारदर्शिता को बदल

— देंगे

@ APAD1 - यह अभी भी उन्हें देख रहा है। एक छवि अंतर का उपयोग करें।

— क्वेंटिन

मूल रूप से बंद-के-बहुत-व्यापक का एक दो HTML स्रोतों की तुलना करें और दृश्य अंतर प्रदर्शित करें । इसके अलावा, "एचटीएमएल दो पृष्ठों के दृश्य भिन्न" की इंटरनेट खोज करने से उत्पादों और पुस्तकालयों की एक लंबी सूची बन जाती है ...

— हेरिटिक बंदर

मेरा मानना ​​है कि स्मार्ट भालू का परीक्षण इस दस्तावेज को कर सकता है, हालांकि यह लागत निषेधात्मक हो सकता है।

— ग्राहम

Answer 1

मैंने CSS संबंधित webiste विकसित करते समय कुछ ऐसा ही किया है । मुझे एचटीएमएल / सीएसएस द्वारा निर्मित एक आउटपुट की तुलना एक छवि के साथ करनी थी जो पहले एक एचटीएमएल / सीएसएस के साथ उत्पन्न हुई थी।

मैंने डोम-टू-इमेज का उपयोग किया , जो कोड को बेस 64-एनकोडेड इमेज में परिवर्तित करता है। मैं इस छवि को एक कैनवास के अंदर रखता हूं और फिर दोनों छवियों के बीच तुलना करने के लिए पिक्सेलमैच का उपयोग करता हूं ।

यहाँ एक उदाहरण दिया गया है:

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 कैनवस हैं जहां हम अपने ब्लॉक को पेंट करेंगे। जैसा कि आप देख सकते हैं, जेएस काफी सरल है। अंत में कोड पिक्सेल मिलान चलाता है और दिखाता है कि दोनों कैनवस में कितने अलग-अलग पिक्सेल हैं। मैंने यह सुनिश्चित करने के लिए एक देरी जोड़ी कि दोनों चित्र लोड हैं (आप बाद में कुछ घटनाओं के साथ अनुकूलित कर सकते हैं)

आप दोनों छवियों के बीच अंतर को उजागर करने और अपना दृश्य अंतर प्राप्त करने के लिए एक तीसरे कैनवास पर विचार कर सकते हैं:

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>

Answer 2

यहाँ वास्तव में DOM के साथ कुछ मापन करने का विचार है - मैंने प्रश्न में पाठ को उन विभाजनों के साथ बदल दिया है जिनके पास एक वर्ग है जिसे क्वियर किया जा सकता है। फिर आप सभी नोड्स के ऑफसेट प्रिंट कर सकते हैं।

चरित्र सूचक क्या मापते हैं, वास्तव में उसी के समान हैं  ।

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>

Comments

"मैंने बस सभी पाठ नोड्स को divs के साथ बदल दिया है" नहीं, आपने केवल उन हिस्सों को बदल दिया जो आप देख रहे थे । सभी  वर्ण TextNodes का भी हिस्सा हैं। यह महत्वपूर्ण है, क्योंकि इसका मतलब है कि आपका समाधान प्रोग्रामेटिक रूप से काम नहीं कर सकता है।

— काइदो

Answer 3

दो पृष्ठों की स्क्रीन प्रिंट करें और पिक्सल की तुलना करें।
आप सेलेनियम की तरह एक वेबड्राइवर का उपयोग कर सकते हैं, एक छवि फ़ाइल (png, jpg, आदि) में दो स्क्रीन को प्रस्तुत कर सकते हैं - सेलेनियम में ऐसा करने का एक तरीका है- और समानता की तुलना करने के लिए दोनों के पिक्सल को पढ़ने के लिए एक सॉफ्टवेयर लिखना।
वेबड्राइवर एक ब्राउज़र है जिसे आप कोड के साथ नियंत्रित कर सकते हैं। और आप ऐसे सॉफ़्टवेयर पा सकते हैं जो वेब में छवियों की तुलना करते हैं।

आप इस लिंक में अधिक जानकारी पा सकते हैं: https://selenium.dev/

Comments

आप पिक्सल की तुलना कैसे करते हैं? क्या ऐसा करने का कोई स्वचालित तरीका है? इसके अलावा, क्या होगा यदि HTML मेरे द्वारा दिए गए उदाहरण की तुलना में बहुत लंबा था, और स्क्रीन पर फिट नहीं था?

— पर्पलजैकेट

Answer 4

पहले हमें छवियों को कैप्चर करना होगा

कैप्चर विधि 1

अपने कीबोर्ड (या अन्य स्क्रीनशॉट टूल) पर प्रिंट स्क्रीन बटन का उपयोग करें।

उन पृष्ठों के लिए जो ऑनस्क्रीन फिट करने के लिए लंबे या चौड़े हैं, प्रत्येक पृष्ठ के कई स्क्रीनशॉट लें और उन्हें अपने फोटो संपादक में एक साथ टुकड़ा करें। आप एक बड़े पृष्ठ के ओवरलैपिंग स्क्रीनशॉट ले सकते हैं, उन्हें अलग-अलग परतों पर रख सकते हैं, फिर पूरे पृष्ठ के एक समग्र बनाने के लिए परतों को विलय करने से पहले टुकड़ों को स्थिति में लाने के लिए अतिव्यापी भागों का उपयोग कर सकते हैं।

कैप्चर विधि 2

आप एक बार में पूरे पृष्ठ को कैप्चर करने के लिए फायरस्टॉट जैसे ब्राउज़र एक्सटेंशन का उपयोग कर सकते हैं ।

---

दूसरा हम छवियों की तुलना करते हैं

विधि 1

1. फोटोशॉप खोलें या फोटोपिया पर जाएं ।

2. स्क्रीनशॉट को एक लेयर में पेस्ट करें।

3. दूसरे पृष्ठ के लिए दोहराएँ, एक अलग परत में चिपकाने।

4. परत दृश्यता को टॉगल करें और कोई भी परिवर्तन स्पष्ट होगा। या तुलना करने के लिए शीर्ष परत (और / या विभिन्न मिश्रण मोड सेट) की अस्पष्टता को समायोजित करें।

विधि 2

एक पिक्सेल एक्सटेंशन का उपयोग करें जैसे कि पिक्सेल-परफेक्ट -2 जो आपके ब्राउज़र के भीतर अर्ध-पारदर्शी छवियों को ओवरले करने की अनुमति देता है। यह संरेखण और रिक्ति की जाँच के लिए एक उपयोगी विस्तार है, क्योंकि आप अपने ब्राउज़र के भीतर ग्रिड छवि वाले पृष्ठों को ओवरले कर सकते हैं।

विधि 3

एक छवि अंतर उपकरण का उपयोग करें। एक त्वरित Google खोज यहां सूचीबद्ध करने के लिए बहुत सारे को चालू कर देगी। कुछ कोड संपादकों, कमांड लाइन टूल्स, पायथन लिपियों और डिफेकचर जैसी ऑनलाइन सेवाओं के लिए छवि भिन्न प्लगइन्स हैं ।

Answer 5

आप स्थिति के साथ एक ही दस्तावेज़ में एक के ऊपर एक रख सकते हैं: निरपेक्ष; और शायद करीब से देखने के लिए ज़ूम इन करें।

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

Comments

यह बहुत अच्छा है! मैंने इस विचार की कोशिश की लेकिन हाशिये के <pre>संबंध में टैग के अजीब पहलुओं के कारण <body>मैं उन्हें संरेखित नहीं कर पाया। आपकी शैलियों के लिए #a, #b { ... }यह ठीक से काम करने लगते हैं।

— पर्पलजैकेट

Answer 6

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>

(मुझे संदेह है कि स्टैक स्निपेट्स का उपयोग करके ऐसा करने का एक तरीका है। बेझिझक मुझे बताएं)

Answer 7

यहाँ कुछ वास्तव में जटिल और चतुर कोड तरीके हैं, इसलिए यहाँ एक सरल है,

एक का स्क्रीनशॉट लें, इसे एक छवि संपादक में खोलें जो पारदर्शिता का समर्थन करता है जैसे फोटोशॉप,

इसे पास्ट करें, फिर अपने सीएसएस तरीके से स्क्रीन शो लें और इसे दूसरी चिपकाई गई छवि को 50% की अस्पष्टता पर सेट करें, और देखें कि क्या वे पंक्तिबद्ध हैं।

Comments

क्या होगा अगर पेज स्क्रीन पर फिट होने के लिए बहुत लंबा है?

— पर्पलजेट 17

यदि आपके पास फ़ोटोशॉप है, या कोई अन्य संपादक जो इसका समर्थन करता है, तो अंतर के लिए सबसे ऊपरी परत पर ब्लेंड मोड सेट करें। यदि चित्र समान हैं, तो आपको एक ठोस काली छवि दिखाई देगी।

— स्टीवेक्स

हाँ। HTML एक स्ट्रिंग है। बस स्ट्रिंग को प्रिंट करने के लिए cURL या किसी अन्य विधि का उपयोग करें और फिर उसकी तुलना करें। ये कुछ इंजीनियर के उदाहरण हैं, यहां रनरिन दौर है।

— Ususipse

@Purplejacket, erm स्क्रीनशॉट ऐप को संपूर्ण रूप से, Ctrl + Shift + Print Screen,

— Barkermn01

Answer 8

जैसा कि मैंने अभी तक देखा है, कुछ लोग वास्तविक परीक्षण उपकरणों का उल्लेख कर रहे हैं।

आपके usecase के लिए बहुत सारे उपकरण हैं (अक्सर बड़े ढांचे का हिस्सा):

• Resemble.js
• कठपुतली-स्क्रीनशॉट-परीक्षक
• व्रेथ

इस सूची में से कुछ का नाम लेने के लिए। हो सकता है कि आप खुद को देखें और अपने पर्यावरण के अनुकूल एक को चुनें।

यदि आप एक स्थायी स्वचालन का निर्माण करना चाहते हैं तो हैक पर निर्भर न रहें। यह 'केवल' क्यूए हो सकता है, लेकिन भविष्य में रिलीज होने वाली आपकी ** को गंभीरता से बचा सकता है।