ケース：

私には2つのiframeがあり、両方に多くのdivと他のコントロールがあるので、両方のiframeは中規模のHTML Webサイトのようなものです。両方を比較して違いを見つけたいです。

私はここでさまざまなオプションを考えました：

解決策1： 2つのiframeの完全なスクリーンショットを取り、スクリーンショットの不一致領域にグリッドを描画するPythonの枕ライブラリを使用して両方のスクリーンショットを比較します。しかし、ここで問題となるのは、iframeの完全なスクリーンショットを撮ることができるコードがインターネット上で見つからなかったことです（スクロールバー付きの長いiframeがあります）。私はSOでほぼすべての答えを試しましたが、すべては通常のページで機能していますが、iframeでは機能しません。

リファレンス：https : //blog.rinatussenov.com/automating-manual-visual-regression-tests-with-python-and-selenium-be66be950196

解決策2：何らかの方法ですべてのHTMLコードをiframeから取得して比較しますが、2つのiframeで異なるまたは不一致のHTMLコードが見つかるため、結果を分析するのは簡単ではありません。これはテキスト比較のようなものであり、私が信じている良い解決策ではありません。

したがって、PythonまたはJavaScriptを使用してiframeの完全なスクリーンショットを撮ることができるコード、または 2つのiframeを比較して違いを見つけることができるいくつかのより良いオプションを探しています。

私は以下のようにグーグルが見つけるほとんどすべての答えを試しました：

：全体のHTMLはインラインフレーム内にあるどこサンプルインラインフレームをここに与えられているhttps://grapesjs.com/demo.html、いくつかのコードは、このIFRAMEのフルスクリーンショットを撮ることができた場合は、私のために、比較しやすいだろう。

チャットで発見したように、議論中のiframeはJavaScriptで生成され、URLからは読み込まれません。

これは、iframeを取得する画面の自動化に困難をもたらしますが、手動プロセスが可能です。

Firefoxでiframeを右クリックし、ポップアップメニューで[このフレーム]を選択して、[名前を付けてフレームを保存...]を選択します。

フレームが保存されたら、ダウンロードしたCSSの一部をいじって、バックグラウンドURLが正しい場所を指すようにする必要があります。それが終わったら、htmlファイルをローカルで開き、通常のWebページで現在使用している方法を使用してスクリーンショットを撮ることができます。

画面の一部をつかむ

手動または自動で取得できます。比較するiframeが多くない場合は、手動で行うこともできます。コンテンツを含むスクリーンショットを作成し、必要に応じて画像をトリミングするだけです。このアプローチの難しさは、クロップ中に非常に正確である必要があることです。

次のように、DOMの一部をキャンバスにロードして画像を作成するなど、自動的に行うこともできます。HTML5/ Canvas / JavaScriptを使用してブラウザー内のスクリーンショットを撮る

また、コンテンツを一時的に変更して、ページ全体が目的のものであることを確認してから、スクリーンショットを作成することもできます（https://www.cnet.com/how-to/how-to-take-）。 a-whole-web-page-in-chrome /のスクリーンショット

2つの画像の比較

2つの画像を比較するには、すべてのピクセルをループして比較します。

2つの画像を比較するアルゴリズム

結果を表示する

プログラムは2つの画像を入力として受け取り、出力と同様のサイズの新しい画像を作成する必要があります。ターゲット画像は、比較するために画像の1つのピクセルを表示し、各違いの境界に赤い線を描画することをお勧めします。この目的のために、差異の領域を長方形に分割する必要があります。このようにして、違いがどこにあり、何が違うのかを確認できます。

pyautoguiと組み合わせて枕を使用できます。

いくつかの擬似コード：

スクロールバーが下に触れない限り：-スクリーンショットを撮る-リストにスクリーンショット名を保存する-下にスクロールして、このループを続ける

2番目のiframeに対して上記のループをもう一度実行します

生成したスクリーンショットの2つのリストからすべてのスクリーンショットを比較します。

まあ、それは私がそれをする方法です。しかし、おそらくもっと良い方法があります。

スクリーンショットを撮るために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を調整し、画像全体を取得します

あなたは両方のイメージを持っていたら、あなたはこれを参照することができます2つの画像間の違いを見つけるために、OpenCVのを使用することができます- https://www.pyimagesearch.com/2017/06/19/image-difference-with-opencv-and-python/

私には2つのiframeがあり、両方に多くのdivと他のコントロールがあるので、両方のiframeは中規模のHTML Webサイトのようなものです。両方を比較して違いを見つけたいです。

何を比較したいですか？CSSルール/プロパティの違い？データ/テキストの違い？または視覚的なレンダリング？

視覚的なレンダリングを比較する

iframe URLを抽出し、ページをSeleniumでロードしてスクリーンショットを撮ることができます（例を参照）。また、Firefox拡張機能Selenium IDEがあります。