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

project_path: /blog/_project.yaml Book_path: /_book.yaml page_type: blog Refresh_date: 05-02-2020 mô tả: Chiến lược kiểm thử của Chrome chủ yếu dựa vào các quy trình kiểm tra tính chính xác của chức năng tự động và kiểm thử thủ công, nhưng không phát hiện ra lỗi hồi quy nhỏ nào trên giao diện người dùng một cách đáng tin cậy. Sử dụng tính năng kiểm thử pixel để tự động kiểm thử giao diện người dùng của trình duyệt dành cho máy tính. image_path: ../images/chromiumchronicle.jpg từ khoá: docType:Blog,chromiumchonicle

Tập 10: của Sven Zheng ở Bellevue, WA (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 tính chính xác tự động của chức năng các bài kiểm thử và kiểm thử thủ công, nhưng không phát hiện được giao diện người dùng nhỏ nào một cách đáng tin cậy sự hồi quy. Dùng tính năng kiểm thử pixel để tự động kiểm thử giao diện người dùng trên trình duyệt dành cho máy tính.

Khi viết kiểm thử pixel, hãy tránh tình trạng không ổn định bằng cách: (1) tắt hoạt ảnh, (2) sử dụng dữ liệu mô phỏng và (3) kiểm tra 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 tính chính xác của pixel cho thanh địa chỉ:

Hình ảnh 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 có tại chrome/test/pixel/demo/skia_gold_demo_pixeltest.cc. Các tiêu đề có liên quan là skia_gold_pixel_diff.h cho các kiểm thử đơn vị và browser_skia_gold_pixel_diff.h để kiểm thử trình duyệt.

Quy trình phê duyệt và điểm khác biệt về pixel được Skia Gold hỗ trợ. Pixel Pixel Trượt tuyết thử nghiệm đưa ra quy trình phê duyệt trực quan và cho phép nhà phát triển chấp nhận bằng cách phê duyệt nhiều hình ảnh màu vàng.

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