Trường hợp:

Tôi có 2 iframe và cả hai đều có rất nhiều div và các điều khiển khác vì vậy cả hai iframe đều giống như kích thước trung bình của các trang web HTML. Tôi muốn so sánh cả hai và tìm ra sự khác biệt.

Tôi nghĩ các lựa chọn khác nhau ở đây:

Giải pháp 1: Chụp ảnh màn hình đầy đủ của 2 iframe và so sánh cả hai ảnh chụp màn hình bằng thư viện gối của Python, vẽ lưới trên vùng không khớp trong ảnh chụp màn hình. Nhưng vấn đề ở đây là tôi không tìm thấy bất kỳ mã nào trên internet có thể chụp ảnh màn hình iframe đầy đủ ( tôi có iframe dài với thanh cuộn ). Tôi đã thử hầu hết tất cả các câu trả lời trên SO nhưng tất cả đều hoạt động cho một trang bình thường nhưng không phải cho iframe.

Tham khảo : https://blog.rinatussenov.com/automating-manual-visual-regression-tests-with-python-and-selenium-be66be950196

Giải pháp 2: Nhận bằng cách nào đó tất cả mã HTML từ cả hai khung nội tuyến và so sánh nó, nhưng điều này sẽ không dễ dàng phân tích kết quả vì nó sẽ tìm thấy một số mã HTML khác nhau hoặc có sự không khớp trong 2 iframe. Điều này sẽ giống như so sánh văn bản và tôi không phải là một giải pháp tốt.

Vì vậy, tôi đang tìm kiếm một trong hai mã có thể chụp ảnh màn hình iframe đầy đủ bằng Python hoặc Javascript HOẶC một số tùy chọn tốt hơn cho phép tôi so sánh 2 iframe và tìm ra sự khác biệt.

Tôi đã thử hầu hết tất cả các câu trả lời mà google tìm thấy theo chúng tôi dưới đây:

Iframe mẫu được đưa ra ở đây trong đó toàn bộ html nằm trong iframe: https://gpesjs.com/demo.html , Nếu một số mã có thể chụp ảnh màn hình đầy đủ của iframe này thì tôi sẽ dễ dàng so sánh với tôi.

Như chúng tôi đã khám phá trong cuộc trò chuyện của mình , các iframe đang thảo luận được tạo bằng javascript và không được tải từ URL.

Điều này gây khó khăn trong việc tự động hóa màn hình lấy iframe, tuy nhiên có thể thực hiện quy trình thủ công:

Trong Firefox, nhấp chuột phải vào iframe và chọn "Khung này" trong menu bật lên, sau đó chọn "Lưu khung dưới dạng ...".

Khi khung được lưu, một số CSS đã tải xuống sẽ cần được xử lý để lấy các URL nền để trỏ đến đúng vị trí. Làm xong việc đó, mở tệp html cục bộ và bạn sẽ có thể chụp ảnh màn hình bằng phương pháp bạn hiện đang sử dụng cho một trang web bình thường.

Lấy một phần của màn hình

Bạn có thể lấy nó bằng tay hoặc tự động. Nếu không có nhiều iframe để so sánh, thì thực hiện thủ công là một tùy chọn, bạn chỉ cần chụp ảnh màn hình có chứa nội dung và cắt ảnh nếu cần. Khó khăn của phương pháp này là bạn cần phải rất chính xác trong khi cắt xén.

Bạn cũng có thể tự động làm điều đó, ví dụ như tải một phần của DOM vào một khung vẽ và tạo một hình ảnh của nó, như ở đây: Sử dụng HTML5 / Canvas / JavaScript để chụp ảnh màn hình trong trình duyệt

Ngoài ra, bạn có thể sửa đổi tạm thời nội dung của mình để đảm bảo toàn bộ trang là những gì bạn quan tâm và sau đó thực hiện một ảnh chụp màn hình, như được mô tả ở đây: https://www.cnet.com/how-to/how-to-take- a-ảnh chụp màn hình của toàn bộ trang web trong chrome /

So sánh hai hình ảnh

Bạn có thể so sánh hai hình ảnh bằng cách lặp tất cả các pixel của chúng và so sánh chúng.

Thuật toán để so sánh hai hình ảnh

Hiển thị kết quả

Chương trình của bạn nên lấy hai hình ảnh làm đầu vào và tạo một hình ảnh mới có kích thước tương tự như đầu ra. Tôi sẽ đề nghị rằng hình ảnh mục tiêu sẽ hiển thị các pixel của một trong các hình ảnh để so sánh và vẽ một đường màu đỏ ở viền của mỗi khác biệt. Đối với mục đích này, bạn sẽ cần chia một vùng khác biệt thành hình chữ nhật. Bằng cách này bạn có thể thấy sự khác biệt ở đâu và nội dung khác biệt là gì.

Bạn có thể sử dụng gối kết hợp với pyautogui, mayby ​​pyautogui một mình.

Một số mã giả:

Miễn là thanh cuộn không chạm vào đáy: - chụp ảnh màn hình - lưu tên ảnh chụp màn hình trong danh sách - cuộn xuống, tiếp tục vòng lặp này

Thực hiện lại vòng lặp trên cho iframe thứ hai

so sánh tất cả các ảnh chụp màn hình từ hai danh sách ảnh chụp màn hình bạn đã tạo.

Vâng, đó là cách tôi sẽ làm điều đó. Có lẽ có những cách tốt hơn mặc dù.

Sử dụng html2canvas để chụp ảnh màn hình

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

Điều này sẽ cho phép bạn gửi hình ảnh đến back-end.

Sử dụng chuỗi này để điều chỉnh html2canvas để tìm nạp toàn bộ hình ảnh

Khi bạn có cả hai hình ảnh, bạn có thể sử dụng openCV để tìm sự khác biệt giữa 2 hình ảnh mà bạn có thể tham khảo - https://www.pyimagesearch.com/2017/06/19/image-difference-with-opencv-and-python/

Tôi có 2 iframe và cả hai đều có rất nhiều div và các điều khiển khác vì vậy cả hai iframe đều giống như kích thước trung bình của các trang web HTML. Tôi muốn so sánh cả hai và tìm ra sự khác biệt.

Bạn muốn so sánh cái gì? Quy tắc / thuộc tính CSS khác nhau? Dữ liệu / văn bản khác nhau? Hoặc trực quan kết xuất?

So sánh kết xuất trực quan

Bạn có thể trích xuất URL iframe và tải trang bằng Selenium để chụp ảnh màn hình (xem ví dụ) . Ngoài ra, bạn có phần mở rộng firefox Selenium IDE .