Chromium Chronicle #10: Menangkap Regresi UI dengan Pengujian Pixel

project_path: /blog/_project.yaml book_path: /_book.yaml page_type: blog refresh_date: 2020-02-05 deskripsi: Strategi pengujian Chrome sangat bergantung pada pengujian ketepatan fungsional otomatis dan pengujian manual, tetapi keduanya tidak dapat menangkap regresi UI kecil dengan andal. Gunakan pengujian piksel untuk mengotomatiskan pengujian UI browser desktop Anda. image_path: ../images/chromiumchronicle.jpg keywords: docType:Blog,chromiumchronicle

Episode 10: oleh Sven Zheng di Bellevue, WA (Januari, 2020)
Episode sebelumnya

Strategi pengujian Chrome sangat bergantung pada pengujian ketepatan fungsional otomatis dan pengujian manual, tetapi keduanya tidak dapat menangkap regresi UI kecil. Gunakan pengujian piksel untuk mengotomatiskan pengujian UI browser desktop Anda.

Saat menulis pengujian piksel, hindari kegagalan dengan: (1) menonaktifkan animasi, (2) menggunakan data tiruan, dan (3) menguji luas permukaan minimum yang memungkinkan.

Berikut adalah gambar contoh yang digunakan untuk memverifikasi ketepatan piksel untuk omnibox:

Gambar Omnibox digunakan untuk perbandingan piksel.

Dan kode untuk memverifikasi browser cocok dengan gambar ini:

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

Kode ini berada di chrome/test/pixel/demo/skia_gold_demo_pixeltest.cc. Header yang relevan adalah skia_gold_pixel_diff.h untuk pengujian unit dan browser_skia_gold_pixel_diff.h untuk pengujian browser.

Proses perbedaan dan persetujuan piksel didukung oleh Skia Gold. Pengujian piksel Skia Gold memberikan alur kerja persetujuan visual, dan memungkinkan developer menerima serpihan kecil dengan menyetujui beberapa gambar emas.

Saat ini rangkaian pengujian dijalankan di bot Windows FYI. Pengujian browser dan pengujian unit View didukung.