Chromium Chronicle #10: Nắm bắt sự hồi quy của giao diện người dùng bằng kiểm thử pixel

Tập 10: do Sven Zheng thực hiện tại Bellevue, Washington (tháng 1 năm 2020)
Các tập trước

Chiến lược kiểm thử của Chrome phụ thuộc nhiều vào kiểm thử tự động về tính chính xác của chức năng và kiểm thử thủ công, nhưng cả hai phương pháp này đều không phát hiện được các sự cố hồi quy nhỏ về giao diện người dùng một cách đáng tin cậy. Sử dụng kiểm thử pixel để tự động kiểm thử giao diện người dùng của trình duyệt trên máy tính.

Khi viết mã kiểm thử pixel, hãy tránh tình trạng không ổn định bằng cách: (1) tắt ảnh động, (2) sử dụng dữ liệu mô phỏng và (3) kiểm thử diện tích bề mặt tối thiểu có thể.

Dưới đây là hình ảnh mẫu dùng để xác minh độ chính xác của pixel cho hộp tìm kiếm đa năng:

Hình ảnh trong thanh địa chỉ dùng để so sánh pixel.

Và mã để xác minh trình duyệt khớp với hình ảnh này:

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);
}

Mã này nằm tại chrome/test/pixel/demo/skia_gold_demo_pixeltest.cc. Các tiêu đề liên quan là skia_gold_pixel_diff.h cho kiểm thử đơn vị và browser_skia_gold_pixel_diff.h cho kiểm thử trình duyệt.

Quy trình phê duyệt và so sánh pixel được cung cấp bởi Skia Gold. Các kiểm thử pixel Skia Gold cung cấp quy trình phê duyệt trực quan và cho phép nhà phát triển chấp nhận các mảnh nhỏ bằng cách phê duyệt nhiều hình ảnh vàng.

Hiện tại, bộ kiểm thử đang chạy trên bot FYI của Windows. Hỗ trợ kiểm thử trình duyệt và kiểm thử đơn vị Khung hiển thị.