Chromium Chronicle #10:使用 Pixel 測試掌握 UI 迴歸問題

project_path: /blog/_project.yaml book_path: /_book.yaml page_type: blog refresh_date: 2020-02-05 description:Chrome 的測試策略非常仰賴自動化功能正確性測試和手動測試,但這些測試策略都無法可靠地找出輕微的 UI 迴歸問題。使用像素測試自動測試電腦版瀏覽器 UI。 image_path: ../images/chromiumchronicle.jpg keywords:docType:Blog,chromiumchronicle

第 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

Pixel 差異比較和核准程序是由 Skia Gold 提供。Skia Gold 像素測試提供視覺化的核准工作流程,並可讓開發人員透過核准多張黃金圖像,接受小型樹枝。

測試套件目前是在 Windows FYI 機器人執行。支援瀏覽器測試和 View 單元測試。