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


21

Случай :

У меня есть 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, тогда мне будет легко сравнивать.


Все нижние фреймы - это обычные HTML-страницы. Вы специально хотите увидеть, на что они похожи, как на фреймы?
Мэтт Эллен

Да, все находятся под html страницей. Моя цель - сделать так, чтобы оба iframe выглядели одинаково с точки зрения визуализации.
Руки помощи

Тогда будет ли приемлемо открывать страницы, отображаемые в фреймах в виде страниц верхнего уровня, и снимать их с экрана?
Мэтт Эллен

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

У вас есть URL-адреса iframe, поэтому вы можете открывать их как страницы верхнего уровня.
Мэтт Эллен

Ответы:


8

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

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

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

изображение меню

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


6

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

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

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

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

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

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

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

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

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


Спасибо за ваш ответ. Есть ли шанс, что я смогу использовать Html2Canvas с python, потому что мне нужно что-то в python или javascript, которое может сделать полный снимок экрана iframe.
Руки помощи

@HelpingHands HTML2Canvas - это инструмент Javascript, поэтому вы можете использовать его через Javascript (см. Html2canvas.hertzen.com ). В поисках использования Python HTML2Canvas я нашел прокси Python. Я не пробовал, но надеюсь, это поможет. Вот оно: github.com/brcontainer/html2canvas-python-proxy
Лайос Арпад

2

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

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

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

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

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

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


Дело в том, что у меня есть только один iframe, но он длинный и вертикально, и ни один инструмент не может сделать его полный скриншот.
Руки помощи

Вам не нужен один длинный скриншот. Несколько скриншотов тоже подойдут. Пока вы всегда прокручиваете одно и то же количество вниз. Таким образом, в основном, вы позволяете вашему iframe получить фокус. Затем вы нажимаете стрелку вниз 5 раз (или как вам нужно) и делаете снимок экрана. Неважно, если у вас есть немного двойного контента на ваших скриншотах. Вы делаете то же самое для другого iframe.
PythonAmateur742

1

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


1

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

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


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

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


Спасибо за ваш ответ. На самом деле у моего iframe нет ни URL, ни SRC. И сделать снимок экрана только снимок экрана просмотра порта, но мне нужен полный снимок экрана iframe.
Руки помощи
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.