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:

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.

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

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.

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.

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.

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/

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 .