Comment comparer 2 iframes et faire la différence visuellement?

21

Cas :

J'ai 2 iframes et les deux ont beaucoup de divs et d'autres contrôles, donc les deux iframes sont comme la taille moyenne des sites Web HTML. Je veux comparer les deux et découvrir les différences.

J'ai pensé différentes options ici:

Solution 1: Prenez une capture d'écran complète de 2 iframes et comparez les deux captures d'écran à l'aide de la bibliothèque d'oreillers de Python qui dessine la grille sur la zone de décalage dans une capture d'écran. Mais ici, le problème est que je n'ai trouvé aucun code sur Internet pouvant prendre des captures d'écran complètes d'iframe ( j'ai un long iframe avec une barre de défilement ). J'ai essayé presque toutes les réponses sur SO mais toutes fonctionnent pour une page normale mais pas pour l'iframe.

Référence : https://blog.rinatussenov.com/automating-manual-visual-regression-tests-with-python-and-selenium-be66be950196

Solution 2: obtenez en quelque sorte tout le code HTML à la fois de l'iframe et comparez-le, mais ce ne sera pas facile d'analyser le résultat car il trouvera du code HTML différent ou aura un décalage dans 2 iframes. Ce sera plus comme comparer du texte et pas une bonne solution, je crois.

Je recherche donc un code qui peut prendre une capture d'écran complète d'iframe en utilisant Python ou Javascript OU une meilleure option qui me permet de comparer 2 iframes et de découvrir les différences.

J'ai essayé presque toutes les réponses que Google trouve ci-dessous:

entrez la description de l'image ici

Un exemple d'Iframe est donné ici où le html entier se trouve dans iframe: https://grapesjs.com/demo.html , si du code peut prendre une capture d'écran complète de cet iframe, il sera facile de comparer pour moi.

Coup de main
la source
Tous les iframes en dessous sont des pages html normales. Voulez-vous spécifiquement voir à quoi ils ressemblent comme des iframes?
Matt Ellen
Oui, tous sont sous la page html. Mon objectif est de m'assurer que les deux iframes se ressemblent en termes visuels.
Coup de main le
Serait-il alors acceptable d'ouvrir les pages que les iframes affichent comme pages de niveau supérieur et de les capturer par écran?
Matt Ellen
Je pense que oui, mais comment cela est possible car tous les codes de capture d'écran que j'ai essayés sont capables de prendre une capture d'écran complète de toutes les pages, mais en ce qui concerne l'iframe, il suffit de prendre une capture d'écran de la seule partie visible sans défilement.
Coup de main le
Vous disposez des URL iframe, vous pouvez donc les ouvrir en tant que pages de niveau supérieur.
Matt Ellen

Réponses:

8

Comme nous l'avons découvert dans notre chat , les iframes en discussion sont générés en javascript et ne sont pas chargés à partir d'une URL.

Cela présente une difficulté à automatiser la capture d'écran de l'iframe, mais un processus manuel est possible:

Dans Firefox, faites un clic droit sur l'iframe et sélectionnez "Ce cadre" dans le menu contextuel, puis sélectionnez "Enregistrer le cadre sous ...".

image des menus

Une fois le cadre enregistré, une partie du CSS téléchargé devra être manipulée pour que les URL d'arrière-plan pointent au bon endroit. Cela fait, ouvrez le fichier html localement et vous pourrez prendre une capture d'écran en utilisant la méthode que vous utilisez actuellement pour une page Web normale.

Matt Ellen
la source
6

Saisir une partie de l'écran

Vous pouvez le saisir manuellement ou automatiquement. S'il n'y a pas beaucoup d'iframes à comparer, alors le faire manuellement est une option, vous faites juste une capture d'écran qui contient le contenu et recadrez l'image si nécessaire. La difficulté de cette approche est que vous devez être très très précis lors du recadrage.

Vous pouvez également le faire automatiquement, par exemple en chargeant la partie du DOM dans un canevas et en faire une image, comme ici: Utiliser HTML5 / Canvas / JavaScript pour prendre des captures d'écran dans le navigateur

En outre, vous pouvez modifier temporairement votre contenu pour vous assurer que toute la page vous intéresse, puis faire une capture d'écran, comme décrit ici: https://www.cnet.com/how-to/how-to-take- une capture d'écran d'une page Web entière en chrome /

Comparaison de deux images

Vous pouvez comparer deux images en bouclant tous leurs pixels et en les comparant.

Algorithme pour comparer deux images

Affichage des résultats

Votre programme doit prendre deux images en entrée et créer une nouvelle image de taille similaire en sortie. Je suggérerais que l'image cible montre les pixels d'une des images à comparer et à tracer une ligne rouge à la frontière de chaque différence. Pour cela, vous devrez diviser une région de différences en rectangles. De cette façon, vous pouvez voir où se trouvent les différences et quel est le contenu qui est différent.

Lajos Arpad
la source
Merci pour votre réponse. Y a-t-il une chance que je puisse utiliser Html2Canvas avec python parce que j'ai besoin de quelque chose en python ou javascript qui peut prendre une capture d'écran complète d'iframe.
Coup de main le
@HelpingHands HTML2Canvas est un outil Javascript, vous pouvez donc l'utiliser via Javascript (voir: html2canvas.hertzen.com ). En recherchant les utilisations Python de HTML2Canvas, j'ai trouvé un proxy Python. Je ne l'ai pas essayé, mais j'espère que ça aide. Le voici: github.com/brcontainer/html2canvas-python-proxy
Lajos Arpad
2

Vous pouvez utiliser un oreiller en combinaison avec pyautogui, mayby ​​pyautogui seul.

Un pseudo code:

Tant que la barre de défilement ne touche pas le bas: - prendre une capture d'écran - enregistrer le nom de la capture d'écran dans la liste - faire défiler vers le bas, continuer cette boucle

Recommencez la boucle ci-dessus pour le deuxième iframe

comparer toutes les captures d'écran des deux listes de captures d'écran que vous avez générées.

Eh bien, c'est comme ça que je le ferais. Il existe probablement de meilleures façons.

PythonAmateur742
la source
La chose est que je n'ai qu'un seul iframe mais il est long verticalement et aucun outil n'est capable de prendre sa capture d'écran complète.
Coup de main le
Vous n'avez pas besoin d'une longue capture d'écran. Plusieurs captures d'écran feront également l'affaire. Tant que vous faites toujours défiler le même montant vers le bas. Donc, fondamentalement, vous laissez votre iframe se concentrer. Ensuite, vous appuyez sur la flèche vers le bas 5 fois (ou selon vos besoins) et prenez une capture d'écran. Peu importe si vous avez un peu de contenu double dans vos captures d'écran. Vous faites de même pour l'autre iframe.
PythonAmateur742
1

Utilisez html2canvas pour prendre une capture d'écran

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
      }
    });
  }
);

Cela vous permettra d'envoyer des images au back-end.

Utilisez ce fil pour modifier html2canvas pour récupérer l'image entière

Une fois que vous avez les deux images, vous pouvez utiliser openCV pour trouver la différence entre 2 images, vous pouvez vous y référer - https://www.pyimagesearch.com/2017/06/19/image-difference-with-opencv-and-python/

Aqua 4
la source
1

J'ai 2 iframes et les deux ont beaucoup de divs et d'autres contrôles, donc les deux iframes sont comme la taille moyenne des sites Web HTML. Je veux comparer les deux et découvrir les différences.

Que voulez-vous comparer? Différences de règles / propriétés CSS? Différences données / texte? Ou rendu visuel?


Comparer le rendu visuel

Vous pouvez extraire l'URL iframe et charger la page avec Selenium pour prendre une capture d'écran (voir l'exemple) . Vous avez également l'extension firefox Selenium IDE .

A-312
la source
Merci pour votre réponse. En fait, mon iframe n'a pas d'URL ou de src. Et prendre une capture d'écran uniquement prendre une capture d'écran du port de vue, mais j'ai besoin d'une capture d'écran complète d'iframe.
Coup de main le