project_path: /blog/_project.yaml book_path: /_book.yaml page_type: blog refresh_date: 2020 年 2 月 5 日 説明: Chrome のテスト戦略は、自動化された機能の正確性テストと手動テストに大きく依存していますが、どちらも軽微な UI のリグレッションを確実に検出できません。ピクセルテストを使用すると、パソコンのブラウザの UI のテストを自動化できます。 image_path: ../images/chromiumchronicle.jpg キーワード: docType:ブログ,クロニクル
エピソード 10: スヴェン ジェン、ワシントン州ベルビュー（2020 年 1 月）
前のエピソード
Chrome のテスト戦略は自動化された機能の正確性に大きく依存している テストと手動テストのどちらでもかまいませんが、どちらの方法でもマイナー UI を確実に捕捉できます。 見ていきますピクセルテストを使用して、パソコンのブラウザの UI のテストを自動化します。
ピクセルテストを作成する際には、以下のようにして不安定さを回避します。（1）アニメーションを無効にする。 （2）モックデータを使用する、（3）可能な限り最小表面積をテストする。
次のサンプル画像では、アドレスバーのピクセルの正確性を検証しています。
ブラウザがこの画像と一致することを確認するコードは次のようになります。
IN_PROC_BROWSER_TEST_F(SkiaGoldDemoPixelTest, TestOmnibox) {
// Always disable animation for stability.
ui::ScopedAnimationDurationScaleMode disable_animation(
ui::ScopedAnimationDurationScaleMode::ZERO_DURATION);
GURL url("chrome://bookmarks");
AddTabAtIndex(0, url, ui::PageTransition::PAGE_TRANSITION_FIRST);
auto* const browser_view = BrowserView::GetBrowserViewForBrowser(browser());
// CompareScreenshot() takes a screenshot and compares it with the
// golden image, which was previously human-approved, is stored
// server-side, and is managed by Skia Gold. If any pixels differ, the
// test will fail and output a link for the author to triage the
// new image.
bool ret = GetPixelDiff().CompareScreenshot("omnibox",
browser_view->GetLocationBarView());
EXPECT_TRUE(ret);
}
このコードは chrome/test/pixel/demo/skia_gold_demo_pixeltest.cc にあります。
単体テストに関連するヘッダーは skia_gold_pixel_diff.h であり、
ブラウザテストの場合は browser_skia_gold_pixel_diff.h。
ピクセルの差分と承認プロセスは、Skia Gold によって行われます。Skia Gold Pixel テストは視覚的な承認ワークフローを提供し、デベロッパーは 複数の金色の画像を承認して
現在、テストスイートは Windows FYI bot で実行されています。ブラウザのテスト 単体テストとビューの単体テストがサポートされています