Caso:

Tengo 2 iframes y ambos tienen muchos divs y otros controles, por lo que ambos son como el tamaño medio de los sitios web HTML. Quiero comparar ambos y descubrir diferencias.

Pensé diferentes opciones aquí:

Solución 1: tome una captura de pantalla completa de 2 iframes y compare ambas capturas de pantalla utilizando la biblioteca de almohadas de Python que dibuja la cuadrícula en el área de discrepancia en una captura de pantalla. Pero aquí el problema es que no encontré ningún código en Internet que pueda tomar capturas de pantalla completas del iframe ( tengo un iframe largo con una barra de desplazamiento ). Intenté casi todas las respuestas en SO, pero todas funcionan para una página normal, pero no para el iframe.

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

Solución 2: Obtenga de alguna manera todo el código HTML de ambos iframe y compárelo, pero no será fácil analizar el resultado porque encontrará algún código HTML diferente o que no coincida en 2 iframes. Esto será más como comparar texto y no es una buena solución, creo.

Así que estoy buscando un código que pueda tomar una captura de pantalla completa del iframe usando Python o Javascript O alguna opción mejor que me permita comparar 2 iframes y descubrir diferencias.

Intenté casi todas las respuestas que google encuentra nuestras según a continuación:

Aquí se muestra un Iframe de muestra donde todo el html está dentro del iframe: https://grapesjs.com/demo.html , si algún código puede tomar una captura de pantalla completa de este iframe, entonces será fácil de comparar para mí.

Como descubrimos en nuestro chat , los iframes en discusión se generan en JavaScript y no se cargan desde una URL.

Esto presenta una dificultad para automatizar la captura de pantalla del iframe, sin embargo, es posible un proceso manual:

En Firefox, haga clic derecho en el iframe y seleccione "Este marco" en el menú emergente, luego seleccione "Guardar marco como ...".

Una vez que se guarda el marco, será necesario manipular parte del CSS descargado para que las URL de fondo apunten al lugar correcto. Una vez hecho esto, abra el archivo html localmente y podrá tomar una captura de pantalla utilizando el método que usa actualmente para una página web normal.

Agarrando parte de la pantalla

Puede tomarlo de forma manual o automática. Si no hay muchos iframes para comparar, entonces hacerlo manualmente es una opción, simplemente haga una captura de pantalla que contenga el contenido y recorte la imagen si es necesario. La dificultad de este enfoque es que debe ser muy muy preciso al recortar.

También puede hacerlo automáticamente, por ejemplo, cargar la parte del DOM en un lienzo y hacer una foto del mismo, como aquí: Usar HTML5 / Canvas / JavaScript para tomar capturas de pantalla en el navegador

Además, puede modificar temporalmente su contenido para asegurarse de que toda la página es lo que le interesa y luego hacer una captura de pantalla, como se describe aquí: https://www.cnet.com/how-to/how-to-take- a-screenshot-of-a-whole-web-page-in-chrome /

Comparando dos imágenes

Puede comparar dos imágenes girando todos sus píxeles y comparándolos.

Algoritmo para comparar dos imágenes.

Mostrando los resultados

Su programa debe tomar dos imágenes como entrada y crear una nueva imagen de tamaño similar a la salida. Sugeriría que la imagen de destino debería mostrar los píxeles de una de las imágenes para comparar y dibujar una línea roja en el borde de cada diferencia. Para este propósito, deberá dividir una región de diferencias en rectángulos. De esta manera, podría ver dónde están las diferencias y cuál es el contenido que es diferente.

Puede usar la almohada en combinación con pyautogui, mayby ​​pyautogui solo.

Algunos pseudocódigo:

Mientras la barra de desplazamiento no toque la parte inferior: - tome una captura de pantalla - guarde el nombre de la captura de pantalla en la lista - desplácese hacia abajo, continúe este ciclo

Realice el bucle anterior nuevamente para el segundo iframe

compare todas las capturas de pantalla de las dos listas de capturas de pantalla que ha generado.

Bueno, así es como lo haría. Sin embargo, probablemente haya mejores maneras.

Use html2canvas para tomar una captura de pantalla

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

Esto le permitirá enviar imágenes al back-end.

Use este hilo para ajustar html2canvas para obtener la imagen completa

Una vez que tenga ambas imágenes, puede usar openCV para encontrar la diferencia entre 2 imágenes, puede consultar esto: https://www.pyimagesearch.com/2017/06/19/image-difference-with-opencv-and-python/

Tengo 2 iframes y ambos tienen muchos divs y otros controles, por lo que ambos son como el tamaño medio de los sitios web HTML. Quiero comparar ambos y descubrir diferencias.

¿Qué quieres comparar? Reglas CSS / diferencias de propiedades? ¿Datos / diferencias de texto? O renderizado visual?

Comparar renderizado visual

Puede extraer la URL del iframe y cargar la página con Selenium para tomar una captura de pantalla (ver ejemplo) . También tienes la extensión de Firefox Selenium IDE .