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: 2020-02-05 description: Chiến lược kiểm thử của Chrome chủ yếu dựa vào kiểm tra độ chính xác của chức năng tự động và kiểm thử thủ công, nhưng cả hai yếu tố này đều không phát hiện được các lỗi hồi quy nhỏ của giao diện người dùng. Sử dụng kiểm tra pixel để tự động kiểm tra giao diện người dùng của trình duyệt dành cho máy tính để bàn của bạn. image_path: ../images/chromiumchronicle.jpg từ khoá: docType:Blog,chromiumchronicle

Tập 10: của Sven Zheng ở Bellevue, Washington (tháng 1 năm 2020)
Các tập trước

Chiến lược kiểm thử của Chrome chủ yếu dựa vào việc kiểm thử độ chính xác của chức năng tự động và kiểm thử thủ công. Tuy nhiên, không có chiến lược nào trong số này phát hiện được sự hồi quy nhỏ trên giao diện người dùng. Sử dụng thử nghiệm pixel để tự động kiểm tra giao diện người dùng của trình duyệt dành cho máy tính.

Khi viết quy trình 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ể có.

Dưới đây là hình ảnh mẫu được dùng để xác minh tính chính xác của pixel cho thanh địa chỉ:

Hình ảnh trên thanh địa chỉ được dùng để so sánh pixel.

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

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 đề có 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.

Quá trình phê duyệt và so sánh pixel được Skia Gold hỗ trợ. Các bài kiểm thử bằng Pixel Pixel cung cấp quy trình phê duyệt hình ảnh 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 màu vàng.

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