Fall :

Ich habe 2 Iframes und beide haben viele Divs und andere Steuerelemente, so dass beide Iframes der mittleren Größe von HTML-Websites entsprechen. Ich möchte beide vergleichen und Unterschiede herausfinden.

Ich dachte hier verschiedene Optionen:

Lösung 1: Machen Sie einen vollständigen Screenshot von 2 Iframes und vergleichen Sie beide Screenshots mit der Kissenbibliothek von Python, die das Raster im Nichtübereinstimmungsbereich in einem Screenshot zeichnet. Aber hier ist das Problem, dass ich im Internet keinen Code gefunden habe, der vollständige Iframe-Screenshots aufnehmen kann ( ich habe einen langen Iframe mit einer Bildlaufleiste ). Ich habe fast alle Antworten auf SO ausprobiert, aber alle arbeiten für eine normale Seite, aber nicht für den Iframe.

Referenz : https://blog.rinatussenov.com/automating-manual-visual-regression-tests-with-python-and-selenium-be66be950196

Lösung 2: Holen Sie sich irgendwie den gesamten HTML-Code aus beiden Iframes und vergleichen Sie ihn. Dies ist jedoch nicht einfach zu analysieren, da HTML-Code gefunden wird, der anders ist oder in 2 Iframes nicht übereinstimmt. Dies wird eher wie ein Textvergleich sein und keine gute Lösung, glaube ich.

Ich suche also entweder nach Code, der einen vollständigen Screenshot des Iframes mit Python oder Javascript erstellen kann, oder nach einer besseren Option, mit der ich zwei Iframes vergleichen und Unterschiede herausfinden kann.

Ich habe fast alle Antworten ausprobiert, die Google wie folgt findet:

Hier wird ein Beispiel-Iframe angegeben, in dem sich das gesamte HTML innerhalb des Iframes befindet: https://grapesjs.com/demo.html . Wenn ein Code einen vollständigen Screenshot dieses Iframes aufnehmen kann, ist es für mich leicht zu vergleichen.

Wie wir in unserem Chat festgestellt haben, werden die diskutierten Iframes in Javascript generiert und nicht von einer URL geladen.

Dies stellt eine Schwierigkeit bei der Automatisierung des Bildschirmabgriffs des Iframes dar, jedoch ist ein manueller Vorgang möglich:

Klicken Sie in Firefox mit der rechten Maustaste auf den Iframe und wählen Sie "Dieser Frame" im Popup-Menü. Wählen Sie dann "Frame speichern unter ...".

Sobald der Frame gespeichert ist, muss ein Teil des heruntergeladenen CSS bearbeitet werden, damit die Hintergrund-URLs auf die richtige Stelle verweisen. Öffnen Sie anschließend die HTML-Datei lokal, und Sie können einen Screenshot mit der Methode erstellen, die Sie derzeit für eine normale Webseite verwenden.

Einen Teil des Bildschirms greifen

Sie können es entweder manuell oder automatisch greifen. Wenn nicht viele Iframes verglichen werden müssen, können Sie dies manuell tun. Sie erstellen lediglich einen Screenshot, der den Inhalt enthält, und schneiden das Bild bei Bedarf zu. Die Schwierigkeit dieses Ansatzes besteht darin, dass Sie beim Zuschneiden sehr, sehr präzise sein müssen.

Sie können dies auch automatisch tun, indem Sie beispielsweise den Teil des DOM in eine Zeichenfläche laden und ein Bild davon erstellen, wie hier: Verwenden von HTML5 / Canvas / JavaScript zum Erstellen von Screenshots im Browser

Sie können Ihren Inhalt auch vorübergehend ändern, um sicherzustellen, dass Sie an der gesamten Seite interessiert sind, und dann einen Screenshot erstellen, wie hier beschrieben: https://www.cnet.com/how-to/how-to-take- a-Screenshot-einer-ganzen-Webseite-in-Chrom /

Zwei Bilder vergleichen

Sie können zwei Bilder vergleichen, indem Sie alle Pixel schleifen und vergleichen.

Algorithmus zum Vergleichen von zwei Bildern

Ergebnisse anzeigen

Ihr Programm sollte zwei Bilder als Eingabe verwenden und ein neues Bild mit ähnlicher Größe wie die Ausgabe erstellen. Ich würde vorschlagen, dass das Zielbild die Pixel eines der Bilder zeigt, um sie zu vergleichen und eine rote Linie am Rand jedes Unterschieds zu zeichnen. Zu diesem Zweck müssen Sie einen Bereich von Unterschieden in Rechtecke unterteilen. Auf diese Weise können Sie sehen, wo die Unterschiede liegen und welcher Inhalt unterschiedlich ist.

Sie können Kissen in Kombination mit Pyautogui verwenden, Mayby Pyautogui allein.

Ein Pseudocode:

Solange die Bildlaufleiste nicht den unteren Rand berührt: - Machen Sie einen Screenshot - Speichern Sie den Namen des Screenshots in der Liste - Scrollen Sie nach unten, setzen Sie diese Schleife fort

Führen Sie die obige Schleife für den zweiten Iframe erneut aus

Vergleichen Sie alle Screenshots aus den beiden Listen der von Ihnen erstellten Screenshots.

Nun, so würde ich es machen. Es gibt jedoch wahrscheinlich bessere Möglichkeiten.

Verwenden Sie html2canvas, um einen Screenshot aufzunehmen

html2canvas(document.getElementById("img_dots")).then(
  function (canvas2) {
    var img_data2 = canvas2.toDataURL('image/png');
    var im_data2 = img_data2.replace('data:image/png;base64,', '');
    $.ajax({
      type: "POST",
      url: "send_image_to_backend",
      data: {
        "base64data": im_data2,
        // "filename": filename.split(".")[0]
        "filename": new_filename + ".png"
      }, success: function () {
         //send second image and compare
      }
    });
  }
);

Auf diese Weise können Sie Bilder an das Back-End senden.

Verwenden Sie diesen Thread, um html2canvas zu optimieren und das gesamte Bild abzurufen

Sobald Sie beide Bilder haben, können Sie openCV verwenden, um den Unterschied zwischen zwei Bildern zu ermitteln. Sie können darauf verweisen - https://www.pyimagesearch.com/2017/06/19/image-difference-with-opencv-and-python/

Ich habe 2 Iframes und beide haben viele Divs und andere Steuerelemente, so dass beide Iframes der mittleren Größe von HTML-Websites entsprechen. Ich möchte beide vergleichen und Unterschiede herausfinden.

Was willst du vergleichen? CSS Regeln / Eigenschaften Unterschiede? Daten- / Textunterschiede? Oder visuelles Rendern?

Vergleichen Sie das visuelle Rendern

Sie können die Iframe-URL extrahieren und die Seite mit Selenium laden , um einen Screenshot zu erstellen (siehe Beispiel) . Sie haben auch die Firefox-Erweiterung Selenium IDE .