Как сравнить 2 фрейма и визуально получить разницу?

Question

Случай:

У меня есть 2 фрейма, и у обоих много элементов div и других элементов управления, поэтому оба фрейма подобны среднему размеру HTML веб-сайтов. Я хочу сравнить оба и выяснить различия.

Я подумал, что здесь есть разные варианты:

Решение 1: Сделайте полный скриншот из 2 фреймов и сравните оба скриншота, используя библиотека подушек Python, которая др aws сетка на области несоответствия на скриншоте. Но здесь проблема в том, что я не нашел никакого кода в inte rnet, который может делать полные снимки экрана iframe ( У меня длинный iframe со полосой прокрутки ). Я попробовал почти все ответы на SO, но все работают для нормальной страницы, но не для iframe.

Ссылка : https://blog.rinatussenov.com/automating-manual-visual-regression-tests-with-python-and-selenium-be66be950196

Решение 2: Получить как-нибудь весь код HTML из обоих iframe и сравнить это, но это не будет легко проанализировать результат, потому что он найдет некоторый код HTML, который отличается или имеет несоответствие в 2 фреймах. Я думаю, это будет больше похоже на сравнение текста, а не на хорошее решение.

Поэтому я ищу любой код, который может сделать полный снимок экрана iframe, используя Python или Javascript ИЛИ какой-нибудь лучший вариант, который позволяет мне сравнивать 2 фрейма и выявлять различия.

Я попробовал почти все ответы, которые Google нашел, как указано ниже:

Пример iframe приведен здесь, где целое html находится в пределах iframe: https://grapesjs.com/demo.html, если какой-то код может сделать полный снимок экрана этого iframe, тогда мне будет легко сравнивать.

Answer 1

Как мы обнаружили в нашем чате , обсуждаемые фреймы генерируются в javascript и не загружаются из URL.

Это создает трудности при автоматизации захвата экрана в фрейме, однако возможен ручной процесс:

В Firefox щелкните правой кнопкой мыши по iframe и выберите «This Frame» во всплывающем меню, затем выберите «Save Frame As ...».

После сохранения кадра некоторые из загруженных CSS необходимо будет использовать, чтобы фоновые URL-адреса указывали на правильные место. Сделав это, откройте файл html локально, и вы сможете сделать снимок экрана, используя метод, который вы в настоящее время используете для обычной веб-страницы.

Answer 2

Захват части экрана

Вы можете захватить его вручную или автоматически. Если для сравнения не так много фреймов, то можно сделать это вручную, просто сделайте снимок экрана с контентом и обрежьте изображение при необходимости. Сложность этого подхода заключается в том, что вам нужно быть очень очень точным во время кадрирования.

Вы также можете сделать это автоматически, например, загрузить часть DOM на холст и сделать его изображение, например, здесь: Использование HTML5 / Canvas / JavaScript для создания снимков экрана в браузере

Кроме того, вы можете временно изменить свой контент, чтобы убедиться, что вся страница интересует вас, а затем сделайте снимок экрана, как описано здесь: https://www.cnet.com/how-to/how-to-take-a-screenshot-of-a-whole-web-page-in-chrome/

Сравнение двух изображений

Вы можете сравнить два изображения, зациклив все их пиксели и сравнив их.

Алгоритм сравнения двух изображений

Отображение результатов

Ваша программа должна принять два изображения в качестве входных данных и создать новое изображение аналогичного размера в качестве выходных. Я бы предложил, чтобы целевое изображение показывало пиксели одного из изображений для сравнения и рисовало красную линию на границе каждого различия. Для этого вам нужно разделить область различий на прямоугольники. Таким образом, вы сможете увидеть, в чем различия и в чем их содержание.

Answer 3

Вы можете использовать подушку в сочетании с pyauto gui, mayby ​​pyauto gui.

Некоторый псевдокод:

Пока полоса прокрутки не касается дна: - принять снимок экрана - сохранить имя снимка экрана в списке - прокрутите вниз, продолжите это l oop

Сделайте вышеупомянутое l oop еще раз для второго iframe

сравните все снимки экрана из двух списков сгенерированных вами скриншотов.

Ну, вот как бы я это сделал. Хотя, возможно, есть и лучшие способы.

Answer 4

У меня есть 2 iframes, и у обоих есть много div и других элементов управления, поэтому оба iframe похожи на средний размер HTML веб-сайтов. Я хочу сравнить оба и выяснить различия.

Что вы хотите сравнить? CSS правила / свойства различий? Данные / текстовые различия? Или визуальный рендер?

---

Сравнение визуального рендеринга

Вы можете извлечь URL iframe и загрузить страницу с помощью Selenium до снимка экрана (см. Пример) . Также у вас есть firefox расширение Selenium IDE .

Answer 5

Используйте 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
      }
    });
  }
);

Это позволит вам отправлять изображения на сервер.

Используйте этот поток, чтобы настроить html2canvas для получения всего image

Если у вас есть оба изображения, вы можете использовать openCV, чтобы найти разницу между двумя изображениями, на которые вы можете сослаться - https://www.pyimagesearch.com/2017/06/19/image-difference-with-opencv-and-python/