21

2 つの HTML ページの違いを示そうとしています。2 つの Web ページの HTML ソース コードを比較し (ほぼ同じ)、違いを視覚的に (UI で) 表示/強調表示できるかどうかを考えています。

試したこと:ページのスナップショットを取り、Resemble.jsを使用して 2 つの画像を比較することを考えました。しかし、それも非常に微妙な違いを示しており、結果は明確ではありません。

DOM 構造またはソース コードを比較して、2 つのページの実際の違いをUIで表示することを考えました。

これを達成する方法はありますか？スナップショットと HTML ソース コードを取得するためにSelenium-Webdriverを使用しています。

編集：

私の質問は明確ではなかったと思います。実は、現在行われているA/Bテストを検出するために、WebページのHTMLコンテンツの違いを知りたかったのです。最初に HTML ソースをテキスト ファイルに取得し、 Java-Diff utilを使用して以前にキャプチャした HTML ソースと比較しました。これにより、HTML ソースを含む 2 つのテキスト ファイルで異なる実際の行が得られました。

さて、問題は、私が見つけた領域を強調表示するように、UIでこの違いをどのように表示できるかです。これがより明確になることを願っています。

以下のコードは、異なる行を示しています

List<String> original = fileToLines("HTML Source diff/originalSource.txt");
    List<String> revised = fileToLines("HTML Source diff/sourceAfterCookieClear.txt");

    // Compute diff. Get the Patch object. Patch is the container for computed deltas.
    Patch patch = DiffUtils.diff(original, revised);

    System.out.println("Printing Deltas\n");
    for (Delta delta : patch.getDeltas()) {
        String revisedText = delta.getRevised().toString();
        String content = revisedText.substring(revisedText.indexOf(" [")+2,revisedText.indexOf("]]"));
        writeTextToFile(content,"difference.html");
    }

コード形式のリードは役に立ちます。

4

6 に答える 6

2

daisyDiff API を使用 http://code.google.com/p/daisydiff/ Java コードが差分を返した後、コマンド プロンプトからこの API を呼び出すことができます。

于 2014-01-27T21:49:23.453 に答える
0

差分リストの各要素を色付きの div に埋め込んで、簡単に見られるようにすることができます

あなたは、差分のリストと前後の HTML ドキュメントがあると述べました。それぞれの異なる要素がどの HTML ドキュメントに由来するかを判断できる場合は、DOM で id によってそれらを検索し、それらを色付きの div に埋め込んで簡単に見られるようにすることができます。

于 2016-02-17T16:51:20.737 に答える
-1

1つのトリックを除いて、常に解決策があります。jscript 関数を使用してパッチ テキスト内の最初の ID またはクラスを見つけ、jquery を使用してその要素にフォーカスします。以下のようなもの：

'id' var firstIdOfThePatchText = xxx; が見つかるまで、すべての文字を検索します。$('#firstIdOfThePatchText ').フォーカス...

元気づける

于 2016-02-17T10:57:08.880 に答える