Справа:

У мене є 2 iframe і в обох є багато divs та інших елементів керування, тому обидва iframe - як середній розмір веб-сайтів HTML. Я хочу порівняти обидва та з’ясувати відмінності.

Я думав про різні варіанти тут:

Рішення 1: Створіть повний знімок екрана з 2 кадрів і порівняйте обидва знімки екрана, використовуючи бібліотеку подушок Python, яка малює сітку на області невідповідності на скріншоті. Але тут питання полягає в тому, що я не знайшов в Інтернеті жодного коду, який міг би зробити повні скріншоти iframe (у мене довгий кадр із рамкою прокрутки ). Я спробував майже всі відповіді на SO, але всі працюють для нормальної сторінки, але не для iframe.

Довідка : https://blog.rinatussenov.com/automating-manual-visual-regression-tests-with-python-and-selenium-be66be950196

Рішення 2: Отримайте якось увесь код HTML з обох кадрів iframe та порівняйте його, але це буде непросто проаналізувати результат, оскільки він знайде інший HTML-код, який відрізняється або має невідповідність у 2 iframe. Це буде більше схоже на порівняння тексту, і я не вважаю хорошим рішенням.

Тому я шукаю або код, який може отримати повний знімок екрана iframe за допомогою Python або Javascript АБО якийсь кращий варіант, який дозволяє мені порівнювати 2 iframe та з'ясувати відмінності.

Я спробував майже всі відповіді, які в Google знаходять наші, як показано нижче:

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

Як ми виявили у своєму чаті , обговорювані iframes генеруються у javascript та не завантажуються з URL-адреси.

Це створює труднощі в автоматизації захоплення екрана iframe, однак можливий ручний процес:

У Firefox клацніть правою кнопкою миші на рамці і виберіть "Цей кадр" у спливаючому меню, а потім виберіть "Зберегти кадр як ...".

Як тільки кадр буде збережено, потрібно буде встановити деякі завантажені CSS, щоб фонові URL-адреси вказували на потрібне місце. Зробивши це, відкрийте файл HTML локально, і ви зможете зробити знімок екрана, використовуючи метод, який ви використовуєте для звичайної веб-сторінки.

Схопивши частину екрана

Ви можете захопити його вручну або автоматично. Якщо для порівняння не так багато іфреймів, то робити це вручну - це варіант, ви просто зробите скріншот, який містить вміст і, якщо потрібно, обріжте зображення. Складність такого підходу полягає в тому, що вам потрібно бути дуже точним під час обрізки.

Ви також можете це зробити автоматично, наприклад, завантажуючи частину DOM на полотно та створюючи його зображення, як тут: Використання HTML5 / Canvas / JavaScript для отримання скріншотів браузера

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

Порівнюючи два зображення

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

Алгоритм порівняння двох зображень

Показані результати

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

Ви можете використовувати подушку в поєднанні з пяутогуї, можливо, в одиночку.

Деякі псевдокоди:

Поки панель прокрутки не торкається нижньої частини: - зробіть знімок екрана - збережіть назву екрана в списку - прокрутіть вниз, продовжте цю петлю

Зробіть вищевказану петлю ще раз для другої рамки

порівняйте всі скріншоти із двох створених списків скріншотів.

Ну ось так я б це зробив. Напевно, є й кращі способи.

Використовуйте 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 і в обох є багато divs та інших елементів керування, тому обидва iframe - як середній розмір веб-сайтів HTML. Я хочу порівняти обидва та з’ясувати відмінності.

Що ви хочете порівняти? CSS-правила / відмінності властивостей? Дані / текстові відмінності? Або візуальне візуалізація?

Порівняйте візуальну візуалізацію

Ви можете отримати URL-адресу iframe та завантажити сторінку Selenium, щоб зробити знімок екрана (див. Приклад) . Також у вас є розширення Firefox Selenium IDE .