Chromium Chronicle #10:使用 Pixel 测试捕获界面回归问题

project_path:/blog/_project.yaml book_path:/_book.yaml page_type: blog refresh_date:2020-02-05 description:Chrome 的测试策略在很大程度上依赖于自动化功能正确性测试和手动测试,但这两种方法都无法可靠地捕获微小的界面回归问题。使用像素测试自动执行桌面浏览器界面测试。 image_path: ../images/chromiumchronicle.jpg keywords: docType:Blog,chromiumchronicle

第 10 集:作者:Sven Zheng,位于华盛顿州贝尔维尤(2020 年 1 月)
上一集

Chrome 的测试策略在很大程度上依赖于自动化的功能正确性测试和手动测试,但这两种测试都无法可靠地捕获微小的界面回归问题。使用像素测试自动执行桌面浏览器界面测试。

在编写像素测试时,请通过以下方式避免不稳定:(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 聊天机器人上运行。支持浏览器测试和 View 单元测试。