Chromium Chronicle #10: Pixel テストで UI の回帰を把握する

エピソード 10: ワシントン州ベルビューの Sven Zheng 氏(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 ピクセルテストは視覚的な承認ワークフローを提供するもので、デベロッパーは複数のゴールド画像を承認することで小さなフレークを受け入れることができます。

現在、テストスイートは Windows FYI ボットで実行されています。ブラウザテストとビューの単体テストがサポートされています。