Случай :

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

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

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

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

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

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

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

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

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

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

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

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

Хватая часть экрана

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

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

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

Сравнивая два изображения

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

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

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

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

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

Какой-то псевдокод:

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

Сделайте вышеупомянутый цикл снова для второго iframe

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

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

Используйте 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 для получения всего изображения

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

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

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

Сравните визуальный рендер

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