Chromium Chronicle #10: Menangkap Regresi UI dengan Pengujian Pixel

project_path: /blog/_project.yaml book_path: /_book.yaml page_type: blog refresh_date: 05-02-2020 deskripsi: Strategi pengujian Chrome sangat mengandalkan pengujian ketepatan fungsi otomatis dan pengujian manual, tetapi tidak satu pun dari kedua cara ini mampu mendeteksi regresi UI kecil dengan andal. Gunakan pengujian piksel untuk mengotomatiskan pengujian UI browser desktop Anda. image_path: ../images/chromiumchronicle.jpg kata kunci: docType:Blog,chromiumchronicle

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

Strategi pengujian Chrome sangat mengandalkan ketepatan fungsi otomatis pengujian dan pengujian manual, tetapi tak satu pun dari keduanya yang bisa menangkap UI minor dengan andal yang menyebabkan regresi. 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 mungkin.

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

Gambar Omnibox yang 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 ada 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 persetujuan dan perbedaan piksel didukung oleh Skia Gold. Piksel Skia Gold pengujian menyediakan alur kerja persetujuan visual, dan memungkinkan pengembang untuk menerima potongan kecil dengan menyetujui beberapa gambar emas.

Saat ini paket pengujian berjalan di bot Windows FYI. Pengujian browser dan pengujian unit View didukung.