Astuccio :

Ho 2 iframe ed entrambi hanno molti div e altri controlli quindi entrambi gli iframe sono come le medie dimensioni dei siti Web HTML. Voglio confrontare entrambi e scoprire le differenze.

Ho pensato a diverse opzioni qui:

Soluzione 1: scatta uno screenshot completo di 2 iframe e confronta entrambi gli screenshot usando la libreria di cuscini di Python che disegna la griglia nell'area di mancata corrispondenza in uno screenshot. Ma qui il problema è che non ho trovato alcun codice su Internet che possa richiedere schermate complete di iframe ( ho un iframe lungo con una barra di scorrimento ). Ho provato quasi tutte le risposte su SO ma tutti funzionano per una pagina normale ma non per l'iframe.

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

Soluzione 2: ottieni in qualche modo tutto il codice HTML da entrambi gli iframe e confrontalo, ma questo non sarà facile da analizzare il risultato perché troverà un codice HTML diverso o avrà una mancata corrispondenza in 2 iframe. Sarà più simile al confronto del testo e non è una buona soluzione, credo.

Quindi sto cercando uno dei codici che può fare uno screenshot completo di iframe usando Python o Javascript O qualche opzione migliore che mi permetta di confrontare 2 iframe e scoprire le differenze.

Ho provato quasi tutte le risposte che Google trova la nostra come di seguito:

Iframe di esempio viene fornito qui dove l'intero HTML è all'interno di iframe: https://grapesjs.com/demo.html , se un codice può acquisire uno screenshot completo di questo iframe, sarà facile confrontarlo per me.

Come abbiamo scoperto nella nostra chat , gli iframe in discussione sono generati in javascript e non caricati da un URL.

Ciò presenta una difficoltà nell'automazione dello schermo che afferra l'iframe, tuttavia è possibile un processo manuale:

In Firefox, fai clic con il pulsante destro del mouse su iframe e seleziona "Questo frame" nel menu a comparsa, quindi seleziona "Salva frame con nome ...".

Una volta salvato il frame, sarà necessario manipolare alcuni dei CSS scaricati per fare in modo che gli URL di sfondo puntino al punto corretto. Fatto ciò, apri il file html localmente e sarai in grado di fare uno screenshot usando il metodo che attualmente usi per una normale pagina web.

Afferrare parte dello schermo

Puoi afferrarlo manualmente o automaticamente. Se non ci sono molti iframe da confrontare, quindi farlo manualmente è un'opzione, basta fare uno screenshot che contenga il contenuto e ritagliare l'immagine se necessario. La difficoltà di questo approccio è che devi essere molto preciso durante il ritaglio.

Puoi farlo anche automaticamente, ad esempio caricando la parte del DOM in un'area di disegno e creandone un'immagine, come qui: utilizzando HTML5 / Canvas / JavaScript per acquisire schermate nel browser

Inoltre, puoi modificare temporaneamente i tuoi contenuti per assicurarti che l'intera pagina sia ciò che ti interessa e quindi fare uno screenshot, come descritto qui: https://www.cnet.com/how-to/how-to-take- a-tutto-web-page-in-a-cromo screenshot-di-/

Confronto tra due immagini

Puoi confrontare due immagini eseguendo il ciclo di tutti i pixel e confrontandoli.

Algoritmo per confrontare due immagini

Mostra i risultati

Il tuo programma dovrebbe prendere due immagini come input e creare una nuova immagine di dimensioni simili come output. Suggerirei che l'immagine di destinazione mostri i pixel di una delle immagini da confrontare e disegnare una linea rossa al bordo di ciascuna differenza. A tal fine dovrai dividere una regione di differenze in rettangoli. In questo modo puoi vedere dove sono le differenze e qual è il contenuto che è diverso.

Puoi usare il cuscino in combinazione con pyautogui, mayby ​​pyautogui da solo.

Alcuni pseudo-codice:

Finché la barra di scorrimento non tocca il fondo: - fare uno screenshot - salvare il nome dello screenshot nell'elenco - scorrere verso il basso, continuare questo ciclo

Ripeti il ​​ciclo precedente per il secondo iframe

confronta tutti gli screenshot con i due elenchi di screenshot che hai generato.

Bene, è così che lo farei. Probabilmente ci sono modi migliori però.

Usa html2canvas per fare screenshot

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

Ciò ti consentirà di inviare immagini al back-end.

Usa questo thread per modificare html2canvas per recuperare l'intera immagine

Una volta che hai entrambe le immagini puoi usare openCV per trovare la differenza tra 2 immagini a cui puoi fare riferimento - https://www.pyimagesearch.com/2017/06/19/image-difference-with-opencv-and-python/

Ho 2 iframe ed entrambi hanno molti div e altri controlli quindi entrambi gli iframe sono come le medie dimensioni dei siti Web HTML. Voglio confrontare entrambi e scoprire le differenze.

Cosa vuoi confrontare? Differenze tra regole / proprietà CSS? Differenze di dati / testo? O rendering visivo?

Confronta il rendering visivo

Puoi estrarre l'URL iframe e caricare la pagina con Selenium per acquisire uno screenshot (vedi esempio) . Inoltre hai l'estensione Firefox Selenium IDE .