사례 :

나는 2 개의 iframe을 가지고 있으며 둘 다 많은 div와 다른 컨트롤을 가지고 있으므로 두 iframe 모두 HTML 웹 사이트의 중간 크기와 같습니다. 둘 다 비교하고 차이점을 찾고 싶습니다.

나는 여기에 다른 옵션을 생각했다.

해결 방법 1 : 2 iframe의 전체 스크린 샷을 찍고 스크린 샷의 불일치 영역에 그리드를 그리는 Python 베개 라이브러리를 사용하여 두 스크린 샷을 비교하십시오. 그러나 여기서 문제는 인터넷에서 전체 iframe 스크린 샷을 찍을 수있는 코드를 찾지 못했다는 것입니다 ( 스크롤 막대가있는 긴 iframe이 있습니다 ). 나는 거의 모든 답변을 시도했지만 모두 정상적인 페이지에서는 작동하지만 iframe에서는 작동하지 않습니다.

참조 : https://blog.rinatussenov.com/automating-manual-visual-regression-tests-with-python-and-selenium-be66be950196

해결 방법 2 : iframe에서 HTML 코드를 모두 가져 와서 비교하지만 결과는 2 iframe에서 다르거 나 일치하지 않는 일부 HTML 코드를 찾기 때문에 결과를 분석하기가 쉽지 않습니다. 이것은 텍스트 비교와 비슷하지만 내가 생각하는 좋은 해결책은 아닙니다.

그래서 파이썬 또는 Javascript를 사용하여 iframe의 전체 스크린 샷을 찍을 수있는 코드 또는 2 개의 iframe을 비교하고 차이점을 찾을 수있는 더 나은 옵션을 찾고 있습니다.

Google이 아래에서 찾은 거의 모든 답변을 시도했습니다.

전체 HTML이 iframe 내에있는 샘플 Iframe이 여기에 제공됩니다 : https://grapesjs.com/demo.html , 일부 코드 가이 iframe의 전체 스크린 샷을 찍을 수 있다면 나에게 비교하기 쉽습니다.

채팅 에서 발견 한 것처럼 토론중인 iframe은 자바 스크립트로 생성되며 URL에서로드되지 않습니다.

이것은 iframe을 잡아 화면을 자동화하는 데 어려움이 있지만 수동 프로세스는 가능합니다.

Firefox에서 iframe을 마우스 오른쪽 버튼으로 클릭하고 팝업 메뉴에서 "이 프레임"을 선택한 다음 "다른 이름으로 프레임 저장 ..."을 선택하십시오.

프레임이 저장되면 배경 URL이 올바른 위치를 가리 키도록 다운로드 한 CSS 중 일부를 연결해야합니다. 이 작업을 수행 한 후 html 파일을 로컬로 열면 현재 일반 웹 페이지에 사용하는 방법을 사용하여 스크린 샷을 찍을 수 있습니다.

화면 일부 잡기

수동 또는 자동으로 가져올 수 있습니다. 비교할 iframe이 많지 않은 경우 수동으로 수행하는 것이 옵션이므로 필요한 경우 내용이 포함 된 스크린 샷을 만들고 이미지를 자릅니다. 이 방법의 어려움은 자르는 동안 매우 정밀해야한다는 것입니다.

예를 들어 다음과 같이 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 규칙 / 속성 차이? 데이터 / 텍스트 차이? 또는 시각적 렌더링?

시각적 렌더링 비교

iframe URL을 추출하고 Selenium 으로 페이지를로드하여 스크린 샷 을 만들 수 있습니다 (예 참조) . 또한 Firefox 확장 Selenium IDE도 있습니다.