11

これは簡単な作業ではないことはわかっていますが、Webアプリケーションのスタイリングとレンダリングされたレイアウトを回帰テストする方法はありますか?

サーバー側とクライアント側の両方で、単体テストと回帰テストの機能を簡単に実行できることがわかりました。

しかし、私が遭遇した苛立たしい問題は、別のページのレイアウトとスタイルを壊す1つのレイアウトの問題を修正するために行われたCSSの変更です。これらを検出する方法を知る唯一の方法は、アプリケーションのすべてのページを手動で表示し、それを自分の期待と比較することですが、アプリケーションに数十のページがある場合、これは明らかに負担と費用がかかる可能性があります。このような問題を自動的に検出するために画像処理やその他の技術を使用した研究はありますか?

4

5 に答える 5

2

Galen Framework を使用して Web アプリケーションのレイアウトをテストする方法があります。このツールには独自の言語があり、習得と理解が非常に簡単です。これは Selenium ベースであり、さまざまなブラウザーでアプリケーションをテストする場合は、Selenium Grid ( Sauce Labs ) でテストを実行できます。

このツールは、ページ上の指定された要素の位置を取得し、それらを相対的にチェックします。

例: メニュー ペインがヘッダーの下にあり、ブラウザーの幅に合わせて伸び、高さが 50 ピクセルであることを確認する場合は、次のように実行できます。

menu
    below: header 5px
    width: 100% of screen/width
    height: 50px

このツールは、レスポンシブ デザインのテストにも使用できます。

完全なドキュメントは、公式 Web サイトhttp://galenframework.comにあります。

最良の部分は、Java テストを作成することさえできることです。Galen JavaScript API は、GitHub のサンプル プロジェクトと一緒に利用することもできます。

ここでも、一度作成されたテストは、アプリケーション ライフ サイクルの複数のフェーズで使用できます。

于 2015-01-21T12:13:37.823 に答える
2

実際、Selenium の隠された利点の 1 つは、それを使用してブラウザーのスクリーン キャプチャを取得できることです。次に、 C# を使用してイメージ間の違いを見つけるで説明されている手法を使用して、以前のスナップショット間の違いを強調表示できます。

この例では、ホームページのスクリーンショットを取得して差分画像を作成する方法を示します。少し手を加えるだけで、同じ手法を使用して、異なるピクセルをカウントできます。

[Test]
public void CompareHomePageToPrevious()
{
    string fileName = Path.Combine(Environment.CurrentDirectory, "homepage.bmp");
    var selenium = new DefaultSelenium("localhost", 4444, "*chrome", "http://mywebsite");
    selenium.Start();
    selenium.Open("/");
    selenium.CaptureEntirePageScreenshot(fileName, "");

    // Load current and previous captures
    var current  = new Bitmap(filename);
    var previous = new Bitmap(_previousHomepageImage);

    // Find all pixels that are the same and make them pink
    Bitmap diff = ImageTool.GetDifferenceImage(current,previous,Color.Pink);
    diff.MakeTransparent(Color.Pink);

    // Save the image for viewing
    // or count the number of different
}

Selenium は、クロスプラットフォームかつクロスブラウザーであるため、非常に興味深い選択肢です。つまり、さまざまなブラウザーの画面をキャプチャできます。この手法を使用して、ビルド間でスナップショットを比較したり、ブラウザー間で比較したりできます。

于 2011-03-01T03:43:52.890 に答える
1

Web アプリケーションの各ページの「理想的な」ショットを生成して、参照として使用できると思います。

次に、CSS の更新後にすべてのページの新しいショットを生成し、以前のものと比較します。常に同じ解像度を維持しているなどの場合は、1 対 1 の比較で問題ありません。

ページが異なる場合、他のページが実際には例よりも「優れている」ことを伝え、次の実行の例として「その他」を使用できるようにすることもできます。

そうすれば、何かを修正するときに、あるページの違いを確認し、それをより良いものとしてマークし、最初に修正しようとしていたバグを元に戻さないようにしながら、別のページのバグを修正できます。 .

于 2011-02-28T15:51:56.710 に答える
0

回帰テストを行うためのアプローチとして、Web Consistency Testingを調べてください。

于 2013-01-22T20:44:08.817 に答える
0

Ruby で開発している場合は、rspec-page-regression gem を見てください。これは、要求されたページのスナップショットを予想される画像と比較できるようにするRSpecプラグインです。これは、PhantomJSを使用し、ページ スナップショットのレンダリングをサポートするCapybaraドライバーであるPoltergeistと連携します。

Rspec-page-regression は、次のようなことを可能にする RSPec マッチャーを提供します。

context "user page" do
  before(:each) do
    visit user_path
  end

  it { page.should match_expected }

  context "popup help" do
    before(:each) do
      click_button "Help"
    end

    it { page.should match_expected }
  end
end

そして、期待イメージを管理するメカニズムを提供します。

免責事項: 私はこの宝石の作者です。

于 2013-03-18T14:51:54.227 に答える