Caso:

Eu tenho 2 iframes e ambos têm muitos divs e outros controles, portanto ambos os iframes são do tamanho médio dos sites HTML. Quero comparar os dois e descobrir as diferenças.

Eu pensei em opções diferentes aqui:

Solução 1: tire uma captura de tela completa de 2 iframes e compare as duas capturas de tela usando a biblioteca de travesseiros do Python, que desenha a grade na área de incompatibilidade em uma captura de tela. Mas aqui a questão é que não encontrei nenhum código na internet que possa fazer capturas de tela completas de iframe ( eu tenho um iframe longo com uma barra de rolagem ). Tentei quase todas as respostas no SO, mas todas estão funcionando para uma página normal, mas não para o iframe.

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

Solução 2: obtenha de alguma forma todo o código HTML do iframe e compare-o, mas não será fácil analisar o resultado, pois encontrará um código HTML diferente ou com incompatibilidade em 2 iframes. Isso será mais parecido com a comparação de texto e não será uma boa solução, acredito.

Então, eu estou procurando por um código que possa fazer uma captura de tela completa do iframe usando Python ou Javascript OU alguma opção melhor que permita comparar 2 iframes e descobrir diferenças.

Eu tentei quase todas as respostas que o google encontra o nosso conforme abaixo:

O exemplo de Iframe é fornecido aqui, onde o html inteiro está dentro do iframe: https://grapesjs.com/demo.html . Se algum código puder capturar uma captura de tela completa desse iframe, será fácil comparar comigo.

Como descobrimos em nosso bate-papo , os iframes em discussão são gerados em javascript e não carregados a partir de um URL.

Isso apresenta uma dificuldade em automatizar a captura de tela do iframe, no entanto, um processo manual é possível:

No Firefox, clique com o botão direito do mouse no iframe e selecione "Este quadro" no menu pop-up e selecione "Salvar quadro como ...".

Depois que o quadro é salvo, é necessário mexer em alguns dos CSS baixados para que os URLs de segundo plano aponte para o local correto. Feito isso, abra o arquivo html localmente e você poderá tirar uma captura de tela usando o método usado atualmente para uma página da web normal.

Agarrando parte da tela

Você pode pegá-lo manualmente ou automaticamente. Se não houver muitos iframes para comparar, fazê-lo manualmente é uma opção, basta fazer uma captura de tela que contenha o conteúdo e recortar a imagem, se necessário. A dificuldade dessa abordagem é que você precisa ser muito preciso ao cortar.

Você também pode fazer isso automaticamente, por exemplo, carregando a parte do DOM em uma tela e tirando uma foto, como aqui: Usando HTML5 / Canvas / JavaScript para capturar capturas de tela no navegador

Além disso, você pode modificar temporariamente seu conteúdo para garantir que toda a página seja do seu interesse e fazer uma captura de tela, conforme descrito aqui: https://www.cnet.com/how-to/how-to-take- uma captura de tela de uma página da web inteira no chrome /

Comparando duas imagens

Você pode comparar duas imagens fazendo um loop com todos os pixels e comparando-os.

Algoritmo para comparar duas imagens

Mostrando os resultados

Seu programa deve ter duas imagens como entrada e criar uma nova imagem de tamanho semelhante à saída. Sugiro que a imagem alvo mostre os pixels de uma das imagens para comparar e desenhar uma linha vermelha na borda de cada diferença. Para esse fim, você precisará dividir uma região de diferenças em retângulos. Dessa forma, você pode ver onde estão as diferenças e qual é o conteúdo que é diferente.

Você pode usar o travesseiro em combinação com o pyautogui, e talvez apenas com o pyautogui.

Algum código pseudo:

Desde que a barra de rolagem não toque na parte inferior: - tire uma captura de tela - salve o nome da captura de tela na lista - role para baixo, continue este loop

Faça o loop acima novamente para o segundo iframe

compare todas as capturas de tela das duas listas de capturas de tela que você gerou.

Bem, é assim que eu faria. Provavelmente, existem maneiras melhores.

Use html2canvas para tirar uma captura de tela

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

Isso permitirá que você envie imagens para o back-end.

Use este tópico para ajustar o html2canvas para buscar a imagem inteira

Depois de ter as duas imagens, você pode usar o openCV para encontrar a diferença entre duas imagens. Consulte: https://www.pyimagesearch.com/2017/06/19/image-difference-with-opencv-and-python/

Eu tenho 2 iframes e ambos têm muitos divs e outros controles, portanto ambos os iframes são do tamanho médio dos sites HTML. Quero comparar os dois e descobrir as diferenças.

O que você quer comparar? Regras CSS / diferenças de propriedades? Dados / diferenças de texto? Ou render visual?

Comparar renderização visual

Você pode extrair o URL do iframe e carregar a página com o Selenium para obter uma captura de tela (veja o exemplo) . Além disso, você tem a extensão firefox IDE Selenium .