Walizka :

Mam 2 elementy iframe i oba mają wiele elementów div i innych elementów sterujących, więc oba elementy iframe są jak średnie strony internetowe HTML. Chcę porównać oba i znaleźć różnice.

Pomyślałem tutaj o różnych opcjach:

Rozwiązanie 1: Zrób pełny zrzut ekranu z 2 ramek iframe i porównaj oba zrzuty ekranu za pomocą biblioteki poduszki Pythona, która rysuje siatkę w obszarze niedopasowania na zrzucie ekranu. Ale tutaj problem polega na tym, że nie znalazłem w Internecie żadnego kodu, który mógłby wykonać pełne zrzuty ekranu iframe ( mam długi iframe z paskiem przewijania ). Próbowałem prawie wszystkich odpowiedzi na SO, ale wszystkie działają dla normalnej strony, ale nie dla iframe.

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

Rozwiązanie 2: Jakoś uzyskaj cały kod HTML z obu ramek iframe i porównaj go, ale nie będzie to łatwe do przeanalizowania, ponieważ znajdzie inny kod HTML lub będzie miał niezgodność w 2 ramkach iframe. To będzie bardziej jak porównanie tekstu i nie jest to dobre rozwiązanie, które moim zdaniem.

Szukam więc kodu, który może wykonać pełny zrzut ekranu iframe za pomocą Pythona lub Javascript LUB jakiejś lepszej opcji, która pozwala mi porównać 2 iframe i znaleźć różnice.

Próbowałem prawie wszystkich odpowiedzi, które google znaleźć nasze, jak poniżej:

Przykładowa ramka iframe jest podana tam, gdzie cały html znajduje się w ramce iframe: https://grapesjs.com/demo.html , Jeśli jakiś kod może zrobić pełny zrzut ekranu tej ramki iframe, to będzie dla mnie łatwe do porównania.

Jak odkryliśmy na naszym czacie , omawiane ramki iframe są generowane w javascript i nie są ładowane z adresu URL.

Utrudnia to automatyzację przechwytywania obrazu przez ramkę iframe, jednak proces ręczny jest możliwy:

W przeglądarce Firefox kliknij prawym przyciskiem myszy ramkę iframe i wybierz „This Frame” z menu podręcznego, a następnie wybierz „Save Frame As ...”.

Po zapisaniu ramki niektóre pobrane pliki CSS będą musiały być zmienione, aby adresy URL w tle wskazywały właściwe miejsce. Po wykonaniu tego otwórz plik html lokalnie, a będziesz mógł zrobić zrzut ekranu przy użyciu metody, której obecnie używasz do normalnej strony internetowej.

Chwytanie części ekranu

Możesz go pobrać ręcznie lub automatycznie. Jeśli nie ma zbyt wielu ramek iframe do porównania, wówczas zrobienie tego ręcznie jest opcją, wystarczy wykonać zrzut ekranu, który zawiera treść i przyciąć obraz, jeśli to konieczne. Trudność tego podejścia polega na tym, że musisz być bardzo bardzo precyzyjny podczas kadrowania.

Możesz to zrobić również automatycznie, na przykład ładując część DOM do kanwy i robiąc jej zdjęcie, jak tutaj: Używanie HTML5 / Canvas / JavaScript do robienia zrzutów ekranu w przeglądarce

Możesz także tymczasowo zmodyfikować treść, aby upewnić się, że cała strona jest tym, co Cię interesuje, a następnie wykonać zrzut ekranu, jak opisano tutaj: https://www.cnet.com/how-to/how-to-take- zrzut ekranu całej strony w chrome /

Porównywanie dwóch zdjęć

Możesz porównać dwa obrazy, zapętlając wszystkie ich piksele i porównując je.

Algorytm porównywania dwóch obrazów

Pokazuje wyniki

Twój program powinien pobrać dwa obrazy jako dane wejściowe i utworzyć nowy obraz o podobnej wielkości jak dane wyjściowe. Sugerowałbym, aby obraz docelowy pokazywał piksele jednego z obrazów do porównania i narysował czerwoną linię na granicy każdej różnicy. W tym celu musisz podzielić region różnic na prostokąty. W ten sposób możesz zobaczyć, gdzie są różnice i jaka jest treść, która jest inna.

Możesz użyć poduszki w połączeniu z pyautogui, tylko sam pyautogui.

Niektóre pseudo-kody:

Dopóki pasek przewijania nie dotyka dna: - zrób zrzut ekranu - zapisz nazwę zrzutu ekranu na liście - przewiń w dół, kontynuuj tę pętlę

Wykonaj powyższą pętlę ponownie dla drugiego elementu iframe

porównaj wszystkie zrzuty ekranu z dwóch list wygenerowanych zrzutów ekranu.

Tak właśnie bym to zrobił. Są jednak prawdopodobnie lepsze sposoby.

Do robienia zrzutów ekranu używaj html2canvas

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

Umożliwi to wysyłanie obrazów do zaplecza.

Użyj tego wątku, aby dostosować html2canvas, aby pobrać cały obraz

Po uzyskaniu obu obrazów możesz użyć openCV, aby znaleźć różnicę między 2 obrazkami, do których możesz się odwołać - https://www.pyimagesearch.com/2017/06/19/image-difference-w--encencv-and-python/

Mam 2 elementy iframe i oba mają wiele elementów div i innych elementów sterujących, więc oba elementy iframe są jak średnie strony internetowe HTML. Chcę porównać oba i znaleźć różnice.

Co chcesz porównać? Różnice zasad / właściwości CSS? Różnice w danych / tekście? Czy renderowanie wizualne?

Porównaj renderowanie wizualne

Możesz wyodrębnić adres URL elementu iframe i załadować stronę za pomocą Selenium, aby zrobić zrzut ekranu (patrz przykład) . Masz także rozszerzenie firefox Selenium IDE .